MAPLIBRE GL · MAPBOX-GL-DRAW MODES

Circles you can drag, move and resize.

@geoql/maplibre-gl-draw-circle adds circle modes to mapbox-gl-draw. Draw one below.

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

MODE

Select a circle, then drag it to move or drag a handle to resize.

CLICK RADIUS

RADIUS · NO CIRCLE

0.00km

center: —
circles: 0

Four modes, one control.

Register the modes on mapbox-gl-draw and add it to a MapLibre map. Circles stay true geodesic polygons, and every feature carries its center and radiusInKm, so you never recompute them from 64 vertices.

MAP.TS

import { Map } from 'maplibre-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import {
  CircleMode,
  DragCircleMode,
  DirectMode,
  SimpleSelectMode,
} from '@geoql/maplibre-gl-draw-circle';

const map = new Map({ container: 'map', style });

const draw = new MapboxDraw({
  userProperties: true,
  modes: {
    ...MapboxDraw.modes,
    draw_circle: CircleMode,
    drag_circle: DragCircleMode,
    direct_select: DirectMode,
    simple_select: SimpleSelectMode,
  },
});
map.addControl(draw);

draw.changeMode('draw_circle', { initialRadiusInKm: 2 });
map.on('draw.create', ({ features }) => {
  const { center, radiusInKm } = features[0].properties;
});

SELECTED FEATURE · LIVE

{
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      "… 64 vertices"
    ]
  }
}