@mapcomponents/react-maplibre 0.1.59 → 0.1.61

package/dist/hooks/useCameraFollowPath/useCameraFollowPath.d.ts

@@ -0,0 +1,35 @@
+interface useCameraFollowPathProps {
+    /**
+     * Id of the target MapLibre instance in mapContext
+     */
+    mapId?: string;
+    /**
+     * Id of an existing layer in the mapLibre instance to help specify the layer order
+     * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+     */
+    insertBeforeLayer?: string;
+    pause?: boolean;
+    zoom?: number;
+    pitch?: number;
+    speed?: number;
+    kmPerStep?: number;
+    route?: any;
+    stepDuration?: number;
+    timeoutId?: number;
+}
+export type { useCameraFollowPathProps };
+/**
+ * Component template
+ *
+ */
+declare const useCameraFollowPath: {
+    (props: useCameraFollowPathProps): {
+        play: () => void;
+        reset: () => void;
+    };
+    defaultProps: {
+        mapId: undefined;
+        zoom: number;
+    };
+};
+export default useCameraFollowPath;

package/dist/hooks/useCameraFollowPath/useCameraFollowPath.stories.d.ts

@@ -0,0 +1,17 @@
+declare const storyoptions: {
+    title: string;
+    component: {
+        (props: import("./useCameraFollowPath").useCameraFollowPathProps): {
+            play: () => void;
+            reset: () => void;
+        };
+        defaultProps: {
+            mapId: undefined;
+            zoom: number;
+        };
+    };
+    argTypes: {};
+    decorators: ((Story: any) => JSX.Element)[];
+};
+export default storyoptions;
+export declare const ExampleConfig: any;

package/dist/hooks/useExportMap/index.d.ts

@@ -0,0 +1,11 @@
+import { createExportOptions } from './lib';
+interface exportMapProps {
+    /**
+     * Id of the target MapLibre instance in mapContext
+     */
+    mapId?: string;
+}
+export default function useExportMap(props: exportMapProps): {
+    createExport: ((options: Omit<createExportOptions, 'map'> & Partial<Pick<createExportOptions, 'map'>>) => Promise<import("./lib").createExportResolverParams>) | undefined;
+};
+export {};

package/dist/hooks/useExportMap/lib.d.ts

@@ -0,0 +1,36 @@
+import { Map } from '!maplibre-gl';
+import jsPDF from 'jspdf';
+import MapLibreGlWrapper from '../../components/MapLibreMap/lib/MapLibreGlWrapper';
+import { BBox } from '@turf/turf';
+interface createExportOptions {
+    map: MapLibreGlWrapper;
+    width: number;
+    height: number;
+    bbox: BBox;
+    bboxUnrotated: BBox;
+    bearing: number;
+    format: string;
+    orientation: string;
+}
+export type { createExportOptions };
+declare const createExport: (options: createExportOptions) => Promise<createExportResolverParams>;
+interface createExportResolverParams extends createExportOptions {
+    createPdf: (_options?: createJsPdfOptions) => Promise<createPdfResolverParams>;
+    renderMap: Map;
+    hiddenContainer: HTMLDivElement;
+}
+export type { createExportResolverParams };
+interface createJsPdfOptions extends createExportOptions {
+    renderMap: Map;
+    hiddenContainer: HTMLDivElement;
+}
+export type { createJsPdfOptions };
+interface createPdfResolverParams extends createJsPdfOptions {
+    pdf: jsPDF;
+    downloadPdf: (_options?: downloadPdfOptions) => Promise<downloadPdfOptions>;
+}
+export type { createPdfResolverParams };
+interface downloadPdfOptions extends createJsPdfOptions {
+    pdf: jsPDF;
+}
+export { createExport };

package/dist/index.d.ts

@@ -29,7 +29,8 @@ export { default as useMapState } from "./hooks/useMapState";
 export { default as useMap } from "./hooks/useMap";
 export { default as useWms } from "./hooks/useWms.js";
 export { default as useSource } from "./hooks/useSource";
-export { default as useExportMap } from "./hooks/exportMap";
+export { default as useExportMap } from "./hooks/useExportMap";
+export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";
 export { MapComponentsProvider } from "./contexts/MapContext";
 export { default as MapContext } from "./contexts/MapContext";
 export { default as SimpleDataProvider } from "./contexts/SimpleDataProvider";

package/dist/index.esm.js

