Move your mouse over the map!
<script>
// Initialize the map
var map = L.map('map').setView([45,6], 8);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// Add a WMS layer
var wmsLayer = L.tileLayer.wms('https://biodiv-sports.fr/mapserver/?map=/etc/mapserver/mapserver.map', {
layers: 'sensitiveareas',
format: 'image/png',
transparent: true,
filter: "<Filter><PropertyIsEqualTo><PropertyName>is_sensitive</PropertyName><Literal>true</Literal></PropertyIsEqualTo></Filter>",
attribution: '<a href="https://biodiv-sports.fr" target="_blank">Biodiv'Sports</a>'
}).addTo(map);
// Function to get the WMS legend
function getLegend() {
var legendUrl = 'https://biodiv-sports.fr/mapserver/?map=/etc/mapserver/mapserver.map&&SERVICE=WMS&VERSION=1.1.1&layer=sensitiveareas&REQUEST=getlegendgraphic&FORMAT=image/png';
var legend = '<img src="' + legendUrl + '" alt="Legend" />';
document.getElementById('legend').innerHTML = legend;
}
const coordinatesDiv = document.getElementById('coordinates');
// Event listener for mouse move on the map
map.on('mousemove', (e) => {
const lat = e.latlng.lat.toFixed(5); // Get latitude
const lng = e.latlng.lng.toFixed(5); // Get longitude
coordinatesDiv.textContent = `Lat: ${lat}, Lng: ${lng}`;
});
// Load the legend
getLegend();
</script>