leaflet-draw-manager v2.1.7

Leaflet Draw Manager

Drawing shapes on maps made easier with Leaflet. Classes designed for drawing and editing shapes on a map manually.

Demo

(Work in Progress)

Documentation

Table of Contents

• tl;dr
• What's New?
• Basic Usage
• Classes
• Custom Event Handlers
• Helper Utilities

tl;dr

• Install using npm i --save leaflet-draw-manager.
• Import { ShapeFactory } from "leaflet-draw-manager".
• Instantiate ShapeFactory: const shapeFactory = ShapeFactory.getInstance().
• Instantiate any class: const drawPolygon = shapeFactory.getPolygonInstance(map, featureGroup, shapeOptions).
• Start drawing: drawPolygon.startDrawing().

What's New?

View CHANGELOG: https://github.com/mike16345/leaflet-draw-manager/blob/main/CHANGELOG.md

Basic Usage

This can be replaced with any class. Note: Not all classes have the handleUndoClick method.

// App.tsx

import "./App.css";
import { MapContainer, TileLayer } from "react-leaflet";
import CirclesInMap from "./Circle";

function App() {
  const position = { lat: 44.5, lng: -89.5 };

  return (
    <>
      <MapContainer
        className="map map-container z-[1]"
        minZoom={6}
        zoom={14}
        zoomControl={false}
        center={position}
        scrollWheelZoom={true}
      >
        <TileLayer
          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
          // tms={true}
          maxNativeZoom={16}
          maxZoom={20}
        />
        <CirclesInMap />
      </MapContainer>
    </>
  );
}

export default App;

// CirclesInMap.tsx

import { useRef } from "react";
import L, { Circle, CircleOptions } from "leaflet";
import { FeatureGroup, useMap } from "react-leaflet";
import { ShapeFactory, DrawCircle } from "leaflet-draw-manager";

const CirclesInMap = () => {
  const map = useMap();
  const circleGroup = useRef < L.FeatureGroup > null;
  const circleOptions: CircleOptions = { color: "red", radius: 0 };
  const shapeFactory = ShapeFactory.getInstance();
  const drawCircle = (useRef < DrawCircle) | (null > null);
  const latestCircle = (useRef < Circle) | (null > null);

  const handleDrawCircle = () => {
    if (!circleGroup.current) return;
    drawCircle.current = shapeFactory.getCircleInstance(
      map,
      circleGroup.current,
      circleOptions
    );
    drawCircle.current.startDrawing();
    drawCircle.current.setCustomOnFinishHandler((circle: Circle | null) => {
      latestCircle.current = circle;
    });
  };

  const handleEditCircle = () => {
    if (!drawCircle.current || !latestCircle.current) return;

    drawCircle.current.editShape(latestCircle.current);
  };

  const handleDeleteCircle = () => {
    if (!drawCircle.current) return;
    drawCircle.current.deleteShape();
  };

  const handleStopDrawing = () => {
    if (!drawCircle.current) return;
    drawCircle.current.stopDrawing();
  };

  const handleCancelEdit = () => {
    if (!drawCircle.current) return;
    drawCircle.current.cancelEdit();
  };

  return (
    <div className="draw-container">
      <button onClick={handleDrawCircle} className="draw-button">
        Draw Circle
      </button>
      <button onClick={handleStopDrawing} className="draw-button">
        Stop Drawing
      </button>
      <button onClick={handleEditCircle} className="draw-button">
        Edit Circle
      </button>
      <button onClick={handleCancelEdit} className="draw-button">
        Cancel Edit
      </button>
      <button onClick={handleDeleteCircle} className="draw-button">
        Delete Circle
      </button>
      <FeatureGroup ref={circleGroup}></FeatureGroup>
    </div>
  );
};

export default CirclesInMap;

Classes

ShapeFactory

ShapeFactory is in charge of creating class instances for shapes. It takes care of handling class cleanups when creating a new class instance therefore mantaining the Singleton implementation.

All classes can only be instantiated using the ShapeFactory class. The reason for this is to avoid having conflicts with events in other shape classes while drawing or editing. Any attempt to access an instance of a shape class outside the ShapeFactory class will throw an exception.

ShapeClassConfig

ShapeClassConfig is a private class which provides a centralized mechanism to manage and apply configuration settings for various shape classes used in mapping applications. It allows developers to easily update and retrieve configuration settings for individual shape classes, ensuring consistency and flexibility in the application's behavior and appearance.

Any time a class is instantiated the configuration settings will automatically be applied to that class.

Accessed through the ShapeFactory class.

DrawShape - All classes have access to DrawShape's properties and methods.

DrawLineShape - DrawPolygon/DrawPolyline/DrawArrowPolyline

DrawPolygon/DrawPolyline/DrawArrowPolyline all inherit these methods from the DrawLineShape class.

DrawPolygon

DrawPolyline

| Method | Description | Example |

| drawTransparentPolyline(latLngs:LatLng[]) | Creates a transparent polyline based on the provided set of LatLng coordinates. The transparent polyline has a weight of 40. This can be used to help capture clicks on a polyline if given the same coordinates. /| DrawPolyline.drawTransparentPolyline(coordinates)

DrawCircle

DrawMarker

Helper utilities

Here are a list of some functions/enums/interfaces that can be helpful while developing.

Custom Event Handlers