Style circles based on GeoJSON attributes

JDS

unread,

Jan 12, 2015, 6:57:04 AM1/12/15

to leafl...@googlegroups.com

Hi everyone,

I have made a map of some stations in London. All the data and code is here:

http://bl.ocks.org/JimShady/4359bda5cce46339f0ee

Ad exert of the code that I am interested in is pasted below. What I would like to do is to change the styling of the markers, based on attributes within the GeoJSON file. For example there is a 'line' attribute in the GeoJSON which I would like to use to change the colours of the circle markers. Then there is another attribute called 'PM25' , and I would like to use this to change the size of the marker.

Ideas and tips would be appreciated please. I'm not very good at writing with Javascript yet!

L.geoJson(tube, {
pointToLayer: function (feature, latlng) {
var popupOptions = {maxWith: 200};
var popupContent = "Station: " + feature.properties.station_name + "</br>" + "PM2.5: " + feature.properties.pm25;
return L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent, popupOptions);
}
}).addTo(map);

Thanks

James

Bryan McBride

unread,

Jan 13, 2015, 10:25:23 AM1/13/15

to leafl...@googlegroups.com

James,

I added some code to a comment in your gist: https://gist.github.com/JimShady/4359bda5cce46339f0ee#comment-1371591.

Bryan

James David Smith

unread,

Jan 13, 2015, 10:33:23 AM1/13/15

to leafl...@googlegroups.com

Thanks Bryan, that works a treat.

--

---
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/4PFTQa2Cgbw/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.

Richard Butler

unread,

Jan 15, 2015, 8:21:07 PM1/15/15

to leafl...@googlegroups.com

Gents,

I have been looking for something like this for a while. I didn't previously know how to colour code points based on an attribute in a json file, so thank you very much for the suggestion!

Richard.

Luca Moiana

unread,

Jul 22, 2015, 8:30:30 AM7/22/15

to Leaflet

Hi, looking for styling options I ended up on this post, thanks;

but, what I really want to do is to set the fill color only based on a combination of two attributes.

Here is my messy, code, what is wrong:

  // Style Dati
    var EarthquakesMarkerOptions = {
        radius: 8,
        fillColor: "orange",
        color: "grey",
        weight: 1.75,
        opacity: 0.9,
        fillOpacity: 0.7
    };

  // Dati GeoJSON
  function getOptions(properties) {
      if (properties.Value === "0" AND properties.Value.Map_2_Valu === "D") {
        return {
          fillColor: "#fdd49e"
        };
      } else if (properties.Value === "2" AND properties.Value.Map_2_Valu === "D") {
        return {
          fillColor: "#fdbb84"
        };
	  } else if (properties.Value === "3" AND properties.Value.Map_2_Valu === "D") {
        return {
          fillColor: "#fc8d59"
        };
	  } else if (properties.Value === "4" AND properties.Value.Map_2_Valu === "D") {
        return {
          fillColor: "#e34a33"
        };
	  } else if (properties.Value === "0" AND properties.Value.Map_2_Valu === "F") {
        return {
          fillColor: "#d95f0e"
        };
	  } else if (properties.Value === "2" AND properties.Value.Map_2_Valu === "F") {
        return {
          fillColor: "#993404"
        };		
      }
    }
  
  var earthquakes = L.geoJson(layer_1, {
      pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, getOptions(feature.properties));
      }
  });

Reply all

Reply to author

Forward