CORE-4887 Add icon style

modules/map/map.jsx

@@ -1,12 +1,10 @@
 import React, { useRef, useEffect } from 'react'
 import L from 'leaflet'
 
-import styles from './styles.module.css'
-
 import { getAssetsPath } from 'utils/helpers'
 
-// somewhere in the middle of North Atlantic ocean
-const centerPosition = new L.LatLng(26.523257520856546, -43.10211013159716)
+// const centerPosition = new L.LatLng(26.523257520856546, -43.10211013159716)
+const centerPosition = new L.LatLng(50, 10)
 
 const markerIcon = L.icon({
   iconUrl: getAssetsPath('/static/images/map/marker.svg'),
@@ -24,8 +22,10 @@ const CustomMap = ({ locations }) => {
     // Initialize the map
     if (!mapRef.current) {
       mapRef.current = L.map('map', {
-        center: [50, 10], // Default center of the map
-        zoom: 3, // Default zoom level
+        center: centerPosition,
+        zoom: 7,
+        minZoom: 1,
+        maxZoom: 12,
         layers: [
           L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution:
@@ -39,7 +39,10 @@ const CustomMap = ({ locations }) => {
     const markers = markersData.map((markerData) => {
       const { name, href, latitude, longitude } = markerData
       const latLng = new L.LatLng(latitude, longitude)
-      const marker = L.marker(latLng).addTo(mapRef.current)
+      const marker = L.marker(latLng, {
+        title: name,
+        icon: markerIcon,
+      }).addTo(mapRef.current)
       if (href) {
         marker.bindPopup(
           `<a
@@ -64,7 +67,7 @@ const CustomMap = ({ locations }) => {
     }
   }, [markersData])
 
-  return <div id="map" style={{ height: '100vh', width: '100%' }} />
+  return <div id="map" style={{ height: '40vh', width: '100%' }} />
 }
 
 export default CustomMap