@vinctus/react-maplibre 0.1.0 → 0.1.2

package/README.md

@@ -1,10 +1,10 @@
-## react-mapbox
+## react-maplibre
 
-**react-mapbox** is a very minimalist React.js wrapper library for the 
+**react-maplibre** is a very minimalist React.js wrapper library for the 
 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/) 
 Typescript library.
 
-Documentation can be found [here](https://vinctustech.github.io/react-mapbox/).
+Documentation can be found [here](https://vinctustech.github.io/react-maplibre/).
 
 Testing
 -------
@@ -13,7 +13,7 @@ There is a test program in the `test` directory. It gets the Mapbox access token
 
 To start the test program type:
 1. ```bash
-   npm i
+   npm ci
    ```
 2. ```bash
    tsc
@@ -22,9 +22,8 @@ To start the test program type:
    cd test
    ```
 4. ```bash
-   npm i
+   npm ci
    ```
 5. ```bash
    npm start
    ```
-   

package/dist/Map.d.ts

@@ -1,5 +1,5 @@
 import React, { FC, RefAttributes, ReactNode, CSSProperties } from 'react';
-import maplibre, { MapLibreEvent } from 'maplibre-gl';
+import maplibre, { MapLibreEvent, StyleSpecification } from 'maplibre-gl';
 export type ViewState = {
     longitude: number;
     latitude: number;
@@ -19,7 +19,7 @@ export declare const viewStateFromMap: (map: maplibre.Map) => {
 };
 export declare const useMap: () => {
     map: maplibre.Map | null;
-    setMap: React.Dispatch<React.SetStateAction<maplibre.Map | null>>;
+    mapRef: React.MutableRefObject<maplibre.Map | null>;
     mapLoaded: boolean;
     setMapLoaded: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -27,6 +27,7 @@ export declare const MapProvider: FC<{
     children?: ReactNode;
 }>;
 export type MapProps = {
+    reuseMaps?: boolean;
     accessToken?: string;
     antialias?: boolean;
     children?: ReactNode | ReactNode[];
@@ -36,7 +37,7 @@ export type MapProps = {
     latitude: number;
     logoPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     maxPitch?: number;
-    mapStyle?: string;
+    mapStyle?: StyleSpecification | string;
     onLoad?: (e: import('maplibre-gl').MapLibreEvent) => void;
     onDragEnd?: (e: ViewStateChangeEvent) => void;
     onMoveEnd?: (e: ViewStateChangeEvent) => void;

package/dist/Map.js

@@ -16,10 +16,7 @@ import { ErrorBoundary } from './ErrorBoundary'; // eslint-disable-line import/n
 const DEFAULT_STYLE = 'https://demotiles.maplibre.org/style.json';
 const DISABLE_PITCH = 0;
 const MapContext = React.createContext({
-    map: null,
-    setMap: () => {
-        throw new Error('Use <MapProvider>');
-    },
+    mapRef: { current: null },
     mapLoaded: false,
     setMapLoaded: () => {
         throw new Error('Use <MapProvider>');
@@ -30,51 +27,92 @@ export const viewStateFromMap = (map) => ({
     latitude: map.getCenter().lat,
     zoom: map.getZoom(),
 });
-export const useMap = () => useContext(MapContext);
+export const useMap = () => {
+    const context = useContext(MapContext);
+    if (!context) {
+        throw new Error('useMap must be used within a MapProvider');
+    }
+    const { mapRef, mapLoaded, setMapLoaded } = context;
+    return {
+        map: mapRef.current,
+        mapRef,
+        mapLoaded,
+        setMapLoaded,
+    };
+};
 export const MapProvider = ({ children }) => {
-    const [map, setMap] = useState(null);
+    const mapRef = useRef(null);
     const [mapLoaded, setMapLoaded] = useState(false);
-    return (_jsx(MapContext.Provider, Object.assign({ value: { map, setMap, mapLoaded, setMapLoaded } }, { children: children })));
+    return (_jsx(MapContext.Provider, Object.assign({ value: { mapRef, mapLoaded, setMapLoaded } }, { children: children })));
 };
 function addEventHandler(map, type, handler) {
     map.on(type, (ev) => handler(Object.assign({ viewState: viewStateFromMap(map) }, ev)));
 }
 export const Map = React.forwardRef((_a, ref) => {
-    var { children, style, id, longitude, latitude, maxPitch = DISABLE_PITCH, mapStyle = DEFAULT_STYLE, zoom, onDragEnd, onLoad, onMoveEnd, onZoomEnd, fallback } = _a, options = __rest(_a, ["children", "style", "id", "longitude", "latitude", "maxPitch", "mapStyle", "zoom", "onDragEnd", "onLoad", "onMoveEnd", "onZoomEnd", "fallback"]);
+    var { reuseMaps = true, children, style, id, longitude, latitude, maxPitch = DISABLE_PITCH, mapStyle = DEFAULT_STYLE, zoom, onDragEnd, onLoad, onMoveEnd, onZoomEnd, fallback } = _a, options = __rest(_a, ["reuseMaps", "children", "style", "id", "longitude", "latitude", "maxPitch", "mapStyle", "zoom", "onDragEnd", "onLoad", "onMoveEnd", "onZoomEnd", "fallback"]);
     const mapContainer = useRef(null);
-    const { map, setMap, setMapLoaded } = useMap();
-    useImperativeHandle(ref, () => map, [map]);
+    const { mapRef, mapLoaded, setMapLoaded } = useMap();
+    useImperativeHandle(ref, () => mapRef.current, [
+        mapRef,
+    ]);
     useEffect(() => {
-        if (map)
-            return; // initialize map only once
-        if (mapContainer.current) {
+        if (reuseMaps && mapRef.current) {
+            // Reattach the existing map instance to the new container
+            if (mapContainer.current && mapRef.current.getContainer() !== mapContainer.current) {
+                mapContainer.current.appendChild(mapRef.current.getContainer());
+                mapRef.current.resize(); // resize map in case container dimensions have changed
+            }
+            return;
+        }
+        if (mapContainer.current && !mapRef.current) {
             const m = new maplibre.Map(Object.assign({ container: mapContainer.current, style: mapStyle, center: [longitude, latitude], zoom }, options));
             if (onDragEnd)
                 addEventHandler(m, 'dragend', onDragEnd);
             if (onLoad)
                 addEventHandler(m, 'load', (ev) => {
                     onLoad(ev);
-                    setMapLoaded(true);
+                    if (!mapLoaded)
+                        setMapLoaded(true);
                 });
             if (onMoveEnd)
                 addEventHandler(m, 'moveend', onMoveEnd);
             if (onZoomEnd)
                 addEventHandler(m, 'zoomend', onZoomEnd);
-            setMap(m);
+            mapRef.current = m;
         }
+        // further investigation: calling .remove() causes the following error:
+        //
+        // Cannot read properties of undefined (reading 'off')
+        // TypeError: Cannot read properties of undefined (reading 'off')
+        // at t.GeolocateControl.onRemove (http://localhost:3002/static/js/bundle.js:107201:393)
+        // at t.Map.removeControl (http://localhost:3002/static/js/bundle.js:107351:57)
+        // at http://localhost:3002/static/js/bundle.js:853:53
+        //   at safelyCallDestroy (http://localhost:3002/static/js/bundle.js:39324:9)
+        // at commitHookEffectListUnmount (http://localhost:3002/static/js/bundle.js:39462:15)
+        // at commitPassiveUnmountInsideDeletedTreeOnFiber (http://localhost:3002/static/js/bundle.js:41143:15)
+        // at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (http://localhost:3002/static/js/bundle.js:41099:9)
+        // at commitPassiveUnmountEffects_begin (http://localhost:3002/static/js/bundle.js:41021:15)
+        // at commitPassiveUnmountEffects (http://localhost:3002/static/js/bundle.js:41009:7)
+        // at flushPassiveEffectsImpl (http://localhost:3002/static/js/bundle.js:42830:7)
+        //
+        // return () => {
+        //   if (!reuseMaps && mapRef.current) {
+        //     mapRef.current.remove()
+        //     mapRef.current = null
+        //   }
+        // }
     }, [
-        map,
+        reuseMaps,
         onDragEnd,
         onLoad,
         onMoveEnd,
         onZoomEnd,
-        setMap,
         setMapLoaded,
         mapStyle,
         longitude,
         latitude,
         zoom,
-        options,
+        // options, // investigate using a useRef for this (other Map options)
     ]);
     const memoizedStyle = useMemo(() => (Object.assign({ position: 'relative', width: '100%', height: '100%' }, style)), [style]);
     return (_jsx(ErrorBoundary, Object.assign({ fallback: fallback }, { children: _jsx("div", Object.assign({ id: id, ref: mapContainer, style: memoizedStyle }, { children: children })) })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinctus/react-maplibre",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Minimalist MapLibre GL JS React wrapper library",
   "types": "dist/index.d.ts",
   "publishConfig": {