2025-09-21 16:57:24 +02:00
|
|
|
<!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',
|
2025-09-23 11:26:44 +02:00
|
|
|
style: 'https://tiles.openfreemap.org/styles/liberty',
|
2025-09-21 16:57:24 +02:00
|
|
|
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>
|
