JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet-src.js"></script>
<script src="http://dartotalsolutions.scienceontheweb.net/datajsp/pick1.geojson.js"></script>
<script src="http://dartotalsolutions.scienceontheweb.net/datajsp/pick2.geojson.js"></script>
<script src="http://dartotalsolutions.scienceontheweb.net/datajsp/POL00.geojson.js"></script>
<script src="http://dartotalsolutions.scienceontheweb.net/datajsp/POL01.geojson.js"></script>
<link rel="stylesheet" href="http://dartotalsolutions.scienceontheweb.net/src/leaflet-search.css">
<script src="http://dartotalsolutions.scienceontheweb.net/src/leaflet-search.js"></script>
<div id="map"></div>
<p>
Current map zoom: <span id="currentZoom"></span>
</p>
CSS
#map {
height: 500px;
}
JavaScript
var map = L.map('map', {
zoom: 14,
center: new L.latLng(35.948782, 8.139912),
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
});
var piky1 = new L.geoJson(pol00);
var piky2 = new L.geoJson(pol01);
var piky3 = new L.geoJson(pick1);
var piky4 = new L.geoJson(pick2);
// You can directly build a GeoJSON layer group with an array of GeoJSON objects:
var piky5 = L.geoJson([pol00, pol01]);
//group of Geojson points markers
var lay = L.featureGroup([piky1, piky2]);
//groupe of Geojson polygones
var pik = L.featureGroup([piky3, piky4]);
///////////////////////////
// Patch leaflet-search to manage nested GeoJSON shapes.
///////////////////////////
L.Control.Search.include({
_recordsFromLayer: function() { //return table: key,value from layer
var that = this,
retRecords = {},
propName = this.options.propertyName,
loc;
function searchInLayer(layer) {
if (layer instanceof L.Control.Search.Marker) return;
if (layer instanceof L.Marker || layer instanceof L.CircleMarker) {
if (that._getPath(layer.options, propName)) {
loc = layer.getLatLng();
loc.layer = layer;
retRecords[that._getPath(layer.options, propName)] = loc;
} else if (that._getPath(layer.feature.properties, propName)) {
loc = layer.getLatLng();
loc.layer = layer;
retRecords[that._getPath(layer.feature.properties, propName)] = loc;
} else {
throw new Error("propertyName '" + propName + "' not found in marker");
}
} else if (layer.hasOwnProperty('feature')) { //GeoJSON
if (layer.feature.properties.hasOwnProperty(propName)) {
loc = layer.getBounds().getCenter();
loc.layer = layer;
retRecords[layer.feature.properties[propName]] = loc;
} else {
throw new Error("propertyName '" + propName + "' not found in feature");
}
} else if (layer instanceof L.LayerGroup)...