Last active
June 12, 2021 02:06
-
-
Save lucasgio/072f342507d531784dea58c5139641a9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { OpenStreetMapProvider } from 'leaflet-geosearch'; | |
const provider = new OpenStreetMapProvider(); | |
document.addEventListener('DOMContentLoaded', () => { | |
if(document.querySelector('#mapa')) { | |
// Recoje los datos de inputo escondidos o setea por default valores (Punto Cero Capitolio) | |
const lat = document.querySelector('#lat').value === '' ? 23.137101780277284 : document.querySelector('#lat').value; | |
const lng = document.querySelector('#lng').value === '' ? -82.35785485661802 : document.querySelector('#lng').value; | |
const mapa = L.map('mapa').setView([lat, lng], 16); | |
// Eliminar pines previos | |
let markers = new L.FeatureGroup().addTo(mapa); | |
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { | |
maxZoom: 18, | |
id: 'mapbox/streets-v11', | |
tileSize: 512, | |
zoomOffset: -1, | |
accessToken: 'pk.eyJ1IjoiaW9zdmFueSIsImEiOiJja3BzY3Q5cmwwY3NhMnVvNjFmeHM1cWF3In0.De9etlDFvb0eHq-szJzsqQ' | |
}).addTo(mapa); | |
let marker; | |
// agregar el pin | |
marker = new L.marker([lat, lng], { | |
draggable: true, | |
autoPan: true | |
}).addTo(mapa); | |
// Agregar el pin a las capas | |
markers.addLayer(marker); | |
// Geocode Service | |
const geoCodeService = L.esri.Geocoding.geocodeService({ | |
apikey: 'AAPKd237a64ffa204d80b14a10fb19dbe775yBxejLZXSsAjUzz8M-og8O3rug48mGfOSsQUD1vTZLkJhynmzqXFhK4KX0cFd3yW' | |
}); | |
// Buscador de direcciones | |
const buscador = document.querySelector('#buscador'); | |
buscador.addEventListener('keydown', buscarDireccion); | |
reubicarPin(marker); | |
function reubicarPin(marker) { | |
// Detectar movimiento del marker | |
marker.on('moveend', function(e) { | |
marker = e.target; | |
const posicion = marker.getLatLng(); | |
// Centrar automaticamente | |
mapa.panTo( new L.LatLng( posicion.lat, posicion.lng ) ); | |
// Reverse Geocoding, cuando el usuario reubica el pin | |
geoCodeService.reverse().latlng(posicion, 16).run(function(error, resultado) { | |
// console.log(error); | |
// console.log(resultado.address); | |
marker.bindPopup(resultado.address.LongLabel); | |
marker.openPopup(); | |
// Llenar los campos | |
llenarInputs(resultado); | |
}) | |
}); | |
} | |
function buscarDireccion(e) { | |
if(e.keyCode === 13) { | |
provider.search({query: e.target.value + ' Cuba CU ' }) | |
.then( resultado => { | |
if( resultado ){ | |
// Limpiar los pines previos | |
markers.clearLayers(); | |
// Reverse Geocoding, cuando el usuario reubica el pin | |
geoCodeService.reverse().latlng(resultado[0].bounds[0], 16).run(function(error, resultado) { | |
// Llenar los inputs | |
llenarInputs(resultado); | |
// Centrar el mapa | |
mapa.setView(resultado.latlng) | |
// Agregar el Pin | |
marker = new L.marker(resultado.latlng, { | |
draggable: true, | |
autoPan: true | |
}).addTo(mapa); | |
// asignar el contenedor de markers el nuevo pin | |
markers.addLayer(marker); | |
// Mover el pin | |
reubicarPin(marker); | |
}) | |
} | |
}) | |
.catch( error => { | |
// console.log(error) | |
}) | |
} | |
} | |
function llenarInputs(resultado) { | |
console.log(resultado) | |
document.querySelector('#calle').value = resultado.address.Address || ''; | |
document.querySelector('#provincia').value = resultado.address.Neighborhood || ''; | |
// document.querySelector('#municipio').value = resultado.address.Neighborhood || ''; | |
document.querySelector('#lat').value = resultado.latlng.lat || ''; | |
document.querySelector('#lng').value = resultado.latlng.lng || ''; | |
} | |
} | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment