Merge branch 'feat/change-map-theme' into 'main'

feat: change map theme

Closes #3

See merge request !3

.env.example

 VITE_PUBLIC_MAPBOX_TOKEN=abc123
+
+# Map style is optional and not necessary if you want to keep the default "light" theme. 
+VITE_MAP_STYLE="mapbox://styles/mapbox/dark-v11"

src/components/FabCityMap.tsx

@@ -16,9 +16,10 @@ interface Props {
   mapboxToken: string;
   className?: string;
   baseUrl?: string;
+  mapStyle?: string;
 }
 
-const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl }) => {
+const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl, mapStyle }) => {
   const selectedPoi = useStore((state) => state.selectedPoi);
   const setPoiData = useStore((state) => state.setPoiData);
 
@@ -37,7 +38,7 @@ const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl })
           }`}
         >
           <Route path="/">
-            <Map mapboxToken={mapboxToken} />
+            <Map mapboxToken={mapboxToken} mapStyle={mapStyle} />
           </Route>
           <Route path="/poi/:poiId">{({ match }) => <PoiLoader poiId={match?.params?.poiId as string} />}</Route>
           <Route exact path="/">

src/components/Map/Map.tsx

@@ -9,6 +9,7 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 
 interface Props {
   mapboxToken: string;
+  mapStyle?: string;
 }
 
 interface MarkerProps {
@@ -26,7 +27,7 @@ const MarkerSvg: React.FC<MarkerProps> = ({ className }) => {
   );
 };
 
-const Map: React.FC<Props> = ({ mapboxToken }) => {
+const Map: React.FC<Props> = ({ mapboxToken, mapStyle }) => {
   const history = useHistory();
   const data = useStore((state) => state.poiData);
   const selectedPoi = useStore((state) => state.selectedPoi);
@@ -56,7 +57,7 @@ const Map: React.FC<Props> = ({ mapboxToken }) => {
         zoom: 10,
       }}
       style={{ width: '100%', height: '100%' }}
-      mapStyle="mapbox://styles/mapbox/streets-v11"
+      mapStyle={mapStyle ?? 'mapbox://styles/mapbox/light-v11'}
       mapboxAccessToken={mapboxToken}
       maxPitch={0}
       id="fcmap"

src/env.d.ts

 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_MAPBOX_TOKEN: string
+  readonly VITE_PUBLIC_MAPBOX_TOKEN: string;
+  readonly VITE_MAP_STYLE: string;
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv
-}
\ No newline at end of file
+  readonly env: ImportMetaEnv;
+}