@mapcomponents/react-maplibre 0.1.54 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.54",
+  "version": "0.1.57",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",

package/src/components/MlFollowGps/MlFollowGps.stories.js

@@ -13,8 +13,10 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => <MlFollowGps />;
+const Template = (props) => <MlFollowGps {...props}/>;
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
-ExampleConfig.args = {};
+ExampleConfig.args = {
+  followUserPosition: false
+};

package/src/components/MlFollowGps/MlFollowGps.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useState, useCallback, useMemo } from "react";
+import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import useMap from "../../hooks/useMap";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 
-import { Button } from "@mui/material";
-import  GpsFixedIcon  from "@mui/icons-material/GpsFixed";
+import { Button, SxProps } from "@mui/material";
+import GpsFixedIcon from "@mui/icons-material/GpsFixed";
 
 import { point, circle, lineArc, Feature, Point } from "@turf/turf";
+import { CircleLayerSpecification, FillLayerSpecification } from "maplibre-gl";
 
 interface MlFollowGpsProps {
   /**
@@ -30,13 +31,29 @@ interface MlFollowGpsProps {
    * By default, if showUserLocation is true, a transparent circle will be drawn around the user location
    * indicating the accuracy (95% confidence level) of the user's location. Set to false to disable.
    */
-  showAccuracyCircle?: boolean,
+  showAccuracyCircle?: boolean;
   /**
-   * position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
+   * Use the MapLibre.flyTo function to center the map to the current users position if true.
+   * Otherwise the MapLibre.setCenter function is used.
+   */
+  useFlyTo?: boolean;
+  /**
+   * Center map to current position once updated location data is recieved.
+   * "false" will center the map once on component activation and then display the updated user location on the map.
+   */
+  centerUserPosition?: boolean;
+  /**
+   * Orientation cone paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the orientation cone polygon.
    * Use any available paint prop from layer type "fill".
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  circlePaint?: any;
+  orientationConePaint?: FillLayerSpecification["paint"];
+  /**
+   * Position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the position circle.
+   * Use any available paint prop from layer type "circle".
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   */
+  circlePaint?: CircleLayerSpecification["paint"];
   /**
    * Active button font color
    */
@@ -46,15 +63,15 @@ interface MlFollowGpsProps {
    */
   offColor?: string;
   /**
-   * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
+   * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy polygon.
    * Use any available paint prop from layer type "fill".
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  accuracyPaint?: any;
+  accuracyPaint?: FillLayerSpecification["paint"];
   /**
    * CSS style object that is applied to the button component
    */
-  style?: any;
+  buttonSx?: SxProps | any;
 }
 
 /**
@@ -69,22 +86,30 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
   });
 
   const [isFollowed, setIsFollowed] = useState(false);
-  const [userLocationGeoJson, setUserLocationGeoJson] =
-    useState<Feature<Point>>();
+  const [userLocationGeoJson, setUserLocationGeoJson] = useState<Feature<Point>>();
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
   const [accuracyGeoJson, setAccuracyGeoJson] = useState<Feature>();
   const [deviceOrientation, setDeviceOrientation] = useState(0);
+  const initiallyCentered = useRef(false);
 
   const getLocationSuccess = useCallback(
     (pos) => {
       if (!mapHook.map) return;
 
-      mapHook.map.map.flyTo({
-        center: [pos.coords.longitude, pos.coords.latitude],
-        zoom: 18,
-        speed: 1,
-        curve: 1,
-      });
+      if ((!props.centerUserPosition && !initiallyCentered.current) || props.centerUserPosition) {
+        if (props.useFlyTo) {
+          mapHook.map.map.flyTo({
+            center: [pos.coords.longitude, pos.coords.latitude],
+            zoom: 18,
+            speed: 1,
+            curve: 1,
+          });
+        } else {
+          mapHook.map.map.setCenter([pos.coords.longitude, pos.coords.latitude]);
+        }
+
+        initiallyCentered.current = true;
+      }
       if (!props.showUserLocation) return;
       const geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
       setUserLocationGeoJson(geoJsonPoint);
@@ -124,6 +149,8 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
       return () => {
         window.removeEventListener("deviceorientation", _handleOrientation);
       };
+    } else {
+      initiallyCentered.current = false;
     }
     return;
   }, [isFollowed]);
@@ -132,10 +159,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
     if (!mapHook.map) return;
 
     if (isFollowed) {
-      let _watchId = navigator.geolocation.watchPosition(
-        getLocationSuccess,
-        getLocationError
-      );
+      let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
 
       return () => {
         navigator.geolocation.clearWatch(_watchId);
@@ -167,6 +191,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
             "fill-color": "#0000ff",
             "fill-antialias": false,
             "fill-opacity": 0.3,
+            ...props.orientationConePaint,
           }}
           insertBeforeLayer={props.insertBeforeLayer}
         />
@@ -191,7 +216,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
         sx={{
           zIndex: 1002,
           color: isFollowed ? props.onColor : props.offColor,
-          ...props.style,
+          ...props.buttonSx,
         }}
         disabled={locationAccessDenied}
         onClick={() => {
@@ -199,7 +224,9 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
         }}
       >
         {" "}
-        <GpsFixedIcon sx={{ ...(props.style?.fontSize?{fontSize: props.style?.fontSize}:{}) }} />{" "}
+        <GpsFixedIcon
+          sx={{ ...(props.buttonSx?.fontSize ? { fontSize: props.buttonSx?.fontSize } : {}) }}
+        />{" "}
       </Button>
     </>
   );
@@ -207,7 +234,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 
 MlFollowGps.defaultProps = {
   mapId: undefined,
-  style: {
+  buttonSx: {
     minWidth: "30px",
     minHeight: "30px",
     width: "30px",
@@ -226,6 +253,8 @@ MlFollowGps.defaultProps = {
   showAccuracyCircle: true,
   showUserLocation: true,
   showOrientation: true,
+  centerUserPosition: true,
+  useFlyTo: false,
 };
 
 export default MlFollowGps;

package/src/components/MlLayer/MlLayer.tsx

@@ -24,7 +24,7 @@ interface MlLayerProps {
   /**
    * GeoJSON data that is supposed to be rendered by this component.
    */
-  geojson: Feature | FeatureCollection | undefined;
+  geojson?: Feature | FeatureCollection | undefined;
 }
 
 /**

package/src/components/MlNavigationTools/MlNavigationTools.stories.js

@@ -36,6 +36,12 @@ ShowCenterLocationButton.args = {
   showCenterLocationButton: true,
 };
 
+export const AlterToolPosition = Template.bind({});
+AlterToolPosition.parameters = {};
+AlterToolPosition.args = {
+  sx: { top: "10px", right: "5px" },
+};
+
 export const NoZoomButtons = Template.bind({});
 NoZoomButtons.parameters = {};
 NoZoomButtons.args = {

package/src/components/MlNavigationTools/MlNavigationTools.tsx

@@ -3,6 +3,8 @@ import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import ControlPointIcon from "@mui/icons-material/ControlPoint";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
+import Box from "@mui/material/Box";
+import { SxProps } from "@mui/material";
 
 import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
 import MlFollowGps from "../MlFollowGps/MlFollowGps";
@@ -40,6 +42,10 @@ interface MlNavigationToolsProps {
    * Additional JSX Elements to be rendered below MlNavigationTools buttons
    */
   children?: JSX.Element;
