Add OpenLayers map WIP

package.json

@@ -23,6 +23,7 @@
     "i18next-resources-to-backend": "^1.2.1",
     "mongodb": "^6.8.0",
     "next": "^14.2.5",
+    "ol": "^10.0.0",
     "react": "18.3.1",
     "react-cookie": "^7.2.0",
     "react-dom": "18.3.1",

src/api/map/index.ts

@@ -0,0 +1,12 @@
+import type { MapCoordinates, MapResponse } from 'src/types/map'
+
+
+export const getMapCoordinates = async (address: string): Promise<MapCoordinates> => {
+  const response = await fetch(
+    `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json`
+  )
+  const data: MapResponse[] = await response.json()
+  console.log('data', data)
+
+  return [parseFloat(data[0].lon), parseFloat(data[0].lat)]
+}

src/app/[locale]/places/[placeId]/page.tsx

@@ -4,7 +4,9 @@ import type { Metadata } from 'next'
 
 import styles from './place.module.css'
 
+import { getMapCoordinates } from 'src/api/map'
 import { getPlace } from 'src/api/place'
+import { GeoMap } from 'src/components/geo-map'
 import { SafeImage } from 'src/components/safe-image'
 import { getTranslationServer } from 'src/helpers/utils/getTranslationServer'
 import { isImageSecure } from 'src/helpers/utils/isImageSecure'
@@ -31,6 +33,7 @@ export default async function PlacePage({ params }: PlacePageProps) {
   const { t } = await getTranslationServer({ locale: params.locale, namespace: 'places' })
 
   const place = await getPlace(params.placeId)
+  const placeCoordinates = await getMapCoordinates(place.address)
 
   let placeMeta: PlaceMeta
   try {
@@ -54,6 +57,10 @@ export default async function PlacePage({ params }: PlacePageProps) {
           </a>
         </section>
 
+        <section className={styles.uaplace_section}>
+          <GeoMap address={place.address} coordinates={placeCoordinates}/>
+        </section>
+
         {place.site && (
           <section className={styles.uaplace_section}>
             <h4>{t('form.website')}</h4>

src/components/geo-map/geo-map.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { Map, View } from 'ol'
+import { Tile as TileLayer } from 'ol/layer'
+import 'ol/ol.css'
+import { fromLonLat } from 'ol/proj'
+import { OSM } from 'ol/source'
+import type { FC } from 'react'
+import { useEffect, useRef } from 'react'
+
+import { MAP_ZOOM_LEVEL } from 'src/helpers/config/map'
+import type { MapCoordinates } from 'src/types/map'
+
+
+type GeoMapProps = {
+  address: string
+  coordinates: MapCoordinates
+}
+
+export const GeoMap: FC<GeoMapProps> = ({ coordinates }) => {
+  const mapContainerRef = useRef<HTMLDivElement>(null)
+  const mapRef = useRef<Map | null>(null)
+
+  useEffect(() => {
+    if (coordinates !== null) {
+      const centerCoordinates = fromLonLat(coordinates)
+
+      if (mapContainerRef.current && !mapRef.current) {
+        mapRef.current = new Map({
+          layers: [new TileLayer({ source: new OSM() })],
+          view: new View({
+            center: centerCoordinates,
+            zoom: MAP_ZOOM_LEVEL,
+          }),
+          target: mapContainerRef.current,
+        })
+      } else if (mapRef.current) {
+        mapRef.current.getView().setCenter(centerCoordinates)
+      }
+    }
+  }, [coordinates])
+
+  useEffect(() => {
+    return () => {
+      if (mapRef.current) {
+        console.log('unmount')
+        mapRef.current.setTarget(undefined)
+        mapRef.current = null
+      }
+    }
+  }, [])
+
+  if (coordinates === null) {
+    return null
+  }
+
+  return (
+    <div
+      ref={mapContainerRef}
+      style={{ width: '100%', height: '400px', position: 'relative' }}
+    />
+  )
+}