1

I am trying to make a map in which a marker can be clicked and a popup opens up with some information. I have successfully done all of that however my first click on any of the markers result in the popup being placed randomly on the map. If I click again, the popup will place itself correctly (on top of the marker). I believe that I am doing something wrong when calling the "onEachFeature" function. Here is the code:

    // Importing the data from the geojson
$.getJSON("data/factories.geojson", function(data)
{
    factories = L.geoJson(data, {
        pointToLayer: function(feature, latlng)
        {
            return L.circleMarker(latlng, style);
        },
        onEachFeature: onEachFeature,
        style: style
    }).addTo(map);
});
// Action for each feature of the choropleth
function onEachFeature(feature, layer)
{
    console.log("onEachFeature");
    layer.on({
            click: highlightSelection
    });
}
// Highlighting the selected administrative area
function highlightSelection(e)
{
    // Some code her to add text and image to the popup
    factories.bindPopup(image + text);

    **// This will reset the highlight of the previously clicked marker
    if(firstPass == false)
    {
        console.log(lastLayer);
        resetHighlight(feature, lastLayer);
    }
    lastLayer = layer;
    firstPass = false;
    layer.on({
        click: function(){
            layer.setStyle({
                        radius: 14,
                        weight: 2,
                        opacity: 0,
                        fillColor: '#FFCC00',
                        fillOpacity: 0.8
                    });
        }
    })**
}

**// Reset any highlights after mouseout
function resetHighlight(lastLayer)
{
    layer.resetStyle(lastLayer);
}**
2
  • move dhakaFactories.bindPopup(image + text) to onEachFeature, drop layer.on({'click'})?
    – toms
    Aug 10, 2015 at 16:10
  • Thanks for the help! You were right, and so was Vanni Zhang (thanks!). Please see my comment on his answer if you have the time.
    – tgirgin
    Aug 10, 2015 at 18:51

1 Answer 1

1

I don't think you will need to call the highlightSelection function, try to update the onEachFeature function to something like the one below to append content to popup window for each layer:

// Action for each feature of the choropleth
function onEachFeature(feature, layer)
{
    console.log("onEachFeature");
    layer.bindPopup('hello, popup');
//    layer.on({
//            click: highlightSelection
//    });
}
4
  • Thank you! Your answer seems to be working, but it has broken the setStyle and resetStyle functions. I fixed the setStyle by changing e.target.setStyle() to "layer.setStyle". However, I tried to change e.target.resetStyle(lastLayer) to layer.setStyle(lastLater) without any success. I get the following error Uncaught TypeError: layer.resetStyle is not a function. Any idea?
    – tgirgin
    Aug 10, 2015 at 18:49
  • @tgirgin You are welcome. Could you please update your code to add the "setStyle" part to it, in that case I can have a better idea about what you are trying to do. (If possible, a jsfiddle link with the code you are working on would be very helpful...) Aug 10, 2015 at 19:07
  • It would be hard to put my code in JSFiddle as I have a lot of data in different files. I did update my original post with more code (anything between ** is new code). I kept the code in the original post intact so that other people can still use my question and your answer if they have the same problem. Thank you!
    – tgirgin
    Aug 10, 2015 at 19:44
  • It appears what you are trying to do is highlighting the selected layer when it's clicked. You can check out this example (jsfiddle.net/pxm4b7z3/6) I created several weeks ago on jsfiddle to see how you can get it work. Please let me know if you have questions about the code I put there. The trick is you will need to call the "eachLayer" method to loop through all layers in the GeoJSON object to highlight the one you selected as well as reset style for other layers that are not selected. Aug 10, 2015 at 21:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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