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?
color
for popup. – TomazicM Aug 2 '19 at 20:57onEachFeature
code above, how would I go about adding the correct color to each polygon or marker returned in the GeoJSON? – Rich Aug 3 '19 at 12:19LayerAA.addLayer(locationsAA).addTo(map);
in toL.geoJson(locationsAA).addTo(map);
in order to then progress with the other changes (as simply swapping them doesn't work). – Rich Aug 3 '19 at 15:54