Draw tools for mapbox-gl-js

Overview

@mapbox/mapbox-gl-draw

Greenkeeper badge Build Status

Adds support for drawing and editing features on mapbox-gl.js maps. See a live example here

Requires mapbox-gl-js. Compatible versions are documented in the package.json

On NPM this package has recently moved from mapbox-gl-draw to @mapbox/mapbox-gl-draw

Installing

npm install @mapbox/mapbox-gl-draw

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

Typescript

Typescript definition files are available as part of the DefinitelyTyped package.

npm install @types/mapbox__mapbox-gl-draw

When using modules

import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

When using CDN

<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css' type='text/css' />

Usage in your application

When using modules

import mapboxgl from 'mapbox-gl';
import MapboxDraw from "@mapbox/mapbox-gl-draw";

When using a CDN

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js'></script>

Example setup

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [40, -74.50],
  zoom: 9
});

var Draw = new MapboxDraw();

// 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://docs.mapbox.com/mapbox-gl-js/api/#map#addcontrol

map.addControl(Draw, 'top-left');

map.on('load', function() {
  // ALL YOUR APPLICATION CODE
});

https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

See API.md for complete reference.

Enhancements and New Interactions

For additional functionality check out our list of custom modes.

Mapbox 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]:mapbox/mapbox-gl-draw.git
yarn install
yarn start & open "http://localhost:9967/debug/?access_token=<token>"

Testing

npm run test

Publishing

To github and npm

npm version (major|minor|patch)
git push --tags
git push
npm publish

To CDN

# make sure you are authenticated for AWS
git checkout v{x.y.z}
yarn install
yarn run prepublish
aws s3 cp --recursive --acl public-read dist s3://mapbox-gl-js/plugins/mapbox-gl-draw/v{x.y.z}

Update the version number in 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.

