### Install Dependencies and Run Dev App
Source: https://github.com/geoman-io/maplibre-geoman/blob/master/README.md
Install project dependencies using pnpm and run the development application with either the MapLibre or Mapbox adapter.
```shell
pnpm install --frozen-lockfile
pnpm run dev:maplibre
pnpm run dev:mapbox
```
--------------------------------
### Install Mapbox-Geoman
Source: https://github.com/geoman-io/maplibre-geoman/blob/master/packages/mapbox/README.md
Install the Mapbox-Geoman package using npm.
```shell
npm install @geoman-io/mapbox-geoman-free
```
--------------------------------
### Enable Snap Guides
Source: https://github.com/geoman-io/maplibre-geoman/blob/master/_autodocs/08-modes-draw-edit-helper.md
Enable the `snap_guides` helper to visualize snap guidance lines during geometry creation or editing.
```typescript
await geoman.enableMode('helper', 'snap_guides');
```
--------------------------------
### Handle Marker Movement Events
Source: https://github.com/geoman-io/maplibre-geoman/blob/master/_autodocs/04-events-system.md
This example demonstrates how to track the movement of feature markers (vertices or handles). It calculates the distance moved using the start and end coordinates provided in the event.
```typescript
map.on('gm:edit', (event) => {
if (event.action === 'marker_move') {
const distance = haversineDistance(event.lngLatStart, event.lngLatEnd);
console.log(`Moved ${distance}km`);
}
});
```
--------------------------------
### Instantiate ShapeMarkersHelper
Source: https://github.com/geoman-io/maplibre-geoman/blob/master/_autodocs/06-utilities.md
Example of how to instantiate the ShapeMarkersHelper. Ensure the 'geoman' instance is available.
```typescript
const helper = new ShapeMarkersHelper(geoman);
```
--------------------------------
### Install Maplibre Geoman Free Version
Source: https://github.com/geoman-io/maplibre-geoman/blob/master/README.md
Use these commands to install the free version of Maplibre Geoman.
```shell
# install maplibre free version
npm install @geoman-io/maplibre-geoman-free
```
```shell
# install mapbox free version
npm install @geoman-io/mapbox-geoman-free
```
--------------------------------
### React Integration Example
Source: https://github.com/geoman-io/maplibre-geoman/blob/master/_autodocs/09-quick-start-guide.md
Integrate MapLibre Geoman into a React application. This example shows how to initialize the map and Geoman, enable drawing, and handle cleanup.
```typescript
import { useEffect, useRef, useState } from "react";
import ml from "maplibre-gl";
import { Geoman } from "@geoman-io/maplibre-geoman-free";
import "maplibre-gl/dist/maplibre-gl.css";
import "@geoman-io/maplibre-geoman-free/dist/maplibre-geoman.css";
export function MapComponent() {
const mapContainer = useRef(null);
const map = useRef(null);
const geoman = useRef(null);
const [isReady, setIsReady] = useState(false);
useEffect(() => {
if (!mapContainer.current) return;
// Initialize map
map.current = new ml.Map({
container: mapContainer.current,
style: {
version: 8,
sources: { osm: { type: "raster", tiles: [...] } },
layers: []
},
center: [0, 51],
zoom: 5
});
// Initialize Geoman
geoman.current = new Geoman(map.current);
const handleGeomanLoaded = async () => {
setIsReady(true);
await geoman.current.enableDraw("polygon");
};
map.current.on("gm:loaded", handleGeomanLoaded);
// Cleanup on unmount
return async () => {
if (geoman.current) {
await geoman.current.destroy();
}
map.current?.remove();
};
}, []);
return (