Try to fix build for react-map-gl

tordans · Sep 4, 2023 · e54fb18 · e54fb18
1 parent 2d4596c
commit e54fb18
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 14 deletions.
diff --git a/node_modules/react-map-gl/package.json b/node_modules/react-map-gl/package.json
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -2,7 +2,7 @@ import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import * as pmtiles from 'pmtiles'
 import { useEffect } from 'react'
-import ReactMapGl, { NavigationControl } from 'react-map-gl/dist/es5/exports-maplibre.js'
+import * as reactmapgl from 'react-map-gl/maplibre'
 import { $mapLoaded } from '../store'
 import { MapSourceBoundaries } from './MapSourceBoundaries'
 import { MapSourceMonitoring } from './MapSourceMonitoring'
@@ -17,7 +17,7 @@ export const Map = () => {
   }, [])
 
   return (
-    <ReactMapGl
+    <reactmapgl.Map
       initialViewState={{
         longitude: 13.390386527027175,
         latitude: 52.5180225850377,
@@ -31,8 +31,8 @@ export const Map = () => {
     >
       <MapSourceBoundaries />
       <MapSourceMonitoring />
-      <NavigationControl showCompass={false} position="top-right" />
+      <reactmapgl.NavigationControl showCompass={false} position="top-right" />
       {/* <MapData /> */}
-    </ReactMapGl>
+    </reactmapgl.Map>
   )
 }
diff --git a/src/components/Map/MapData.tsx b/src/components/Map/MapData.tsx
@@ -1,10 +1,10 @@
 import { useStore } from '@nanostores/react'
 import { length } from '@turf/turf'
-import { useMap } from 'react-map-gl/dist/es5/exports-maplibre.js'
+import * as reactmapgl from 'react-map-gl/maplibre'
 import { $mapLoaded } from '../store'
 
 export const MapData = () => {
-  const { current: mainMap } = useMap()
+  const { current: mainMap } = reactmapgl.useMap()
 
   const mapLoaded = useStore($mapLoaded)
 

diff --git a/src/components/Map/MapSourceBoundaries.tsx b/src/components/Map/MapSourceBoundaries.tsx
@@ -1,14 +1,14 @@
-import { Layer, Source } from 'react-map-gl/dist/es5/exports-maplibre.js'
+import * as reactmapgl from 'react-map-gl/maplibre'
 
 export const MapSourceBoundaries = () => {
   return (
-    <Source
+    <reactmapgl.Source
       id="boundaries"
       type="vector"
       tiles={['https://tiles.radverkehrsatlas.de/public.boundaries/{z}/{x}/{y}.pbf']}
       attribution=""
     >
-      <Layer
+      <reactmapgl.Layer
         source="tarmac_boundaries"
         source-layer="public.boundaries"
         type="line"
@@ -20,6 +20,6 @@ export const MapSourceBoundaries = () => {
         }}
         filter={['match', ['get', 'admin_level'], ['9', '10'], true, false]}
       />
-    </Source>
+    </reactmapgl.Source>
   )
 }
diff --git a/src/components/Map/MapSourceMonitoring.tsx b/src/components/Map/MapSourceMonitoring.tsx
@@ -1,5 +1,5 @@
 import { useStore } from '@nanostores/react'
-import { Layer, Source } from 'react-map-gl/dist/es5/exports-maplibre.js'
+import * as reactmapgl from 'react-map-gl/maplibre'
 import { $searchParams, type SearchParams } from '../store'
 import { essentialFilterWithStyleFilter, partialFilterWithStyleFilter } from './filters'
 import { layers } from './layers'
@@ -9,7 +9,7 @@ export const MapSourceMonitoring = () => {
   const fokusFilter = params?.fokus ? ['==', ['get', 'CC_Netzkategorie'], params.fokus] : undefined
 
   return (
-    <Source
+    <reactmapgl.Source
       id="monitoring"
       type="vector"
       url="pmtiles://https://atlas-tiles.s3.eu-central-1.amazonaws.com/changing-cities-radnetz-monitoring.pmtiles"
@@ -24,7 +24,7 @@ export const MapSourceMonitoring = () => {
           filter = partialFilterWithStyleFilter(layer.filter, fokusFilter) as any
         }
         return (
-          <Layer
+          <reactmapgl.Layer
             key={layer.id}
             {...(layer as any)}
             source="changing-cities-radnetz-monitoring"
@@ -33,6 +33,6 @@ export const MapSourceMonitoring = () => {
           />
         )
       })}
-    </Source>
+    </reactmapgl.Source>
   )
 }