mappa

gablilli · web-flow · commit 227ff5892c50 · 2025-08-21T10:40:29.000+02:00
diff --git a/public/maps/gubbio.html b/public/maps/gubbio.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+  <meta charset="UTF-8">
+  <title>Mappa con geolocalizzazione</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- Mapbox CSS -->
+  <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
+  <style>
+    body, html { margin:0; padding:0; height:100%; }
+    #map { width:100%; height:100%; }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+
+  <!-- Mapbox JS -->
+  <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
+  <script>
+    mapboxgl.accessToken = 'pk.eyJ1IjoiZGlzY292ZXJ5Z3ViYmlvIiwiYSI6ImNtZWw1aTZudjBibGsybXM2ejdtNndmbmUifQ.bwUtB5uwtdwiuK94K-8ZHw';
+
+    const map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: [12.4964, 41.9028], // Roma di default
+      zoom: 14
+    });
+
+    map.addControl(new mapboxgl.NavigationControl());
+
+    const geolocate = new mapboxgl.GeolocateControl({
+      positionOptions: { enableHighAccuracy: true },
+      trackUserLocation: true,
+      showUserHeading: true
+    });
+
+    map.addControl(geolocate);
+
+    map.on('load', () => {
+      geolocate.trigger();
+    });
+  </script>
+</body>
+</html>
