Search for multiple attributes for single layer with Leaflet Search Control?

Question

Edit: I am working on a project where I want to search through a GeoJSON, based on different attributes. To do this I am using leaflet-search plugin.

I want to search through my single GeoJSON. That GeoJSON has multiple attributes. I'm wondering if we could pass an array through the propertyName option.

var controlSearch = new L.Control.Search({
 layer: univ,
 initial: false,
 collapsed: true,
 textPlaceholder: 'Search for University or Department',
 propertyName: ['Institutio','Department'] ,
 hideMarkerOnCollapse: true,
 moveToLocation:function(latlng, title, map) {
 latlng.layer.setIcon(theIcon())
 map.setView(latlng, 13); 
 }, 
 marker: false,
});

I've tried passing both my attributes as an array but that doesn't work. Does anyone have a solution?

• Aneeqa: I'm using this plugin: github.com/stefanocudini/leaflet-search
• Aneeqa: I've edited it. Do you have any idea how to tackle this issue?
• TomazicM: There is a simple solution if you don't mind drop down list of candidates and result itself containing both properties.
• Aneeqa: This means the user decides which property to search through...
• TomazicM: No both are displayed one besides the other, like "Some Institute, Some department".

Answer 1

Trick to search through multiple properties is to create combined search property when loading GeoJSON layer.

Code could look something like this:

var univ = L.geoJSON(data, {
 onEachFeature: function(feature, layer) {
 layer.feature.properties.searchItem = layer.feature.properties.Institutio + ', ' + layer.feature.properties.Department;
 }
};
var controlSearch = new L.Control.Search({
 layer: univ,
 initial: false,
 collapsed: true,
 textPlaceholder: 'Search for University or Department',
 propertyName: 'searchItem' ,
 hideMarkerOnCollapse: true,
 moveToLocation:function(latlng, title, map) {
 latlng.layer.setIcon(theIcon())
 map.setView(latlng, 13); 
 }, 
 marker: false,
});

• Aneeqa: Thank you. This works perfectly.