1.4.5 • Published 5 months ago
mapbox-draw-circle-mode v1.4.5
mapbox-gl-draw-circle-mode
A custom mode for Mapbox GL Draw that enables users to draw circles and see live updates of the circle's diameter.
Installation
You can install the package via npm:
npm install mapbox-gl-draw-circle-mode
Usage
To use mapbox-gl-draw-circle-mode
, you need to integrate it with Mapbox GL Draw. Here's a basic example of how to set it up:
import mapboxgl from "mapbox-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import CircleMode, { drawStyles } from "mapbox-gl-draw-circle-mode";
mapboxgl.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
center: [0, 0],
zoom: 2,
});
const draw = new MapboxDraw({
modes: {
...MapboxDraw.modes,
draw_circle: CircleMode.CircleMode,
},
displayControlsDefault: false,
controls: {},
styles: drawStyles,
userProperties: true,
});
map.addControl(draw);
// Listen for draw.create event to get circle data
map.on("draw.create", function (event) {
if (event.features[0].geometry.type === "circle") {
const circle = event.features[0];
console.log("Circle center:", circle.geometry.coordinates);
console.log("Circle radius:", circle.properties.radius);
}
});
Extented Draw Bar
If you are looking for inspiration of how to