Usando una vista de Google Maps en Leaflet

Si preferimos Google Maps en LeafletJS, podemos usarlo siguiendo estos pasos: Primero debes incluir el archivo de Google Maps indicando tu API Key: < script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&#8221; async defer></script> Despues incluimos el archivo JS: < script src=’https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js’></script&gt; El cual podemos bajar y alojar localmente. Después de eso ya podemos crear la capa con el mapa de Google y agregarlo a nuestro mapa de leaflet: var roads … Continúa leyendo Usando una vista de Google Maps en Leaflet

Centrando el mapa y agregando un marcador en la ubicación actual del usuario usando Leaflet

Si queremos obtener la ubicacion del usuario que esta viendo nuestro mapa de leaflet podemos hacer algo asi: map.locate({setView: true, maxZoom: 16}); function onLocationFound(e) { var radius = e.accuracy / 2; L.marker(e.latlng).addTo(map) .bindPopup(“Tu estas aqui, con ” + radius + ” metros de aproximacion”).openPopup(); L.circle(e.latlng, radius).addTo(map); } function onLocationError(e) { alert(e.message); } map.on(‘locationfound’, onLocationFound); map.on(‘locationerror’, onLocationError); Primero se obtiene la ubicación del usuario usando el … Continúa leyendo Centrando el mapa y agregando un marcador en la ubicación actual del usuario usando Leaflet

Actualizando un input con la ubicación de un marker movible de un mapa de Leaflet

Si queremos obtener la ubicación de un marcador que el usuario pueda mover por el mapa para usarlo en por ejemplo, un formulario, podemos hacer algo como esto: //crear un marcador draggable var marker = L.marker([51.5, -0.09], {draggable:’true’}).addTo(map); //cuando se termine de hacer drag, pone la ubicacion en el campo indicado marker.on(“dragend”, function(e) { var position = marker.getLatLng(); var lacosa = document.getElementById(‘ubicacion’); lacosa.value = `${position.lat},${position.lng}`; … Continúa leyendo Actualizando un input con la ubicación de un marker movible de un mapa de Leaflet

Creando un mapa no geográfico con LeafletJS

Podemos crear un mapa que no sea de la tierra usando Leaflet, puede ser de un edificio, de un mapa de un video juego, o de cualquier cosa que necesitemos. Para crearlo solo tenemos que usar la función L.CRS.Simple de Leaflet, la cual funciona así: Despues de crear el DIV contener del mapa en nuestro archivo HTMl, pasamos a crearlo, lo primero que necesitamos es … Continúa leyendo Creando un mapa no geográfico con LeafletJS