Me gustaría preguntarle cómo implementar solo la función de cuadro de búsqueda desde el complemento de búsqueda de folletos y solo para dos países. Quiero crear un campo de entrada para insertar la ubicación con la función de autocompletar.
Primero intenté implementar el cuadro de búsqueda con el mapa, pero solo puedo ver el mapa y no el cuadro de búsqueda.
¿Puedes aconsejarme por dónde empezar? Soy nuevo en esto y no sé cómo hacerlo.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
var searchLayer = L.geoJson().addTo(map);
//... adding data in searchLayer ...
L.map('map', { searchControl: {layer: searchLayer} });
Consulte el complemento L.Control.Geocoder para Leaflet. Este complemento le permite buscar ubicaciones utilizando varios servicios diferentes, como Open Street Maps.
Para limitar los resultados de búsqueda a algunos países, debe configurar el servicio de geocodificación que utiliza. He creado un ejemplo rápido usando OSM/Nominatim que limita los resultados de búsqueda al Reino Unido y EE. UU.:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
let geoCoderOptions = {
collapsed: false,
geocoder: L.Control.Geocoder.nominatim({
geocodingQueryParams: {
// List the country codes here
countrycodes: 'gb,us'
}
})
}
L.Control.geocoder(geoCoderOptions).addTo(map);
Ver ejemplo de trabajo en codepen . Si busca una ubicación (ingrese en la esquina superior derecha), solo debe obtener resultados que estén en el Reino Unido o los EE. UU. ¡Espero que esto ayude!