@@ -10621,7 +10621,7 @@ var createExport = function (options) {
         _loop_1(name_1);
     }
     // Create a new MapLibre-gl instance
-    var renderMap = new Map$2({
+    var renderMap = new Map$1({
         container: container,
         center: options.map.map.getCenter(),
         zoom: options.map.map.getZoom(),
@@ -10698,7 +10698,7 @@ function downloadPdf(options) {
     });
 }
 
-function exportMap(props) {
+function useExportMap(props) {
     var mapHook = useMap({ mapId: props.mapId });
     var _createExport = useMemo(function () {
         if (mapHook.map) {
@@ -10733,7 +10733,7 @@ function PdfForm(props) {
         // eslint-disable-next-line react/prop-types
         mapId: props.mapId,
     });
-    var mapExporter = exportMap({ mapId: props.mapId });
+    var mapExporter = useExportMap({ mapId: props.mapId });
     var createPdfHandler = useCallback(function () {
         var _a, _b, _c, _d, _e;
         if (mapHook.map &&
@@ -14269,89 +14269,84 @@ var MlVectorTileLayer = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var layerIdsRef = useRef({});
-    var layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
+    var layerId = useRef(props.layerId || 'MlVectorTileLayer-' + mapHook.componentId);
     var layerPaintConfsRef = useRef({});
     var layerLayoutConfsRef = useRef({});
     var initializedRef = useRef(false);
-    var createLayer = useCallback(function () {
+    var createLayers = useCallback(function () {
         if (!mapHook.map)
             return;
         initializedRef.current = true;
-        if (mapHook.map.map.getLayer(layerId.current)) {
+        if (mapHook.map.map.getSource(layerId.current)) {
             mapHook.cleanup();
         }
-        // Add the new layer to the openlayers instance once it is available
-        mapHook.map.addSource(layerId.current, __assign({ type: "vector", tiles: [props.url], tileSize: 512, attribution: "" }, props.sourceOptions), mapHook.componentId);
-        for (var key in props.layers) {
-            var _layerId = layerId.current + "_" + key;
-            layerIdsRef.current[key] = _layerId;
-            mapHook.map.addLayer(__assign({ id: _layerId, source: layerId.current, type: "line", minzoom: 0, maxzoom: 22, layout: {}, paint: {
-                    "line-opacity": 0.5,
-                    "line-color": "rgb(80, 80, 80)",
-                    "line-width": 2,
-                } }, props.layers[key]), props.insertBeforeLayer, mapHook.componentId);
-            layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
-            layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
+        // Add the new layer to the maplibre instance once it is available
+        mapHook.map.addSource(layerId.current, __assign({ type: 'vector', tiles: [props.url], tileSize: 512, attribution: '' }, props.sourceOptions), mapHook.componentId);
+        props.layers.forEach(function (layer) {
+            if (!mapHook.map)
+                return;
+            mapHook.map.addLayer(__assign({ source: layerId.current, minzoom: 0, maxzoom: 22, layout: {}, paint: {
+                    'line-opacity': 0.5,
+                    'line-color': 'rgb(80, 80, 80)',
+                    'line-width': 2,
+                } }, layer), props.insertBeforeLayer, mapHook.componentId);
+            layerPaintConfsRef.current[layer.id] = JSON.stringify(layer.paint);
+            layerLayoutConfsRef.current[layer.id] = JSON.stringify(layer.layout);
             // recreate layer if style has changed
-            mapHook.map.on("styledata", function () {
+            mapHook.map.on('styledata', function () {
                 var _a;
                 if (initializedRef.current && !((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getSource(layerId.current))) {
-                    console.log("Recreate Layer " + layerId.current);
-                    createLayer();
+                    console.log('Recreate Layer ' + layerId.current);
+                    createLayers();
                 }
             }, mapHook.componentId);
-        }
+        });
     }, [mapHook.map, props]);
-    useEffect(function () {
-        if (initializedRef.current)
-            return;
-        createLayer();
-    }, [createLayer]);
-    useEffect(function () {
-        if (!mapHook.map || !initializedRef.current)
+    var updateLayers = useCallback(function () {
+        if (!initializedRef.current)
             return;
-        // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-        for (var key in props.layers) {
-            if (mapHook.map.map.getLayer(layerIdsRef.current[key])) {
+        props.layers.forEach(function (layer) {
+            if (!mapHook.map)
+                return;
+            if (mapHook.map.map.getLayer(layer.id)) {
                 // update changed paint property
-                var layerPaintConfString = JSON.stringify(props.layers[key].paint);
-                if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
-                    for (var paintKey in props.layers[key].paint) {
-                        mapHook.map.map.setPaintProperty(layerIdsRef.current[key], paintKey, props.layers[key].paint[paintKey]);
+                var layerPaintConfString = JSON.stringify(layer.paint);
+                if (layerPaintConfString !== layerPaintConfsRef.current[layer.id]) {
+                    for (var paintKey in layer.paint) {
+                        mapHook.map.map.setPaintProperty(layer.id, paintKey, layer.paint[paintKey]);
                     }
                 }
-                layerPaintConfsRef.current[key] = layerPaintConfString;
+                layerPaintConfsRef.current[layer.id] = layerPaintConfString;
                 // update changed layout property
-                var layerLayoutConfString = JSON.stringify(props.layers[key].layout);
-                if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
-                    for (var layoutKey in props.layers[key].layout) {
-                        mapHook.map.map.setLayoutProperty(layerIdsRef.current[key], layoutKey, props.layers[key].layout[layoutKey]);
+                var layerLayoutConfString = JSON.stringify(layer.layout);
+                if (layerLayoutConfString !== layerLayoutConfsRef.current[layer.id]) {
+                    for (var layoutKey in layer.layout) {
+                        mapHook.map.map.setLayoutProperty(layer.id, layoutKey, layer.layout[layoutKey]);
                     }
                 }
-                layerLayoutConfsRef.current[key] = layerLayoutConfString;
+                layerLayoutConfsRef.current[layer.id] = layerLayoutConfString;
             }
-        }
+        });
+    }, [mapHook.map, props.layers]);
+    // initial layer creation
+    useEffect(function () {
+        if (initializedRef.current)
+            return;
+        createLayers();
+    }, [createLayers]);
+    // if layers get removed or added
+    useEffect(function () {
+        if (!mapHook.map || !initializedRef.current)
+            return;
+        createLayers();
+    }, [props.layers.length, mapHook.map]);
+    // on layout/paint update
+    useEffect(function () {
+        if (!mapHook.map || !initializedRef.current)
+            return;
+        updateLayers();
     }, [props.layers, mapHook.map]);
     return React__default.createElement(React__default.Fragment, null);
-};
-MlVectorTileLayer.propTypes = {
-    /**
-     * Id of the target MapLibre instance in mapContext
-     */
-    mapId: PropTypes.string,
-    /**
-     * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
-     */
-    sourceOptions: PropTypes.object,
-    /**
-     * Object that hold layers
-     */
-    layers: PropTypes.object,
-    /**
-     * String of the URL of a wms layer
-     */
-    url: PropTypes.string,
 };
 
 var defaultProps = {
@@ -19683,6 +19678,157 @@ function useSource(props) {
     };
 }
 
+/**
+ * Component template
+ *
+ */
+var useCameraFollowPath = function (props) {
+    // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+    // without the requirement of adding it to the dependency list (ignore the false eslint exhaustive deps warning)
+    var initializedRef = useRef(false);
+    var pause = useRef(props.pause);
+    var zoom = useRef(props.zoom);
+    var pitch = useRef(props.pitch);
+    var step = useRef(1);
+    var speed = useRef(props.speed);
+    var timeoutId = useRef();
+    var kmPerStep = props.kmPerStep || 0.01;
+    var routeDistance = turf.lineDistance(props.route);
+    var stepDuration = props.stepDuration || 70;
+    var mapHook = useMap({
+        mapId: props.mapId,
+        waitForLayer: props.insertBeforeLayer,
+    });
+    useEffect(function () {
+        pause.current = props.pause;
+        if (!pause.current) {
+            play();
+        }
+    }, [props.pause]);
+    useEffect(function () {
+        if (!mapHook.map)
+            return;
+        zoom.current = props.zoom;
+        if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
+            mapHook.map.map.setZoom(zoom.current);
+        }
+    }, [mapHook.map, props.zoom]);
+    useEffect(function () {
+        if (!mapHook.map)
+            return;
+        pitch.current = props.pitch;
+        if (typeof pitch.current !== 'undefined' && pitch.current !== mapHook.map.map.getPitch()) {
+            mapHook.map.map.setPitch(pitch.current);
+        }
+    }, [mapHook.map, props.pitch]);
+    useEffect(function () {
+        speed.current = props.speed;
+    }, [props.speed]);
+    var disableInteractivity = useCallback(function () {
+        if (!mapHook.map)
+            return;
+        mapHook.map.map['scrollZoom'].disable();
+        mapHook.map.map['boxZoom'].disable();
+        mapHook.map.map['dragRotate'].disable();
+        mapHook.map.map['dragPan'].disable();
+        mapHook.map.map['keyboard'].disable();
+        mapHook.map.map['doubleClickZoom'].disable();
+        mapHook.map.map['touchZoomRotate'].disable();
+    }, [mapHook.map]);
+    var enableInteractivity = useCallback(function () {
+        if (!mapHook.map)
+            return;
+        mapHook.map.map['scrollZoom'].enable();
+        mapHook.map.map['boxZoom'].enable();
+        mapHook.map.map['dragRotate'].enable();
+        mapHook.map.map['dragPan'].enable();
+        mapHook.map.map['keyboard'].enable();
+        mapHook.map.map['doubleClickZoom'].enable();
+        mapHook.map.map['touchZoomRotate'].enable();
+    }, [mapHook.map]);
+    function centerRoute() {
+        if (!mapHook.map || !props.route)
+            return;
+        var bbox = turf.bbox(props.route);
+        var bounds;
+        if (bbox && bbox.length > 3) {
+            bounds = [
+                [bbox[0], bbox[1]],
+                [bbox[2], bbox[3]],
+            ];
+            mapHook.map.map.fitBounds(bounds, { padding: 100 });
+        }
+    }
+    function play() {
+        if (!mapHook.map)
+            return;
+        if (!pause.current) {
+            disableInteractivity();
+            if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
+                mapHook.map.map.setZoom(zoom.current);
+            }
+            var alongRoutelati = turf.along(props.route, step.current * kmPerStep).geometry
+                .coordinates;
+            if (step.current * kmPerStep < routeDistance) {
+                mapHook.map.map.easeTo({
+                    center: alongRoutelati,
+                    bearing: turf.bearing(turf.point([mapHook.map.map.getCenter().lng, mapHook.map.map.getCenter().lat]), turf.point(alongRoutelati)),
+                    duration: stepDuration,
+                    essential: true,
+                });
+                if (typeof speed.current !== 'undefined') {
+                    step.current = step.current + speed.current;
+                }
+                else {
+                    step.current++;
+                }
+                console.log('PAN MOVE');
+                setTimeout(function () {
+                    play();
+                }, 100);
+            }
+            else {
+                mapHook.map.map.setPitch(0);
+                centerRoute();
+                enableInteractivity();
+                console.log('ENABLE CONTROLS');
+                step.current = 1;
+            }
+        }
+        else {
+            enableInteractivity();
+        }
+    }
+    function reset() {
+        if (!mapHook.map)
+            return;
+        centerRoute();
+        enableInteractivity();
+        step.current = 1;
+    }
+    useEffect(function () {
+        if (!mapHook.map || initializedRef.current)
+            return;
+        initializedRef.current = true;
+        centerRoute();
+    }, [mapHook.map]);
+    useEffect(function () {
+        return function () {
+            if (timeoutId.current) {
+                clearTimeout(timeoutId.current);
+            }
+        };
+    }, []);
+    return {
+        play: play,
+        reset: reset,
+    };
+};
+useCameraFollowPath.defaultProps = {
+    mapId: undefined,
+    zoom: 18,
+};
+
 var SimpleDataContext = /*#__PURE__*/React__default.createContext({});
 var SimpleDataContextProvider = SimpleDataContext.Provider;
 
@@ -19745,5 +19891,5 @@ SimpleDataProvider.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-export { GeoJsonContext, GeoJsonProvider, MapComponentsProvider, MapContext, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlScaleReference, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, SimpleDataContext, SimpleDataProvider, exportMap as useExportMap, useLayer, useMap, useMapState, useSource, useWms };
+export { GeoJsonContext, GeoJsonProvider, MapComponentsProvider, MapContext, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlCreatePdfForm, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlMeasureTool, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlScaleReference, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, SimpleDataContext, SimpleDataProvider, useCameraFollowPath, useExportMap, useLayer, useMap, useMapState, useSource, useWms };
 //# sourceMappingURL=index.esm.js.map