maplibre-draw-polygon 0.0.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,20 @@
+# maplibre-draw-polygon
+
+A plugin to draw freehand polygons with MapLibre GL JS
+
+TODO before publishing to NPM:
+
+- example page
+- clean up unused sveltekit boilerplate
+- use peer dependencies?
+- where should ctrl+z support live?
+- layer IDs and zorder configurable?
+- docs
+
+Used in:
+
+- osm2streets Street Explorer
+- Severance Snape
+- the LTN tool
+- od2net
+- TODO: ATIP, inspectorate tools

package/dist/PolygonControls.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { PolygonTool } from "./polygon_tool.js";
+  import { undoLength } from "./stores.js";
+
+  interface Props {
+    polygonTool: PolygonTool;
+  }
+
+  let { polygonTool }: Props = $props();
+</script>
+
+<div style="display: flex; justify-content: space-between;">
+  <button onclick={() => polygonTool.finish()}>Finish</button>
+  <button onclick={() => polygonTool.cancel()}>Cancel</button>
+  <button disabled={$undoLength == 0} onclick={() => polygonTool.undo()}>
+    {#if $undoLength == 0}
+      Undo
+    {:else}
+      Undo ({$undoLength})
+    {/if}
+  </button>
+</div>
+
+<ul>
+  <li>
+    <b>Click</b>
+    the map to add a vertex
+  </li>
+  <li>
+    <b>Click</b>
+    a vertex to delete it
+  </li>
+  <li>
+    <b>Drag</b>
+    a vertex or the polygon to move it
+  </li>
+  <li>
+    Press <b>Control+Z</b>
+    to undo your last change
+  </li>
+  <li>
+    Press <b>Enter</b>
+    or
+    <b>double click</b>
+    to finish
+  </li>
+  <li>
+    Press <b>Escape</b>
+    to cancel
+  </li>
+</ul>

package/dist/PolygonControls.svelte.d.ts

@@ -0,0 +1,7 @@
+import { PolygonTool } from "./polygon_tool.js";
+interface Props {
+    polygonTool: PolygonTool;
+}
+declare const PolygonControls: import("svelte").Component<Props, {}, "">;
+type PolygonControls = ReturnType<typeof PolygonControls>;
+export default PolygonControls;

package/dist/PolygonToolLayer.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { CircleLayer, FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
+  import { isLine, isPoint, isPolygon } from "./utils.js";
+  import { polygonToolGj } from "./stores.js";
+</script>
+
+<GeoJSON data={$polygonToolGj}>
+  <FillLayer
+    id="edit-polygon-fill"
+    filter={isPolygon}
+    paint={{
+      "fill-color": "red",
+      "fill-opacity": [
+        "case",
+        ["boolean", ["get", "hover"], "false"],
+        1.0,
+        0.5,
+      ],
+    }}
+  />
+  <LineLayer
+    id="edit-polygon-lines"
+    filter={isLine}
+    paint={{
+      // TODO Dashed
+      "line-color": "black",
+      "line-width": 8,
+      "line-opacity": 0.5,
+    }}
+  />
+  <CircleLayer
+    id="edit-polygon-vertices"
+    filter={isPoint}
+    paint={{
+      "circle-color": "black",
+      "circle-opacity": ["case", ["has", "hovered"], 1.0, 0.5],
+      "circle-radius": 10,
+    }}
+  />
+</GeoJSON>

package/dist/PolygonToolLayer.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PolygonToolLayer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PolygonToolLayer = InstanceType<typeof PolygonToolLayer>;
+export default PolygonToolLayer;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as PolygonControls } from "./PolygonControls.svelte";
+export { default as PolygonToolLayer } from "./PolygonToolLayer.svelte";
+export { PolygonTool } from "./polygon_tool.js";
+export { polygonToolGj, undoLength } from "./stores.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as PolygonControls } from "./PolygonControls.svelte";
+export { default as PolygonToolLayer } from "./PolygonToolLayer.svelte";
+export { PolygonTool } from "./polygon_tool.js";
+export { polygonToolGj, undoLength } from "./stores.js";

package/dist/polygon_tool.d.ts

@@ -0,0 +1,39 @@
+import type { Feature, Point, Polygon, Position } from "geojson";
+import type { Map, MapMouseEvent } from "maplibre-gl";
+import { type FeatureWithProps } from "./utils.js";
+export declare class PolygonTool {
+    map: Map;
+    active: boolean;
+    eventListenersSuccess: ((f: FeatureWithProps<Polygon>) => void)[];
+    eventListenersUpdated: ((f: FeatureWithProps<Polygon>) => void)[];
+    eventListenersFailure: (() => void)[];
+    points: Position[];
+    cursor: Feature<Point> | null;
+    hover: "polygon" | number | null;
+    dragFrom: Position | null;
+    previousStates: Position[][];
+    constructor(map: Map);
+    tearDown(): void;
+    finish(): void;
+    cancel(): void;
+    onMouseMove: (e: MapMouseEvent) => void;
+    onClick: (e: MapMouseEvent) => void;
+    onDoubleClick: (e: MapMouseEvent) => void;
+    onMouseDown: (e: MapMouseEvent) => void;
+    onMouseUp: () => void;
+    onKeypress: (e: KeyboardEvent) => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+    addEventListenerSuccess(callback: (f: FeatureWithProps<Polygon>) => void): void;
+    addEventListenerUpdated(callback: (f: FeatureWithProps<Polygon>) => void): void;
+    addEventListenerFailure(callback: () => void): void;
+    clearEventListeners(): void;
+    startNew(): void;
+    editExisting(feature: Feature<Polygon>): void;
+    stop(): void;
+    undo(): void;
+    private redraw;
+    private pointsUpdated;
+    private recalculateHovering;
+    private polygonFeature;
+    private beforeUpdate;
+}

package/dist/polygon_tool.js

@@ -0,0 +1,343 @@
+import nearestPointOnLine from "@turf/nearest-point-on-line";
+import { emptyGeojson, pointFeature, setPrecision, } from "./utils.js";
+import { polygonToolGj, undoLength } from "./stores.js";
+const maxPreviousStates = 100;
+export class PolygonTool {
+    map;
+    active;
+    eventListenersSuccess;
+    eventListenersUpdated;
+    eventListenersFailure;
+    points;
+    cursor;
+    // The number is an index into points
+    hover;
+    dragFrom;
+    // Storing a full copy of the previous points is sufficient
+    previousStates;
+    // TODO Inconsistent ordering with point tool
+    constructor(map) {
+        this.map = map;
+        this.active = false;
+        this.eventListenersSuccess = [];
+        this.eventListenersUpdated = [];
+        this.eventListenersFailure = [];
+        // This doesn't repeat the first point at the end; it's not closed
+        this.points = [];
+        this.cursor = null;
+        // TODO This is lots of state. Consider
+        // https://maplibre.org/maplibre-gl-js-docs/example/drag-a-point/ or port
+        // widgetry's World
+        this.hover = null;
+        this.dragFrom = null;
+        this.previousStates = [];
+        this.map.on("mousemove", this.onMouseMove);
+        this.map.on("click", this.onClick);
+        this.map.on("dblclick", this.onDoubleClick);
+        this.map.on("mousedown", this.onMouseDown);
+        this.map.on("mouseup", this.onMouseUp);
+        document.addEventListener("keypress", this.onKeypress);
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+    tearDown() {
+        this.map.off("mousemove", this.onMouseMove);
+        this.map.off("click", this.onClick);
+        this.map.off("dblclick", this.onDoubleClick);
+        this.map.off("mousedown", this.onMouseDown);
+        this.map.off("mouseup", this.onMouseUp);
+        document.removeEventListener("keypress", this.onKeypress);
+        document.removeEventListener("keydown", this.onKeyDown);
+    }
+    // Either a success or failure event will happen, depending on current state
+    finish() {
+        let polygon = this.polygonFeature();
+        if (polygon) {
+            // TODO RouteTool passes a copy to each callback for paranoia. Should we
+            // do the same everywhere here?
+            for (let cb of this.eventListenersSuccess) {
+                cb(polygon);
+            }
+        }
+        else {
+            for (let cb of this.eventListenersFailure) {
+                cb();
+            }
+        }
+        this.stop();
+    }
+    // This stops the tool and fires a failure event
+    cancel() {
+        for (let cb of this.eventListenersFailure) {
+            cb();
+        }
+        this.stop();
+    }
+    onMouseMove = (e) => {
+        // Don't call beforeUpdate here; just consider drag as one entire action
+        if (this.active && !this.dragFrom) {
+            this.recalculateHovering(e);
+        }
+        else if (this.active && this.dragFrom) {
+            if (this.hover == "polygon") {
+                // Move entire polygon
+                let dx = this.dragFrom[0] - e.lngLat.lng;
+                let dy = this.dragFrom[1] - e.lngLat.lat;
+                for (let pt of this.points) {
+                    pt[0] -= dx;
+                    pt[1] -= dy;
+                }
+            }
+            else {
+                this.points[this.hover] = e.lngLat.toArray();
+            }
+            this.dragFrom = e.lngLat.toArray();
+            this.redraw();
+        }
+    };
+    onClick = (e) => {
+        this.beforeUpdate();
+        if (this.active && this.cursor) {
+            // Insert the new point in the "middle" of the closest line segment
+            let candidates = [];
+            pointsToLineSegments(this.points).forEach((line, idx) => {
+                candidates.push([
+                    idx + 1,
+                    nearestPointOnLine(line, this.cursor).properties.dist,
+                ]);
+            });
+            candidates.sort((a, b) => a[1] - b[1]);
+            if (candidates.length > 0) {
+                let idx = candidates[0][0];
+                this.points.splice(idx, 0, this.cursor.geometry.coordinates);
+                this.hover = idx;
+            }
+            else {
+                this.points.push(this.cursor.geometry.coordinates);
+                this.hover = this.points.length - 1;
+            }
+            this.redraw();
+            this.pointsUpdated();
+        }
+        else if (this.active && typeof this.hover === "number") {
+            this.points.splice(this.hover, 1);
+            this.hover = null;
+            this.redraw();
+            this.pointsUpdated();
+            // TODO Doesn't seem to work; you still have to move the mouse to hover
+            // on the polygon
+            this.recalculateHovering(e);
+        }
+    };
+    onDoubleClick = (e) => {
+        if (!this.active) {
+            return;
+        }
+        // When we finish, we'll re-enable doubleClickZoom, but we don't want this to zoom in
+        e.preventDefault();
+        // Double clicks happen as [click, click, dblclick]. The first click adds a
+        // point, the second immediately deletes it, and so we simulate a third
+        // click to add it again.
+        // TODO But since the delete case currently doesn't set cursor during recalculateHovering, do this hack
+        this.cursor = pointFeature(e.lngLat.toArray());
+        this.onClick(e);
+        this.finish();
+    };
+    onMouseDown = (e) => {
+        if (this.active && !this.dragFrom && this.hover != null) {
+            e.preventDefault();
+            this.cursor = null;
+            this.dragFrom = e.lngLat.toArray();
+            // TODO If no drag actually happens, this'll record a useless edit
+            this.beforeUpdate();
+            this.redraw();
+        }
+    };
+    onMouseUp = () => {
+        if (this.active && this.dragFrom) {
+            this.dragFrom = null;
+            this.redraw();
+            this.pointsUpdated();
+        }
+    };
+    onKeypress = (e) => {
+        if (!this.active) {
+            return;
+        }
+        let tag = e.target.tagName;
+        // Let keys key work if the user is focused on a form
+        if (tag == "INPUT" || tag == "TEXTAREA") {
+            return;
+        }
+        if (e.key == "Enter") {
+            e.stopPropagation();
+            this.finish();
+        }
+        else if (e.key == "z" && e.ctrlKey) {
+            this.undo();
+        }
+    };
+    onKeyDown = (e) => {
+        if (!this.active) {
+            return;
+        }
+        let tag = e.target.tagName;
+        // Let keys key work if the user is focused on a form
+        if (tag == "INPUT" || tag == "TEXTAREA") {
+            return;
+        }
+        if (e.key == "Escape") {
+            e.stopPropagation();
+            this.cancel();
+        }
+    };
+    addEventListenerSuccess(callback) {
+        this.eventListenersSuccess.push(callback);
+    }
+    addEventListenerUpdated(callback) {
+        this.eventListenersUpdated.push(callback);
+    }
+    addEventListenerFailure(callback) {
+        this.eventListenersFailure.push(callback);
+    }
+    clearEventListeners() {
+        this.eventListenersSuccess = [];
+        this.eventListenersUpdated = [];
+        this.eventListenersFailure = [];
+    }
+    startNew() {
+        this.active = true;
+        // Otherwise, double clicking to finish breaks
+        this.map.doubleClickZoom.disable();
+    }
+    editExisting(feature) {
+        this.active = true;
+        this.map.doubleClickZoom.disable();
+        this.points = JSON.parse(JSON.stringify(feature.geometry.coordinates[0]));
+        this.points.pop();
+        this.redraw();
+        // TODO recalculateHovering, but we need to know where the mouse is
+    }
+    stop() {
+        this.map.doubleClickZoom.enable();
+        this.points = [];
+        this.cursor = null;
+        this.active = false;
+        this.hover = null;
+        this.dragFrom = null;
+        this.previousStates = [];
+        this.redraw();
+        this.map.getCanvas().style.cursor = "inherit";
+    }
+    undo() {
+        if (this.dragFrom != null || this.previousStates.length == 0) {
+            return;
+        }
+        this.points = this.previousStates.pop();
+        this.hover = null;
+        this.redraw();
+    }
+    redraw() {
+        let gj = emptyGeojson();
+        this.points.forEach((pt, idx) => {
+            let f = pointFeature(pt);
+            f.properties.hover = this.hover == idx;
+            f.properties.idx = idx;
+            gj.features.push(f);
+        });
+        gj.features = gj.features.concat(pointsToLineSegments(this.points));
+        let polygon = this.polygonFeature();
+        if (polygon) {
+            polygon.properties.hover = this.hover == "polygon";
+            gj.features.push(polygon);
+        }
+        polygonToolGj.set(gj);
+        let cursorStyle = "crosshair";
+        if (this.hover != null) {
+            cursorStyle = this.dragFrom ? "grabbing" : "pointer";
+        }
+        this.map.getCanvas().style.cursor = cursorStyle;
+        undoLength.set(this.previousStates.length);
+    }
+    // If there's a valid polygon, also passes to eventListenersUpdated
+    pointsUpdated() {
+        let polygon = this.polygonFeature();
+        if (polygon) {
+            for (let cb of this.eventListenersUpdated) {
+                cb(polygon);
+            }
+        }
+    }
+    recalculateHovering(e) {
+        this.cursor = null;
+        this.hover = null;
+        // Order of the layers matters!
+        for (let f of this.map.queryRenderedFeatures(e.point, {
+            layers: ["edit-polygon-fill", "edit-polygon-vertices"],
+        })) {
+            if (f.geometry.type == "Polygon") {
+                this.hover = "polygon";
+                break;
+            }
+            else if (f.geometry.type == "Point") {
+                // Ignore the cursor
+                if (Object.hasOwn(f.properties, "idx")) {
+                    this.hover = f.properties.idx;
+                    break;
+                }
+            }
+        }
+        if (this.hover == null) {
+            this.cursor = pointFeature(e.lngLat.toArray());
+        }
+        this.redraw();
+    }
+    // TODO Force the proper winding order that geojson requires
+    polygonFeature() {
+        if (this.points.length < 3) {
+            return null;
+        }
+        let trimmed = this.points.map(setPrecision);
+        // Deep clone here, or face the wrath of crazy bugs later!
+        let coordinates = [JSON.parse(JSON.stringify(trimmed))];
+        coordinates[0].push(JSON.parse(JSON.stringify(coordinates[0][0])));
+        return {
+            type: "Feature",
+            geometry: {
+                type: "Polygon",
+                coordinates,
+            },
+            properties: {},
+        };
+    }
+    beforeUpdate() {
+        this.previousStates.push(JSON.parse(JSON.stringify(this.points)));
+        if (this.previousStates.length > maxPreviousStates) {
+            this.previousStates.shift();
+        }
+    }
+}
+// Includes the line connecting the last to the first point
+function pointsToLineSegments(points) {
+    let lines = [];
+    for (let i = 0; i < points.length - 1; i++) {
+        lines.push({
+            type: "Feature",
+            geometry: {
+                type: "LineString",
+                coordinates: [points[i], points[i + 1]],
+            },
+            properties: {},
+        });
+    }
+    if (points.length >= 3) {
+        lines.push({
+            type: "Feature",
+            geometry: {
+                type: "LineString",
+                coordinates: [points[points.length - 1], points[0]],
+            },
+            properties: {},
+        });
+    }
+    return lines;
+}

package/dist/stores.d.ts

@@ -0,0 +1,4 @@
+import type { GeoJSON } from "geojson";
+import { type Writable } from "svelte/store";
+export declare const polygonToolGj: Writable<GeoJSON>;
+export declare const undoLength: Writable<number>;

package/dist/stores.js

@@ -0,0 +1,5 @@
+import { writable } from "svelte/store";
+import { emptyGeojson } from "./utils.js";
+// These are necessary to communicate between components nested under the sidebar and map
+export const polygonToolGj = writable(emptyGeojson());
+export const undoLength = writable(0);

package/dist/utils.d.ts

@@ -0,0 +1,13 @@
+import type { Feature, FeatureCollection, Point, Geometry, Position } from "geojson";
+import type { ExpressionSpecification } from "maplibre-gl";
+export declare const isPolygon: ExpressionSpecification;
+export declare const isLine: ExpressionSpecification;
+export declare const isPoint: ExpressionSpecification;
+export declare function emptyGeojson(): FeatureCollection;
+export declare function pointFeature(pt: Position): Feature<Point>;
+export declare function setPrecision(pt: Position): Position;
+export type FeatureWithProps<G extends Geometry> = Feature<G> & {
+    properties: {
+        [name: string]: any;
+    };
+};

package/dist/utils.js

@@ -0,0 +1,36 @@
+export const isPolygon = [
+    "==",
+    ["geometry-type"],
+    "Polygon",
+];
+export const isLine = [
+    "==",
+    ["geometry-type"],
+    "LineString",
+];
+export const isPoint = [
+    "==",
+    ["geometry-type"],
+    "Point",
+];
+export function emptyGeojson() {
+    return {
+        type: "FeatureCollection",
+        features: [],
+    };
+}
+export function pointFeature(pt) {
+    return {
+        type: "Feature",
+        properties: {},
+        geometry: {
+            type: "Point",
+            coordinates: setPrecision(pt),
+        },
+    };
+}
+// Per https://datatracker.ietf.org/doc/html/rfc7946#section-11.2, 6 decimal
+// places (10cm) is plenty of precision
+export function setPrecision(pt) {
+    return [Math.round(pt[0] * 10e6) / 10e6, Math.round(pt[1] * 10e6) / 10e6];
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "maplibre-draw-polygon",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepare": "npm run package",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^6.0.1",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
+    "@types/eslint": "^9.6.1",
+    "@types/geojson": "^7946.0.14",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "eslint": "^9.31.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.11.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.2.6",
+    "publint": "^0.3.12",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.5.0",
+    "vite": "^7.0.6"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@turf/nearest-point-on-line": "^7.2.0",
+    "svelte-maplibre": "^1.2.0"
+  }
+}