I want to call a specific object by name when one button is pressed in a json file and to be displayed on the map. And then the zoom and the map to be on this marker.
Structure of Json file:
type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [26.41389781, 41.9425557]
},
"properties": {
"Name": "Парцел 1",
"Crops": "Ябълки"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [26.41472289, 41.95044877]
},
"properties": {
"Name": "Парцел 2",
"Crops": "Ябълки"
}
},
A the moment i have one state which is true ot false.When is false there are no markers on the map, but when is true it shows all markers on the leaflet map.Now i want to have two or three buttons, and when one is pressed to call specific marker in the json file and show on the map
Button code,on click makes the condition to true:
<button
value={this.state.geojsonvisible}
onClick={this.onGeojsonToggle}
>
Object 1
</button>
Show popup for the markers:
onEachFeaturePoint(feature, layer) {
console.log("feature: ", feature);
console.log("layer: ", layer);
var popupContent =
feature.properties.Name + " " + feature.properties.Crops;
layer.bindPopup(popupContent);
layer.on({
click: function (e) {
console.log("e: ", e);
console.log("click");
},
});
}
This is my geojson tag:
{this.state.geojsonvisible && (
<GeoJSON
data={points}
onEachFeature={this.onEachFeaturePoint.bind(this)}
// pointToLayer={this.pointToLayer.bind(this)}
/>
)}