map changes, country borders, the last push on a wrong branch

frontend/src/components/Map/LocalitiesMap.tsx

@@ -5,9 +5,6 @@ import L, { LatLngExpression } from 'leaflet'
 import { borders } from './country_borders_WGS84'
 
 
-console.log(borders)
-
-
 export const LocalitiesMap = () => {
   const mapRef = useRef<HTMLDivElement | null>(null)
   const { data: localitiesQueryData, isFetching: localitiesQueryIsFetching } = useGetAllLocalitiesQuery()
@@ -16,15 +13,29 @@ export const LocalitiesMap = () => {
     if (!mapRef.current || localitiesQueryIsFetching) return
 
     const map = L.map(mapRef.current)
-    const coords: LatLngExpression = [60.204637, 24.962123]
+    const coords: LatLngExpression = [15, 13]
 
     map.setView(coords, 2)
-
-    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    
+    // BASE MAPS  
+    // OpenStreetMap
+    const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       noWrap: true,
     }).addTo(map)
 
+    // OpenTopoMap
+    const topomap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+      attribution: 'Map data: © <a href="https://opentopomap.org">OpenTopoMap</a> (CC-BY-SA)',
+    }).addTo(map);
+
+    // LAYERS ON TOP OF BASE MAPS
+    // Add borders to the map
+    const countryBorders = borders.forEach(poly => {
+        L.polygon(poly, {color: 'gray', weight: 1,}).addTo(map);
+    });
+
+    // Localities marker layer
     localitiesQueryData?.forEach(locality =>
       L.marker([locality.dec_lat, locality.dec_long]).addTo(map).bindPopup(locality.loc_name)
     )