Installed map featuring in bookshop page

Author: silversonicaxel

package-lock.json

@@ -29,6 +29,7 @@
     "i18next-resources-to-backend": "^1.2.1",
     "mongodb": "^6.9.0",
     "next": "^14.2.15",
+    "ol": "^10.2.0",
     "react": "18.3.1",
     "react-cookie": "^7.2.2",
     "react-dom": "18.3.1",
@@ -72,4 +73,4 @@
     "minimumChangeThreshold": 0,
     "showDetails": true
   }
-}
+}

package.json

@@ -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/api/map/index.ts

@@ -7,6 +7,8 @@ import { isImageSecure } from 'helpers/utils/isImageSecure'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { getBookshop } from 'src/api/bookshop'
+import { getMapCoordinates } from 'src/api/map'
+import { GeoMap } from 'src/components/geo-map'
 import { SafeImage } from 'src/components/safe-image'
 import type { ComponentParams } from 'types/component'
 import type { I18nLocale } from 'types/i18n'
@@ -53,6 +55,8 @@ export default async function BookshopPage(
     notFound()
   }
 
+  const bookshopCoordinates = await getMapCoordinates(bookshop.address)
+
   let bookshopMeta: BookshopMeta
   try {
     bookshopMeta = bookshop.site ? await fetchedMeta(bookshop.site) : null
@@ -76,6 +80,10 @@ export default async function BookshopPage(
           </a>
         </section>
 
+        <section className={styles.uaplace_section}>
+          <GeoMap address={bookshop.address} coordinates={bookshopCoordinates}/>
+        </section>
+
         {bookshop.site && (
           <section className={styles.uabookshop_section}>
             <h4>{t('form.website')}</h4>

src/app/[locale]/bookshops/[bookshopId]/page.tsx

@@ -0,0 +1,62 @@
+'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' }}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export * from './geo-map'

src/components/geo-map/index.ts

@@ -0,0 +1 @@
+export const MAP_ZOOM_LEVEL = 19

src/helpers/config/map.ts

@@ -0,0 +1,6 @@
+export type MapResponse = {
+  lat: string
+  lon: string
+}
+
+export type MapCoordinates = [number, number]