1

I have a web page which fetches some remote GeoJSON and displays a combination of marker points, polygons and lines on my map.

Within that JSON is the fillColor, fillOpacity, etc that I wish to use for each polygon.

Here's an excerpt of the GeoJSON which is returned:

{
    "geometry": {
    "coordinates": [
        [
        [
            -2.4710206012402689,
            53.470236995186752
        ],
        [
            -2.4691196881249033,
            53.4613205079861
        ],
        [
            -2.4681978304127927,
            53.461390191450619
        ],
        [
            -2.4681448784765276,
            53.461140769261917
        ],
        [
            -2.4710206012402689,
            53.470236995186752
        ]
        ]
    ],
    "type": "Polygon"
    },
    "id": "CE71BB87D309C9199DC60BC7586774468D2AE99C",
    "properties": {
    "hazardFactor": "60",
    "hazardFactorName": "Danger",
    "fillColor": "#FF0055",
    "strokeColor": "#BF0442",
    "fillOpacity": "0.35",
    "strokeWidth": "1",
    "strokeOpacity": "0.8",
    "detailedCategory": "uk:frz",
    "iconUrl": "https://domain.com//v1/map/icon?icon=uk_frz.png",
    "name": "Manchester/barton",
    "pointOfContact": "0161-789 1362 (Administration and Operations)",
    "listOrderHint": "1000",
    "category": "airspace",
    "designator": "EGCB",
    "filters": [
        {
        "name": "Airspace",
        "property": "show",
        "active": true
        },
        {
        "name": "Fight Restriction Zone",
        "property": "show",
        "active": true
        }
    ],
    "display": {
        "category": "airspace",
        "detailedCategory": "Flight Restriction Zone",
        "title": "Manchester/barton",
        "sections": [
        {
            "iconUrl": "https://domain.com//v1/map/icon?icon=warning.png",
            "title": "Flight Restriction Zone",
            "text": "Flight Restriction Zones surround certain protected aerodromes. To Fly in this area you will need permission from Air Traffic Control or the Flight Information Service at this aerodrome."
        },
        {
            "iconUrl": "https://domain.com//v1/map/icon?icon=warning.png",
            "title": "Summary",
            "text": "Red zones are regulated high-risk areas."
        }
        ],
        "actions": []
    }
    },
    "type": "Feature"
},

I wish to loop through each item and apply the style settings to each polygon, based on the returned feature.properties.fillColor and feature.properties.fillOpacity and so on.

Here's my code.

The polygons, markers and lines all display correctly but they are all in the default Blue color and seem to be ignoring my requests to use the fillColor value in the GeoJSON.

// Create an empty layergroup for the data
var LayerAA = L.layerGroup();

// Build Layer: AA
function getAAdata() {
    LayerAA.clearLayers();
    fetch("/v2/mapdata/geojson?n=" + map.getBounds().getNorth() + "&e=" + map.getBounds().getEast() + "&s=" + map.getBounds().getSouth() + "&w=" + map.getBounds().getWest())
      .then(function (responseAA) { return responseAA.json() })
      .then(function (dataAA) {

          // Create a L.GeoJSON out of the data
          var locationsAA = L.geoJson(dataAA, {

              onEachFeature: function (feature, layer) {
                  layer.bindPopup(feature.properties.name, { color: feature.properties.fillColor });
              },

              // Filter out CTA & TMA airspace types
              filter: function (feature, layer) {
                  return (feature.properties.airspaceType !== "CTA" && feature.properties.airspaceType !== "TMA");
              },

          });

          // Add the L.GeoJSON instance to the empty layergroup
          LayerAA.addLayer(locationsAA).addTo(map);

      });

}

Why does this not work?

  • Leaflet choropleth example should point you in the right direction: leafletjs.com/examples/choropleth. As your code is now, you are just setting nonexisting option color for popup. – TomazicM Aug 2 at 20:57
  • So I'm adding the color code in the wrong place? Using my onEachFeature code above, how would I go about adding the correct color to each polygon or marker returned in the GeoJSON? – Rich Aug 3 at 12:19
  • Did you have a look at leafletjs.com/examples/choropleth? There you can see how it has to be done. What you learn yourself, you will remember, what others tell you, you'll forget. – TomazicM Aug 3 at 13:20
  • Hi there, yes I did indeed study it but I couldn't work out how to transform my existing LayerAA.addLayer(locationsAA).addTo(map); in to L.geoJson(locationsAA).addTo(map); in order to then progress with the other changes (as simply swapping them doesn't work). – Rich Aug 3 at 15:54
3

If you take a look at Leaflet docs about creating GeoJSON layer (which you should), you will see there is style option by which you can set dynamic styling function, which can set feature style depending on feature properties.

That's exactly what is done in Leaflet choropleth example, where GeoJSON layer is created with dynamic style, exactly as you want:

function style(feature) {
    return {
        fillColor: getColor(feature.properties.density),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

L.geoJson(statesData, {style: style}).addTo(map);

In your case this would be something like:

function setStyle(feature) {
  return {
    fillColor: feature.properties.fillColor,
    color: feature.properties.strokeColor,
    fillOpacity: feature.properties.fillOpacity,
    opacity: feature.properties.strokeOpacity
  };
}
function getAAdata() {
...
    var locationsAA = L.geoJson(dataAA, {
        style: setStyle,
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.name, { color: feature.properties.fillColor });
        },
        filter: function (feature, layer) {
            return (feature.properties.airspaceType !== "CTA" && feature.properties.airspaceType !== "TMA");
        },
    });
...
}
  • Ohh I seeeee!!!! Your example has worked perfectly, thank you for your patience and detailed example @TomazicM - I am very grateful!! – Rich Aug 3 at 17:08

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.