@vinctus/react-maplibre 0.2.25 → 1.0.0-alpha

package/dist/ErrorBoundary.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Component, ErrorInfo, ReactNode } from 'react';
 interface Props {
     children?: ReactNode;
     fallback?: ReactNode;
@@ -10,6 +10,6 @@ export declare class ErrorBoundary extends Component<Props, State> {
     constructor(props: any);
     static getDerivedStateFromError(_: Error): State;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

package/dist/GeolocateControl.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { GeolocateControlOptions } from 'maplibre-gl';
-import { ControlPosition } from './types';
+import { GeolocateControlOptions, ControlPosition } from 'maplibre-gl';
 export type GeolocateControlProps = {
     position?: ControlPosition;
     options?: GeolocateControlOptions;

package/dist/GeolocateControl.js

@@ -1,19 +1,24 @@
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import maplibre from 'maplibre-gl';
-import { useMap } from './Map';
+import { MapContext } from './Map';
 export const GeolocateControl = ({ position = 'bottom-right', options = { showUserLocation: false }, }) => {
-    const { map } = useMap();
+    const { map, mapLoaded } = useContext(MapContext);
     const optionsString = JSON.stringify(options || {});
     useEffect(() => {
         const control = new maplibre.GeolocateControl(JSON.parse(optionsString));
-        if (map && position) {
+        if (map && mapLoaded && position) {
             map.addControl(control, position);
         }
         return () => {
-            if (map && map.hasControl(control)) {
-                map.removeControl(control);
+            try {
+                if (map && !map._removed && map.hasControl(control)) {
+                    map.removeControl(control);
+                }
+            }
+            catch (_a) {
+                console.warn('Error cleaning up GeolocateControl');
             }
         };
-    }, [position, optionsString, map]);
+    }, [position, optionsString, map, mapLoaded]);
     return null;
 };

package/dist/Layer.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { LayerSpecification, GeoJSONSourceSpecification } from 'maplibre-gl';
+import { GeoJSONSourceSpecification, LayerSpecification } from 'maplibre-gl';
 export type LayerProps = {
     layer: Omit<LayerSpecification, 'source'>;
     source: GeoJSONSourceSpecification;

package/dist/Layer.js

@@ -1,29 +1,30 @@
-import { useEffect } from 'react';
-import { useMap } from './Map';
+import { useContext, useEffect } from 'react';
+import { MapContext } from './Map';
 export const Layer = ({ layer, source }) => {
-    const { map, mapLoaded } = useMap();
+    const { map, mapLoaded } = useContext(MapContext);
     const layerString = JSON.stringify(Object.assign({ source: layer.id }, layer));
     const sourceString = JSON.stringify(source);
     useEffect(() => {
-        let added = false;
         const parsedSource = JSON.parse(sourceString);
         const parsedLayer = JSON.parse(layerString);
         if (map && mapLoaded) {
-            added = true;
             map.addSource(parsedLayer.id, parsedSource); // when adding, the source must be added first, and then the layer
             map.addLayer(parsedLayer);
         }
         return () => {
-            if (map) {
-                // Check if layer exists before removing
-                if (map.getLayer(parsedLayer.id)) {
-                    map.removeLayer(parsedLayer.id); // when removing, the layer must be removed first, and then the source
-                }
-                // Check if source exists before removing
-                if (map.getSource(parsedLayer.id)) {
-                    map.removeSource(parsedLayer.id);
+            try {
+                if (map && mapLoaded && !map._removed) {
+                    if (map.getLayer(parsedLayer.id)) {
+                        map.removeLayer(parsedLayer.id); // when removing, the layer must be removed first, and then the source
+                    }
+                    if (map.getSource(parsedLayer.id)) {
+                        map.removeSource(parsedLayer.id);
+                    }
                 }
             }
+            catch (_a) {
+                console.warn('Error cleaning up Layer');
+            }
         };
     }, [layerString, sourceString, map, mapLoaded]);
     return null;

package/dist/Map.d.ts

@@ -1,48 +1,25 @@
-import React, { FC, RefAttributes, ReactNode, CSSProperties } from 'react';
-import maplibre, { MapLibreEvent, StyleSpecification } from 'maplibre-gl';
-export type ViewState = {
-    longitude: number;
-    latitude: number;
-    zoom: number;
-};
-export type ViewStateChangeEvent = (MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & {
-    type: 'movestart' | 'move' | 'moveend' | 'zoomstart' | 'zoom' | 'zoomend';
-    viewState: ViewState;
-}) | (MapLibreEvent<MouseEvent | TouchEvent | undefined> & {
-    type: 'rotatestart' | 'rotate' | 'rotateend' | 'dragstart' | 'drag' | 'dragend' | 'pitchstart' | 'pitch' | 'pitchend';
-    viewState: ViewState;
-});
-export declare const viewStateFromMap: (map: maplibre.Map) => {
-    longitude: number;
-    latitude: number;
-    zoom: number;
-};
-export declare const useMap: () => {
+import maplibre, { MapLibreEvent } from 'maplibre-gl';
+import { ReactNode } from 'react';
+export declare const MapContext: import("react").Context<{
     map: maplibre.Map | null;
-    setMap: React.Dispatch<React.SetStateAction<maplibre.Map | null>>;
     mapLoaded: boolean;
-    setMapLoaded: React.Dispatch<React.SetStateAction<boolean>>;
-};
-export declare const MapProvider: FC<{
-    children?: ReactNode;
 }>;
-export type MapProps = {
-    accessToken?: string;
-    antialias?: boolean;
-    children?: ReactNode | ReactNode[];
-    fallback?: ReactNode;
-    id?: string;
+export type MapDragEndEvent = MapLibreEvent & {
+    viewState: {
+        longitude: number;
+        latitude: number;
+        zoom: number;
+    };
+};
+type MapProps = {
     longitude: number;
     latitude: number;
-    logoPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    maxPitch?: number;
-    mapStyle?: StyleSpecification | string;
-    onLoad?: (e: import('maplibre-gl').MapLibreEvent) => void;
-    onDragEnd?: (e: ViewStateChangeEvent) => void;
-    onMoveEnd?: (e: ViewStateChangeEvent) => void;
-    onZoomEnd?: (e: ViewStateChangeEvent) => void;
-    ref?: RefAttributes<maplibre.Map | null>;
-    style?: CSSProperties;
-    zoom: number;
+    mapStyle: string;
+    fallback?: ReactNode;
+    children?: ReactNode | ReactNode[];
+    onLoad?: (e: MapLibreEvent) => void;
+    onZoomEnd?: (e: MapLibreEvent) => void;
+    onDragEnd?: (e: MapDragEndEvent) => void;
 };
-export declare const Map: React.ForwardRefExoticComponent<Omit<MapProps, "ref"> & React.RefAttributes<maplibre.Map | null>>;
+export declare const Map: import("react").ForwardRefExoticComponent<MapProps & import("react").RefAttributes<maplibre.Map | null>>;
+export {};

package/dist/Map.js

@@ -1,101 +1,68 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState, useContext, useImperativeHandle, useMemo, useCallback, } from 'react';
 import maplibre from 'maplibre-gl';
-import { ErrorBoundary } from './ErrorBoundary'; // eslint-disable-line import/no-webpack-loader-syntax
-const DEFAULT_STYLE = 'https://demotiles.maplibre.org/style.json';
-const DISABLE_PITCH = 0;
-const MapContext = React.createContext({
+import { createContext, forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { ErrorBoundary } from './ErrorBoundary';
+export const MapContext = createContext({
     map: null,
-    setMap: () => {
-        throw new Error('Use <MapProvider>');
-    },
     mapLoaded: false,
-    setMapLoaded: () => {
-        throw new Error('Use <MapProvider>');
-    },
-});
-export const viewStateFromMap = (map) => ({
-    longitude: map.getCenter().lng,
-    latitude: map.getCenter().lat,
-    zoom: map.getZoom(),
 });
-export const useMap = () => useContext(MapContext);
-export const MapProvider = ({ children }) => {
-    const [map, setMap] = useState(null);
-    const [mapLoaded, setMapLoaded] = useState(false);
-    const stableSetMap = useCallback((newMap) => {
-        setMap(newMap);
-    }, []);
-    const stableSetMapLoaded = useCallback((loaded) => {
-        setMapLoaded(loaded);
-    }, []);
-    return (_jsx(MapContext.Provider, { value: { map, setMap: stableSetMap, mapLoaded, setMapLoaded: stableSetMapLoaded }, 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"]);
+export const Map = forwardRef(({ longitude, latitude, mapStyle, fallback, children, onLoad, onZoomEnd, onDragEnd }, ref) => {
     const mapContainer = useRef(null);
-    const mapInstanceRef = useRef(null);
-    const { map, setMap, setMapLoaded } = useMap();
-    const optionsString = JSON.stringify(options || {});
-    useImperativeHandle(ref, () => map, [map]);
+    const [mapInstance, setMapInstance] = useState(null);
+    const [mapLoaded, setMapLoaded] = useState(false);
+    useImperativeHandle(ref, () => mapInstance, [
+        mapInstance,
+    ]);
     useEffect(() => {
-        if (map) {
-            return;
-        }
+        let newMap;
         if (mapContainer.current) {
-            const parsedOptions = JSON.parse(optionsString);
-            const m = new maplibre.Map(Object.assign({ container: mapContainer.current, style: mapStyle, center: [longitude, latitude], zoom }, parsedOptions));
-            mapInstanceRef.current = m;
-            if (onDragEnd) {
-                addEventHandler(m, 'dragend', onDragEnd);
-            }
-            if (onLoad) {
-                addEventHandler(m, 'load', (ev) => {
+            newMap = new maplibre.Map({
+                container: mapContainer.current,
+                style: mapStyle,
+                zoom: 15,
+                maxPitch: 0,
+            });
+            setMapInstance(newMap);
+            newMap.on('load', (ev) => {
+                if (onLoad) {
                     onLoad(ev);
+                }
+                setTimeout(() => {
                     setMapLoaded(true);
+                }, 1000);
+            });
+            if (onZoomEnd) {
+                newMap.on('zoomend', onZoomEnd);
+            }
+            if (onDragEnd) {
+                newMap.on('dragend', (ev) => {
+                    const newEvent = Object.assign(Object.assign({}, ev), { viewState: {
+                            longitude: newMap.getCenter().lng,
+                            latitude: newMap.getCenter().lat,
+                            zoom: newMap.getZoom(),
+                        } });
+                    onDragEnd(newEvent);
                 });
             }
-            if (onMoveEnd) {
-                addEventHandler(m, 'moveend', onMoveEnd);
+        }
+        return () => {
+            try {
+                if (newMap) {
+                    newMap.remove();
+                }
+                setMapInstance(null);
+                setMapLoaded(false);
             }
-            if (onZoomEnd) {
-                addEventHandler(m, 'zoomend', onZoomEnd);
+            catch (_a) {
+                console.warn('Error cleaning up Map');
             }
-            setMap(m);
-            // Cleanup when component unmounts
-            return () => {
-                m.remove(); // This destroys the map and cleans up all layers/sources
-                mapInstanceRef.current = null;
-                setMap(null);
-            };
+        };
+    }, [mapStyle, onLoad, onZoomEnd, onDragEnd]);
+    useEffect(() => {
+        if (mapInstance) {
+            mapInstance.setCenter([longitude, latitude]);
         }
-    }, [
-        mapStyle,
-        longitude,
-        latitude,
-        zoom,
-        optionsString,
-        onDragEnd,
-        onLoad,
-        onMoveEnd,
-        onZoomEnd,
-        setMap,
-        setMapLoaded,
-    ]);
-    const memoizedStyle = useMemo(() => (Object.assign({ position: 'relative', width: '100%', height: '100%' }, style)), [style]);
-    return (_jsx(ErrorBoundary, { fallback: fallback, children: _jsx("div", { id: id, ref: mapContainer, style: memoizedStyle, children: children }) }));
+    }, [mapInstance, latitude, longitude]);
+    return (_jsx(ErrorBoundary, { fallback: fallback, children: _jsx(MapContext.Provider, { value: { map: mapInstance, mapLoaded }, children: _jsx("div", { ref: mapContainer, style: { width: '100%', height: '100%' }, children: children }) }) }));
 });
+Map.displayName = 'Map';

package/dist/Marker.d.ts

@@ -1,14 +1,15 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { FC, ReactNode, ReactElement } from 'react';
 import { PositionAnchor } from 'maplibre-gl';
 export type MarkerProps = {
     longitude: number;
     latitude: number;
+    className?: string;
+    anchor?: PositionAnchor;
+    color?: string;
+    children?: ReactNode;
     popup?: ReactElement;
     popupClassName?: string;
     closeOnClick?: boolean;
     closeButton?: boolean;
-    anchor?: PositionAnchor;
-    color?: string;
-    children?: ReactNode;
 };
 export declare const Marker: FC<MarkerProps>;

package/dist/Marker.js

@@ -1,89 +1,69 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import maplibre from 'maplibre-gl';
-import { useMap } from './Map';
 import ReactDOM from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
-export const Marker = (_a) => {
-    var { children, longitude, latitude, popup, popupClassName, closeOnClick = false, closeButton = true } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "popupClassName", "closeOnClick", "closeButton"]);
-    const { map } = useMap();
+import { MapContext } from './Map';
+export const Marker = ({ children, longitude, latitude, className, anchor, color, popup, popupClassName, closeOnClick = false, closeButton = false, }) => {
+    const { map, mapLoaded } = useContext(MapContext);
     const [result, setResult] = useState(null);
-    const markerRef = useRef(null);
-    const popupRef = useRef(null);
-    const cleanupRef = useRef(null);
-    const optionsString = JSON.stringify(options || {});
     useEffect(() => {
-        if (!map) {
-            return;
+        let marker;
+        let newPopup;
+        let handleMarkerClick;
+        if (map && mapLoaded) {
+            // We create the DOM element that we will attach to the marker, and then
+            // render the `children` props into the DOM element.
+            const element = document.createElement('div');
+            setResult(ReactDOM.createPortal(children, element));
+            marker = new maplibre.Marker({ anchor, className, color, element })
+                .setLngLat([longitude, latitude])
+                .addTo(map);
+            if (popup) {
+                const popupHTML = ReactDOMServer.renderToStaticMarkup(popup);
+                handleMarkerClick = (e) => {
+                    e.stopPropagation();
+                    newPopup = new maplibre.Popup({
+                        offset: [0, -15],
+                        closeButton,
+                        closeOnClick,
+                        className: popupClassName,
+                    })
+                        .setLngLat([longitude, latitude])
+                        .setHTML(popupHTML)
+                        .addTo(map);
+                };
+                marker.getElement().addEventListener('click', handleMarkerClick);
+            }
         }
-        const element = document.createElement('div');
-        const parsedOptions = JSON.parse(optionsString);
-        setResult(ReactDOM.createPortal(children, element));
-        // Create marker
-        const marker = new maplibre.Marker(Object.assign(Object.assign({}, parsedOptions), { element }));
-        marker.setLngLat([longitude, latitude]).addTo(map);
-        markerRef.current = marker;
-        // Handle popup manually if provided
-        if (popup) {
-            const popupHTML = ReactDOMServer.renderToStaticMarkup(popup);
-            const handleMarkerClick = (e) => {
-                e.stopPropagation();
-                // Close existing popup if any
-                if (popupRef.current) {
-                    popupRef.current.remove();
-                    popupRef.current = null;
-                    return; // Toggle behavior - close if already open
+        return () => {
+            try {
+                if (marker) {
+                    marker.remove();
                 }
-                // Create new popup directly on the map
-                const newPopup = new maplibre.Popup({
-                    offset: [0, -15],
-                    closeOnClick,
-                    closeButton,
-                    className: popupClassName,
-                })
-                    .setLngLat([longitude, latitude])
-                    .setHTML(popupHTML)
-                    .addTo(map);
-                popupRef.current = newPopup;
-                // Listen for popup close to clean up reference
-                newPopup.on('close', () => {
-                    popupRef.current = null;
-                });
-            };
-            // Add click listener to marker element
-            const markerElement = marker.getElement();
-            markerElement.style.cursor = 'pointer';
-            markerElement.addEventListener('click', handleMarkerClick);
-            // Cleanup function
-            const cleanup = () => {
-                markerElement.removeEventListener('click', handleMarkerClick);
-                if (popupRef.current) {
-                    popupRef.current.remove();
-                    popupRef.current = null;
+                if (newPopup) {
+                    newPopup.remove();
+                }
+                if (marker && handleMarkerClick) {
+                    marker.getElement().removeEventListener('click', handleMarkerClick);
                 }
-            };
-            cleanupRef.current = cleanup;
-        }
-        return () => {
-            if (cleanupRef.current) {
-                cleanupRef.current();
-                cleanupRef.current = null;
             }
-            if (markerRef.current) {
-                markerRef.current.remove();
-                markerRef.current = null;
+            catch (_a) {
+                console.warn('Error cleaning up Marker');
             }
         };
-    }, [map, optionsString, children, longitude, latitude, popup, closeOnClick, closeButton, popupClassName]);
+    }, [
+        anchor,
+        className,
+        children,
+        color,
+        latitude,
+        longitude,
+        map,
+        popup,
+        popupClassName,
+        closeOnClick,
+        closeButton,
+        mapLoaded,
+    ]);
     return result;
 };

package/dist/NavigationControl.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { NavigationControlOptions } from 'maplibre-gl';
-import { ControlPosition } from './types';
+import { NavigationControlOptions, ControlPosition } from 'maplibre-gl';
 export type NavigationControlProps = {
     position?: ControlPosition;
     options?: NavigationControlOptions;

package/dist/NavigationControl.js

@@ -1,22 +1,27 @@
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import maplibre from 'maplibre-gl';
-import { useMap } from './Map';
+import { MapContext } from './Map';
 export const NavigationControl = ({ position = 'bottom-right', options = {
     showZoom: true,
     showCompass: false,
 }, }) => {
-    const { map } = useMap();
+    const { map, mapLoaded } = useContext(MapContext);
     const optionsString = JSON.stringify(options || {});
     useEffect(() => {
         const control = new maplibre.NavigationControl(JSON.parse(optionsString));
-        if (map && position) {
+        if (map && mapLoaded && position) {
             map.addControl(control, position);
         }
         return () => {
-            if (map && map.hasControl(control)) {
-                map.removeControl(control);
+            try {
+                if (map && !map._removed && map.hasControl(control)) {
+                    map.removeControl(control);
+                }
+            }
+            catch (_a) {
+                console.warn('Error cleaning up NavigationControl');
             }
         };
-    }, [position, optionsString, map]);
+    }, [position, optionsString, map, mapLoaded]);
     return null;
 };

package/dist/Popup.js

@@ -1,35 +1,27 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useEffect } from 'react';
+import { useEffect, useContext } from 'react';
 import maplibre from 'maplibre-gl';
-import { useMap } from './Map';
-import ReactDOMServer from 'react-dom/server'; // eslint-disable-line import/no-webpack-loader-syntax
-export const Popup = (_a) => {
-    var { children, longitude, latitude } = _a, options = __rest(_a, ["children", "longitude", "latitude"]);
-    const { map } = useMap();
-    const optionsString = JSON.stringify(options || {});
+import ReactDOMServer from 'react-dom/server';
+import { MapContext } from './Map';
+export const Popup = ({ children, longitude, latitude, className, closeOnClick, closeButton, }) => {
+    const { map, mapLoaded } = useContext(MapContext);
     useEffect(() => {
         let popup = null;
-        if (map) {
-            popup = new maplibre.Popup(Object.assign({ offset: [0, -15] }, JSON.parse(optionsString)))
+        if (map && mapLoaded) {
+            popup = new maplibre.Popup({ offset: [0, -15], className, closeOnClick, closeButton })
                 .setLngLat([longitude, latitude])
                 .setHTML(ReactDOMServer.renderToStaticMarkup(children))
                 .addTo(map);
         }
         return () => {
-            if (popup) {
-                popup.remove();
+            try {
+                if (popup) {
+                    popup.remove();
+                }
+            }
+            catch (_a) {
+                console.warn('Error cleaning up Popup');
             }
         };
-    }, [children, latitude, longitude, map, optionsString]);
+    }, [children, latitude, longitude, map, className, closeOnClick, closeButton, mapLoaded]);
     return null;
 };

package/dist/ScaleControl.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { ScaleControlOptions } from 'maplibre-gl';
-import { ControlPosition } from './types';
+import { ScaleControlOptions, ControlPosition } from 'maplibre-gl';
 export type ScaleControlProps = {
     position?: ControlPosition;
     options?: ScaleControlOptions;

package/dist/ScaleControl.js

@@ -1,19 +1,24 @@
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import maplibre from 'maplibre-gl';
-import { useMap } from './Map';
+import { MapContext } from './Map';
 export const ScaleControl = ({ position = 'bottom-right', options }) => {
-    const { map } = useMap();
+    const { map, mapLoaded } = useContext(MapContext);
     const optionsString = JSON.stringify(options || {});
     useEffect(() => {
         const control = new maplibre.ScaleControl(JSON.parse(optionsString));
-        if (map && position) {
+        if (map && mapLoaded && position) {
             map.addControl(control, position);
         }
         return () => {
-            if (map && map.hasControl(control)) {
-                map.removeControl(control);
+            try {
+                if (map && !map._removed && map.hasControl(control)) {
+                    map.removeControl(control);
+                }
+            }
+            catch (_a) {
+                console.warn('Error cleaning up ScaleControl');
             }
         };
-    }, [position, optionsString, map]);
+    }, [position, optionsString, map, mapLoaded]);
     return null;
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { Map, useMap, MapProvider, viewStateFromMap } from './Map';
-export type { ViewState } from './Map';
+export { Map, MapContext } from './Map';
+export type { MapDragEndEvent } from './Map';
 export { Marker } from './Marker';
 export { Popup } from './Popup';
 export { Layer } from './Layer';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { Map, useMap, MapProvider, viewStateFromMap } from './Map';
+export { Map, MapContext } from './Map';
 export { Marker } from './Marker';
 export { Popup } from './Popup';
 export { Layer } from './Layer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinctus/react-maplibre",
-  "version": "0.2.25",
+  "version": "1.0.0-alpha",
   "description": "Minimalist MapLibre GL JS React wrapper library",
   "type": "module",
   "types": "dist/index.d.ts",

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../src/ErrorBoundary.tsx","../src/GeolocateControl.tsx","../src/Layer.tsx","../src/Map.tsx","../src/Marker.tsx","../src/NavigationControl.tsx","../src/Popup.tsx","../src/ScaleControl.tsx","../src/index.tsx","../src/types.tsx"],"version":"5.8.2"}

package/dist/types.d.ts

@@ -1 +0,0 @@
-export type ControlPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

package/dist/types.js

@@ -1 +0,0 @@
-export {};