-
{url}
-
diff --git a/src/components/maps/AreaMap.tsx b/src/components/maps/AreaMap.tsx
index bf75fd589..eb8d7cf90 100644
--- a/src/components/maps/AreaMap.tsx
+++ b/src/components/maps/AreaMap.tsx
@@ -1,15 +1,12 @@
'use client'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { Map, ScaleControl, FullscreenControl, NavigationControl, Source, Layer, MapLayerMouseEvent, LineLayer, MapInstance } from 'react-map-gl'
+import { Source, Layer, LineLayer, MapInstance } from 'react-map-gl'
import dynamic from 'next/dynamic'
-import { lineString, Point, Polygon, point } from '@turf/helpers'
+import { lineString, Point, Polygon } from '@turf/helpers'
import lineToPolygon from '@turf/line-to-polygon'
+import 'maplibre-gl/dist/maplibre-gl.css'
import { AreaMetadataType, AreaType } from '../../js/types'
-import { MAP_STYLES } from './BaseMap'
-import { AreaInfoDrawer } from './AreaInfoDrawer'
-import { AreaInfoHover } from './AreaInfoHover'
-import { SelectedFeature } from './AreaActiveMarker'
+import { GlobalMap } from './GlobalMap'
type ChildArea = Pick
& { metadata: Pick }
interface AreaMapProps {
@@ -42,13 +39,6 @@ export interface HoverInfo {
* Area map
*/
const AreaMap: React.FC = ({ area, subAreas }) => {
- const [clickInfo, setClickInfo] = useState(null)
- const [hoverInfo, setHoverInfo] = useState(null)
- const [selected, setSelected] = useState(null)
- const [mapInstance, setMapInstance] = useState(null)
- const [cursor, setCursor] = useState('default')
- const mapRef = useRef(null)
-
let fitBoundOpts: any = { padding: { top: 45, left: 45, bottom: 45, right: 45 } }
if (subAreas.length === 0) {
fitBoundOpts = { maxZoom: 14 }
@@ -56,92 +46,20 @@ const AreaMap: React.FC = ({ area, subAreas }) => {
const { metadata } = area
const boundary = metadata?.polygon == null ? null : lineToPolygon(lineString(metadata.polygon), { properties: { name: area.areaName } })
-
- useEffect(() => {
- if (mapRef.current != null) {
- setMapInstance(mapRef.current)
- }
- /**
- * Show drop pin if viewing a leaf area
- */
- if (metadata.leaf) {
- setSelected(point([metadata.lng, metadata.lat]).geometry as unknown as Point)
- }
- }, [metadata.leaf, mapRef?.current])
-
- const onClick = useCallback((event: MapLayerMouseEvent): void => {
- const feature = event?.features?.[0]
- if (feature == null) {
- setSelected(null)
- setClickInfo(null)
- } else {
- setSelected(feature.geometry as Point | Polygon)
- setClickInfo(feature.properties as MapAreaFeatureProperties)
- }
- }, [mapInstance])
-
- const onHover = useCallback((event: MapLayerMouseEvent) => {
- const obLayerId = event.features?.findIndex((f) => f.layer.id === 'crags' || f.layer.id === 'crag-group-boundaries') ?? -1
-
- if (obLayerId !== -1) {
- setCursor('pointer')
- const feature = event.features?.[obLayerId]
- if (feature != null && mapInstance != null) {
- const { geometry } = feature
- if (geometry.type === 'Point' || geometry.type === 'Polygon') {
- setHoverInfo({
- geometry: feature.geometry as Point | Polygon,
- data: feature.properties as MapAreaFeatureProperties,
- mapInstance
- })
- }
- }
- } else {
- setHoverInfo(null)
- setCursor('default')
- }
- }, [mapInstance])
-
return (
-
+
)
}
-const getVisitorLocation = async (): Promise<{ longitude: number, latitude: number } | undefined> => {
- try {
- const res = await fetch('/api/geo')
- return await res.json()
- } catch (err) {
- console.log('ERROR', err)
- return undefined
- }
-}
+export const LazyGlobalMap = dynamic(async () => await import('./GlobalMap').then(
+ module => module.GlobalMap), {
+ ssr: false
+})
diff --git a/src/components/maps/utils.ts b/src/components/maps/utils.ts
new file mode 100644
index 000000000..1493c76ac
--- /dev/null
+++ b/src/components/maps/utils.ts
@@ -0,0 +1,27 @@
+import { MapAreaFeatureProperties, SimpleClimbType } from './GlobalMap'
+
+export interface TileProps {
+ id: string
+ name: string
+ ancestors: string
+ pathTokens: string
+ content: {
+ description: string
+ }
+ climbs: string
+}
+
+/**
+ * Map tile properties can only contain primitive types.
+ * This function converts stringified json data back to json objects
+ */
+export const transformTileProps = (p: TileProps): MapAreaFeatureProperties => {
+ const { name, ancestors, pathTokens } = p
+ return {
+ ...p,
+ areaName: name,
+ ancestors: JSON.parse(ancestors) as string[],
+ pathTokens: JSON.parse(pathTokens) as string[],
+ climbs: JSON.parse(p.climbs) as SimpleClimbType[]
+ }
+}