4

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,

enter image description here

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

enter image description here

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>");                       
} 
}
  • Check the browser console for errors - that should help find our where the problem is (press F12 to open the browser dev tools and click on the Console tab). But MappaGnosis is right about the syntax. – Tom Chadwin Jun 20 '17 at 19:01
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);
      }
  • Trying to make these changes! Instead of the large "var str = (feature ?" block, what could I put there in order to make a pop-up appear from my properties? I've tried putting in my "var PopupText = []; " block instead but it didn't work. – Kevin D Feb 8 '16 at 21:47
  • perhaps your issue all along was the missing ; on the third feature property push. I think your code is fine otherwise. i'm no expert tho – Barrett Feb 8 '16 at 21:57
  • Unfortunately, that didn't fix it. Still only showing the default markers – Kevin D Feb 8 '16 at 22:09
  • 1
    Note how PointToLayer is NOT within its own curly braces here (where as yours incorrectly is) – MappaGnosis Feb 9 '16 at 10:29
0

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.

  • Actually, this removes all of my points from the map. The GeoJSON data is not showing up anymore :( – Kevin D Feb 8 '16 at 22:18
0

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);
            }

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.