Leaflet/HTML/GeoJSON: How to put a pop-up on a geoJSON point?

Question

I don't have much knowledge of HTML/JS/GeoJSON, and have made a webmap from trial and error with many different tutorials. I have tried leaflet's tutorials but cannot get the desired results.

I have a functioning Leaflet webmap that shows GeoJSON points. I need to symbolize the points based on GeoJSON properties, and provide a pop-up when the point is clicked. I can use "pointToLayer" to turn the default blue markers into a custom point,

but when I try to incorporate a pop-up, the blue points turn back into default markers

How can I get a custom-symbolized point with a pop-up? What am I doing wrong?

Here is the HTML code I am using:

var geojsonMarkerOptions = {
radius: 5,
fillColor: "#33ccff",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.9
};

$.getJSON("./geojson/kitchener_sidewalks2.geojson",  
 function(data) {
    var geojson = L.geoJson(data, {onEachFeature: action_To_Perform_When_Marker_Is_Clicked_On_The_Map},
       {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
    });
    geojson.addTo(map);
    myGeoJSONLayers.addLayer(geojson);
 });



var overlayMaps = {"Kitchener Sidewalk Issues": myGeoJSONLayers};   

L.control.layers(baseMaps, overlayMaps,myGeoJSONLayers).addTo(map); 

function action_To_Perform_When_Marker_Is_Clicked_On_The_Map(feature, layer) {
if (feature.properties)
{
    var PopupText = []; 
    PopupText.push("<b>Accessibility Issue: </b>" + feature.properties.Issue);
    PopupText.push("<b><br/>Description: </b>" + feature.properties.Descriptio);
    PopupText.push("<b><br/>Recorded: </b>" + feature.properties.CreationDa)
    layer.bindPopup("<p>" + PopupText.join("") + "</p>");                       
} 
}

Answer 1

I typically call pointToLayer before I call onEachFeature.

Also I return new L.circleMarker() where you return L.circleMarker()

Thats not an answer to your question but its what I do with almost the same exact scenario and it works for me.

ie:

geojsonLayer = L.geoJson(json, {
      pointToLayer: function(feature, latlng) {
       return new L.CircleMarker(latlng, {radius: 10, fillOpacity: 0.0, weight: 0});
      },
      onEachFeature: function (feature, layer) {
       var str = (feature ?
        '<b>' + ((feature.properties.mh_no == null) ? "Manhole" : "Manhole " + feature.properties.mh_no)  + '</b>' +
        '<br /><b>Northing: </b>' + ((feature.properties.northing == 0) ? "" : feature.properties.northing) + 
        '<br /><b>Easting: </b>' + ((feature.properties.easting == 0) ? "" : feature.properties.easting) + 
        '<br /><b>Elevation: </b>' + ((feature.properties.elevation == 0) ? "" : feature.properties.elevation) + 
        '<br /><b>Bottom: </b>' + ((feature.properties.bottom == null) ? "" : feature.properties.bottom) + 
        '<br /><b>Diameter: </b>' + ((feature.properties.diameter == null) ? "" : feature.properties.diameter) +    
        '<br /><b>Subdivision: </b>' + ((feature.properties.subdivision == null) ? "" : feature.properties.subdivision) + 
        '<br /><b>Platbook: </b>' + ((feature.properties.platbook == null) ? "" : feature.properties.platbook) + 
        '<br /><b>Age: </b>' + ((feature.properties.age == null) ? "" : feature.properties.age) + 
        '<br /><b>Date Inspected: </b>' + ((feature.properties.date_inspect == null) ? "" : feature.properties.date_inspect) + 
        '<br /><b>Date Installed: </b>' + ((feature.properties.date_install == null) ? "" : feature.properties.date_install) +
        '<br /><b>Comments: </b>' + ((feature.properties.comments == null) ? "" : feature.properties.comments)
        : '');
       layer.bindPopup(str);
      }

Answer 2

I think the trouble may simply be the formatting of your options block. Based on how I'm understanding Leaflet's documentation for GeoJSON, both onEachFeature and pointToLayer should be attributes of the same options object. What happens if you format it like this?

var geojson = L.geoJson(data, {
    onEachFeature: action_To_Perform_When_Marker_Is_Clicked_On_The_Map,
    pointToLayer: function (feature, latlng) {
      return L.circleMarker(latlng, geojsonMarkerOptions);
    }   
});

The way you have the code in your original post, I would expect your pointToLayer attribute is getting orphaned--in other words, Leaflet's GeoJSON class doesn't see it among the options keys, so it just leaves it hanging.

Answer 3

onEachFeature is what your missing, this is what I have used in my apps.

var geojsonMarkerOptions3 = {
        radius: 8,
        color: "yellow",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
};

geojsonLayer3 = L.geoJson(response5, {
            pointToLayer: function(feature, latlng) {
                return L.circleMarker(latlng,  geojsonMarkerOptions3 );
            },
onEachFeature: function (feature, layer) {
                layer.bindPopup("<p>Record: " + feature.properties.Record +  "</br>Address: " + feature.properties.FullAdd + "</br> Quad: "+feature.properties.Quad + "</p>");
            }
            });

            map.addLayer(geojsonLayer3);
            }