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

@@ -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