Estoy diseñando un mapa web usando leaflet. Uno de los eventos que quiero añadir es el de pasar con el ratón sobre el mapa y que te vaya mostrando abajo a un lado, las coordenadas por las que pasa el ratón. Me salen en geográficas con este código:
// Div para mostrar las coordenadas
var coordsDiv = document.getElementById('coordinates');
// Evento de movimiento del ratón
map.on('mousemove', function(e) {
coordsDiv.innerHTML = `Latitud: ${e.latlng.lat.toFixed(5)}, Longitud:
${e.latlng.lng.toFixed(5)}`;
});
Pero me gustaría que además se vean en otros sistemas también, por ejemplo, que aparezcan en X e y, en ETRS89, etc. He probado con este otro código, para el que hay que usar proj4.js, puede que no lo esté integrando bien?:
// Se definen las proyecciones
proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
proj4.defs("EPSG:4258", "+proj=longlat +datum=ETRS89 +no_defs");
// Evento de movimiento del ratón
map.on('mousemove', function(e) {
var coordsWGS84 = [e.latlng.lng, e.latlng.lat];
var coordsETRS89 = proj4("EPSG:4326", "EPSG:4258", coordsWGS84);
coordsDiv.innerHTML = `
WGS84 - Latitud: ${e.latlng.lat.toFixed(5)}, Longitud: ${e.latlng.lng.toFixed(5)}<br>
ETRS89 - Latitud: ${coordsETRS89[1].toFixed(5)}, Longitud: ${coordsETRS89[0].toFixed(5)}
`;
});
Este es el script de proj4.js que uso:
No entiendo por qué sigue sin salirme. Gracias!!
[proj4js]
.