Optional POI overlay

[carlhiggs]

An option to overlay groups of POIs would be a nice feature. For example, a set of destinations, or two groups of destinations (baseline and intervention).

A first pass at this has been attempted, but not straight out working.

Relevant MapLibre example: https://maplibre.org/maplibre-gl-js/docs/examples/filter-markers/

The idea is that an overlay could optionally be defined in a data story, something like this:

jibe-vis/app/src/components/vis/stories/stories.json

Lines 159 to 186 in 1b2eb2e

	"overlays": [
	{
	"id": "POIs",
	"source": "20mnMelbourne",
	"source-layers": {
	"jibe_20mnMelbourne_intervention_locations_bus": {"name": "Bus stops", "icon": "bus"},
	"jibe_20mnMelbourne_intervention_locations_restaurant_cafe": {"name": "Cafes / Restaurants", "icon": "cafe"},
	"jibe_20mnMelbourne_intervention_locations_childcare": {"name": "Childcare centres", "icon": "childcare"},
	"jibe_20mnMelbourne_intervention_locations_community_centre_library": {"name": "Community centres / Libraries", "icon": "town_hall"},
	"jibe_20mnMelbourne_intervention_locations_convenience": {"name": "Convenience stores", "icon": "convenience_store"},
	"jibe_20mnMelbourne_intervention_locations_dentist": {"name": "Dentists", "icon": "dentist"},
	"jibe_20mnMelbourne_intervention_locations_gp": {"name": "GPs", "icon": "gp"},
	"jibe_20mnMelbourne_intervention_locations_kindergarten": {"name": "Kindergartens", "icon": "playground"},
	"jibe_20mnMelbourne_intervention_locations_maternal_child_health": {"name": "Maternal & child health centres", "icon": "hospital"},
	"jibe_20mnMelbourne_intervention_locations_park": {"name": "Parks", "icon": "park"},
	"jibe_20mnMelbourne_intervention_locations_pharmacy": {"name": "Pharmacies", "icon": "pharmacy"},
	"jibe_20mnMelbourne_intervention_locations_post": {"name": "Post offices", "icon": "post"},
	"jibe_20mnMelbourne_intervention_locations_primary": {"name": "Primary schools", "icon": "school"},
	"jibe_20mnMelbourne_intervention_locations_supermarket": {"name": "Supermarkets", "icon": "grocery"}
	},
	"style": "outline",
	"style_options": {
	"line-color": "rgba(0,0,0,0.5)",
	"line-width": 1
	},
	"minzoom": 10
	}
	],

When optionally specified, this overlay would then be added to the map using something like this:

jibe-vis/app/src/components/vis/map/map.tsx

Lines 142 to 195 in 1b2eb2e

	// Add overlay filter group if defined
	const filterGroup = document.getElementById('filter-group')
	if (scenario.overlays && filterGroup) {
	scenario.overlays.forEach((overlays: any) => {
	// console.log(overlays.source);
	if (overlays["source-layers"]) {
	Object.keys(overlays["source-layers"]).forEach((over_layer: any) => {
	const symbol = overlays["source-layers"][over_layer].icon;
	const name = overlays["source-layers"][over_layer].name;
	if (!map.current!.getLayer(over_layer)) {
	const overlay_style = {
	'id': over_layer,
	'type': 'symbol' ,
	'source': overlays.source,
	'source-layer': over_layer,
	'layout': {
	'icon-image': `${symbol}_15`,
	'icon-overlap': 'always'
	},
	'filter': ['==', 'name', name]
	};
	map.current!.addLayer(overlay_style as maplibregl.LayerSpecification);
	// console.log(overlay_style);
	// console.log(map.current!.getLayer(over_layer));
	// log all data from this layer
	// const features = map.current!.querySourceFeatures(over_layer, {
	// sourceLayer: over_layer, // Replace with your source layer
	// });
	// console.log('Queried features:', features);
	// Add checkbox and label elements for the layer.
	const input = document.createElement('input');
	input.type = 'checkbox';
	input.id = over_layer;
	input.checked = true;
	filterGroup.appendChild(input);
	const label = document.createElement('label');
	label.setAttribute('for', over_layer);
	label.textContent = name;
	filterGroup.appendChild(label);
	// console.log(filterGroup);
	// When the checkbox changes, update the visibility of the layer.
	input.addEventListener('change', (e) => {
	map.current!.setLayoutProperty(
	over_layer,
	'visibility',
	(e.target as HTMLInputElement).checked ? 'visible' : 'none'
	);
	});
	}
	});
	}

This populates a list of POI layers, like in image below -- but the POIs aren't appearing on the map:

So, more work is required.

Additionally,

• need to consider how attribution for these layers is handled and added to map
• the overlay menu should be collapsible to an icon so it isn't always fully visible; but that's just a minor style thing.