Skip to main content
Home
Browse packagesDocsSign in
This package has been archived, and as such it is read-only.
This release is 2 versions behind 2.1.2 — the latest version of @birkskyum/maplibre-gl-draw. Jump to latest

@birkskyum/maplibre-gl-draw@2.0.18
Built and signed on GitHub Actions

birkskyum/maplibre-gl-draw

A drawing component for MapLibre GL JS

This package works with Node.js, Deno, Bun, Browsers
This package works with Node.js
This package works with Deno
This package works with Bun
This package works with Browsers
JSR Score
100%
Published
3 months ago (2.0.18)

@birkskyum/maplibre-gl-draw

JSR

Adds support for drawing and editing features on maplibre-gl.js maps.

Screenshot 2024-11-23 at 00 16 59

See API.md for documentation.

Installing

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-draw

MapLibre GL Draw ships with CSS, make sure you include it in your build.

Usage in your application

TypeScript

When using modules

import maplibregl from "maplibre-gl";
import { MapLibreDraw } from "@birkskyum/maplibre-gl-draw";

When using a CDN

CSS

When using modules

import "@birkskyum/maplibre-gl-draw/dist/maplibre-gl-draw.css";

When using CDN

Typescript

The entire library is written in typescript

Example usage

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.

Enhancements and New Interactions

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.

Developing and testing

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/"

Testing

npm run test

Publishing

Published to JSR automatically, when the version in deno.json is bumped on main thread

Examples

the GL JS example.

Naming actions

We're trying to follow standards when naming things. Here is a collection of links where we look for inspiration.

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add jsr:@birkskyum/maplibre-gl-draw

Import symbol

import * as maplibre_gl_draw from "@birkskyum/maplibre-gl-draw";

---- OR ----

Import directly with a jsr specifier

import * as maplibre_gl_draw from "jsr:@birkskyum/maplibre-gl-draw";

Add Package

npx jsr add @birkskyum/maplibre-gl-draw

Import symbol

import * as maplibre_gl_draw from "@birkskyum/maplibre-gl-draw";

Add Package

yarn dlx jsr add @birkskyum/maplibre-gl-draw

Import symbol

import * as maplibre_gl_draw from "@birkskyum/maplibre-gl-draw";

Add Package

pnpm dlx jsr add @birkskyum/maplibre-gl-draw

Import symbol

import * as maplibre_gl_draw from "@birkskyum/maplibre-gl-draw";

Add Package

bunx jsr add @birkskyum/maplibre-gl-draw

Import symbol

import * as maplibre_gl_draw from "@birkskyum/maplibre-gl-draw";