@mapcomponents/react-maplibre 0.1.52 → 0.1.55

package/package.json

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

package/src/components/MlLayer/MlLayer.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import useLayer from "../../hooks/useLayer";
+import { Feature, FeatureCollection } from "@turf/turf";
 
 interface MlLayerProps {
   /**
@@ -20,6 +21,10 @@ interface MlLayerProps {
    * Javascript object that is passed the addLayer command as first parameter.
    */
   options?: any;
+  /**
+   * GeoJSON data that is supposed to be rendered by this component.
+   */
+  geojson?: Feature | FeatureCollection | undefined;
 }
 
 /**
@@ -32,6 +37,7 @@ const MlLayer = (props: MlLayerProps) => {
     idPrefix: 'MlLayer-',
     layerId: props.layerId,
     mapId: props.mapId,
+    geojson: props.geojson,
     options: {
       type: "background",
       paint: {

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

@@ -2,7 +2,9 @@ import React from "react";
 
 import MlNavigationTools from "./MlNavigationTools";
 
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+import noNavToolsDecorator from "../../decorators/NoNavToolsDecorator";
+import BuildIcon from "@mui/icons-material/Build";
+import Button from "@mui/material/Button";
 
 const storyoptions = {
   title: "MapComponents/MlNavigationTools",
@@ -11,13 +13,47 @@ const storyoptions = {
     url: {},
     layer: {},
   },
-  decorators: mapContextDecorator,
+  decorators: noNavToolsDecorator,
 };
 export default storyoptions;
 
 const Template = (args) => <MlNavigationTools {...args} />;
 
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {
+export const DefaultConfig = Template.bind({});
+DefaultConfig.parameters = {};
+DefaultConfig.args = {};
+
+export const No3DButton = Template.bind({});
+No3DButton.parameters = {};
+No3DButton.args = {
+  show3DButton: false,
+};
+
+export const ShowCenterLocationButton = Template.bind({});
+ShowCenterLocationButton.parameters = {};
+ShowCenterLocationButton.args = {
+  showFollowGpsButton: false,
+  showCenterLocationButton: true,
+};
+
+export const NoZoomButtons = Template.bind({});
+NoZoomButtons.parameters = {};
+NoZoomButtons.args = {
+  showZoomButtons: false,
+};
+
+export const NoFollowGpsButton = Template.bind({});
+NoFollowGpsButton.parameters = {};
+NoFollowGpsButton.args = {
+  showFollowGpsButton: false,
+};
+
+export const CustomButton = Template.bind({});
+CustomButton.parameters = {};
+CustomButton.args = {
+  children: (
+    <Button onClick={() => {}}>
+      <BuildIcon sx={{ fontSize: "1em" }} />
+    </Button>
+  ),
 };

package/src/components/MlNavigationTools/MlNavigationTools.tsx

@@ -20,6 +20,14 @@ interface MlNavigationToolsProps {
    * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
    */
   insertBeforeLayer?: string;
+  /**
+   * Show 3D button
+   */
+  show3DButton?: boolean;
+  /**
+   * Show zoom button
+   */
+  showZoomButtons?: boolean;
   /**
    * Show follow GPS button
    */
@@ -28,6 +36,10 @@ interface MlNavigationToolsProps {
    * Show center on current position button
    */
   showCenterLocationButton?: boolean;
+  /**
+   * Additional JSX Elements to be rendered below MlNavigationTools buttons
+   */
+  children?: JSX.Element;
 }
 
 /**
@@ -51,12 +63,15 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
     //border: "1px solid #bbb",
     //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
     margin: 0.15,
-    fontSize: mediaIsMobile ? "1.5em" : "1.2em",
+    fontSize: mediaIsMobile ? "1.4em" : "1.2em",
     ":hover": {
       backgroundColor: "#515151",
     },
     color: "#ececec",
   };
+  const iconStyle = {
+    fontSize: buttonStyle.fontSize,
+  }
 
   useEffect(() => {
     if (!mapHook.map) return;
@@ -122,18 +137,20 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
           boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
         }}
       />
-      <Button
-        sx={{ ...buttonStyle, fontSize: mediaIsMobile ? "1.4em" : "1em", fontWeight: 600 }}
-        onClick={adjustPitch}
-      >
-        {pitch ? "2D" : "3D"}
-      </Button>
-      {props.showFollowGpsButton &&
-      <MlFollowGps style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
-      }
-      {props.showCenterLocationButton &&
-      <MlCenterPosition style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
-      }
+      {props.show3DButton && (
+        <Button
+          sx={{ ...buttonStyle, fontSize: mediaIsMobile ? "1.4em" : "1em", fontWeight: 600 }}
+          onClick={adjustPitch}
+        >
+          {pitch ? "2D" : "3D"}
+        </Button>
+      )}
+      {props.showFollowGpsButton && (
+        <MlFollowGps style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+      )}
+      {props.showCenterLocationButton && (
+        <MlCenterPosition style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+      )}
       <ButtonGroup
         orientation="vertical"
         sx={{
@@ -143,21 +160,31 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
           "Button:hover": { border: "none" },
         }}
       >
-        <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomIn}>
-          <ControlPointIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
-        </Button>
-        <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomOut}>
-          <RemoveCircleOutlineIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
-        </Button>
+        {props.showZoomButtons && (
+          <>
+            <Button sx={{ ...buttonStyle }} onClick={zoomIn}>
+              <ControlPointIcon sx={{...iconStyle}} />
+            </Button>
+            <Button sx={{ ...buttonStyle }} onClick={zoomOut}>
+              <RemoveCircleOutlineIcon  sx={{...iconStyle}} />
+            </Button>
+          </>
+        )}
       </ButtonGroup>
+      {props.children &&
+        React.cloneElement(props.children, {
+          sx: { ...buttonStyle },
+        })}
     </div>
   );
 };
 
 MlNavigationTools.defaultProps = {
   mapId: undefined,
+  show3DButton: true,
   showFollowGpsButton: true,
   showCenterLocationButton: false,
+  showZoomButtons: true,
 };
 
 export default MlNavigationTools;

package/src/decorators/NoNavToolsDecorator.js

@@ -0,0 +1,31 @@
+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({});
+
+const decorators = [
+  (Story) => (
+    <div className="fullscreen_map">
+      <ThemeProvider theme={theme}>
+        <MapComponentsProvider>
+          <Story />
+          <MapLibreMap
+            options={{
+              zoom: 14.5,
+              style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+              center: [7.0851268, 50.73884],
+            }}
+            mapId="map_1"
+          />
+        </MapComponentsProvider>
+      </ThemeProvider>
+    </div>
+  ),
+];
+
+export default decorators;