I have been struggling with adding a search box for GeoJSON stuff, similar to COntrol.geocoder in Leaflet.
I used the advice under this post: Adding one search box for multiple GeoJSON polygon layers?
which led me to the examples:
https://labs.easyblog.it/maps/leaflet-search/
Unfortunately, my major problem is an implementation into my own map. It looks like the codes don't match each other.
My example is:
<script>
var map = L.map('map').setView([52.257525, 0.068939], 10);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
access_token={accessToken}', {
attribution: 'Map data © <a
href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a
href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1Ijoia3J1a2FyaXVzIiwiYSI6ImNqZ2tuaHZqODAxMjYzM28yam40MmpxMmEifQ.3chgJkJajjDBxsF4YHgENA'
}).addTo(map);
var sitec = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Title": "Sitec IS",
"Head": "7400 Beach Drive",
"Description": "Gavin Sinclair"
},
"geometry": {
"type": "Point",
"coordinates": [
0.16964435577392578,
52.29220753602784
]
}
},
{
"type": "Feature",
"properties": {
"Title": "JHG",
"Head": "Shortstanton sidings",
"Description": "Conor Murphy",
"URL": "<a href='https://www.johnhenrygroup.co.uk/' target='blank'>JHG</a>"
},
"geometry": {
"type": "Point",
"coordinates": [
0.05458831787109375,
52.29163006501503
]
}
}
]
};
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
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>');
}
}).addTo(map);
var searchControl = new L.Control.Search({
layer: featuresLayer,
propertyName: 'name',
marker: false,
moveToLocation: function(latlng, title, map) {
//map.fitBounds( latlng.layer.getBounds() );
var zoom = map.getBoundsZoom(latlng.layer.getBounds());
map.setView(latlng, zoom); // access the zoom
}
});
searchControl.on('search:locationfound', function(e) {
//console.log('search:locationfound', );
//map.removeLayer(this._markerSearch)
e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
if(e.layer._popup)
e.layer.openPopup();
}).on('search:collapsed', function(e) {
featuresLayer.eachLayer(function(layer) { //restore feature color
featuresLayer.resetStyle(layer);
});
});
map.addControl( searchControl ); //inizialize search control
The script
as well as
<link rel="stylesheet" href="leaflet-search.css"/>
has been attached at the very beginning (under the leaflet js links).
I am concieved, that my code has been used in wrong way. I came through all script both in leaflet-search.js as well as mine (a search control example copied from the "simple" GeoJSON search box), but I found nothing to change.
I am not skilled enough with Javascript so far, so could I have a bit of clarification, how to attach the code properly?
featuresLayer
which is not defined anywhere.