Replace CityBaseMapLayer with CityMap

app/src/frontend/map/layers/city-base-map-layer.tsx

@@ -1,38 +1,30 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
-import { TileLayer } from 'react-leaflet';
+import mapboxgl from 'mapbox-gl';
 
-import { MapTheme } from '../../config/map-config';
+// Set your Mapbox access token
-
+mapboxgl.accessToken = 'pk.eyJ1IjoiYWxpLWFkbGkiLCJhIjoiY2xuM2JtYjV1MGE5djJrb2d5OGp1ZWNyNiJ9.gENyP4xX6ElLAeZFlE0aDg';
-const OS_API_KEY = 'UVWEspgInusDKKYANE5bmyddoEmCSD4r';
 
 /**
- * Base raster layer for the map.
+ * Component to display a Mapbox map.
- * @param theme map theme
  */
-export function CityBaseMapLayer({ theme }: { theme: MapTheme }) {
+function CityMap() {
+  useEffect(() => {
+    const map = new mapboxgl.Map({
+      container: 'map', // container ID
+      style: 'mapbox://styles/mapbox/streets-v12', // style URL
+      center: [45.4962261, -73.5801403], // starting position [lng, lat]
+      zoom: 9, // starting zoom
+    });
 
-    /**
+    // Optionally, you can add more configuration options or features to your map here.
-     * Ordnance Survey maps - UK / London specific
-     * (replace with appropriate base map for other cities/countries)
-     */
-    const apiKey = OS_API_KEY;
 
-    // Note that OS APIs does not provide dark theme
+    // Cleanup the map when the component unmounts
-    const layer = 'Light_3857';
+    return () => map.remove();
+  }, []);
 
-    // In either theme case, we will use OS's light theme, but add our own filter
+  return (
-    const theme_class = theme === 'light' ? "light-theme" : "night-theme";
+    <div id="map" style={{ width: '100%', height: '400px' }}></div>
-
+  );
-    const baseUrl = `https://api.os.uk/maps/raster/v1/zxy/${layer}/{z}/{x}/{y}.png?key=${apiKey}`;
-    const attribution = `Building attribute data is © Colouring Cities contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines. <a href=/ordnance-survey-licence.html>OS licence</a>`;
-
-    return <TileLayer
-        url={baseUrl}
-        attribution={attribution}
-        maxNativeZoom={18}
-        maxZoom={19}
-        detectRetina={false}
-        className={theme_class}
-    />;
 }
 
+export default CityMap;