ajout export html

2025-06-20 10:58:40 +02:00
parent 730d0850f3
commit 213f8e1217
8 changed files with 225 additions and 6 deletions
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Carte du parcours</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <style>
+        #map {
+            height: 600px;
+            width: 70%;
+            border-radius:8%;
+        }
+    </style>
+</head>
+<body>
+    <h1>Carte du parcours</h1>
+    <div id="map"></div>
+
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script>
+        var map = L.map('map').setView([45.5, 1.5], 10);  // Vue centrée
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(map);
+L.marker([45.62, -1.03348]).addTo(map).bindPopup("<b>Étape 1</b><br><b>Personnages :</b><ul><li>Quentin</li><li>Malo</li></ul>");
+L.marker([-45.62, 1.03348]).addTo(map).bindPopup("<b>Étape 2</b><br><b>Personnages :</b><ul><li>Antoine</li><li>Giovanni</li></ul>");
+var latlngs = [
+  [45.62, -1.03348],
+  [-45.62, 1.03348],
+];
+
+    var polyline = L.polyline(latlngs, {
+    color: 'purple',
+    weight: 2,
+    dashArray: '10, 10', // ligne en pointillés
+    opacity: 0.7
+}).addTo(map);
+map.fitBounds(polyline.getBounds());
+
+    </script>
+</body>
+</html>