My request is to make the leaflet search plugin functional with an external .json file connected to the map.
To elaborate on my goal, I will provide two code examples:
The first one is sourced from an offline file with a geoJSON js file attached:
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);
The leaflet search works perfectly with the above code.
L.control.search({
layer: L.layerGroup ([sitis, church]),
initial: false,
propertyName: 'myKey',
zoom: 14,
position: 'topleft'
})
.addTo(map);
L.control.scale({
position: 'bottomright',
})
.addTo(map);
However, the second code has encountered an issue.
The initial data for the second code is as follows:
$.getJSON(url1, function(data) {
job = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
color:getColor(feature.properties.League),
fillColor: getColor(feature.properties.League),
fillOpacity: 0.8
});
},
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);
});
I attempted to implement the leaflet search control using the following code:
L.control.search({
layer: L.layerGroup ([job, job2, job3]),
initial: false,
propertyName: 'Owner',
zoom: 18,
position: 'bottomright'
})
.addTo(map);
But unfortunately, the search functionality did not work as expected, and the console displayed an error message.
Links to possible solutions have been provided:
https://jsfiddle.net/expedio/7e8b6gyu/
If you can help me resolve this issue and enable the leaflet search feature for an external .json file fetched via $GetJSON function, it would be greatly appreciated.