From 3d94fd9e4946df2d4d0bf88aa56181849e859bd1 Mon Sep 17 00:00:00 2001
From: Alireza Adli <alireza.adli@mail.concordia.ca>
Date: Thu, 5 Oct 2023 11:40:36 -0400
Subject: [PATCH] Replace CityBaseMapLayer with CityMap

---
 .../map/layers/city-base-map-layer.tsx        | 50 ++++++++-----------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/app/src/frontend/map/layers/city-base-map-layer.tsx b/app/src/frontend/map/layers/city-base-map-layer.tsx
index 40537b0c..185beb33 100644
--- a/app/src/frontend/map/layers/city-base-map-layer.tsx
+++ b/app/src/frontend/map/layers/city-base-map-layer.tsx
@@ -1,38 +1,30 @@
-import * as React from 'react';
-import { TileLayer } from 'react-leaflet';
+import React, { useEffect } from 'react';
+import mapboxgl from 'mapbox-gl';
 
-import { MapTheme } from '../../config/map-config';
-
-const OS_API_KEY = 'UVWEspgInusDKKYANE5bmyddoEmCSD4r';
+// Set your Mapbox access token
+mapboxgl.accessToken = 'pk.eyJ1IjoiYWxpLWFkbGkiLCJhIjoiY2xuM2JtYjV1MGE5djJrb2d5OGp1ZWNyNiJ9.gENyP4xX6ElLAeZFlE0aDg';
 
 /**
- * Base raster layer for the map.
- * @param theme map theme
+ * Component to display a Mapbox map.
  */
-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
+    });
 
-    /**
-     * Ordnance Survey maps - UK / London specific
-     * (replace with appropriate base map for other cities/countries)
-     */
-    const apiKey = OS_API_KEY;
+    // Optionally, you can add more configuration options or features to your map here.
 
-    // Note that OS APIs does not provide dark theme
-    const layer = 'Light_3857';
+    // Cleanup the map when the component unmounts
+    return () => map.remove();
+  }, []);
 
-    // In either theme case, we will use OS's light theme, but add our own filter
-    const theme_class = theme === 'light' ? "light-theme" : "night-theme";
-
-    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}
-    />;
+  return (
+    <div id="map" style={{ width: '100%', height: '400px' }}></div>
+  );
 }
 
+export default CityMap;