Maplibre-Geoman
Maplibre Plugin For Creating And Editing Geometry Layers
Draw, Edit, Drag, Cut, Rotate, Split, Scale, Measure, Snap and Pin Layers
Supports Markers, CircleMarkers, Polylines, Polygons, Circles, Rectangles, ImageOverlays, LayerGroups, GeoJSON, MultiLineStrings and MultiPolygons
Documentation
Visit geoman.io/docs/maplibre to get started. For contributor-focused internals, see ARCHITECTURE.md.
Issues
If you have support questions or want to report issues, please create an issue in this repository. Use this repository for issues related to both the free and pro versions of Maplibre-Geoman.
Demo
Check out the full power of Maplibre-Geoman Pro on geoman.io/demo/maplibre
Or watch a demo video on YouTube
Installation
Free Version
# install maplibre free version
npm install @geoman-io/maplibre-geoman-free
# install mapbox free version
npm install @geoman-io/mapbox-geoman-freePro Version
Add the following content to .npmrc in your project root
#.npmrc
@geoman-io:registry=https://npm.geoman.io/
//npm.geoman.io/:_authToken="<YOUR LICENSE KEY>"Replace <YOUR LICENSE KEY> with your license key.
# install pro version
npm install @geoman-io/maplibre-geoman-proDon't have a license key yet? Purchase one here.
Usage
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 server-side rendering support |
| maplibre-geoman-svelte | Demo | Code | Svelte implementation offering reactive map editing features |
Expected HTML Structure
<!-- index.html -->
<html lang="en_US">
<head>
<title>Geoman Maplibre</title>
<style>
#dev-map {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id="dev-map"></div>
</body>
</html>Maplibre and Geoman initialization
import ml from "maplibre-gl";
import { Geoman, type GmOptionsPartial } from "@geoman-io/maplibre-geoman-free";
import "maplibre-gl/dist/maplibre-gl.css";
import "@geoman-io/maplibre-geoman-free/dist/maplibre-geoman.css";
const mapStyle: ml.StyleSpecification = {
version: 8,
glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"osm-tiles": {
type: "raster",
tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
tileSize: 256,
attribution: "© OpenStreetMap contributors",
},
},
layers: [
{
id: "osm-tiles-layer",
type: "raster",
source: "osm-tiles",
minzoom: 0,
maxzoom: 19,
},
],
};
const map = new ml.Map({
container: "dev-map",
style: mapStyle,
center: [0, 51],
zoom: 5,
});
const gmOptions: GmOptionsPartial = {
// geoman options here
};
const geoman = new Geoman(map, gmOptions);
map.on("gm:loaded", () => {
console.log("Geoman fully loaded");
// Here you can add your geojson shapes for example
const shapeGeoJson = {
type: "Feature",
geometry: { type: "Point", coordinates: [0, 51] },
};
map.gm.features.addGeoJsonFeature({ shapeGeoJson });
});Mapbox and Geoman initialization
import mapboxgl from "mapbox-gl";
import { Geoman, type GmOptionsPartial } from "@geoman-io/mapbox-geoman-free";
import "mapbox-gl/dist/mapbox-gl.css";
import "@geoman-io/mapbox-geoman-free/dist/mapbox-geoman.css";
mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_TOKEN ?? "";
const mapStyle: mapboxgl.StyleSpecification = {
version: 8,
glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"osm-tiles": {
type: "raster",
tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
tileSize: 256,
attribution: "© OpenStreetMap contributors",
},
},
layers: [
{
id: "osm-tiles-layer",
type: "raster",
source: "osm-tiles",
minzoom: 0,
maxzoom: 19,
},
],
};
const map = new mapboxgl.Map({
container: "dev-map",
style: mapStyle,
center: [0, 51],
zoom: 5,
});
const gmOptions: GmOptionsPartial = {
// geoman options here
};
const geoman = new Geoman(map, gmOptions);
await geoman.waitForGeomanLoaded();Contributing
We welcome contributions from the community! Please read our CONTRIBUTING.md for guidelines on how to get started, report issues, and submit pull requests.
Local Development
# Install dependencies (this repo uses pnpm)
pnpm install --frozen-lockfile
# Run dev app with MapLibre adapter
pnpm run dev:maplibre
# Run dev app with Mapbox adapter
pnpm run dev:mapbox
# Run checks
pnpm run workspace:validate
pnpm run lint:all
pnpm run typecheck:all
pnpm run build:all
# Run smoke tests for each variant
pnpm run test:maplibre --project=chromium --grep="@smoke"
pnpm run test:mapbox --project=chromium --grep="@smoke"
# Run full test suite for both variants
pnpm run test:allCode of Conduct
We are committed to fostering a welcoming and respectful community. Please read our Code of Conduct before participating.
Security Policy
If you discover a security vulnerability, please see our Security Policy for responsible disclosure guidelines.
License & Commercial Use
This repository is licensed under the MIT License, which means you are free to use, modify, and distribute this software for any purpose, including commercial use. The free version of Maplibre-Geoman is fully open source. However, please note that the Pro version of Maplibre-Geoman is not open source and requires a commercial license, which can be purchased at geoman.io/pricing. See LICENSE for full license details.