maplibre-gl-draw-circle 🌎

Live demo · npm · JSR

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

Demo

Live demo: maplibre-gl-draw-circle.geoql.in — draw, drag, move and resize circles on a MapLibre GL map. Its source is in site/.

Circle mode

Drag Circle mode

Usage

Installation

pnpm add @geoql/maplibre-gl-draw-circle @mapbox/mapbox-gl-draw maplibre-gl

import {
    CircleMode,
    DragCircleMode,
    DirectMode,
    SimpleSelectMode
} from '@geoql/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 });

With MapLibre GL 6, pass mapbox-gl-draw a styles array written with modern expressions: its built-in theme uses legacy filter syntax that the MapLibre 6 style spec rejects. The demo's theme is in site/app/utils/draw-theme.ts.

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.

More from the author

• maplibre-gl-inspect — inspect vector tile features and their properties
• maplibre-gl-compare — swipe-style map comparison control
• maplibre-gl-interpolate-heatmap — IDW interpolated heatmap layer
• maplibre-gl-snow — WebGPU snow particle layer
• v-maplibre — 50+ Vue 3 components for MapLibre GL
• mapcn-vue — shadcn-vue map components you copy into your app

See every project at vinayakkulkarni.dev/projects and geoql.in.