+  /**
+   * Style attribute for NavigationTools container
+   */
+  sx?: SxProps;
 }
 
 /**
@@ -71,7 +77,7 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
   };
   const iconStyle = {
     fontSize: buttonStyle.fontSize,
-  }
+  };
 
   useEffect(() => {
     if (!mapHook.map) return;
@@ -115,14 +121,14 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
   };
 
   return (
-    <div
-      style={{
+    <Box
+      sx={{
         zIndex: 501,
         position: "absolute",
-        right: mediaIsMobile ? "15px" : "5px",
-        bottom: mediaIsMobile ? "40px" : "20px",
         display: "flex",
         flexDirection: "column",
+        ...(mediaIsMobile ? { margin: "20px 10px 20px 10px" } : {}),
+        ...props.sx,
       }}
     >
       <MlNavigationCompass
@@ -146,7 +152,7 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
         </Button>
       )}
       {props.showFollowGpsButton && (
-        <MlFollowGps style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+        <MlFollowGps buttonSx={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
       )}
       {props.showCenterLocationButton && (
         <MlCenterPosition style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
@@ -163,10 +169,10 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
         {props.showZoomButtons && (
           <>
             <Button sx={{ ...buttonStyle }} onClick={zoomIn}>
-              <ControlPointIcon sx={{...iconStyle}} />
+              <ControlPointIcon sx={{ ...iconStyle }} />
             </Button>
             <Button sx={{ ...buttonStyle }} onClick={zoomOut}>
-              <RemoveCircleOutlineIcon  sx={{...iconStyle}} />
+              <RemoveCircleOutlineIcon sx={{ ...iconStyle }} />
             </Button>
           </>
         )}
@@ -175,7 +181,7 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
         React.cloneElement(props.children, {
           sx: { ...buttonStyle },
         })}
-    </div>
+    </Box>
   );
 };
 
@@ -185,6 +191,10 @@ MlNavigationTools.defaultProps = {
   showFollowGpsButton: true,
   showCenterLocationButton: false,
   showZoomButtons: true,
+  sx: {
+    right: "5px",
+    bottom: "20px",
+  },
 };
 
 export default MlNavigationTools;

package/src/components/MlScaleReference/MlScaleReference.stories.js

@@ -17,37 +17,35 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (props) => {
+const ToolbarTemplate = (props) => {
+  return (
+    <TopToolbar>
+      <MlScaleReference {...props} />
+    </TopToolbar>
+  );
+};
+const OverlayTemplate = (props) => {
   const mediaIsMobile = useMediaQuery("(max-width:900px)");
-  return(
-    <>
-      {props.show === "toolbar" && (
-        <TopToolbar>
-          <MlScaleReference {...props} />
-        </TopToolbar>
-      )}
-      {props.show === "overlay" && (
-        <div
-          style={{
-            position: "absolute",
-            zIndex: 100000,
-            bottom: mediaIsMobile ? "40px" : "20px",
-            right: "20px",
-          }}
-        >
-          <MlScaleReference {...props} />
-        </div>
-      )}
-    </>
+  return (
+    <div
+      style={{
+        position: "absolute",
+        zIndex: 100000,
+        bottom: mediaIsMobile ? "40px" : "20px",
+        right: "20px",
+      }}
+    >
+      <MlScaleReference {...props} />
+    </div>
   );
-}
+};
 
-export const Toolbar = Template.bind({});
+export const Toolbar = ToolbarTemplate.bind({});
 Toolbar.args = {
   show: "toolbar",
 };
 
-export const Overlay = Template.bind({});
+export const Overlay = OverlayTemplate.bind({});
 Overlay.args = {
   show: "overlay",
 };

package/src/decorators/MapContextDecorator.js

@@ -3,17 +3,15 @@ import React from "react";
 import { MapComponentsProvider } from "../index";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 import "./style.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
 import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
-
-const theme = createTheme({});
+import ThemeWrapper from "./ThemeWrapper";
 
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">
-      <ThemeProvider theme={theme}>
+      <ThemeWrapper>
         <MapComponentsProvider>
-          <Story />
+          {Story()}
           <MapLibreMap
             options={{
               zoom: 14.5,
@@ -22,12 +20,13 @@ const decorators = [
             }}
             mapId="map_1"
           />
-          <MlNavgiationTools 
-          mapId="map_1">
-
-          </MlNavgiationTools>
+          <MlNavgiationTools
+            sx={{ top: "10px", right: "5px" }}
+            showZoomButtons={false}
+            mapId="map_1"
+          />
         </MapComponentsProvider>
-      </ThemeProvider>
+      </ThemeWrapper>
     </div>
   ),
 ];

package/src/decorators/MultiMapContextDecorator.js

@@ -4,74 +4,73 @@ import { MapComponentsProvider } from "../index";
 
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 
-
 import "./style.css";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
 
 const theme = createTheme({});
 
-
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">
       <ThemeProvider theme={theme}>
         <MapComponentsProvider>
-            <div
-              style={{
-                overflow: "hidden",
-                position: "absolute",
-                top: "0",
-                bottom: "0",
-                left: "0",
-                right: "0",
-              }}
-            >
-              <Story />
-              <div className="maps">
-                <MapLibreMap
-                  mapId="map_1"
-                  options={{
-                    //style: "mapbox://styles/mapbox/light-v10",
-                    //center: [-87.62712, 41.89033],
-                    zoom: 14.5,
-                    //pitch: 45,
-                    //style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-                    style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-                    //center: [8.607, 53.1409349],
-                    //zoom: 13,
-                    center: [7.0851268, 50.73884],
-                    //maxBounds: [
-                    //  [1.40625, 43.452919],
-                    //  [17.797852, 55.973798],
-                    //],
-                  }}
-                />
-                <MapLibreMap
-                  mapId="map_2"
-                  options={{
-                    //style: "mapbox://styles/mapbox/light-v10",
-                    //center: [-87.62712, 41.89033],
-                    zoom: 14.5,
-                    //pitch: 45,
-                    style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-                    //style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-                    //center: [8.607, 53.1409349],
-                    //zoom: 13,
-                    center: [7.0851268, 50.73884],
-                    //maxBounds: [
-                    //  [1.40625, 43.452919],
-                    //  [17.797852, 55.973798],
-                    //],
-                  }}
-                />
-
-                <MlNavgiationTools 
-                mapId="map_1">
+          <div
+            style={{
+              overflow: "hidden",
+              position: "absolute",
+              top: "0",
+              bottom: "0",
+              left: "0",
+              right: "0",
+            }}
+          >
+            <Story />
+            <div className="maps">
+              <MapLibreMap
+                mapId="map_1"
+                options={{
+                  //style: "mapbox://styles/mapbox/light-v10",
+                  //center: [-87.62712, 41.89033],
+                  zoom: 14.5,
+                  //pitch: 45,
+                  //style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+                  style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
+                  //center: [8.607, 53.1409349],
+                  //zoom: 13,
+                  center: [7.0851268, 50.73884],
+                  //maxBounds: [
+                  //  [1.40625, 43.452919],
+                  //  [17.797852, 55.973798],
+                  //],
+                }}
+              />
+              <MapLibreMap
+                mapId="map_2"
+                options={{
+                  //style: "mapbox://styles/mapbox/light-v10",
+                  //center: [-87.62712, 41.89033],
+                  zoom: 14.5,
+                  //pitch: 45,
+                  style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+                  //style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
+                  //center: [8.607, 53.1409349],
+                  //zoom: 13,
+                  center: [7.0851268, 50.73884],
+                  //maxBounds: [
+                  //  [1.40625, 43.452919],
+                  //  [17.797852, 55.973798],
+                  //],
+                }}
+              />
 
-                </MlNavgiationTools>
-              </div>
+              <MlNavgiationTools
+                sx={{ top: "10px", right: "5px" }}
+                showZoomButtons={false}
+                mapId="map_1"
+              />
             </div>
+          </div>
         </MapComponentsProvider>
       </ThemeProvider>
     </div>

package/src/decorators/ThemeWrapper.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ThemeProvider } from "@mui/styles";
+import { createTheme } from "@mui/material";
+
+const theme = createTheme({});
+
+export default function ThemeWrapper(props) {
+  return <ThemeProvider theme={theme}>{props?.children}</ThemeProvider>;
+}

package/src/index.ts

@@ -12,6 +12,7 @@ export { default as MlNavigationCompass } from "./components/MlNavigationCompass
 export { default as MlLayer } from "./components/MlLayer/MlLayer";
 export { default as MlVectorTileLayer } from "./components/MlVectorTileLayer/MlVectorTileLayer";
 export { default as MlWmsLayer } from "./components/MlWmsLayer/MlWmsLayer";
+export { default as MlScaleReference } from "./components/MlScaleReference/MlScaleReference";
 
 export { default as MlLayerMagnify } from "./components/MlLayerMagnify/MlLayerMagnify";
 export { default as MlLayerSwipe } from "./components/MlLayerSwipe/MlLayerSwipe";