aws-amplify / maplibre-gl-draw-circle

Supports drawing/editing a circle on a Mapbox map.

mapbox-gl-draw-circle

This package was forked from mapbox-gl-draw-circle. We originally reached out to @iamanvesh about working together and received no response but are still open to doing so moving forward!

Adds support for drawing and editing a circle feature using mapbox-gl-draw library.

Demo

Circle mode

Drag Circle mode

Usage

Installation

npm install maplibre-gl-draw-circle

import {
    CircleMode,
    DragCircleMode,
    DirectMode,
    SimpleSelectMode
} from 'maplibre-gl-draw-circle';


// userProperties has to be enabled
const draw = new MapboxDraw({
  defaultMode: "draw_circle",
  userProperties: true,
  modes: {
    ...MapboxDraw.modes,
    draw_circle  : CircleMode,
    drag_circle  : DragCircleMode,
    direct_select: DirectMode,
    simple_select: SimpleSelectMode
  }
});

// Add this draw object to the map when map loads
map.addControl(draw);

The default radius units are in kilometers and initial radius is 2km.

// Provide the default radius as an option to CircleMode
draw.changeMode('draw_circle', { initialRadiusInKm: 0.5 });

It fires the same events as the mapbox-gl-draw library. For more information follow this link.

Sample feature object returned in draw.create event

{
  "id": "e184898e58feaa5c2c56f20a178ffe2c",
  "type": "Feature",
  "properties": {
    "isCircle": true,
    "center": [
      -0.2472604947478203,
      51.53200220026099
    ],
    "radiusInKm": 2
  },
  "geometry": {
    "coordinates": [], // populated with 64 vertices used to render the circle
    "type": "Polygon"
  }
}

Changelog

v1.1.0

• Added a new DragCircle mode.
• Fixed issue (#5), where the polygon mode was not working when used along with CircleMode.

maplibre-gl-draw-circle's Issues

Error {message: "Input data given to 'mapbox-gl-draw-cold' is not a valid GeoJSON object."} with DragCircleMode

This seems to be a known issue for DragCircleMode. (iamanvesh/mapbox-gl-draw-circle#21)
A potential fix for this - iamanvesh/mapbox-gl-draw-circle@71a3834

... geojson.properties.active = (isActivePolygon) ? Constants.activeStates.ACTIVE : Constants.activeStates.INACTIVE; if (state.polygon.properties.center.length > 0) return display(geojson);

UMD bundle

Could you please build a UMD bundle so that it can be loaded by a vanilla JavaScript application from https://unpkg.com?

Question regarding compatibility with mapbox-gl-draw

I just tried to use mapbox-gl-draw-circle (The project this project is forked from) and get this error.

Does this mean your fork actually works with mapbox-gl-draw?

Does it only work with Mapbox libre?

Have you tested it?

Question: why Constants.types.POLYGON is used when calling activateUIButton?

Question

Why Constants.types.POLYGON is used in onSetup when calling the activateUIButton?

I am asking because I implemented drawing polygon and circle on map using mapbox-gl-draw and maplibre-gl-draw-circle, the money patch so as to add a circle button into the existing toolbar.

I created a demo here.

However because the POLYGON constant is used, now when I click on my circle button, the polygon button shows as selected (with the active class). Was it because mapbox-gl-draw (specifically ui.js) does not really support custom mode?