Adds support for drawing and editing features on maplibre-gl.js maps.
See API.md for documentation.
npx jsr add @birkskyum/maplibre-gl-draw
bunx jsr add @birkskyum/maplibre-gl-draw
deno add jsr:@birkskyum/maplibre-gl-draw
pnpm dlx jsr add @birkskyum/maplibre-gl-draw
yarn dlx jsr add @birkskyum/maplibre-gl-drawMapLibre GL Draw ships with CSS, make sure you include it in your build.
When using modules
import maplibregl from "maplibre-gl";
import { MapLibreDraw } from "@birkskyum/maplibre-gl-draw";When using a CDN
When using modules
import "@birkskyum/maplibre-gl-draw/dist/maplibre-gl-draw.css";When using CDN
The entire library is written in typescript
var map = new maplibregl.Map({
container: "map",
style: "https://demotiles.maplibre.org/style.json",
center: [40, -74.50],
zoom: 9,
});
var Draw = new MapLibreDraw();
// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`. See the docs
// for more details: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#addcontrol
map.addControl(Draw, "top-left");
map.on("load", function () {
// ALL YOUR APPLICATION CODE
});See API.md for complete reference.
For additional functionality check out our list of custom modes.
MapLibre Draw accepts functionality changes after the functionality has been proven out via a custom mode. This lets users experiment and validate their mode before entering a review process, hopefully promoting innovation. When you write a custom mode, please open a PR adding it to our list of custom modes.
Install dependencies, build the source files and crank up a server via:
git clone [email protected]:birkskyum/maplibre-gl-draw.git
npm ci
npm start & open "http://localhost:9967/debug/"
npm run test
Published to JSR automatically, when the version in deno.json is bumped on main thread
We're trying to follow standards when naming things. Here is a collection of links where we look for inspiration.