@mapcomponents/react-maplibre 0.1.56 → 0.1.57

package/package.json

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

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,
@@ -28,7 +26,7 @@ const decorators = [
             mapId="map_1"
           />
         </MapComponentsProvider>
-      </ThemeProvider>
+      </ThemeWrapper>
     </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";