86 lines
No EOL
3.1 KiB
HTML
86 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Basemap Protomaps + PMTiles (locale)</title>
|
|
<!-- CSS locale -->
|
|
<link rel="stylesheet" href="./assets/maplibre/maplibre-gl.css">
|
|
<style>html,body,#map{height:100%;margin:0}</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<!-- JS locali (ordine: MapLibre -> PMTiles -> basemaps -> tuo script) -->
|
|
<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) Archivio vettoriale (basemap) in PMTiles servito dalla webroot (/tiles/planet.pmtiles)
|
|
const PMTILES_URL = "tiles/planet.pmtiles";
|
|
protocol.add(new pmtiles.PMTiles(PMTILES_URL));
|
|
|
|
// 3) Le TUE costanti (invariate)
|
|
const origin = window.location.origin;
|
|
const spriteUrl = `${origin}/assets/sprites/v4/light`; // base senza estensione
|
|
const glyphsUrl = `${origin}/assets/fonts/{fontstack}/{range}.pbf`; // <-- lascia le graffe LITERALMENTE così!
|
|
const terrUrl = `${origin}/data/planet.pmtiles`; // DEM Terrarium via alias /data
|
|
|
|
// (Debug opzionale: verifica che i placeholder NON siano encodati)
|
|
// console.log('glyphsUrl =', glyphsUrl); // deve stampare .../fonts/{fontstack}/{range}.pbf
|
|
|
|
// 4) Crea la mappa (tuo blocco invariato)
|
|
const map = new maplibregl.Map({
|
|
container: "map",
|
|
style: {
|
|
version: 8,
|
|
glyphs: glyphsUrl, // assoluto + {fontstack}/{range}
|
|
sprite: spriteUrl, // assoluto (MapLibre carica .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
|
|
});
|
|
|
|
// 5) Aggiunta: DEM (Terrarium) + hillshade
|
|
map.on('load', () => {
|
|
map.addSource('terrain-dem', {
|
|
type: 'raster-dem',
|
|
url: 'pmtiles://' + terrUrl, // DEM letto direttamente dal PMTiles
|
|
encoding: 'terrarium',
|
|
tileSize: 256
|
|
});
|
|
|
|
// Inserisci l'hillshade subito sopra il background (così resta sotto ai vettoriali)
|
|
const firstVectorLayerId = map.getStyle().layers.find(l => l.type !== 'background')?.id;
|
|
|
|
map.addLayer({
|
|
id: 'hillshade',
|
|
type: 'hillshade',
|
|
source: 'terrain-dem',
|
|
paint: {
|
|
'hillshade-exaggeration': 0.5,
|
|
'hillshade-illumination-direction': 315,
|
|
'hillshade-shadow-color': '#4b443a',
|
|
'hillshade-highlight-color': '#ffffff',
|
|
'hillshade-accent-color': '#999088'
|
|
}
|
|
}, firstVectorLayerId);
|
|
});
|
|
|
|
// 6) Controlli
|
|
map.addControl(new maplibregl.NavigationControl(), "top-right");
|
|
</script>
|
|
</body>
|
|
</html> |