@mapcomponents/react-maplibre 0.1.34 → 0.1.37

package/src/components/MlCreatePdfButton/MlCreatePdfButton.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import useMap from "../../hooks/useMap";
+
+import createPdf from "./lib/createPdf";
+
+import PrinterIcon from "@mui/icons-material/Print";
+import Button from "@mui/material/Button";
+
+interface MlCreatePdfButtonProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  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;
+}
+
+/**
+ * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).
+ */
+const MlCreatePdfButton = (props: MlCreatePdfButtonProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+
+  return (
+    <>
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={() => {
+          if (mapHook.map) {
+            createPdf(mapHook.map, null, () => {});
+          }
+        }}
+      >
+        <PrinterIcon />
+      </Button>
+    </>
+  );
+};
+
+MlCreatePdfButton.defaultProps = {
+  mapId: undefined,
+};
+
+export default MlCreatePdfButton;

package/src/components/MlCreatePdfButton/lib/{createPdf.js → createPdf.ts}

@@ -1,8 +1,9 @@
-import maplibregl from "maplibre-gl";
+import {Map} from "maplibre-gl";
 import jsPDF from "jspdf";
-import nmConverter from "./nominatimMap.js";
+import nmConverter from "./nominatimMap";
+import MapLibreGlWrapper from '../../MapLibreMap/lib/MapLibreGlWrapper'
 
