@mapcomponents/react-maplibre 0.1.46 → 0.1.48

package/public/catalogue/mc_meta.json

@@ -0,0 +1 @@
+{"MlCreatePdfButton":{"name":"MlCreatePdfButton","title":"Export PDF","description":"Creates a PDF file with the current map view.","i18n":{"de":{"title":"PDF Export","description":"Erzeugt eine PDF Datei aus der aktuellen Kartenansicht."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlFeatureEditor":{"name":"MlFeatureEditor","title":"Sketch tools","description":"Enables the editing of Point, Linestring and Polygon GeoJSON Files.","i18n":{"de":{"title":"Skizzen Werkzeug","description":"Erzeugen und Bearbeiten von Objekten."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":0},"MlFillExtrusionLayer":{"name":"MlFillExtrusionLayer","title":"Simple 3D buildings","description":"Draws a level, out of the building outline and the height, extrudes 3D Objects as buildings.","i18n":{"de":{"title":"3D Gebäude","description":"Zeichnet eine Ebene mit einfach, aus den Gebäudeumrissen und anhand der Höhen, extrudierten 3D Objekten als Gebäude."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlFollowGps":{"name":"MlFollowGps","title":"GPS tracker","description":"","i18n":{"de":{"title":"GPS-Tracker","description":""}},"tags":[],"category":"","type":"component","price":0},"MlGeoJsonLayer":{"name":"MlGeoJsonLayer","title":"GeoJSON layer","description":"","i18n":{"de":{"title":"GeoJSON Darstellung","description":""}},"tags":[],"category":"","type":"component","price":0},"MlGPXViewer":{"name":"MlGPXViewer","title":"GPX viewer","description":"","i18n":{"de":{"title":"GPX Darstellung","description":""}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlLayerMagnify":{"name":"MlLayerMagnify","title":"Map magnifier","description":"Hides a part of a map that is superimposed on another MapLibre map.","i18n":{"de":{"title":"Kartenlupe","description":"Kartenlupe blendet einen Teil einer, von zwei übereinanderliegenden, MapLibre Karten aus."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlLayerSwipe":{"name":"MlLayerSwipe","title":"Map curtain","description":"Map curtain hides an area of the top one of two overlaying MapLibre maps.","i18n":{"de":{"title":"Kartenvorhang","description":"Kartenvorhangs blendet einen Teil einer, von zwei übereinanderliegenden, MapLibre Karten aus."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlMeasureTool":{"name":"MlMeasureTool","title":"Measure tool","description":"","i18n":{"de":{"title":"Messwerkzeug","description":""}},"tags":[],"category":"","type":"component","price":0},"MlNavigationCompass":{"name":"MlNavigationCompass","title":"Compass","description":"","i18n":{"de":{"title":"Kompass","description":""}},"tags":[],"category":"","type":"component","price":0},"MlNavigationTools":{"name":"MlNavigationTools","title":"Navigation tools","description":"","i18n":{"de":{"title":"Navigationswerkzeuge","description":""}},"tags":[],"category":"","type":"component","price":0},"MlScaleReference":{"name":"MlScaleReference","title":"Reference scale","description":"","i18n":{"de":{"title":"Maßstabsreferenz","description":""}},"tags":[],"category":"","type":"component","price":0},"MlSpatialElevationProfile":{"name":"MlSpatialElevationProfile","title":"3D height profile","description":"Draws a level, out of the building outline and the height, extrudes 3D Objects as buildings.","i18n":{"de":{"title":"3D Höhenprofil","description":"Zeichnet eine Ebene mit einfach, aus den Gebäudeumrissen und anhand der Höhen, extrudierten 3D Objekten als Gebäude."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlThreeJsLayer":{"name":"MlThreeJsLayer","title":"3D Model","description":"Layer Component, that makes it possible to show 3D Models on the map.","i18n":{"de":{"title":"3D Modelle","description":"Layer Component, das es ermöglicht 3D Modelle auf der Karte darzustellen."}},"tags":["Map layer"],"category":"layer","type":"component","price":5000},"MlTransitionGeoJsonLayer":{"name":"MlTransitionGeoJsonLayer","title":"GeoJSON layer","description":"","i18n":{"de":{"title":"GeoJSON Ebene","description":""}},"tags":[],"category":"","type":"component","price":0},"MlVectorTileLayer":{"name":"MlVectorTileLayer","title":"Vector tile layer","description":"Adds a vector tile layer to the map","i18n":{"de":{"title":"Vector Tiles","description":"Baustein: Vektorenkacheln/Vector Tiles (der Anwendung/Karte hinzufügen)"}},"tags":["Map layer"],"category":"layer","type":"component","price":5000},"MlWmsLoader":{"name":"MlWmsLoader","title":"WMS loader","description":"","i18n":{"de":{"title":"WMS Feature Info","description":""}},"tags":[],"category":"","type":"component","price":0}}

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -14,16 +14,16 @@ interface MlFeatureEditorProps {
   /**
    * Id of the target MapLibre instance in mapContext
    */
-  mapId: string;
+  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;
+  insertBeforeLayer?: string;
   /**
    * Input GeoJson data at initialization
    */
-  geojson: any;
+  geojson?: any;
   /**
    * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
    * First parameter is the new GeoJson feature.

package/src/components/MlMeasureTool/MlMeasureTool.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 
 import MlMeasureTool from "./MlMeasureTool";
 
@@ -7,61 +7,90 @@ import StraightenOutlinedIcon from "@mui/icons-material/StraightenOutlined";
 import SquareFootOutlinedIcon from "@mui/icons-material/SquareFootOutlined";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
+import { MenuItem, Select } from "@mui/material";
 
 const storyoptions = {
   title: "MapComponents/MlMeasureTool",
   component: MlMeasureTool,
-  argTypes: {
-  },
+  argTypes: {},
   decorators: mapContextDecorator,
 };
 export default storyoptions;
 
-const Template = (args) => (
-  <div style={{ width: "200px", position: "absolute", zIndex:105 }}>
-    <Grid
-      container
-      style={{
-        textAlign: "left",
-        alignItems: "center",
-      }}
-    >
-      <SquareFootOutlinedIcon />
+const Template = (args) => {
+  const [unit, setUnit] = useState("kilometers");
+  const handleChange = (event) => {
+    setUnit(event.target.value);
+  };
 
-      <h4 style={{ margin: "0px" }}>Measure Polygon</h4>
-    </Grid>
+  return (
+    <div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
+      <Select
+        name={"units"}
+        onChange={handleChange}
+        label={"Unit for measurement"}
+        defaultValue={"kilometers"}
+      >
+        <MenuItem value={"kilometers"}>Kilometers</MenuItem>
+        <MenuItem value={"miles"}>Miles</MenuItem>
+      </Select>
+      <Grid
+        container
+        style={{
+          textAlign: "left",
+          alignItems: "center",
+        }}
+      >
+        <SquareFootOutlinedIcon />
+        <h4 style={{ margin: "0px" }}>Measure Polygon</h4>
+      </Grid>
 
-    <Box m={2} style={{ textAlign: "left" }}>
-      <MlMeasureTool measureType={"polygon"} />
-    </Box>
-  </div>
-)
+      <Box m={2} style={{ textAlign: "left" }}>
+        Area: <MlMeasureTool measureType={"polygon"} unit={unit} />
+      </Box>
+    </div>
+  );
+};
 
-const LineTemplate = (args) => (
-  <div style={{ width: "200px", position: "absolute", zIndex:105, }}>
-    <Grid
-      container
-      style={{
-        textAlign: "left",
-        alignItems: "center",
-      }}
-    >
-      <StraightenOutlinedIcon />
+const LineTemplate = (args) => {
+  const [unit, setUnit] = useState("kilometers");
+  const handleChange = (event) => {
+    setUnit(event.target.value);
+  };
 
-      <h4 style={{ margin: "0px" }}>Measure Line</h4>
-    </Grid>
+  return (
+    <div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
+      <Select
+        name={"units"}
+        onChange={handleChange}
+        label={"Unit for measurement"}
+        defaultValue={"kilometers"}
+      >
+        <MenuItem value={"kilometers"}> Kilometers</MenuItem>
+        <MenuItem value={"miles"}> Miles</MenuItem>
+      </Select>
+      <Grid
+        container
+        style={{
+          textAlign: "left",
+          alignItems: "center",
+        }}
+      >
+        <StraightenOutlinedIcon />
+        <h4 style={{ margin: "0px" }}>Measure Line</h4>
+      </Grid>
 
-    <Box m={2} style={{ textAlign: "left" }}>
-      <MlMeasureTool measureType={"line"} />
-    </Box>
-  </div>
-)
+      <Box m={2} style={{ textAlign: "left" }}>
+        Length: <MlMeasureTool measureType={"line"} unit={unit} />
+      </Box>
+    </div>
+  );
+};
 
-export const MeasureLine = LineTemplate.bind( {});
+export const MeasureLine = LineTemplate.bind({});
 MeasureLine.parameters = {};
 MeasureLine.args = {};
 
 export const MeasurePolygon = Template.bind({});
 MeasurePolygon.parameters = {};
 MeasurePolygon.args = {};
-

package/src/components/MlMeasureTool/MlMeasureTool.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import MlFeatureEditor from "../MlFeatureEditor/MlFeatureEditor";
 import * as turf from "@turf/turf";
 
@@ -6,28 +6,55 @@ interface MlMeasureToolProps {
   /**
    * String that specify if the Tool measures an area ("polygon") or length ("line")
    */
-  measureType: string;
+  measureType?: string;
+  /**
+   * String that dictates which unit of measurement is used
+   */
+  unit?: turf.Units;
+}
+
+//const unitSquareConvert = {
+//  kilometers: 1,
+//  miles: 1 / 2.58998811,
+//};
+function getUnitSquareMultiplier(measureType:string | undefined) {
+  return measureType === "miles" ? 1 / 2.58998811 : 1;
+}
+function getUnitLabel(measureType:string | undefined) {
+  return measureType === "miles" ? 'mi' : 'km';
 }
 
 const MlMeasureTool = (props: MlMeasureToolProps) => {
-  const [length, setLength] = useState(0)
+  const [length, setLength] = useState(0);
+  const [currentFeatures, setCurrentFeatures] = useState([undefined]);
+
+  useEffect(() => {
+    if (currentFeatures[0]) {
+      setLength(
+        props.measureType === "polygon"
+          ? (turf.area(currentFeatures[0]) / 1000000) * getUnitSquareMultiplier(props.unit)
+          : turf.length(currentFeatures[0], { units: props.unit })
+      );
+    }
+  }, [props.unit, currentFeatures]);
 
   return (
     <>
       <MlFeatureEditor
-        onChange={(features) => {
-          console.log(features);
-          if(features[0]) {
-            setLength(props.measureType === "polygon" ? turf.area(features[0]) / 1000000 : turf.length(features[0]));
-          }}}
-        mode = {props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
+        onChange={(features:any) => {
+          setCurrentFeatures(features);
+        }}
+        mode={props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
       />
-      {props.measureType === "polygon" ? "Area" : "Length"}: {length.toFixed(2)} {props.measureType === "polygon" ? "km²" : "km"}
-  </>);
+      {length.toFixed(2)} {getUnitLabel(props.unit)}
+      {props.measureType === "polygon" ? "²" : ""}
+    </>
+  );
 };
 
 MlMeasureTool.defaultProps = {
   mapId: undefined,
   measureType: "line",
+  unit: "kilometers",
 };
 export default MlMeasureTool;

package/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -307,7 +307,7 @@ MlWmsLoader.defaultProps = {
   urlParameters: {
     SERVICE: "WMS",
     VERSION: "1.3.0",
-    REQUEST: "getCapabilities",
+    REQUEST: "GetCapabilities",
   },
   wmsUrlParameters: {
     TRANSPARENT: "TRUE",

package/src/hooks/useWms.js

@@ -84,7 +84,7 @@ useWms.defaultProps = {
   urlParameters: {
     SERVICE: "WMS",
     VERSION: "1.3.0",
-    REQUEST: "getCapabilities",
+    REQUEST: "GetCapabilities",
   },
 };
 

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLay
 export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
 export { default as MlGeoJsonLayer } from "./components/MlGeoJsonLayer/MlGeoJsonLayer";
 export { default as MlImageMarkerLayer } from "./components/MlImageMarkerLayer/MlImageMarkerLayer";
+export { default as MlMeasureTool } from "./components/MlMeasureTool/MlMeasureTool";
 export { default as MlNavigationTools } from "./components/MlNavigationTools/MlNavigationTools";
 export { default as MlNavigationCompass } from "./components/MlNavigationCompass/MlNavigationCompass";
 export { default as MlLayer } from "./components/MlLayer/MlLayer";

package/docs-build/0.0ee4f98c.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"0.0ee4f98c.iframe.bundle.js","sources":["webpack:///0.0ee4f98c.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}

package/docs-build/1.bb3cf738.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"1.bb3cf738.iframe.bundle.js","sources":["webpack:///1.bb3cf738.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;AAixHA","sourceRoot":""}

package/docs-build/17.97db5b3f.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"17.97db5b3f.iframe.bundle.js","sources":["webpack:///17.97db5b3f.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}

package/docs-build/18.f8d843df.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"18.f8d843df.iframe.bundle.js","sources":["webpack:///18.f8d843df.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;;AA6pOA","sourceRoot":""}

package/docs-build/19.c45e6b08.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"19.c45e6b08.iframe.bundle.js","sources":["webpack:///19.c45e6b08.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;AA6JA","sourceRoot":""}

package/docs-build/2.42c790e4.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"2.42c790e4.iframe.bundle.js","sources":["webpack:///2.42c790e4.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}

package/docs-build/20.120bbcfb.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"20.120bbcfb.iframe.bundle.js","sources":["webpack:///20.120bbcfb.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}

package/docs-build/21.37c885f1.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"21.37c885f1.iframe.bundle.js","sources":["webpack:///21.37c885f1.iframe.bundle.js"],"mappings":"AAAA;;AAQA","sourceRoot":""}

package/docs-build/22.7fbc99f4.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"22.7fbc99f4.iframe.bundle.js","sources":["webpack:///22.7fbc99f4.iframe.bundle.js"],"mappings":"AAAA;;;;;;AAWA;;;;;;;;;;;;;;AAoBA","sourceRoot":""}

package/docs-build/3.1a37a83e.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"3.1a37a83e.iframe.bundle.js","sources":["webpack:///3.1a37a83e.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}