Skip to content

Instantly share code, notes, and snippets.

@lucasgio

lucasgio/Código leaflet geocoding reverse

Last active June 12, 2021 02:06
Show Gist options
  • Save lucasgio/072f342507d531784dea58c5139641a9 to your computer and use it in GitHub Desktop.
Save lucasgio/072f342507d531784dea58c5139641a9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Código leaflet geocoding reverse
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