L.Control.Search: Usando bucles para buscar datos en Leaflet

Question

¿Existe una manera de encontrar datos de diferentes capas y diferentes propertyNames? Tengo varios archivos de datos GeoJSON, con diferentes propiedades. En este momento solo puedo buscar un GeoJSON.

Para hacer un bucle y llamar a los datos estoy utilizando este código:

maplink_var = [source1.geojson,source2.geojson,etc]; 

var  = new L.GeoJSON(, {
  style: function(feature) {
      ...
    },
  onEachFeature: function(feature, marker) {
      ...
    }
});

y a continuación está el código para encontrar datos:

var searchControl = new L.Control.Search({
  layer: source1,source2,source3,
  propertyName: ['propNameSource1','propNameSource2','propNameSource3'],
  marker: false,
  moveToLocation: function(latlng, title, map) {
    var zoom = map.getBoundsZoom(latlng.layer.getBounds());
    map.setView(latlng, zoom); // acceder al zoom
  }
});

searchControl.on('search:locationfound', function(e) {
  e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
  if(e.layer._popup) e.layer.openPopup();
}).on('search:collapsed', function(e) {
  featuresLayer.eachLayer(function(layer) { 
    featuresLayer.resetStyle(layer);
  }); 
});

map.addControl( searchControl ); 

Obtengo un error si doy un array en el nombre de la propiedad, se queda en carga, y ninguno de los datos aparece.

Answer 1

Como se explica en la documentación layer es un L.LayerGroup. Por lo tanto, puedes pasar múltiples capas de esta manera (fuente):

var searchControl = new L.Control.Search({
  layer: L.layerGroup([source1, source2, source3]),
  ...
})

En cuanto al propertyName: El nombre de la propiedad debe ser el mismo para todos los archivos GeoJSON. Prueba esto cuando crees el L.GeoJSON (no probado):

onEachFeature: function(feature, layer) {
  const p = feature.properties
  p.title = p.propNameSource1 || p.propNameSource2 || p.propNameSource3 //crear nueva propiedad 'title'
}

title es el valor por defecto para propertyName por lo que ni siquiera tendrás que establecerlo cuando crees L.Control.Search.

Answer 2

Aquí hay un mapa que creé que utiliza el autocompletado de JQUery para buscar.

http://www.gistechsolutions.com/leaflet/DEMO/senate/index.html

Uso la etiqueta y el valor de la selección, la etiqueta es el nombre, el valor es la capa. Dado que establecí el id de la capa de leaflet como el NOMBRE de la característica del polígono, hay una correspondencia de uno a uno. Por lo tanto, cuando seleccionan un nombre, sabe qué polígono y capa resaltar y cambiar a.

En el ajuste ForEachFeature del ID del polígono al nombre de la característica:

layer._leaflet_id = feature.properties.NAME;

Empujando el NOMBRE y la capa a un array:

arr1.push({label:data.features[i].properties.NAME, value:"senado"});

Tomando el valor de la selección:

polySelect(ui.item.label);

Desencadenando el NOMBRE seleccionado, para "seleccionarlo y hacer zoom en él"

map._layers[a].fire('click');
var layer = map._layers[a];
map.fitBounds(layer.getBounds());

Es un método diferente al que utilizaste pero lo menciono como una opción. Tengo una página para la escuela que hice, puede ayudar, el ejemplo anterior es del Mapa Legislativo de NY, y también hay un breve resumen de autocompletado (búsqueda) con JQery allí. http://www.gistechsolutions.com/leaflet/DEMO/