Enable polygon drawing on maps-web

packages/pluggableWidgets/maps-web/package.json

@@ -47,6 +47,7 @@
         "classnames": "^2.3.2",
         "deep-equal": "^2.2.3",
         "leaflet": "^1.9.4",
+        "leaflet-draw": "^1.0.4",
         "react-leaflet": "^4.2.1"
     },
     "devDependencies": {
@@ -61,6 +62,7 @@
         "@types/deep-equal": "^1.0.1",
         "@types/leaflet": "^1.9.3",
         "@types/react-leaflet": "^2.8.3",
+        "@types/leaflet-draw": "^1.0.12",
         "cross-env": "^7.0.3"
     }
 }

packages/pluggableWidgets/maps-web/src/Maps.tsx

@@ -7,6 +7,7 @@ import { getCurrentUserLocation } from "./utils/location";
 import { Marker } from "../typings/shared";
 import { translateZoom } from "./utils/zoom";
 import "leaflet/dist/leaflet.css";
+import "leaflet-draw/dist/leaflet.draw.css";
 import "./ui/Maps.scss";
 
 export default function Maps(props: MapsContainerProps): ReactNode {
@@ -51,6 +52,8 @@ export default function Maps(props: MapsContainerProps): ReactNode {
             zoomLevel={translateZoom(props.zoom)}
             geoJSON={typeof props.geoJSON === "string" ? props.geoJSON : props.geoJSON?.value}
             onGeoJSONClick={props.onGeoJSONClick}
+            enablePolygonDrawing={props.enablePolygonDrawing}
+            polygonGeoJSON={props.polygonGeoJSON}
         />
     );
 }

packages/pluggableWidgets/maps-web/src/Maps.xml

@@ -271,5 +271,18 @@
                 <description>Triggered when a GeoJSON feature is clicked. The input parameter should match the GeoJSON feature entity.</description>
             </property>
         </propertyGroup>
+        <propertyGroup caption="Drawing">
+            <property key="enablePolygonDrawing" type="boolean" defaultValue="false">
+                <caption>Enable polygon drawing</caption>
+                <description>When enabled, users can draw a polygon on the map.</description>
+            </property>
+            <property key="polygonGeoJSON" type="attribute" required="false">
+                <caption>Polygon GeoJSON</caption>
+                <description>Attribute that will store the drawn polygon as a GeoJSON string.</description>
+                <attributeTypes>
+                    <attributeType name="String" />
+                </attributeTypes>
+            </property>
+        </propertyGroup>
     </properties>
 </widget>

packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx

@@ -1,13 +1,27 @@
 import { createElement, ReactElement, useEffect } from "react";
-import { MapContainer, Marker as MarkerComponent, Popup, TileLayer, useMap, GeoJSON } from "react-leaflet";
+import {
+    MapContainer,
+    Marker as MarkerComponent,
+    Popup,
+    TileLayer,
+    useMap,
+    GeoJSON
+} from "react-leaflet";
 import classNames from "classnames";
 import { getDimensions } from "@mendix/widget-plugin-platform/utils/get-dimensions";
 import { SharedProps } from "../../typings/shared";
 import { MapProviderEnum } from "../../typings/MapsProps";
 import { translateZoom } from "../utils/zoom";
-import { latLngBounds, Icon as LeafletIcon, DivIcon, LeafletMouseEvent } from "leaflet";
+import L, {
+    latLngBounds,
+    Icon as LeafletIcon,
+    DivIcon,
+    LeafletMouseEvent,
+    FeatureGroup
+} from "leaflet";
+import "leaflet-draw";
 import { baseMapLayer } from "../utils/leaflet";