Comments
  • MapBoxDraw controller buttons aren't rendering the icons

    MapBoxDraw controller buttons aren't rendering the icons

    "mapbox-gl": "^2.10.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-map-gl": "^7.0.19",

    Steps to Trigger Behavior

    image Using the above code from the demo

    Expected Behavior

    These icons should appear by default image

    Actual Behavior

    image

    opened by SoulPancake 0
  • Keyboard events are not handled when using maplibre-gl-js

    Keyboard events are not handled when using maplibre-gl-js

    Currently the keydown event handler is not working for maplibre. I realize maplibre may not be officially supported, but MapboxDraw mostly works with it. The problem is that the keydown handler currently looks for a CSS class on the canvas, in a specific order in classList:

    if ((event.srcElement || event.target).classList[0] !== 'mapboxgl-canvas') return; // we only handle events on the map
    

    taken from here: https://github.com/mapbox/mapbox-gl-draw/blob/main/src/events.js#L130

    In maplibre, they've added an additional class in front of that one, so that the canvas class is: "maplibregl-canvas mapboxgl-canvas", which causes the check above to bail out of handling the events.

    So, my question is, would you take a pull request that changes the above line of code to something along the lines of !classList.contains('mapboxgl-canvas') instead? Or it could even look for either of the two above classes. I'm not sure how long maplibre is planning to keep around the mapbox CSS classes.

    maplibre/maplibre-gl-js#2006

    maplibre-gl-js version: 2.4.0 mapbox-gl-draw version: 1.3.0

    Steps to Trigger Behavior

    1. Select existing drawn shape
    2. Hit delete on the keyboard

    Expected Behavior

    Polygon is deleted

    Actual Behavior

    Polygon is not deleted

    opened by neodescis 0
  • Uncaught TypeError `i.onCombineFeatures is not a function` when nothing is drawn

    Uncaught TypeError `i.onCombineFeatures is not a function` when nothing is drawn

    Steps to Trigger Behavior

    1. Go here: https://jsfiddle.net/ymj8vwpe/
    2. Click the combine button when there is nothing drawn or selected

    Expected Behavior

    No uncaught error in console

    Actual Behavior

    Uncaught TypeError in console: i.onCombineFeatures is not a function Screen Shot 2022-12-12 at 15 13 19

    bug 
    opened by johanrd 1
  • Draw is overriding cooperative gestures option

    Draw is overriding cooperative gestures option

    mapbox-gl-js version: 2.11.0 mapbox-gl-draw version: 1.3.0

    Steps to Trigger Behavior

    1. Open https://uv08h1.csb.app/ on a mobile device. Code available at https://codesandbox.io/s/nervous-water-uv08h1?file=/src/index.js

    Behavior

    The map partially behaves at is should when cooperativeGestures are enabled: Two fingers are needed to zoom and pan, however the informative overlay is never shown and if we just use one finger to scroll, the map traps the scroll.

    opened by danielfdsilva 0
  • FPS drop during `mousemove` event on `draw_polygon` mode or `drag` event in `direct_select` mode on bigger density screens (or weaker CPUs)

    FPS drop during `mousemove` event on `draw_polygon` mode or `drag` event in `direct_select` mode on bigger density screens (or weaker CPUs)

    Reproduction

    1. git clone https://github.com/mapbox/mapbox-gl-draw.git
    2. cd mapbox-gl-draw
    3. yarn install
    4. yarn start & open "http://localhost:9967/debug/?access_token=<access_token>"

    Steps to Trigger Behavior

    1. Click on draw_polygon mode
    2. Add 2 vertexes
    3. Turn on Performance recoding in DevTools
    4. Mouse your mouse around a bit
    5. Stop recording performance
    6. See 3 out 4 frames being "Partially Presented".

    Alternative reproduction

    1. Draw polygon
    2. Enter direct_select mode
    3. Turn on Performance recoding in DevTools
    4. Drag around one of the vertexes
    5. Stop recording performance
    6. See 3 out 4 frames being "Partially Presented".

    Conditions

    This lag is hardly noticeable if you use a very fast CPU or small map (px ratio). To reproduce it more easily you can try one of these:

    1. Maximise the size of the map on your 4k monitor.
    2. Set Performance throttling to 4x in DevTools.
    3. Turn on another heavy task like Screen Recording.
    4. (bug) Could only do this on a single old i5 Windows PC with 1080p monitor. But sometimes when you tilt or zoom the map to a specific range it drops from 40-50 FPS to 10 FPS while dragging/mousemoving. The behaviour seems similar to what can be achieved while plugging in 4k monitor to this PC.

    Expected Behavior

    FPS doesn't drop below 30 FPS.

    Actual Behavior

    FPS drops below 10 FPS and ruins UX.

    My Theories

    My first theory is that too many mouse events (or derived events like source updates) clog up the CPU. I'll try to reduce that via animationFrame API later.

    Another theory is that MapboxGL can't keep up with painting and we need a better way to do it. i.e. instead of updating the whole polygon, use two ghost lines to display the delta between before/after drag (in theory you only need to paint two lines then, so it might be fast enough).

    opened by varna 1
  • Layers using source of `mapbox-gl-draw-cold` or `mapbox-gl-draw-hot` should be remove on `onRemove`

    Layers using source of `mapbox-gl-draw-cold` or `mapbox-gl-draw-hot` should be remove on `onRemove`

    Hi there,

    As you know, Draw provides sources named mapbox-gl-draw-cold and mapbox-gl-draw-hot. We render these sources in a fill-extrusion layer and use them to represent the polygons drawn by Draw as 3D polygons. We understand that drawing the mapbox-gl-draw-cold and mapbox-gl-draw-hot sources in a custom layer in this way is an expected usage.

    However, the current implementation of onRemove in Draw does not take care of cleaning up layers that use these sources. If Draw's onRemove is executed without removing those layers, a runtime error will occur at the point of removingSource mapbox-gl-draw-cold or mapbox-gl-draw-hot because there is layer that is still using those sources. https://github.com/mapbox/mapbox-gl-draw/blob/main/src/setup.js#L111-L126

    If the user were to intervene in this lifecycle to remove these layers, we would probably have to extend Draw to implement our own onRemove, which would be a large implementation compared to what we want to do. So I think these layers should be deleted by Draw's onRemove with the following code added. (It's just an idea, unexamined.)

    const style = ctx.map.getStyle();
    const allLayers = style ? style.layers : undefined;
    if (allLayers) {
      for (const layer of allLayers) {
        if (layer.source === Constants.sources.COLD || layer.source === Constants.sources.HOT) {
          ctx.map.removeLayer(layer.id);
        }
      }
    }
    

    What do you think about the above proposal?

    opened by yukiyokotani 0
