Top Related Projects
Vector drawing and editing plugin for Leaflet
A modular geospatial engine written in JavaScript and TypeScript
Quick Overview
Mapbox GL Draw is a plugin for Mapbox GL JS that adds drawing and editing tools to Mapbox maps. It allows users to draw points, lines, and polygons on a map, as well as edit and delete existing features. This plugin is particularly useful for creating interactive mapping applications that require user input or data collection.
Pros
- Easy integration with Mapbox GL JS
- Supports multiple geometry types (points, lines, polygons)
- Customizable styling and controls
- Extensive API for programmatic control and event handling
Cons
- Limited to Mapbox GL JS, not compatible with other mapping libraries
- May require additional setup for complex use cases
- Performance can be affected when dealing with large numbers of features
- Documentation could be more comprehensive for advanced usage
Code Examples
- Initialize Mapbox GL Draw:
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
}
});
map.addControl(draw);
- Add a feature programmatically:
const feature = {
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [-74.5, 40]
}
};
draw.add(feature);
- Listen for draw events:
map.on('draw.create', function(e) {
const data = draw.getAll();
console.log('New feature created:', data);
});
map.on('draw.update', function(e) {
const data = draw.getAll();
console.log('Feature updated:', data);
});
Getting Started
- Install Mapbox GL JS and Mapbox GL Draw:
<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css' type='text/css' />
- Initialize the map and add the draw control:
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
const draw = new MapboxDraw();
map.addControl(draw);
- Start drawing and interacting with the map!
Competitor Comparisons
Vector drawing and editing plugin for Leaflet
Pros of Leaflet.draw
- More lightweight and faster performance for simple mapping needs
- Extensive plugin ecosystem for additional functionality
- Easier to integrate with other JavaScript libraries
Cons of Leaflet.draw
- Limited 3D mapping capabilities
- Less robust styling options for complex visualizations
- Smaller community and fewer resources compared to Mapbox GL
Code Comparison
Leaflet.draw:
var map = L.map('map').setView([51.505, -0.09], 13);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: { featureGroup: drawnItems }
});
map.addControl(drawControl);
Mapbox GL Draw:
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-0.09, 51.505],
zoom: 13
});
var draw = new MapboxDraw();
map.addControl(draw);
Both libraries offer drawing tools for maps, but Leaflet.draw is more suitable for simpler 2D mapping needs, while Mapbox GL Draw provides more advanced features and better performance for complex, interactive maps.
A modular geospatial engine written in JavaScript and TypeScript
Pros of Turf
- More comprehensive geospatial analysis toolkit
- Can be used independently of any mapping library
- Supports a wide range of geometric operations and calculations
Cons of Turf
- Steeper learning curve due to its extensive functionality
- May require additional setup for integration with map rendering
Code Comparison
Turf (calculating the center of a polygon):
const polygon = turf.polygon([[[-5, 52], [4, 52], [4, 40], [-5, 40], [-5, 52]]]);
const center = turf.center(polygon);
Mapbox GL Draw (creating a polygon):
map.addControl(new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
}
}));
Key Differences
- Turf focuses on geospatial analysis and calculations, while Mapbox GL Draw is primarily for drawing and editing features on a map.
- Turf can be used with various mapping libraries or standalone, whereas Mapbox GL Draw is specifically designed for Mapbox GL JS.
- Mapbox GL Draw provides a user interface for drawing and editing, while Turf operates programmatically on geometric data.
Use Cases
- Use Turf for complex geospatial analysis, distance calculations, and data transformations.
- Choose Mapbox GL Draw for interactive map editing features and when working specifically with Mapbox GL JS.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
@mapbox/mapbox-gl-draw
Adds support for drawing and editing features on mapbox-gl.js maps. See a live example here
Requires mapbox-gl-js.
If you are developing with mapbox-gl-draw, see API.md for documentation.
Installing
npm install @mapbox/mapbox-gl-draw
Draw ships with CSS, make sure you include it in your build.
Usage in your application
JavaScript
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.4.3/mapbox-gl-draw.js'></script>
CSS
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.4.3/mapbox-gl-draw.css' type='text/css' />
Typescript
Typescript definition files are available as part of the DefinitelyTyped package.
npm install @types/mapbox__mapbox-gl-draw
Example usage
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
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 git@github.com:mapbox/mapbox-gl-draw.git
npm ci
npm 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}
npm ci
npm 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.
Top Related Projects
Vector drawing and editing plugin for Leaflet
A modular geospatial engine written in JavaScript and TypeScript
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot