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);
}**
  • move dhakaFactories.bindPopup(image + text) to onEachFeature, drop layer.on({'click'})? – toms Aug 10 '15 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 '15 at 18:51
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
//    });
}
  • 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 '15 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...) – Vanni Zhang Aug 10 '15 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 '15 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. – Vanni Zhang Aug 10 '15 at 21:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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