Is there a way to find data from different layers and different propertyNames? I have several GeoJSON data files, with different properties. At this moment I can only search one GeoJSON.

For looping and calling the data I am using this code:

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

var <?= $i['maplink_var']; ?> = new L.GeoJSON(<?= $i['maplink_var']; ?>, {
  style: function(feature) {
  onEachFeature: function(feature, marker) {

and below is the code to find data:

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); // access the 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) { 

map.addControl( searchControl ); 

I get an error if I give array on property name, stack on loading, and none of the data appears.

enter image description here

  • Please share the exact error message. Also: I don't know the <?= ... ?> syntax. What does it mean? Is it some kind of PHP? – Stefan Dec 20 '18 at 10:35
  • Uncaught TypeError: leaflet-search.js:103 . prop.split is not a function ... <?= ?> is same as <?php echo ?>. at the top i using foreach for looping and get variableName from database. – AdityaDS Dec 21 '18 at 4:02
  • Line 103 is inside a function called _getPath: Line 103 in file src/leaflet-search.js at stefanocudini/leaflet-search - github.com/stefanocudini/leaflet-search/blob/master/src/… Not sure what to make of it, but it might be because you are passing an array to propertyName. – Stefan Dec 21 '18 at 9:36
  • You sound like you either have a data issue with 10's-100's of different datasets or a code issue trying to accommodate all these different types. Have you thought of a workflow process to consolidate these datasets into one unified database. It may make your coding easier and data management issues go away. If the data is not constantly changing, something that does field mapping on import might help. – Bill Chappell Dec 21 '18 at 13:19

As explained in the documentation layer is a L.LayerGroup. Thus you can pass multiple layers like this (source):

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

As for the propertyName: The property name must be the same for all GeoJSON files. Try this when you create the L.GeoJSON (not tested):

onEachFeature: function(feature, layer) {
  const p = feature.properties
  p.title = p.propNameSource1 || p.propNameSource2 || p.propNameSource3 //create new property 'title'

title is the default for propertyName so you won't even have to set it when you create L.Control.Search.

| improve this answer | |
  • yes. if i have same propertyName is no problem. but i have 100 layers and really bad if i must change all the origin data for add new propertyName. so can we handle it w/o change the origin data? on my layers only propertyName.ID has an equation data – AdityaDS Dec 21 '18 at 4:16
  • Can you distinguish the propertyName from the other feature properties somehow? E.g. is it the only string property? Does it contain some pattern? Then you could fill p.title with that field that matches the pattern. – Stefan Dec 21 '18 at 9:21
  • i can handle it use your code with my method. thanks before – AdityaDS Dec 22 '18 at 7:02

Here is a map I created that uses JQUery's autocomplete for searching.


I use the select's label and value, the label is the name, value is the layer. Since I set the leaflet layer_id to be the polygon's feature NAME, There is a one to one match. So when they select a name, it knows what polygon and layer to highlight and switch to.

In the ForEachFeature setting the poly ID to feature name:

layer._leaflet_id = feature.properties.NAME;

Pushing the NAME and layer to an array:

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

Grabbing the select value:


Firing off the selected NAME, to "select it and zoom to it"

var layer = map._layers[a];

It's a different method then you went down but I'm tossing it out as an option. I have a page for school I made, it may help, the above example is from the NY Leg Map, and their is also a simple JQuery Autocomplete (search) write up there. http://www.gistechsolutions.com/leaflet/DEMO/

| improve this answer | |
  • this is for 1 type only? i mean i have ex 10 layer with different property name. how to handle it? for layer i can handle it using L.layerGroup([source1, source2, source3]). but cannot for propertyName, I testing 1 by 1 property name and working fine, but when i try to pass it into the array. i got an error like my image at the top – AdityaDS Dec 21 '18 at 4:07
  • Since I grabber the layer name, I could use that in a switch statement to get the right field to search on. – Bill Chappell Dec 21 '18 at 13:14

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.