Leaftlet: How to dynamically filter a GeoJSON dataset in to a series of Layer checkboxes? - leaflet

Question

I have a web page which fetches some marker pin locations from a local database and also a collection of features from a remote GeoJSON source (API).
Currently, there are two check boxes available to the user to allow them to choose which of the two layers they want to view. This all works fine:
<script>
// Center the map
var map = L.map('map').setView([54.233669, -4.406027], 6);
// Attribution
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=REMOVED', {
attribution: 'Map © OpenStreetMap',
id: 'mapbox.streets'
}).addTo(map);
// Create an empty layergroup for the Locations data
var LayerLocations = L.layerGroup();
// Format the popup markers for the Locations
function forEachFeature(feature, layer) {
// Image
var ImageContent
if (feature.properties.ImageURL) {
ImageContent = "<img src='" + feature.properties.ImageURL + "' width='300' height='200' /><br /><br />"
} else if (feature.properties.YouTubeID) {
ImageContent = "<img src='https://img.youtube.com/vi/" + feature.properties.YouTubeID + "/hqdefault.jpg' width='300' height='200' /><br /><br />"
} else {
ImageContent = ""
}
// Build the popup content
var popupContent = "<h4>" +
feature.properties.Title +
Author +
"</h4>" +
ImageContent +
CommentsContent +
"View and discuss this location.";
layer.bindPopup(popupContent);
}
// Build layer: Locations
fetch("JSONMapPoints.json")
.then(function (response) { return response.json() })
.then(function (data) {
// Create a L.GeoJSON out of the data
var locations = L.geoJson(data, {
onEachFeature: forEachFeature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "images/pins/" + feature.properties.CategoryID + ".png",
iconSize: [32, 37],
iconAnchor: [10, 32],
popupAnchor: [5, -30]
}),
})
}
});
// Add the L.GeoJSON instance to the empty layergroup
map.fitBounds(locations.getBounds());
LayerLocations.addLayer(locations).addTo(map);
});
// Create an empty layergroup for the Guardian UTM data
var LayerGuardianUTM = L.layerGroup();
// Style the Guardian UTM features
function setStyle(feature) {
return {
fillColor: feature.properties.fillColor,
color: feature.properties.strokeColor,
fillOpacity: feature.properties.fillOpacity,
opacity: feature.properties.strokeOpacity
};
}
// Build Layer: Guardian UTM
function getGuardianUTMdata() {
LayerGuardianUTM.clearLayers();
fetch("https://example.com/v2/mapdata/geojson?n=" + map.getBounds().getNorth() + "&e=" + map.getBounds().getEast() + "&s=" + map.getBounds().getSouth() + "&w=" + map.getBounds().getWest(), { headers: { 'Authorization': 'REMOVED', 'X-AA-DeviceId': 'mySite' } })
.then(function (responseGuardianUTM) { return responseGuardianUTM.json() })
.then(function (dataGuardianUTM) {
// Create a L.GeoJSON out of the data
var featuresAA = L.geoJson(dataGuardianUTM, {
style: setStyle,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, { icon: L.icon({ iconUrl: feature.properties.iconUrl }), })
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
},
});
// Add the L.GeoJSON instance to the empty layergroup
LayerGuardianUTM.addLayer(featuresAA).addTo(map);
});
}
// Update the Guardian UTM layer if the map moves
map.on('dragend', function () { getGuardianUTMdata(); });
map.on('zoomend', function () { getGuardianUTMdata(); });
// Layer controls
var layerControl = new L.Control.Layers(null, {
'Locations': LayerLocations,
'Restrictions & Hazards': LayerGuardianUTM
}).addTo(map);
</script>
I wish to increase the functionality available to the end user.
Instead of a single checkbox to turn on/off the Restrictions & Hazards layer, I wish to iterate through the GeoJSON returned from the API and dynamically build a series of checkboxes under the Layer button/icon based on the feature.properties.filters.name.
So when the user clicks on the Layers button icon they should see a series of checkboxes which would allow them to pick and choose which of the features in the GeoJSON they wish to view.
The GeoJSON returned from the API is dynamic and its content changes based on the users location and zoom level.
An example of the GeoJSON is:
{
"isCompleteData": true,
"excludedData": [],
"countriesInViewport": [],
"nationalFlightRestrictions": [],
"features": [
{
"geometry": {
"coordinates": [
[
-2.6300508975982666,
53.536331176757812
],
[
-2.6293964385986328,
53.533683776855469
],
[
-2.6288816928863525,
53.531524658203125
],
[
-2.6228303909301758,
53.529739379882813
],
[
-2.6218380928039551,
53.528053283691406
],
[
-2.6206841468811035,
53.526073455810547
]
],
"type": "LineString"
},
"id": "A05B59534A594F20583A3B8EB479F211E507F265",
"properties": {
"hazardFactor": "40",
"hazardFactorName": "Warning",
"fillColor": "#ffbb00",
"strokeColor": "#b88702",
"fillOpacity": "0.35",
"strokeWidth": "1",
"strokeOpacity": "0.8",
"detailedCategory": "power:line",
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=power_line.png",
"name": "Power Line",
"category": "groundHazard",
"filters": [
{
"name": "Ground Hazards",
"property": "show",
"active": true
}
],
"display": {
"category": "Ground Hazard",
"detailedCategory": "Power Line",
"title": "Ground Hazard",
"sections": [
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=power_line.png",
"title": "Power Hazard",
"text": "The highlighted area is believed to contain power infrastructure. Power infrastructure presents heightened risk of damage to your equipment and critical National infrastructure."
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Summary",
"text": "Yellow zones indicate regions where operation of your drone may raise security, privacy or safety concerns."
}
],
"actions": []
}
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
-2.6228303909301758,
53.529739379882813
],
"type": "Point"
},
"id": "6EB24E66D75083A4A135296C12BE004D79629818",
"properties": {
"hazardFactor": "40",
"hazardFactorName": "Warning",
"fillColor": "#ffbb00",
"strokeColor": "#b88702",
"fillOpacity": "0.35",
"strokeWidth": "1",
"strokeOpacity": "0.8",
"detailedCategory": "power:tower",
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=power_tower.png",
"name": "Power Pylon",
"category": "groundHazard",
"filters": [
{
"name": "Ground Hazards",
"property": "show",
"active": true
}
],
"display": {
"category": "Ground Hazard",
"detailedCategory": "Power Pylon",
"title": "Ground Hazard",
"sections": [
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=power_tower.png",
"title": "Power Hazard",
"text": "The highlighted area is believed to contain power infrastructure. Power infrastructure presents heightened risk of damage to your equipment and critical National infrastructure."
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Summary",
"text": "Yellow zones indicate regions where operation may raise security, privacy or safety concerns."
}
],
"actions": []
}
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
[
[
-2.6234986782073975,
53.533077239990234
],
[
-2.6215133666992187,
53.528900146484375
],
[
-2.6183879375457764,
53.529270172119141
],
[
-2.6178712844848633,
53.529655456542969
]
]
],
"type": "Polygon"
},
"id": "557952B3668AC5DF5C583BE8E8C1840D97B5ABD4",
"properties": {
"hazardFactor": "40",
"hazardFactorName": "Warning",
"fillColor": "#ffbb00",
"strokeColor": "#b88702",
"fillOpacity": "0.35",
"strokeWidth": "1",
"strokeOpacity": "0.8",
"detailedCategory": "landuse:cemetery",
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=landuse_cemetery.png",
"name": "Wigan Borough Cemetery",
"category": "groundHazard",
"filters": [
{
"name": "Ground Hazards",
"property": "show",
"active": true
}
],
"display": {
"category": "Ground Hazard",
"detailedCategory": "Cemetery",
"title": "Wigan Borough Cemetery",
"sections": [
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Summary",
"text": "Yellow zones indicate regions where operation of your drone may raise security, privacy or safety concerns."
}
],
"actions": []
}
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
[
[
-3.235,
53.53694
],
[
-3.05278,
53.45944
],
[
-3.20139,
53.38583
],
[
-3.02778,
53.24083
],
[
-2.73028,
53.10722
]
]
],
"type": "Polygon"
},
"id": "616CB45B9DA924146E9A5483843B588B36F0AD31",
"properties": {
"hazardFactor": "60",
"hazardFactorName": "Danger",
"fillColor": "#ffffff",
"strokeColor": "#ffffff",
"fillOpacity": "0.2",
"strokeWidth": "1",
"strokeOpacity": "0.8",
"detailedCategory": "type:tma",
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=class_type_tma.png",
"airac": {
"to": "2019-08-15",
"from": "2019-07-18"
},
"altitudeFloor": {
"datum": "Msl",
"meters": 1066.7999983784639,
"feet": 3499.9999946799994
},
"altitudeCeiling": {
"datum": "Sps",
"meters": 7467.5999886492482,
"feet": 24499.99996276
},
"name": "MANCHESTER TMA 1",
"listOrderHint": "1000",
"category": "airspace",
"designator": "EGCC1",
"airspaceType": "TMA",
"filters": [
{
"name": "Upper Airspace",
"property": "show",
"active": false
},
{
"name": "Type TMA",
"property": "show",
"active": true
}
],
"display": {
"category": "airspace",
"detailedCategory": "Type TMA",
"title": "MANCHESTER TMA 1",
"sections": [
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Altitude",
"text": "This piece of airspace is in effect above 1067m / 3500ft MSL"
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Terminal control area",
"text": "Control area normally established at the confluence of ATS routes in the vicinity of one or more major aerodromes."
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Regulated Airspace",
"text": "This airspace has a specific classification."
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Summary",
"text": "Red zones are regulated high-risk areas."
}
],
"actions": []
}
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
[
[
-3.05278,
53.45944
],
[
-2.06667,
53.575
],
[
-2.83333,
53.53333
],
[
-3.05278,
53.45944
]
]
],
"type": "Polygon"
},
"id": "BC69E04789D9A790DB5B29B0EE2804D42E4FA12A",
"properties": {
"hazardFactor": "60",
"hazardFactorName": "Danger",
"fillColor": "#ffffff",
"strokeColor": "#ffffff",
"fillOpacity": "0.2",
"strokeWidth": "1",
"strokeOpacity": "0.8",
"detailedCategory": "class:d",
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=class_d.png",
"airac": {
"to": "2019-08-15",
"from": "2019-07-18"
},
"altitudeFloor": {
"datum": "Msl",
"meters": 761.99999884176,
"feet": 2499.9999961999997
},
"altitudeCeiling": {
"datum": "Msl",
"meters": 1066.7999983784639,
"feet": 3499.9999946799994
},
"name": "MANCHESTER CTA 1",
"listOrderHint": "600",
"category": "airspace",
"designator": "EGCC1",
"airspaceClass": "D",
"airspaceType": "CTA",
"filters": [
{
"name": "Upper Airspace",
"property": "show",
"active": false
},
{
"name": "Class D",
"property": "show",
"active": true
}
],
"display": {
"category": "airspace",
"detailedCategory": "Class D",
"title": "MANCHESTER CTA 1",
"sections": [
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Altitude",
"text": "This piece of airspace is in effect above 762m / 2500ft MSL"
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Regulated Airspace",
"text": "This airspace has a specific classification."
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Summary",
"text": "Red zones are regulated high-risk areas."
}
],
"actions": []
}
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
[
[
-10,
54.56667
],
[
-9,
54.75
],
[
-8.25,
55.33333
]
]
],
"type": "Polygon"
},
"id": "11DD2D3CBA8992F29E49A277FC322D19FCD67066",
"properties": {
"hazardFactor": "60",
"hazardFactorName": "Danger",
"fillColor": "#ffffff",
"strokeColor": "#ffffff",
"fillOpacity": "0.2",
"strokeWidth": "1",
"strokeOpacity": "0.8",
"detailedCategory": "type:cta",
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=class_type_cta.png",
"airac": {
"to": "2019-08-15",
"from": "2019-07-18"
},
"altitudeFloor": {
"datum": "Sps",
"meters": 7467.5999886492482,
"feet": 24499.99996276
},
"altitudeCeiling": {
"datum": "Sps",
"meters": 20116.799969422464,
"feet": 65999.99989968
},
"name": "UPPER AIRSPACE CTA",
"listOrderHint": "1000",
"category": "airspace",
"designator": "EGUP",
"airspaceType": "CTA",
"filters": [
{
"name": "Upper Airspace",
"property": "show",
"active": false
},
{
"name": "Type CTA",
"property": "show",
"active": true
}
],
"display": {
"category": "airspace",
"detailedCategory": "Type CTA",
"title": "UPPER AIRSPACE CTA",
"sections": [
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Altitude",
"text": "This piece of airspace is in effect above FL244.9999996276"
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Control area",
"text": "A controlled airspace extending upwards from a specified limit above the earth."
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Regulated Airspace",
"text": "This airspace has a specific classification."
},
{
"iconUrl": "https://aa-ne-prod-public-api.example.com//v1/map/icon?icon=warning.png",
"title": "Summary",
"text": "Red zones are regulated high-risk areas."
}
],
"actions": []
}
},
"type": "Feature"
}
],
"bbox": [
-2.6261,
53.5288,
-2.6201,
53.5308
],
"type": "FeatureCollection"
}
Based on the example GeoJSON the Layers button should contain checkboxes for:
Locations
Ground Hazards
Upper Airspace
Is this even possible?!

