Creating a legend for point based GeoJSON

[Richard Butler]

Hi everyone,

 

I am trying to create a point based Leaflet map, which brings in data from a geoJSON file where points are coloured according to varying attributes and what I am trying to do is to create a legend for it.

From a different post I appreciate that the legend that is created on the Choropleth example on the Leaflet page is static, but i'm not yet understanding how to create a legend based on a string, rather than an integer or decimal.

 

I am also trying to create my map from scratch, rather than trying to butcher the Choropleth example!

So I have imported my geoJson and have styled my points as circles and have colour coded them according to the attributes contained within the 'TypeOfIssue' field thanks to help from this post:

https://groups.google.com/forum/#!topic/leaflet-js/4PFTQa2Cgbw

 

Does anyone have any recommendations for how I can create a legend from this point?  I have tried modifying the legend code from the Choropleth example with no joy and there doesn't seem to be anything else out there that helps.  Here is the code that I have used after I have brought in the geoJSON:

L.geoJson(RRData, {
    pointToLayer: function (feature, latlng) {
       var popupOptions = { maxWith: 300 };
          var popupContent = "<b>Location: </b>" + feature.properties.ActualLocation + "</br>" + "<b>Issue: </b>" + feature.properties.TypeOfIssue + "</br>" + "<b>Information: </b>" + feature.properties.Information;
   
   //Style circles based on JSON attributes
   
   function getOptions(properties) {
        if (properties.TypeOfIssue === "Road Surface") {
          return {
            radius: 7,
            color: "black",
            fillColor: "#de2d26",
      fillOpacity: 1
          };
        } else if (properties.TypeOfIssue === "Signage") {
          return {
            radius: 7,
            color: "black",
            fillColor: "#377eb8",
      fillOpacity: 1
          };
     } else if (properties.TypeOfIssue === "Line Markings") {
          return {
            radius: 7,
            color: "black",
            fillColor: "#4daf4a",
      fillOpacity: 1
          };
     } else if (properties.TypeOfIssue === "Roadside Hazards") {
          return {
            radius: 7,
            color: "black",
            fillColor: "#984ea3",
      fillOpacity: 1
          };
        } else {
          return {
            radius: 7,
            color: "black",
            fillColor: "#ff7f00",
      fillOpacity: 1
          };
        }
      }
      return L.circleMarker(latlng, getOptions(feature.properties)).bindPopup(popupContent, popupOptions);
    }
  }).addTo(map);

Enter code here...

[Luca Moiana]

Hi, any progress on that?

I need to create a couple of points legends but I can't find a way...any help would be appreciated.

L

[Scott Fairgrieve]

I'm somewhat biased, but have you considered using the Leaflet Data Visualization Framework (DVF) plugin?  It includes built-in legend support (it will create the legend for you) when you use any DataLayer based class.  L.DataLayer is an abstraction of the L.GeoJSON concept that supports loading/displaying JSON data in any format (including GeoJSON) on a Leaflet map.  Check out these examples, as they're somewhat similar to your use case:  World Bank Income Level Data, DC Crimes by Type.  If you need an example that's exactly like your use case, I could probably throw one together shortly.  Let me know.

Scott

[Luca Moiana]

Thanks. I'll look into it. 

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/4UPwbl1lO7E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.