Draw Circle Marker Mode
Circle Marker Mode allows you to add circle markers to the map. Circle markers are circles with a fixed radius in pixels that maintain their screen size regardless of zoom level.
Circle marker, marker or circle?
| Shape | Use it for | Behavior when zooming |
|---|---|---|
| Circle marker | Point locations with a simple round symbol | Keeps a fixed pixel radius |
| Marker | Point locations shown with a marker symbol | Keeps a screen-sized symbol |
| Circle | A geographic area around a center | Its screen size changes with map zoom |
A circle marker represents a point location, not a geographic buffer. Choose Draw Circle when the area on the ground matters.
Enable circle marker drawing
Create the Geoman instance using the installation guide first. Wait for it to finish initializing before activating a tool:
geoman.mapAdapter.once('gm:loaded', () => {
geoman.enableDraw('circle_marker');
});
On an already initialized map, the following methods let your own controls toggle drawing:
map.gm.enableDraw("circle_marker");
map.gm.disableDraw();
map.gm.toggleDraw("circle_marker");
map.gm.drawEnabled("circle_marker");
// Or like this:
map.gm.enableMode("draw", "circle_marker");
map.gm.disableMode("draw", "circle_marker");
map.gm.toggleMode("draw", "circle_marker");
map.gm.isModeEnabled("draw", "circle_marker");
The following events are available on a map instance:
| Event | Params | Description | Output |
|---|---|---|---|
gm:drawstart | event | Fired when circle marker drawing starts. | map, shape |
gm:create | event | Fired when a circle marker is created. | map, shape, feature |
Behavior
Circle marker drawing operates by:
- Clicking on the map to place the circle marker center
- The circle marker is created with a default radius
- The circle marker maintains its pixel size regardless of zoom level
Export the drawn points
Read the feature collection after a user creates a feature, or from your own save button. Keep the Geoman feature properties when you plan to import the data again.
geoman.mapAdapter.on('gm:create', () => {
const data = geoman.features.exportGeoJson();
console.log(data);
});
If no toolbar appears, check that both MapLibre and Geoman CSS are loaded and that the map container has a nonzero height. If drawing is enabled too early, move that call into gm:loaded as shown above. See the event reference for more interactions.