I'm new to Leaflet & JavaScript.
- I made local tiles using maperitive,
- I can draw Polygons, Polyline & Points using GeoJSON over the tiles using leaflet,
- I can serve the both (tiles & layers) through a local server (intranet).
My problem is:
If a user click at a Point, corresponding Polygon/Polyline should get highlighted & a label should pop-up.
Assume, the Point as Bridge. If, I click on the bridge, the corresponding, Stream (Polyline) & Lake (Polygon), should be highlighted & the details about the lake / bridge (data within GeoJSON file) should pop-up.
Code
var tileUrl = './tiles/{z}/{x}/{y}.png', tile = new L.TileLayer(tileUrl, {minZoom: 9},{maxZoom: 15}), map = new L.Map('map', {layers: [tile], center: new L.LatLng(9.55175, 77.6105), zoom: 9}); var baseLayers = { }; function onEachFeature(feature, layer) {
if (feature.properties) {
layer.bindPopup(" " +feature.properties.name + " " + "<br>Affected Bridges : " + feature.properties.Br_Affected + " ");
}
};
var Tanks = new L.geoJson(Tanks, {
onEachFeature: onEachFeature
});
function onEachFeature1(feature, layer) {
if (feature.properties) {
layer.bindPopup(" " +feature.properties.name + " " + "<br>Affected Bridges : " + feature.properties.Br_Affected + " ");
}
};
var Feeders = new L.geoJson(Feeders, {
onEachFeature: onEachFeature1
});
var overlays = {
"Tanks": Tanks,
"Feeders": Feeders,
};
L.control.layers(baseLayers, overlays).addTo(map);
L.control.coordinates({
position:"bottomleft",
useDMS:true,
labelTemplateLat:"N : {y} / ",
labelTemplateLng:"E : {x}",
useLatLngOrder:true
}).addTo(map);
L.control.scale({position:"topleft"}).addTo(map);
L.grid().addTo(map);
</script>
This gave this output
What I need is, if click on Br No. 117, this particular lake (from where the stream comes), should get highlighted.