From 687f66cb0ccf2bc3b29e6ae591ad27fff9b16795 Mon Sep 17 00:00:00 2001 From: Dilwoar Hussain Date: Wed, 9 Oct 2024 16:19:40 +0100 Subject: [PATCH] Add map controls ## Context: - The map interface is missing controls to enable the user to interact with it. - Users can move about the map using pinch-to-zoom controls on their trackpads, but they might not be aware of this, and might be using a mouse. - We should add these controls in to the map interface. - The controls need to be added in the JS set up: https://maplibre.org/maplibre-gl-js/docs/examples/navigation/ --- src/assets/js/map.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/assets/js/map.js b/src/assets/js/map.js index 7386452df..db0572e79 100644 --- a/src/assets/js/map.js +++ b/src/assets/js/map.js @@ -24,15 +24,19 @@ const opacity = 0.4 */ class Map { constructor (opts) { + this.mapId = opts.containerId this.bbox = opts.boundingBox ?? null this.map = new maplibregl.Map({ - container: opts.containerId, + container: this.mapId, style: 'https://api.maptiler.com/maps/basic-v2/style.json?key=ncAXR9XEn7JgHBLguAUw', zoom: 11, center: [-0.1298779, 51.4959698], interactive: opts.interactive ?? true }) + // Add map controls + this.addControls(opts.interactive) + this.map.on('load', () => { // Store the first symbol layer id this.setFirstMapLayerId() @@ -49,6 +53,15 @@ class Map { }) } + addControls (interactive = true) { + this.map.addControl(new maplibregl.ScaleControl(), 'bottom-left') + + if (interactive) { + this.map.addControl(new maplibregl.NavigationControl()) + this.map.addControl(new maplibregl.FullscreenControl()) + } + } + setFirstMapLayerId () { const layers = this.map.getStyle().layers