up static routes

2025-09-21 16:57:24 +02:00 · 2025-09-21 16:57:24 +02:00 · 1048f4af45
commit 1048f4af45
parent 9cca0e4998
14 changed files with 2959 additions and 1076 deletions
--- a/test_marker.html
+++ b/test_marker.html
@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MapLibre Marker Test</title>
+    <script src="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
+    <style>
+        body { margin: 0; padding: 0; }
+        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
+        .controls {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            z-index: 1;
+            background: white;
+            padding: 10px;
+            border-radius: 4px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        button {
+            margin: 5px;
+            padding: 8px 12px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <div class="controls">
+        <h3>Test Marker Color Change</h3>
+        <button onclick="changeMarkerColor('#ff9800')">Orange</button>
+        <button onclick="changeMarkerColor('#f44336')">Red</button>
+        <button onclick="changeMarkerColor('#2196f3')">Blue</button>
+        <button onclick="changeMarkerColor('#9c27b0')">Purple</button>
+    </div>
+
+    <script>
+        // Initialize the map
+        const map = new maplibregl.Map({
+            container: 'map',
+            style: 'https://demotiles.maplibre.org/style.json',
+            center: [2.2137, 46.2276], // Default center (center of metropolitan France)
+            zoom: 5
+        });
+
+        // Add navigation controls
+        map.addControl(new maplibregl.NavigationControl());
+
+        // Add marker for issue location
+        let marker = new maplibregl.Marker({
+            draggable: true,
+            color: '#ff3860' // Red color for traffic jam
+        }).setLngLat([2.2137, 46.2276]).addTo(map);
+
+        // Function to change marker color
+        function changeMarkerColor(color) {
+            console.log(`Changing marker color to ${color}`);
+            
+            // Save current marker position
+            let currentLngLat = marker.getLngLat();
+            
+            // Remove existing marker from the map
+            marker.remove();
+            
+            // Create a new marker with the selected color
+            marker = new maplibregl.Marker({
+                draggable: true,
+                color: color
+            });
+            
+            // Set the new marker at the previous position
+            marker.setLngLat(currentLngLat).addTo(map);
+            
+            console.log("Marker color changed successfully");
+        }
+    </script>
+</body>
+</html>