I would like to have my leaflet search plugin working for an external .json file attached to the map.
To clarify you what I would like to achieve I will bring you two examples of the code:
1 - comes from the offline file, with geoJSON js file attached 2 - comes from localhost, where .json file has been fetched by $GetJson function
First code looks like this:
var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head
return L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: function (feature, layer) {
layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><a href='file:///Z:\\Fixed Line\\Design & Build\\2. Clients\\Openreach\\3. MDU Designs\\Coventry\\OR66 - Priory Court, Coventry\\20190709_121215019_iOS%20(1).jpg' target='blank'><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'></a>");
}
}).addTo(map);
for which the leaflet search works perfectly
L.control.search({
layer: L.layerGroup ([sitis, church]),
initial: false,
propertyName: 'myKey', // Specify which property is searched into.
zoom: 14,
position: 'topleft'
})
.addTo(map);
L.control.scale({
position: 'bottomright',
})
.addTo(map);
But in the second code there is a problem.
My initial data looks like this:
// layer 1
$.getJSON(url1, function(data) {
job = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
//color: "#000",
color:getColor(feature.properties.League),
fillColor: getColor(feature.properties.League),
fillOpacity: 0.8
}); //.bindTooltip(feature.properties.Name);
},
onEachFeature: function (feature, layer) {
layer._leaflet_id = feature.properties.Owner;
var popupContent = "<p>The <b>" +
feature.properties.Owner + "</b> play here,</br> They are in the " +
feature.properties.League + "</br>" +
'<a href="'+ feature.properties.Website +'" target="_blank">Website</a></p>' ;
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
}).addTo(map);
});
//END Layer1
where I applied:
L.control.search({
layer: L.layerGroup ([job, job2, job3]),
initial: false,
propertyName: 'Owner', // Specify which property is searched into.
zoom: 18,
position: 'bottomright'
}) .addTo(map);
But without the result. My console shows:
Uncaught TypeError: Cannot read property '_leaflet_id' of undefined
at u (leaflet.js:5)
at i.getLayerId (leaflet.js:5)
at i.addLayer (leaflet.js:5)
at initialize (leaflet.js:5)
at new i (leaflet.js:5)
at Object.t.layerGroup (leaflet.js:5)
at (index):659
and I don't really know what's going on. To be honest I found solution, which can fetch the.json bvia Ajax and JQuery...
But I already have my data fetched from .json via $GetJSON function.
An another option is available here:
https://jsfiddle.net/expedio/7e8b6gyu/
But once I implement it into my code like:
var searchControl = new L.Control.Search({
layer: job,
propertyName: 'Owner',
circleLocation: false
});
searchControl.on('search_locationfound', function (e) {
data.layer.setStyle({
fillColor: '#3f0',
color: '#0f0'
});
if (data.layer._popup) data.layer.openPopup();
}).on('search_collapsed', function (e) {
statesLayer.eachLayer(function (layer) { //restore feature color
statesLayer.resetStyle(layer);
});
});
map.addControl(searchControl); //inizialize search control
I only got a magnifying glass, but search is not possible.
My console says then:
leaflet-search.js:774 Uncaught TypeError: Cannot read property 'call' of
undefined
at i._fillRecordsCache (leaflet-search.js:774)
at leaflet-search.js:720
which refer me to:
leaflet-search.js 774
this._curReq = this._retrieveData.call(this, inputText, function(data) {
even when I change from function(e) to [![function(data)][1]][1] a result remains the same...
Is it possible to make the leaflet-search console valid for external .json file via $getJSON function?
