MapLibre-Geoman Examples
We have prepared a few examples to help you get started with Maplibre-Geoman.
The examples use MapLibre package names, but the same API works for Mapbox variants (@geoman-io/mapbox-geoman-free / @geoman-io/mapbox-geoman-pro).
These are available on GitHub in the Maplibre-Geoman Examples Repository.
Choose a starter
- Vite: start here for a small, framework-independent drawing app. The Vite tutorial explains initialization and GeoJSON export.
- React, Vue, Preact or Svelte: choose the framework your application already uses. Create one map for each mounted container and remove it when the component unmounts.
- Next.js: load the interactive map in a browser-only component. The surrounding page can still render on the server; WebGL and DOM-dependent map code cannot.
Runnable examples
| Framework/Template | Demo URL | Code URL | Description |
|---|---|---|---|
| maplibre-geoman-vite | Demo | Code | Vanilla JavaScript implementation using Vite as the build tool |
| maplibre-geoman-vue | Demo | Code | Vue.js integration showcasing reactive map editing capabilities |
| maplibre-geoman-react | Demo | Code | React implementation with hooks and components for map editing |
| maplibre-geoman-preact | Demo | Code | Lightweight Preact alternative to the React implementation |
| maplibre-geoman-nextjs | Demo | Code | Next.js integration with a browser-only map inside an application that supports server rendering |
| maplibre-geoman-svelte | Demo | Code | Svelte implementation offering reactive map editing features |
Before adapting an example
Install the packages from that example's lockfile, load the matching Geoman and MapLibre CSS, and give the map container a height. Wait for gm:loaded before importing features or enabling draw modes. MapLibre GL JS 6 users should also follow the worker setup in the installation guide.
Start with circle markers for point data or polygons for areas. Use geoman.features.exportGeoJson() to read the finished data. The full interactive demo lets you explore tools before integrating them.