Leaflet Search Control – Applying to Multiple Layers

geojsonjavascriptleafletsearch

I am attempting to add a single search button to look through geoJSON layers. They will look through the field "name". Unfortunately, my method of creating a layer group is not working. What am I missing? Or how do I group together geoJSON files to make this work?

var searchControl = new L.Control.Search({
      layer: [syriaLayer, countryBoundary],
      zoom: 7.5,
      propertyName: 'Sheet_Numb',
      circleLocation: false
  });

Best Answer

Group the layers within a layerGroup or a featureGroup as described in the docs

layer: L.featureGroup([syriaLayer, countryBoundary]),

Related Solutions

[GIS] Leaflet.draw: add attributes and save to file

As for populating the GeoJSON output by drawnItems.toGeoJSON(), you have to explicitly add data to your layers as type and within properties.

See SO post: update properties of geojson to use it with leaflet

In short:

map.on('draw:created', function (event) {
    var layer = event.layer,
        feature = layer.feature = layer.feature || {}; // Intialize layer.feature

    feature.type = feature.type || "Feature"; // Intialize feature.type
    var props = feature.properties = feature.properties || {}; // Intialize feature.properties
    props.title = "my title";
    props.content = "my content";
    drawnItems.addLayer(layer);
});

As for the error in your JSFiddle, it is because JSFiddle does not exactly behave like a normal webpage regarding inline JS (your <input onclick="saveIdIW()"/> will not work)

[GIS] leaflet multiple layers control

When you do .addTo(map) you are adding it to the map. You need to do some sort of click event, you can set your layer as a variable like attraction and do something like attraction.addEventListener("click", function(){attraction.addTo(map)});

Best Answer

Related Solutions

[GIS] Leaflet.draw: add attributes and save to file

[GIS] leaflet multiple layers control

Related Question