-const toPixels = (length) => {
+const toPixels = (length:number):string => {
   let conversionFactor = 96;
 
   conversionFactor /= 25.4;
@@ -10,7 +11,7 @@ const toPixels = (length) => {
   return conversionFactor * length + "px";
 };
 
-const createPdf = (map, locationValue, setLoading) => {
+const createPdf:Function = (map:MapLibreGlWrapper, locationValue:any, setLoading:any) => {
   setLoading(true);
 
   const width = 210;
@@ -27,19 +28,7 @@ const createPdf = (map, locationValue, setLoading) => {
   container.style.height = toPixels(height);
   hidden.appendChild(container);
 
-  //Render map
-  var renderMap = new maplibregl.Map({
-    container: container,
-    center: map.getCenter(),
-    zoom: map.getZoom(),
-    bearing: map.getBearing(),
-    pitch: map.getPitch(),
-    interactive: false,
-    preserveDrawingBuffer: true,
-    fadeDuration: 0,
-    attributionControl: false,
-  });
-  let style = map.getStyle();
+  let style = map.map.getStyle();
   for (let name in style.sources) {
     let src = style.sources[name];
 
@@ -51,7 +40,19 @@ const createPdf = (map, locationValue, setLoading) => {
       }
     });
   }
-  renderMap.setStyle(style);
+  //Render map
+  var renderMap = new Map({
+    container: container,
+    center: map.map.getCenter(),
+    zoom: map.map.getZoom(),
+    bearing: map.map.getBearing(),
+    pitch: map.map.getPitch(),
+    interactive: false,
+    preserveDrawingBuffer: true,
+    fadeDuration: 0,
+    attributionControl: false,
+    style: style
+  });
 
   renderMap.once("idle", function () {
     // TO DO: It is still under development
@@ -76,12 +77,14 @@ const createPdf = (map, locationValue, setLoading) => {
     const lineHeight = 3.25;
     const text = locationValue ? nmConverter(locationValue.address) : "";
     const textChunksSeperator = text.split(",");
-    const textChunks = [];
+    const textChunks:string[] = [];
 
     if (textChunks.length) {
-      textChunksSeperator.forEach((chunk) => {
-        const limitChunks = chunk.match(/.{1,34}/g);
+      textChunksSeperator.forEach((chunk:string) => {
+        const limitChunks:(RegExpMatchArray | null) = chunk.match(/.{1,34}/g);
+        if(limitChunks){
         textChunks.push(...limitChunks);
+        }
       });
     }
 
@@ -93,7 +96,7 @@ const createPdf = (map, locationValue, setLoading) => {
       0,
       210,
       297,
-      null,
+      undefined,
       "FAST"
     );
 
@@ -144,7 +147,7 @@ const createPdf = (map, locationValue, setLoading) => {
       offsetY + marginTop + lineHeight * 2 + textChunks.length * 3 + innerMargin * 2,
       3,
       3,
-      null,
+      undefined,
       "FAST"
     );
 

package/src/components/MlCreatePdfButton/lib/{nominatimMap.js → nominatimMap.ts}

@@ -41,10 +41,10 @@ const nmMap = {
   state: ["state", "province", "state_code"],
 };
 
-const nmConverter = (nmAddress) => {
-  const addressArr = [];
+const nmConverter:Function = (nmAddress:any):string => {
+  const addressArr:string[] = [];
   for (let key in nmMap) {
-    nmMap[key].some((element) => {
+    nmMap[key].some((element:string) => {
       if (nmAddress.hasOwnProperty(element)) {
         addressArr.push(nmAddress[element]);
         return true;

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect, useRef } from "react";
+import "./MlFeatureEditor.css";
+
+import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import CustomPolygonMode from "./custom-polygon-mode.js";
+import CustomSelectMode from "./custom-select-mode.js";
+import CustomDirectSelectMode from "./custom-direct-select-mode.js";
+
+import useMap from "../../hooks/useMap";
+
+
+interface MlFeatureEditorProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  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;
+  /**
+   * Input GeoJson data at initialization
+   */
+  geojson: any;
+  /**
+   * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
+   * First parameter is the new GeoJson feature.
+   */
+  onChange?: Function
+  /**
+   * Feature editor mode:
+   * - "custom_select" edit features
+   * - "custom_polygon" draw Polygon
+   * - "draw_point" draw Point
+   * - "draw_line_string" draw LineString
+   */
+  mode?:string
+}
+
+/**
+ * GeoJson Feature editor that allows to create or manipulate GeoJson data
+ */
+const MlFeatureEditor = (props:MlFeatureEditorProps) => {
+  const draw = useRef<MapboxDraw>();
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+  const onChangeRef = useRef(props.onChange);
+
+  const drawToolsInitialized = useRef(false);
+  const [drawToolsReady, setDrawToolsReady] = useState(false);
+
+  const [mouseUpTrigger, setMouseUpTrigger] = useState(0);
+
+  const modeChangeHandler = (e:any) => {
+    console.log("MlFeatureEditor mode change to " + e.mode);
+    //setDrawMode(e.mode);
+  };
+
+  const mouseUpHandler = () => {
+    setMouseUpTrigger(Math.random());
+  };
+
+  useEffect(() => {
+    if (
+      mapHook.map &&
+      !drawToolsInitialized.current
+    ) {
+      
+      drawToolsInitialized.current = true;
+
+      if (
+        mapHook.map.map.style &&
+        mapHook.map.map.getSource("mapbox-gl-draw-cold") &&
+        draw.current
+      ) {
+        // remove old Mapbox-gl-Draw from Mapbox instance when hot-reloading this component during development
+        // @ts-ignore
+        draw.current?.remove();
+      }
+
+      draw.current = new MapboxDraw({
+        displayControlsDefault: false,
+        defaultMode: props.mode || "custom_select",
+        // @ts-ignore
+        modes: Object.assign(
+          {
+            custom_polygon: CustomPolygonMode,
+            custom_select: CustomSelectMode,
+            custom_direct_select: CustomDirectSelectMode,
+          },
+          MapboxDraw.modes
+        ),
+      });
+
+      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
+
+      mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
+
+      mapHook.map.on("mouseup", mouseUpHandler, mapHook.componentId);
+
+      setDrawToolsReady(true);
+    }
+  }, [mapHook.map,  props, drawToolsInitialized]);
+
+  useEffect(() => {
+    if (
+      draw.current &&
+      props.geojson?.geometry
+    ) {
+      // @ts-ignore
+      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+    }
+  }, [props.geojson, drawToolsReady]);
+
+  useEffect(() => {
+    if (draw.current && mouseUpTrigger) {
+      // update drawnFeatures state object
+      let currentFeatureCollection = draw.current.getAll();
+      if (typeof onChangeRef.current === "function") {
+        onChangeRef.current(currentFeatureCollection.features);
+      }
+    }
+  }, [mouseUpTrigger]);
+
+  useEffect(() => {
+    if (props.mode && draw.current) {
+      // @ts-ignore
+      draw.current.changeMode(props.mode);
+    }
+  }, [props.mode]);
+
+  return (<></>);
+}
+
+export default MlFeatureEditor;

package/src/components/MlFeatureEditor/custom-direct-select-mode.js

@@ -1,23 +1,27 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import {
   noTarget,
   isOfMetaType,
   isActiveFeature,
   isInactiveFeature,
   isShiftDown,
-} from "./lib/common_selectors";
-import createSupplementaryPoints from "./lib/create_supplementary_points";
-import constrainFeatureMovement from "./lib/constrain_feature_movement";
-import doubleClickZoom from "./lib/double_click_zoom";
-import * as Constants from "./lib/constants";
-import moveFeatures from "./lib/move_features";
-import drawUtils from "./lib/utils";
+} from "./lib/common_selectors.js";
+import createSupplementaryPoints from "./lib/create_supplementary_points.js";
+import constrainFeatureMovement from "./lib/constrain_feature_movement.js";
+import doubleClickZoom from "./lib/double_click_zoom.js";
+import * as Constants from "./lib/constants.js";
+import moveFeatures from "./lib/move_features.js";
+import drawUtils from "./lib/utils.js";
 
 const isVertex = isOfMetaType(Constants.meta.VERTEX);
 const isMidpoint = isOfMetaType(Constants.meta.MIDPOINT);
 
 const DirectSelect = {};
 
-// INTERNAL FUCNTIONS
+// INTERNAL FUNCTIONS
 
 DirectSelect.fireUpdate = function () {
   this.map.fire(Constants.events.UPDATE, {

package/src/components/MlFeatureEditor/custom-polygon-mode.js

@@ -1,8 +1,12 @@
-import * as CommonSelectors from "./lib/common_selectors";
-import doubleClickZoom from "./lib/double_click_zoom";
-import * as Constants from "./lib/constants";
-import isEventAtCoordinates from "./lib/is_event_at_coordinates";
-import createVertex from "./lib/create_vertex";
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
+import * as CommonSelectors from "./lib/common_selectors.js";
+import doubleClickZoom from "./lib/double_click_zoom.js";
+import * as Constants from "./lib/constants.js";
+import isEventAtCoordinates from "./lib/is_event_at_coordinates.js";
+import createVertex from "./lib/create_vertex.js";
 
 const CustomPolygonMode = {};
 

package/src/components/MlFeatureEditor/custom-select-mode.js

@@ -1,10 +1,14 @@
-import * as CommonSelectors from "./lib/common_selectors";
-import doubleClickZoom from "./lib/double_click_zoom";
-import * as Constants from "./lib/constants";
-import mouseEventPoint from "./lib/mouse_event_point";
-import createSupplementaryPoints from "./lib/create_supplementary_points";
-import StringSet from "./lib/string_set";
-import moveFeatures from "./lib/move_features";
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
+import * as CommonSelectors from "./lib/common_selectors.js";
+import doubleClickZoom from "./lib/double_click_zoom.js";
+import * as Constants from "./lib/constants.js";
+import mouseEventPoint from "./lib/mouse_event_point.js";
+import createSupplementaryPoints from "./lib/create_supplementary_points.js";
+import StringSet from "./lib/string_set.js";
+import moveFeatures from "./lib/move_features.js";
 
 const CustomSelectMode = {};
 CustomSelectMode.onSetup = function (opts) {

package/src/components/MlFeatureEditor/lib/LICENSE.md

@@ -0,0 +1,18 @@
+All code inside of this folder is from https://github.com/mapbox/mapbox-gl-draw
+and licensed under ISC
+
+Copyright (c) Mapbox
+
+All rights reserved.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/src/components/MlFeatureEditor/lib/common_selectors.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import * as Constants from "./constants";
 
 export function isOfMetaType(type) {

package/src/components/MlFeatureEditor/lib/constants.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 export const classes = {
   CONTROL_BASE: 'mapboxgl-ctrl',
   CONTROL_PREFIX: 'mapboxgl-ctrl-',

package/src/components/MlFeatureEditor/lib/constrain_feature_movement.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import extent from "@mapbox/geojson-extent";
 import * as Constants from "./constants";
 

package/src/components/MlFeatureEditor/lib/create_midpoint.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import * as Constants from "./constants";
 
 const create_midpoint = function (parent, startVertex, endVertex) {

package/src/components/MlFeatureEditor/lib/create_supplementary_points.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import createVertex from "./create_vertex";
 import createMidpoint from "./create_midpoint";
 import * as Constants from "./constants";

package/src/components/MlFeatureEditor/lib/create_vertex.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import * as Constants from "./constants";
 
 /**

package/src/components/MlFeatureEditor/lib/double_click_zoom.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 const doubleClickZoom = {
   enable(ctx) {
     setTimeout(() => {

package/src/components/MlFeatureEditor/lib/euclidean_distance.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 export default function(a, b) {
   const x = a.x - b.x;
   const y = a.y - b.y;

package/src/components/MlFeatureEditor/lib/features_at.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import sortFeatures from "./sort_features";
 import mapEventToBoundingBox from "./map_event_to_bounding_box";
 import * as Constants from "./constants";

package/src/components/MlFeatureEditor/lib/get_features_and_set_cursor.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import featuresAt from "./features_at";
 import * as Constants from "./constants";
 

package/src/components/MlFeatureEditor/lib/is_click.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import euclideanDistance from './euclidean_distance';
 
 const FINE_TOLERANCE = 4;

package/src/components/MlFeatureEditor/lib/is_event_at_coordinates.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 function isEventAtCoordinates(event, coordinates) {
   if (!event.lngLat) return false;
   return event.lngLat.lng === coordinates[0] && event.lngLat.lat === coordinates[1];

package/src/components/MlFeatureEditor/lib/is_tap.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import euclideanDistance from './euclidean_distance';
 
 export const TAP_TOLERANCE = 25;

package/src/components/MlFeatureEditor/lib/map_event_to_bounding_box.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 /**
  * Returns a bounding box representing the event's location.
  *

package/src/components/MlFeatureEditor/lib/mode_handler.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 
 const ModeHandler = function(mode, DrawContext) {
 

package/src/components/MlFeatureEditor/lib/mouse_event_point.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import Point from '@mapbox/point-geometry';
 
 /**

package/src/components/MlFeatureEditor/lib/move_features.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import constrainFeatureMovement from "./constrain_feature_movement";
 import * as Constants from "./constants";
 

package/src/components/MlFeatureEditor/lib/sort_features.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 import area from "@mapbox/geojson-area";
 import * as Constants from "./constants";
 

package/src/components/MlFeatureEditor/lib/string_set.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 function StringSet(items) {
   this._items = {};
   this._nums = {};

package/src/components/MlFeatureEditor/lib/string_sets_are_equal.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 export default function(a, b) {
   if (a.length !== b.length) return false;
   return JSON.stringify(a.map(id => id).sort()) === JSON.stringify(b.map(id => id).sort());

package/src/components/MlFeatureEditor/lib/theme.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 export default [
   {
     id: "gl-draw-polygon-fill-inactive",

package/src/components/MlFeatureEditor/lib/to_dense_array.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 /**
  * Derive a dense array (no `undefined`s) from a single value or array.
  *

package/src/components/MlFeatureEditor/lib/utils.js

@@ -1,3 +1,7 @@
+/**
+ * Code from https://github.com/mapbox/mapbox-gl-draw
+ * and licensed under ISC
+ */
 const drawUtils = {
   getMatchingVertices: (vertex, featureId, allFeatures, map) => {
     // number of decimals should probably be dynamic depending on zoom level

package/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.stories.js

@@ -1,6 +1,5 @@
-import React from "react";
+import React, {useState} from "react";
 
-import TopToolbar from "../../ui_components/TopToolbar";
 import MlFillExtrusionLayer from "./MlFillExtrusionLayer";
 
 import mapContextDecorator from "../../decorators/MapContextDecorator";
@@ -9,21 +8,17 @@ const storyoptions = {
   title: "MapComponents/MlFillExtrusionLayer",
   component: MlFillExtrusionLayer,
   argTypes: {
-    options: {
-      control: {
-        type: "object",
-      },
-    },
   },
   decorators: mapContextDecorator,
 };
 export default storyoptions;
 
-const Template = (args) => (
-  <TopToolbar>
-    <MlFillExtrusionLayer />
-  </TopToolbar>
+const Template = (props) => {
+  
+  return (
+    <MlFillExtrusionLayer {...props} />
 );
+  }
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};