Releases(v1.3.0)
  • v1.3.0(May 20, 2021)

    • ⚠️ Removed GeoJSON validation in draw.add — responsibility for valid input is now on the user. #1052
    • Fixed NPM security warnings about dependencies. #1052
    • Fixed midpoint calculation when terrain is enabled. #1039
    • Reduced the size of the plugin's CSS code from 33KB to 5KB. #1038 (h/t @johanrd)
    • Fixed simple_select mode handling on touch devices. #1008 (h/t @corinv)
    Source code(tar.gz)
    Source code(zip)
  • v1.2.2(Feb 25, 2021)

  • v1.2.1(Feb 3, 2021)

    Bug Fixes:

    • Upgrade peerDependencies to allow [email protected]+ to be used with gl-draw.
    • Update package.json so that usage of library from npm always results in pulling in the built bundle.
    • Remove require()'ing of unsed node builtins like fs and path from the bundle.
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Jul 13, 2020)

    • Upgrade all dependencies
    • Upgrade to Node v12
    • Upgrade to ES6
    • Change bundler to rollup for smaller bundles
    • Switch from Uglify to buble in order to produce better and more compatible code

    Bug fixes:

    • Trash correct vertices by changing sort to be numeric-aware #943
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0-beta.1(Jan 7, 2020)

    • Upgrade all dependencies
    • Upgrade to Node v12
    • Upgrade to ES6
    • Change bundler to rollup for smaller bundles
    • Switch from Uglify to buble in order to produce better and more compatible code

    Bug fixes:

    • Trash correct vertices by changing sort to be numeric-aware (#943)
    Source code(tar.gz)
    Source code(zip)
Owner
Mapbox
Mapbox is the location data platform for mobile and web applications. We're changing the way people move around cities and explore our world.
Mapbox
Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Microsoft Power BI Make sense of your big & dynamic location data with the Mapbox Visual for Power BI. Quickly design high-performan

Mapbox 121 Nov 22, 2022
Vuejs 2 components for interacting with mapbox-gl-js

VueMapbox Combine powers of Vue.js and Mapbox Gl JS Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the ma

Alex 425 Dec 26, 2022
Demo of Singapore buildings 3D tiles from OneMap on Mapbox GL JS.

Singapore buildings 3D Tiles from OneMap 3D on Mapbox GL JS This is a demo of Singapore buildings 3D tiles from OneMap 3D on Mapbox GL JS. Development

Chee Aun 5 Nov 6, 2021
(IDW) Interpolated Heatmap Layer for mapbox-gl

Mapbox :: Interpolated Heatmap(s) InterpolateHeatmapLayer is a minimalist JavaScript library for rendering temperature maps (or interpolate heatmaps)

Vinayak Kulkarni 13 Dec 15, 2022
MERN stack travel app using mapbox API, Travel and drop pin , share reviews and rate the location

MERN-Travel-Map Travel Map Pin A single page application built with MERN Stack from scratch (MongoDB + Mongoose, Express, React & NodeJs) Table of Con

Bùi Quốc Trọng 11 Dec 29, 2022
A modern study React component of leaflet draw for react-leaflet

React Leaflet Draft A modern study React component of leaflet draw for react-leaflet React component of leaflet-draw for react-leaflet Table of conten

Giovane Santos Silva 16 Oct 20, 2022
Tools for editing Shapefile, GeoJSON, TopoJSON and CSV files

Mapshaper Introduction Mapshaper is software for editing Shapefile, GeoJSON, TopoJSON, CSV and several other data formats, written in JavaScript. Maps

Matthew Bloch 3.2k Jan 2, 2023
This is collection of the CNCF logos packed into a draw.io importable file to draw cloud native architectures

draw-io-cncf-shape This is collection of the CNCF logos packed into a draw.io importable file to draw cloud native architectures How to embed the shap

Jan-Otto Kröpke 10 Dec 26, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Mapbox JavaScript API, a Leaflet Plugin

mapbox.js A Mapbox plugin for Leaflet, a lightweight JavaScript library for traditional raster maps. For the state-of-the-art Mapbox vector maps libra

Mapbox 1.9k Dec 23, 2022
Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Microsoft Power BI Make sense of your big & dynamic location data with the Mapbox Visual for Power BI. Quickly design high-performan

Mapbox 121 Nov 22, 2022
Vuejs 2 components for interacting with mapbox-gl-js

VueMapbox Combine powers of Vue.js and Mapbox Gl JS Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the ma

Alex 425 Dec 26, 2022
Demo of Singapore buildings 3D tiles from OneMap on Mapbox GL JS.

Singapore buildings 3D Tiles from OneMap 3D on Mapbox GL JS This is a demo of Singapore buildings 3D tiles from OneMap 3D on Mapbox GL JS. Development

Chee Aun 5 Nov 6, 2021
(IDW) Interpolated Heatmap Layer for mapbox-gl

Mapbox :: Interpolated Heatmap(s) InterpolateHeatmapLayer is a minimalist JavaScript library for rendering temperature maps (or interpolate heatmaps)

Vinayak Kulkarni 13 Dec 15, 2022
MERN stack travel app using mapbox API, Travel and drop pin , share reviews and rate the location

MERN-Travel-Map Travel Map Pin A single page application built with MERN Stack from scratch (MongoDB + Mongoose, Express, React & NodeJs) Table of Con

Bùi Quốc Trọng 11 Dec 29, 2022
Cross provider map drawing library, supporting Mapbox, Google Maps and Leaflet out the box

Terra Draw Frictionless map drawing across mapping providers. TerraDraw centralises map drawing logic and provides a host of out the box drawing modes

James Milner 106 Dec 31, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
🛠 Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

?? Solana Web3 Tools - A set of tools to improve the user experience on Web3 Solana Frontends.

Holaplex 30 May 21, 2022