2

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?

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

1 Answer 1

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,
});
1
  • Thank you. This works perfectly.
    – Aneeqa
    Jun 27, 2022 at 4:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.