-import { ActionValue } from "mendix";
+import { ActionValue, EditableValue } from "mendix";
 export interface LeafletProps extends SharedProps {
     mapProvider: MapProviderEnum;
     attributionControl: boolean;
@@ -65,6 +79,57 @@ function ExposeMapInstance() {
     return null;
 }
 
+function DrawControl({ polygonGeoJSON }: { polygonGeoJSON?: EditableValue<string> }) {
+    const map = useMap();
+
+    useEffect(() => {
+        const drawnItems = new FeatureGroup();
+        map.addLayer(drawnItems);
+
+        const drawControl = new (L.Control as any).Draw({
+            position: "topright",
+            draw: {
+                polygon: {
+                    allowIntersection: false,
+                    showArea: true,
+                    shapeOptions: { color: "#97009c" }
+                },
+                polyline: false,
+                rectangle: false,
+                circle: false,
+                marker: false,
+                circlemarker: false
+            },
+            edit: {
+                featureGroup: drawnItems,
+                remove: false
+            }
+        });
+
+        map.addControl(drawControl);
+
+        const handleCreated = (e: any) => {
+            drawnItems.clearLayers();
+            drawnItems.addLayer(e.layer);
+            if (polygonGeoJSON && !polygonGeoJSON.readOnly) {
+                const geometry = e.layer.toGeoJSON().geometry;
+                polygonGeoJSON.setValue(JSON.stringify(geometry));
+            }
+        };
+
+        map.on("draw:created", handleCreated);
+
+        return () => {
+            map.off("draw:created", handleCreated);
+            map.removeControl(drawControl);
+            map.removeLayer(drawnItems);
+        };
+    }, [map, polygonGeoJSON]);
+
+    return null;
+}
+
+
 function GeoJSONLayer({
     geoJSON,
     onGeoJSONClick
@@ -177,6 +242,7 @@ export function LeafletMap(props: LeafletProps): ReactElement {
                         ))}
                     <SetBoundsComponent autoZoom={autoZoom} currentLocation={currentLocation} locations={locations} />
                     <ExposeMapInstance />
+                    {props.enablePolygonDrawing && <DrawControl polygonGeoJSON={props.polygonGeoJSON} />}
                     {geoJSON && <GeoJSONLayer geoJSON={geoJSON} onGeoJSONClick={onGeoJSONClick} />}
                 </MapContainer>
             </div>

packages/pluggableWidgets/maps-web/src/ui/Maps.scss

@@ -63,3 +63,4 @@ Leaflet maps
 .custom-leaflet-map-icon-marker-icon {
     transform: translate(-50%, -50%);
 }
+

packages/pluggableWidgets/maps-web/typings/MapsProps.d.ts

@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { CSSProperties } from "react";
-import { ActionValue, DynamicValue, ListValue, ListActionValue, ListAttributeValue, WebImage } from "mendix";
+import { ActionValue, DynamicValue, EditableValue, ListValue, ListActionValue, ListAttributeValue, WebImage } from "mendix";
 import { Big } from "big.js";
 
 export type LocationTypeEnum = "address" | "latlng";
@@ -99,6 +99,8 @@ export interface MapsContainerProps {
     googleMapId: string;
     geoJSON?: DynamicValue<string>;
     onGeoJSONClick?: ActionValue;
+    enablePolygonDrawing: boolean;
+    polygonGeoJSON?: EditableValue<string>;
 }
 
 export interface MapsPreviewProps {
@@ -137,4 +139,6 @@ export interface MapsPreviewProps {
     googleMapId: string;
     geoJSON: string;
     onGeoJSONClick: {} | null;
+    enablePolygonDrawing: boolean;
+    polygonGeoJSON: string;
 }

packages/pluggableWidgets/maps-web/typings/shared.d.ts

@@ -1,5 +1,6 @@
 import { Dimensions } from "@mendix/widget-plugin-platform/utils/get-dimensions";
 import { CSSProperties } from "react";
+import { ActionValue, EditableValue } from "mendix";
 export interface ModeledMarker {
     address?: string;
     latitude?: number;
@@ -31,4 +32,6 @@ export interface SharedProps extends Dimensions {
     style?: CSSProperties;
     geoJSON?: string;
     onGeoJSONClick?: ActionValue;
+    enablePolygonDrawing: boolean;
+    polygonGeoJSON?: EditableValue<string>;
 }