Answer 1

Create more than one L.GeoJSON instance, and leverage their filter option:
A Function that will be used to decide whether to include a feature or not. The default is to include all features:
function (geoJsonFeature) {
return true;
}
Note: dynamically changing the filter option will have effect only on newly added data. It will not re-evaluate already included features.
e.g.:
fetch("JSONMapPoints.json")
.then(function (response) { return response.json() })
.then(function (data) {
var locations = L.geoJson(data, {
filter: function(feat) { return feat.properties.filters.name === 'Location'},
/* etc */
});
var hazards = L.geoJson(data, {
filter: function(feat) { return feat.properties.filters.name === 'Hazard'},
/* etc */
});
var airspace = L.geoJson(data, {
filter: function(feat) { return feat.properties.filters.name === 'Air Space'},
/* etc */
});
});
With those different L.GeoJSON instances, adding them to a layers control is just a matter of calling addOverlay(), e.g.
layersControl.addOverlay(locations, "Locations");
layersControl.addOverlay(hazards, "Hazards);
layersControl.addOverlay(airspace, "Air Space");
Beware of scope, though. A newbie JS mistake is to assume that a variable will magically exist in the scope where it's needed. In this particular case, I would ensure that the layers control is already instantiated when the GeoJSON layers are created, and add them to said layers control.
A more convoluted approach would be to automatically detect the categories or filters, iterating through the GeoJSON structure to get them, e.g.:
fetch("JSONMapPoints.json")
.then(function (response) { return response.json() })
.then(function (data) {
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
var categories = new Set();
for (var i in data) {
var feature = data[i];
categories.add(feature.properties.filters.name);
}
Then iterate through the categories to programmatically create the L.GeoJSON instances, paying attention to the appropriate closures:
categories.forEach(function(category) {
var layer = L.geoJSON(data, {
filter: function(f){ f.properties.filters.name === category }
/* etc */ });
layersControl.addOverlay(layer, category);
});
// And we're done here.
});
This is a bit over-engineered for a dataset needing three filters, but would work nicely when there's a larger amount.