53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Basemap Protomaps + PMTiles (locale)</title>
|
|
<link rel="stylesheet" href="./assets/maplibre/maplibre-gl.css">
|
|
<style>html,body,#map{height:100%;margin:0}</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<script src="/assets/maplibre/maplibre-gl.js"></script>
|
|
<script src="/assets/pmtiles/pmtiles.js"></script>
|
|
<script src="/assets/basemaps/basemaps.js" crossorigin="anonymous"></script>
|
|
<script>
|
|
// 1) PMTiles protocol
|
|
const protocol = new pmtiles.Protocol({ metadata: true });
|
|
maplibregl.addProtocol("pmtiles", protocol.tile);
|
|
|
|
// 2) Il tuo archivio locale
|
|
const PMTILES_URL = "tiles/planet.pmtiles";
|
|
protocol.add(new pmtiles.PMTiles(PMTILES_URL));
|
|
|
|
// 3) Costruisci URL assoluti per sprite e glyphs
|
|
// (http(s)://host:porta/...)
|
|
const origin = window.location.origin;
|
|
const spriteUrl = `${origin}/assets/sprites/v4/light`; // <-- base senza estensione
|
|
const glyphsUrl = `${origin}/assets/fonts/{fontstack}/{range}.pbf`; // <-- con {fontstack}/{range}
|
|
|
|
// 4) Crea la mappa
|
|
const map = new maplibregl.Map({
|
|
container: "map",
|
|
style: {
|
|
version: 8,
|
|
glyphs: glyphsUrl, // assoluto + {fontstack}/{range} (richiesto dalla spec)
|
|
sprite: spriteUrl, // assoluto (MapLibre aggiunge .json/.png e @2x)
|
|
sources: {
|
|
protomaps: {
|
|
type: "vector",
|
|
url: "pmtiles://" + PMTILES_URL,
|
|
attribution: 'https://protomaps.comProtomaps</a> © https://openstreetmap.orgOpenStreetMap</a>'
|
|
}
|
|
},
|
|
layers: basemaps.layers("protomaps", basemaps.namedFlavor("light"), { lang: "en" })
|
|
},
|
|
center: [12.05, 44.22],
|
|
zoom: 8
|
|
});
|
|
|
|
map.addControl(new maplibregl.NavigationControl(), "top-right");
|
|
</script>
|
|
</body>
|
|
</html>
|