Add borders for satellite map view

- Manually copypasted a json denoting all the border coordinates of the world. Source - https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson
- This was easier than using a module.
- Sub-country level border unavailable in the copypasted data. I won't add it as it'll make it messier.

README.md

@@ -22,4 +22,5 @@ pinned: false
 
 ## Resources
 - [Geodesic Area calculator](https://geographiclib.sourceforge.io/cgi-bin/Planimeter?type=polygon&rhumb=geodesic&radius=6378137&flattening=1%2F298.257223563&input=40.7128%2C+-74.0060%0D%0A34.0522%2C+-118.2437%0D%0A51.5074%2C+0.1278&option=Submit)
-- [Area calculator function in geographiclib-geodesic module's codebase](https://github.com/geographiclib/geographiclib-js/blob/main/geodesic/PolygonArea.js)
+- [Area calculator function in geographiclib-geodesic module's codebase](https://github.com/geographiclib/geographiclib-js/blob/main/geodesic/PolygonArea.js)
+- [Country border data](https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson)

frontend/src/components/Map.js

@@ -9,7 +9,7 @@ import { MapContainer, TileLayer,
         Polyline,
         Tooltip,
         Polygon,
-        // GeoJSON
+        GeoJSON
     } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
@@ -78,6 +78,8 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
 
     const [viewPanelOpen, setViewPanelOpen] = useState(true);
     
+    const [countryBorders, setCountryBorders] = useState(null);
+
     const handleMouseDown = (e) => {
         isDragging.current = true;
         startX.current = e.clientX;
@@ -294,6 +296,14 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
         }
     }, [geoToolMode, areaPoints]);
 
+    useEffect(() => {
+        if (!countryBorders) {
+            fetch('/data/countryBorders.json')
+                .then(res => res.json())
+                .then(data => setCountryBorders(data))
+                .catch(err => console.error("Failed to load country borders:", err));
+        }
+    }, [countryBorders]);
 
     const wrapCount = 3;
 
@@ -340,6 +350,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
 
     // const longitudeLines = generateLongitudeLines(30, 1);
 
+
     return (
         <div ref={containerRef} style={{ display: 'flex', height: '100vh', width: '100%', overflow: 'hidden' }}>
             {panelSize !== 'closed' && (
@@ -496,13 +507,24 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
                     {baseLayer === "satellite" && (
                     <>
                         <TileLayer
-                        url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
-                        attribution='&copy; <a href="https://www.esri.com/">Esri</a> & contributors'
+                            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
+                            attribution='&copy; <a href="https://www.esri.com/">Esri</a> & contributors'
                         />
                         <TileLayer
-                        url="https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png"
-                        attribution='&copy; CartoDB'
+                            url="https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png"
+                            attribution='&copy; CartoDB'
                         />
+                        {countryBorders && (
+                            <GeoJSON
+                                data={countryBorders}
+                                style={{
+                                    color: '#ffff99',
+                                    weight: 1.5,
+                                    opacity: 0.8,
+                                    fillOpacity: 0.1,
+                                }}
+                            />
+                        )}
                     </>
                     )}