@mapcomponents/react-maplibre 0.1.8 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.8",
+  "version": "0.1.12",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",

package/rollup.config.js

@@ -11,7 +11,9 @@ const config = {
   input: pkg.source,
   output: [{ file: pkg.module, format: "esm", sourcemap: true }],
   plugins: [
-    svgr(),
+    svgr({
+      svgo: false,
+    }),
     url(),
     external(),
     babel({
@@ -21,6 +23,12 @@ const config = {
     css(),
     del({ targets: ["dist/*"] }),
   ],
-  external: ["prop-types",  "d3", ...Object.keys(pkg.peerDependencies || {})],
+  external: [
+    "prop-types",
+    "d3",
+    "@emotion/react",
+    "@emotion/styled",
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
 };
 export default config;

package/src/components/MlCreatePdfButton/MlCreatePdfButton.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlCreatePdfButton",
-  "title": "Sinmple Map print",
+  "title": "Export PDF",
   "description": "Creates a PDF file with the current map view.",
   "i18n": {
     "de": {

package/src/components/MlFollowGps/MlFollowGps.js

@@ -29,6 +29,7 @@ const MlFollowGps = (props) => {
   const initializedRef = useRef(false);
   const mapRef = useRef(undefined);
   const componentId = useRef((props.idPrefix ? props.idPrefix : "MlFollowGps-") + uuidv4());
+  const [accuracyRadius, setAccuracyRadius] = useState(30);
 
   useEffect(() => {
     let _componentId = componentId.current;
@@ -66,6 +67,7 @@ const MlFollowGps = (props) => {
   const getLocationSuccess = (pos) => {
     if (!mapRef.current) return;
     mapRef.current.setCenter([pos.coords.longitude, pos.coords.latitude]);
+    setAccuracyRadius(pos.coords.accuracy)
     setGeoJson(point([pos.coords.longitude, pos.coords.latitude]));
   };
 
@@ -79,7 +81,18 @@ const MlFollowGps = (props) => {
       {isFollowed && geoJson &&
       <MlGeoJsonLayer geojson={geoJson} type={"circle"}
                       paint={{
-                        "circle-radius": 30,
+                        "circle-radius": {
+                          stops: [
+                            [0, 0],
+                            [
+                              20,
+                              (accuracyRadius) /
+                              0.075 /
+                              Math.cos((geoJson.geometry.coordinates[1] * Math.PI) / 180),
+                            ],
+                          ],
+                          base: 2,
+                        },
                         "circle-color": "#ee7700",
                         "circle-opacity": 0.5,
                       }}

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -21,6 +21,7 @@ const MlGeoJsonLayer = (props) => {
   const mapRef = useRef(null);
   const initializedRef = useRef(false);
   const transitionInProgressRef = useRef(false);
+  const transitionTimeoutRef = useRef(undefined);
   const currentTransitionStepRef = useRef(false);
   const transitionGeojsonDataRef = useRef([]);
   const transitionGeojsonCommonDataRef = useRef([]);
@@ -33,7 +34,11 @@ const MlGeoJsonLayer = (props) => {
     let _componentId = componentId.current;
     return () => {
       // This is the cleanup function, it is called when this react component is removed from react-dom
+      if(transitionTimeoutRef.current){
+        clearTimeout(transitionTimeoutRef.current)
+      }
       if (mapRef.current) {
+
         mapRef.current.cleanup(_componentId);
 
         mapRef.current = null;
@@ -63,7 +68,8 @@ const MlGeoJsonLayer = (props) => {
         msPerStep,
         currentTransitionStepRef,
         mapRef.current,
-        componentId.current
+        componentId.current,
+        transitionTimeoutRef
       );
     },
     [props]
@@ -153,9 +159,7 @@ const MlGeoJsonLayer = (props) => {
         typeof props.geojson.geometry !== "undefined"
       ) {
         transitionToGeojson(props.geojson);
-        setTimeout(() => {
-          oldGeojsonRef.current = props.geojson;
-        }, props.transitionTime / 2);
+        oldGeojsonRef.current = props.geojson;
       }
     }
   }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlGeoJsonLayer",
-  "title": "GeoJSON level",
+  "title": "GeoJSON layer",
   "description": "",
   "i18n": {
     "de": {

package/src/components/MlGeoJsonLayer/util/transitionFunctions.js

@@ -8,13 +8,14 @@ const _showNextTransitionSegment = function (
   transitionGeojsonDataRef,
   transitionGeojsonCommonDataRef,
   currentTransitionStepRef,
-  msPerStep
+  msPerStep,
+  transitionTimeoutRef
 ) {
   if (
     typeof map.getSource(layerId) === "undefined" ||
     !transitionInProgressRef.current
   ) {
-    setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
+    transitionTimeoutRef.current = setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
     return;
   }
   if (
@@ -31,6 +32,10 @@ const _showNextTransitionSegment = function (
               .geometry.coordinates,
           ]);
 
+    if (!map?.getSource?.(layerId)) {
+      return;
+    }
+
     map.getSource(layerId).setData(newData);
 
     if (typeof props.onTransitionFrame === "function") {
@@ -42,7 +47,7 @@ const _showNextTransitionSegment = function (
       transitionInProgressRef.current &&
       currentTransitionStepRef.current < transitionGeojsonDataRef.current.length
     ) {
-      setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
+      transitionTimeoutRef.current = setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
     } else {
       if (typeof props.onTransitionEnd === "function") {
         props.onTransitionEnd(props.geojson);
@@ -62,7 +67,8 @@ const _transitionToGeojson = (
   msPerStep,
   currentTransitionStepRef,
   map,
-  layerId
+  layerId,
+  transitionTimeoutRef
 ) => {
   // create the transition geojson between oldGeojsonRef.current and props.geojson
 
@@ -189,12 +195,12 @@ const _transitionToGeojson = (
     );
     // for some reason turf.lineChunk returns the full lineString as element 0, chunks start at 1
     tmpLinestring = tmpChunks.features[1];
-    for (i = 1; i < srcTransitionSteps; i++) {
+    for (i = 0; i < srcTransitionSteps; i++) {
       transitionGeojsonDataRef.current.push(tmpLinestring);
-      if (typeof tmpChunks.features[i + 1] !== "undefined") {
+      if (typeof tmpChunks.features[i] !== "undefined") {
         tmpLinestring = turf.lineString([
           ...tmpLinestring.geometry.coordinates,
-          ...tmpChunks.features[i + 1].geometry.coordinates,
+          ...tmpChunks.features[i].geometry.coordinates,
         ]);
       } else {
         transitionGeojsonDataRef.current.push(tmpLinestring);
@@ -212,12 +218,12 @@ const _transitionToGeojson = (
     );
     // for some reason turf.lineChunk returns the full lineString as element 0, chunks start at 1
     tmpLinestring = tmpChunks.features[1];
-    for (i = 1; i < targetTransitionSteps; i++) {
+    for (i = 0; i < targetTransitionSteps; i++) {
       transitionGeojsonDataRef.current.push(tmpLinestring);
-      if (typeof tmpChunks.features[i + 1] !== "undefined") {
+      if (typeof tmpChunks.features[i] !== "undefined") {
         tmpLinestring = turf.lineString([
           ...tmpLinestring.geometry.coordinates,
-          ...tmpChunks.features[i + 1].geometry.coordinates,
+          ...tmpChunks.features[i].geometry.coordinates,
         ]);
       } else {
         transitionGeojsonDataRef.current.push(tmpLinestring);
@@ -229,7 +235,7 @@ const _transitionToGeojson = (
 
   currentTransitionStepRef.current = 1;
   transitionInProgressRef.current = true;
-  setTimeout(
+  transitionTimeoutRef.current = setTimeout(
     () =>
       _showNextTransitionSegment(
         props,
@@ -239,7 +245,8 @@ const _transitionToGeojson = (
         transitionGeojsonDataRef,
         transitionGeojsonCommonDataRef,
         currentTransitionStepRef,
-        msPerStep
+        msPerStep,
+        transitionTimeoutRef
       ),
     msPerStep
   );

package/src/components/MlVectorTileLayer/MlVectorTileLayer.meta.json

@@ -1,14 +1,14 @@
 {
   "name": "MlVectorTileLayer",
-  "title": "Vektor tiles",
-  "description": "Component: Vector Tiles (add to the Application/map)",
+  "title": "Vector tile layer",
+  "description": "Adds a vector tile layer to the map",
   "i18n": {
     "de": {
       "title": "Vektorenkacheln",
       "description": "Baustein: Vektorenkacheln/Vector Tiles (der Anwendung/Karte hinzufügen)"
     }
   },
-  "tags": [ "Map layer" ],
+  "tags": ["Map layer"],
   "category": "layer",
   "type": "component",
   "price": 5000

package/src/decorators/MapContextDashboardDecorator.js

@@ -1,17 +1,12 @@
 import React from "react";
 
 import { MapComponentsProvider } from "@mapcomponents/react-core";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
 import "./style.css";
 
 const decorators = [
   (Story) => (
     <MapComponentsProvider>
-      <LoadingOverlayProvider>
-        <LoadingOverlay></LoadingOverlay>
         <Story />
-      </LoadingOverlayProvider>
     </MapComponentsProvider>
   ),
 ];

package/src/decorators/MapContextDecorator.js

@@ -2,16 +2,12 @@ import React from "react";
 
 import { MapComponentsProvider } from "@mapcomponents/react-core";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
 import "./style.css";
 
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">
       <MapComponentsProvider>
-        <LoadingOverlayProvider>
-          <LoadingOverlay></LoadingOverlay>
 
           <Story />
           <MapLibreMap
@@ -22,7 +18,6 @@ const decorators = [
             }}
             mapId="map_1"
           />
-        </LoadingOverlayProvider>
       </MapComponentsProvider>
     </div>
   ),

package/src/decorators/MapContextKlokantechBasicDecorator.js

@@ -2,16 +2,12 @@ import React from "react";
 
 import { MapComponentsProvider } from "@mapcomponents/react-core";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
 import "./style.css";
 
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">
       <MapComponentsProvider>
-        <LoadingOverlayProvider>
-          <LoadingOverlay></LoadingOverlay>
           <Story />
           <MapLibreMap
             options={{
@@ -31,7 +27,6 @@ const decorators = [
               //          ],
             }}
           />
-        </LoadingOverlayProvider>
       </MapComponentsProvider>
     </div>
   ),

package/src/decorators/MultiMapContextDecorator.js

@@ -1,8 +1,6 @@
 import React from "react";
 
 import { MapComponentsProvider } from "@mapcomponents/react-core";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
 
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 
@@ -17,8 +15,6 @@ const decorators = [
     <div className="fullscreen_map">
       <ThemeProvider theme={theme}>
         <MapComponentsProvider>
-          <LoadingOverlayProvider>
-            <LoadingOverlay></LoadingOverlay>
             <div
               style={{
                 overflow: "hidden",
@@ -69,7 +65,6 @@ const decorators = [
                 />
               </div>
             </div>
-          </LoadingOverlayProvider>
         </MapComponentsProvider>
       </ThemeProvider>
     </div>

package/src/hooks/useMapState.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import useMapState from "./useMapState";
 
@@ -15,6 +15,11 @@ export default storyoptions;
 const Template = (props) => {
   const mapState = useMapState({ ...props });
 
+  useEffect(() => {
+
+  
+  }, [mapState.layers])
+
   return (
     <>
     <div
@@ -110,6 +115,6 @@ NonBaseLayersOnly.args = {
     sources: false,
   },
   filter: {
-    includeBaseLayers: true,
+    includeBaseLayers: false,
   },
 };

package/src/ui_components/Sidebar.js

@@ -1,6 +1,7 @@
 import React from "react";
 import makeStyles from "@mui/styles/makeStyles";
 import Drawer from "@mui/material/Drawer";
+import { InsertInvitationOutlined } from "@mui/icons-material";
 
 const useStyles = makeStyles((theme) => ({
   drawer: {
@@ -11,16 +12,14 @@ const useStyles = makeStyles((theme) => ({
     left: 0,
     bottom: 0,
     backgroundColor: "#fafafa",
-  },
-  drawerPaper: {
-    position: "static",
     display: "flex",
-    alignItems: "stretch",
-    alignContent: "stretch",
     flexDirection: "column",
-    padding: "90px 10px 10px 23px",
-    boxSizing: "border-box",
-    minWidth: "150px",
+    alignContent: "stretch",
+    alignItems: "stretch",
+  },
+  drawerPaper: {
+    position: "initial",
+    padding: "20px",
   },
 }));