Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm new to leaflet & javascript.

  1. I made local tiles using maperitive,
  2. I can draw Polygons, Polyline & Points using GeoJson over the tiles using leaflet,
  3. 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.

Hope I explained my problem. Kindly help.

As suggested by underdark, posting the code here,

Code

<script src="./src/leaflet.js"></script>
<script src="./src/L.Control.MousePosition.js"></script>
<script src="./src/leaflet.label.js"></script>
<script src="./src/Leaflet.Coordinates-0.1.3.min.js"></script>
<script src="./src/L.Grid.js"></script>
<script src="./src/Tanks.js"></script>
<script src="./src/Feeders.js"></script>
<script>
    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 enter image description here

What I need is, if click on Br No. 117, this particular lake (from where the stream comes), should get highlighted.

Thanks..

share|improve this question
    
Welcome to gis.stackexchange! Please note that a good question is expected to include proof of basic research effort and - if applicable - code so far. Questions requesting code or instructions to copy&paste are generally not well received. –  underdark Jan 18 at 11:06
add comment

1 Answer 1

In order for something to happen when you click/hover/drag on the map or a feature, such as a point or polyline, you need to add map events.

The following code shows a popup containing the lat/long location of the mouse when the user clicks on the map:

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

The leaflet quick start guide provides additional examples.

Here's another simple example from a recent app I created:

This code 'highlights' the selected layer (based on the layer ID) by setting the layer style

function highlightLayer(layerID) {
    map._layers['name'+LayerID].setStyle(highlight);
}

This bit of code is simple a variable containing the style I want the feature to possess when it is highlighted.

var highlight = {
    'color': '#333333',
    'weight': 2,
    'opacity': 1
};

You can fire this code using the events mentioned above (click, hover, etc.)

share|improve this answer
    
@ Radar : All these codes highlight only where the mouse is clicked. I need, when a user clicks at one place (say a point), a polygon / polyline at another place should be highlighted. As given in my question, if the user click on a bridge, the lake from where water flows to this bridge should be highlighted. –  Vishy Jan 18 at 1:49
    
You'll have to link your features somehow - an attribute would be the easiest way (e.g. all features associated with a specific bridge get a 'bridgeID' of say, 3). This is more of a logic handling issue than a technical problem. If you're already using GeoJSON you're 90% of the way there. –  Nick Ochoski Jan 18 at 19:41
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.