@mapcomponents/react-maplibre 0.1.60 → 0.1.61

package/coverage/lcov-report/src/hooks/useExportMap/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useExportMap/index.ts.html

@@ -160,7 +160,7 @@ export default function <span class="fstat-no" title="function not covered" >use
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useExportMap/lib.ts.html

@@ -631,7 +631,7 @@ export { createExport };
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useLayer.ts.html

@@ -706,7 +706,7 @@ export default useLayer;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useLayerEvent.js.html

@@ -217,7 +217,7 @@ export default useLayerEvent;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useMap.ts.html

@@ -343,7 +343,7 @@ export type { useMapType };
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useMapState.ts.html

@@ -637,7 +637,7 @@ export default useMapState;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useSource.ts.html

@@ -322,7 +322,7 @@ export default useSource;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/hooks/useWms.js.html

@@ -343,7 +343,7 @@ export default useWms;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/index.ts.html

@@ -106,7 +106,9 @@
 <a name='L41'></a><a href='#L41'>41</a>
 <a name='L42'></a><a href='#L42'>42</a>
 <a name='L43'></a><a href='#L43'>43</a>
-<a name='L44'></a><a href='#L44'>44</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L44'></a><a href='#L44'>44</a>
+<a name='L45'></a><a href='#L45'>45</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -187,6 +189,7 @@ 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/useExportMap";
+export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";
 &nbsp;
 export { MapComponentsProvider } from "./contexts/MapContext";
 export { default as MapContext } from "./contexts/MapContext";
@@ -199,7 +202,7 @@ export { default as SimpleDataContext } from "./contexts/SimpleDataContext";
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Nov 04 2022 12:45:22 GMT+0000 (Coordinated Universal Time)
+                at Wed Nov 16 2022 12:51:59 GMT+0000 (Coordinated Universal Time)
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov.info

@@ -3811,6 +3811,178 @@ BRF:8
 BRH:0
 end_of_record
 TN:
+SF:src/hooks/useCameraFollowPath/useCameraFollowPath.tsx
+FN:40,(anonymous_0)
+FN:60,(anonymous_1)
+FN:66,(anonymous_2)
+FN:73,(anonymous_3)
+FN:80,(anonymous_4)
+FN:84,(anonymous_5)
+FN:94,(anonymous_6)
+FN:105,centerRoute
+FN:117,play
+FN:145,(anonymous_9)
+FN:160,reset
+FN:167,(anonymous_11)
+FN:173,(anonymous_12)
+FN:174,(anonymous_13)
+FNF:14
+FNH:0
+FNDA:0,(anonymous_0)
+FNDA:0,(anonymous_1)
+FNDA:0,(anonymous_2)
+FNDA:0,(anonymous_3)
+FNDA:0,(anonymous_4)
+FNDA:0,(anonymous_5)
+FNDA:0,(anonymous_6)
+FNDA:0,centerRoute
+FNDA:0,play
+FNDA:0,(anonymous_9)
+FNDA:0,reset
+FNDA:0,(anonymous_11)
+FNDA:0,(anonymous_12)
+FNDA:0,(anonymous_13)
+DA:40,10
+DA:43,0
+DA:44,0
+DA:45,0
+DA:46,0
+DA:47,0
+DA:48,0
+DA:49,0
+DA:51,0
+DA:52,0
+DA:53,0
+DA:55,0
+DA:60,0
+DA:61,0
+DA:62,0
+DA:63,0
+DA:66,0
+DA:67,0
+DA:68,0
+DA:69,0
+DA:70,0
+DA:73,0
+DA:74,0
+DA:75,0
+DA:76,0
+DA:77,0
+DA:80,0
+DA:81,0
+DA:84,0
+DA:85,0
+DA:86,0
+DA:87,0
+DA:88,0
+DA:89,0
+DA:90,0
+DA:91,0
+DA:92,0
+DA:94,0
+DA:95,0
+DA:96,0
+DA:97,0
+DA:98,0
+DA:99,0
+DA:100,0
+DA:101,0
+DA:102,0
+DA:106,0
+DA:107,0
+DA:109,0
+DA:110,0
+DA:114,0
+DA:118,0
+DA:120,0
+DA:121,0
+DA:122,0
+DA:123,0
+DA:126,0
+DA:129,0
+DA:130,0
+DA:139,0
+DA:140,0
+DA:142,0
+DA:144,0
+DA:145,0
+DA:146,0
+DA:149,0
+DA:150,0
+DA:151,0
+DA:152,0
+DA:153,0
+DA:156,0
+DA:161,0
+DA:162,0
+DA:163,0
+DA:164,0
+DA:167,0
+DA:168,0
+DA:169,0
+DA:170,0
+DA:173,0
+DA:174,0
+DA:175,0
+DA:176,0
+DA:181,0
+DA:187,10
+LF:85
+LH:2
+BRDA:51,0,0,0
+BRDA:51,0,1,0
+BRDA:53,1,0,0
+BRDA:53,1,1,0
+BRDA:62,2,0,0
+BRDA:62,2,1,0
+BRDA:67,3,0,0
+BRDA:67,3,1,0
+BRDA:69,4,0,0
+BRDA:69,4,1,0
+BRDA:69,5,0,0
+BRDA:69,5,1,0
+BRDA:74,6,0,0
+BRDA:74,6,1,0
+BRDA:76,7,0,0
+BRDA:76,7,1,0
+BRDA:76,8,0,0
+BRDA:76,8,1,0
+BRDA:85,9,0,0
+BRDA:85,9,1,0
+BRDA:95,10,0,0
+BRDA:95,10,1,0
+BRDA:106,11,0,0
+BRDA:106,11,1,0
+BRDA:106,12,0,0
+BRDA:106,12,1,0
+BRDA:109,13,0,0
+BRDA:109,13,1,0
+BRDA:109,14,0,0
+BRDA:109,14,1,0
+BRDA:118,15,0,0
+BRDA:118,15,1,0
+BRDA:120,16,0,0
+BRDA:120,16,1,0
+BRDA:122,17,0,0
+BRDA:122,17,1,0
+BRDA:122,18,0,0
+BRDA:122,18,1,0
+BRDA:129,19,0,0
+BRDA:129,19,1,0
+BRDA:139,20,0,0
+BRDA:139,20,1,0
+BRDA:161,21,0,0
+BRDA:161,21,1,0
+BRDA:168,22,0,0
+BRDA:168,22,1,0
+BRDA:168,23,0,0
+BRDA:168,23,1,0
+BRDA:175,24,0,0
+BRDA:175,24,1,0
+BRF:50
+BRH:0
+end_of_record
+TN:
 SF:src/hooks/useExportMap/index.ts
 FN:13,useExportMap
 FN:16,(anonymous_1)

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/index.d.ts

@@ -30,6 +30,7 @@ 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/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

@@ -19678,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;
 
@@ -19740,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, 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