From 69a3f71e11a180855e83e31725bab3703ceb1f1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A1muel=20Fekete?= <feketesamu@gmail.com>
Date: Wed, 11 Dec 2024 21:28:56 +0100
Subject: [PATCH 1/3] feat: use mapbox tilelayer as base

---
 src/components/Map/Map.tsx | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 195ebbed..f93583c1 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -3,17 +3,10 @@ import 'leaflet/dist/leaflet.css';
 import { Feature, FeatureCollection, GeoJSON, GeoJsonProperties, Geometry } from 'geojson';
 import L, { Map as LeafletMap } from 'leaflet';
 import { useEffect, useRef, useState } from 'react';
-import { GeoJSON as LeafletGeoJSON, MapContainer, Pane, SVGOverlay, TileLayer } from 'react-leaflet';
+import { GeoJSON as LeafletGeoJSON, MapContainer, Pane, TileLayer } from 'react-leaflet';
 
 import BackToGlobalButton from '@/components/Map/BackToGlobalButton';
-import {
-  countryBaseStyle,
-  countryBorderStyle,
-  disputedAreaStyle,
-  MAP_MAX_ZOOM,
-  MAP_MIN_ZOOM,
-  oceanBounds,
-} from '@/domain/constant/map/Map';
+import { countryBorderStyle, disputedAreaStyle, MAP_MAX_ZOOM, MAP_MIN_ZOOM } from '@/domain/constant/map/Map';
 import { useSelectedAlert } from '@/domain/contexts/SelectedAlertContext';
 import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext';
 import { useSelectedMap } from '@/domain/contexts/SelectedMapContext';
@@ -109,7 +102,12 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
       <ZoomControl threshold={5} callback={onZoomThresholdReached} />
       <BackToGlobalButton />
 
-      <Pane name="ocean" style={{ zIndex: 0 }}>
+      <Pane name="roads" style={{ zIndex: 1 }}>
+        <TileLayer
+          url={`https://api.mapbox.com/styles/v1/feketesamu/cm4h3vg16012n01r1cz47horn/tiles/256/{z}/{x}/{y}?access_token=${process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}`}
+        />
+      </Pane>
+      {/* <Pane name="ocean" style={{ zIndex: 0 }}>
         <SVGOverlay bounds={oceanBounds}>
           <rect width="100%" height="100%" fill="hsl(var(--nextui-ocean))" />
         </SVGOverlay>
@@ -120,7 +118,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
           data={MapOperations.convertCountriesToFeatureCollection(countries.features)}
           style={countryBaseStyle}
         />
-      </Pane>
+      </Pane> */}
       {selectedMapType === GlobalInsight.FOOD && countries.features && (
         <>
           {countries.features.map((country) => (
@@ -188,9 +186,6 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
           style={disputedAreaStyle}
         />
       </Pane>
-
-      <ZoomControl threshold={5} callback={onZoomThresholdReached} />
-      <BackToGlobalButton />
     </MapContainer>
   );
 }

From 218422e5718914ed891806223d3c887fb51bfdfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A1muel=20Fekete?= <feketesamu@gmail.com>
Date: Wed, 11 Dec 2024 22:18:28 +0100
Subject: [PATCH 2/3] feat: show ocean bg

---
 src/components/Map/Map.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index f93583c1..d25f05b0 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -3,10 +3,16 @@ import 'leaflet/dist/leaflet.css';
 import { Feature, FeatureCollection, GeoJSON, GeoJsonProperties, Geometry } from 'geojson';
 import L, { Map as LeafletMap } from 'leaflet';
 import { useEffect, useRef, useState } from 'react';
-import { GeoJSON as LeafletGeoJSON, MapContainer, Pane, TileLayer } from 'react-leaflet';
+import { GeoJSON as LeafletGeoJSON, MapContainer, Pane, SVGOverlay, TileLayer } from 'react-leaflet';
 
 import BackToGlobalButton from '@/components/Map/BackToGlobalButton';
-import { countryBorderStyle, disputedAreaStyle, MAP_MAX_ZOOM, MAP_MIN_ZOOM } from '@/domain/constant/map/Map';
+import {
+  countryBorderStyle,
+  disputedAreaStyle,
+  MAP_MAX_ZOOM,
+  MAP_MIN_ZOOM,
+  oceanBounds,
+} from '@/domain/constant/map/Map';
 import { useSelectedAlert } from '@/domain/contexts/SelectedAlertContext';
 import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext';
 import { useSelectedMap } from '@/domain/contexts/SelectedMapContext';
@@ -107,12 +113,12 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
           url={`https://api.mapbox.com/styles/v1/feketesamu/cm4h3vg16012n01r1cz47horn/tiles/256/{z}/{x}/{y}?access_token=${process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}`}
         />
       </Pane>
-      {/* <Pane name="ocean" style={{ zIndex: 0 }}>
+      <Pane name="ocean" style={{ zIndex: 0 }}>
         <SVGOverlay bounds={oceanBounds}>
           <rect width="100%" height="100%" fill="hsl(var(--nextui-ocean))" />
         </SVGOverlay>
       </Pane>
-      <Pane name="countries_base" style={{ zIndex: 1 }}>
+      {/* <Pane name="countries_base" style={{ zIndex: 1 }}>
         <LeafletGeoJSON
           interactive={false}
           data={MapOperations.convertCountriesToFeatureCollection(countries.features)}

From b3a051291fd0cc3e185fef52256f7dbb23df374b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A1muel=20Fekete?= <feketesamu@gmail.com>
Date: Wed, 11 Dec 2024 22:30:53 +0100
Subject: [PATCH 3/3] feat: remove country border leaflet layer

---
 src/components/Map/Map.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index d25f05b0..28e66751 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -6,13 +6,7 @@ import { useEffect, useRef, useState } from 'react';
 import { GeoJSON as LeafletGeoJSON, MapContainer, Pane, SVGOverlay, TileLayer } from 'react-leaflet';
 
 import BackToGlobalButton from '@/components/Map/BackToGlobalButton';
-import {
-  countryBorderStyle,
-  disputedAreaStyle,
-  MAP_MAX_ZOOM,
-  MAP_MIN_ZOOM,
-  oceanBounds,
-} from '@/domain/constant/map/Map';
+import { disputedAreaStyle, MAP_MAX_ZOOM, MAP_MIN_ZOOM, oceanBounds } from '@/domain/constant/map/Map';
 import { useSelectedAlert } from '@/domain/contexts/SelectedAlertContext';
 import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext';
 import { useSelectedMap } from '@/domain/contexts/SelectedMapContext';
@@ -180,12 +174,12 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
         />
       )}
 
-      <Pane name="countries_border" style={{ zIndex: 3 }}>
+      {/* <Pane name="countries_border" style={{ zIndex: 3 }}>
         <LeafletGeoJSON
           data={MapOperations.convertCountriesToFeatureCollection(countries.features)}
           style={countryBorderStyle}
         />
-      </Pane>
+      </Pane> */}
       <Pane name="disputed_areas" style={{ zIndex: 4 }}>
         <LeafletGeoJSON
           data={MapOperations.convertCountriesToFeatureCollection(disputedAreas.features)}