repository·develop·Indexed 24 days ago
https://github.com/leaflet/leaflet.drawA vector drawing plugin for Leaflet maps that adds support for drawing and editing vector layers, including polylines, polygons, rectangles, circles, and markers. It includes the L.Control.Draw interface for toolbar configuration, L.drawLocal for language customization, and support for handling shape creation via L.Draw.Event.CREATED.
L.Tooltip class was replaced by L.Draw.Tooltip. If you are manually instantiating tooltips for drawing purposes, you must update your constructor call to use the new class name.Leaflet.draw 0.2 consolidated individual shape creation events (like draw:poly-created, draw:rectangle-created, etc.) into a single L.Draw.Event.CREATED event.
To handle new shapes, listen for L.Draw.Event.CREATED. You can determine which shape was created by checking e.layerType and access the actual layer via e.layer.
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
// Do any marker specific logic here
}
map.addLayer(layer);
});To run the test suite, install the npm dependencies and use the jake task runner.
npm install
jake testLeaflet.draw uses the L.drawLocal configuration object to manage all user-facing text, such as button titles and tooltips. You can override these strings to support different languages or custom messaging.
To customize text, modify the properties within L.drawLocal. For example, you can change a toolbar button's title or a specific handler's tooltip text.
// Set the button title text for the polygon button
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a sexy polygon!';
// Set the tooltip start text for the rectangle
L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Not telling...';leaflet.draw.css file to ensure your customizations are still compatible or to update them to the new structure.The L.Control.Draw constructor accepts an options object to define the behavior and appearance of the drawing interface.
Key configuration areas include:
position: The position of the toolbar on the map (e.g., 'topright').draw: Configuration for specific drawing tools (polyline, polygon, circle, rectangle, marker).shapeOptions: Styles for the drawn vector layers (color, weight, etc.).allowIntersection: Boolean to restrict polygons to simple shapes.drawError: Configuration for error messages and colors when drawing constraints are violated.icon: Custom icon for the marker tool.false (e.g., circle: false) disables that specific drawing tool.edit: Configuration for the editing interface.featureGroup: REQUIRED. The L.FeatureGroup containing the layers that should be editable.remove: Boolean to enable/disable the delete functionality.var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var MyCustomMarker = L.Icon.extend({
options: {
shadowUrl: null,
iconAnchor: new L.Point(12, 12),
iconSize: new L.Point(24, 24),
iconUrl: 'link/to/image.png'
}
});
var options = {
position: 'topright',
draw: {
polyline: {
shapeOptions: {
color: '#f357a1',
weight: 10
}
},
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#bada55'
}
},
circle: false, // Turns off this drawing tool
rectangle: {
shapeOptions: {
clickable: false
}
},
marker: {
icon: new MyCustomMarker()
}
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: false
}
};
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
editableLayers.addLayer(layer);
});If you need to change the configuration of drawing tools after the L.Control.Draw instance has been initialized, use the setDrawingOptions method. This allows you to update styles or constraints on the fly.
drawControl.setDrawingOptions({
rectangle: {
shapeOptions: {
color: '#0000FF'
}
}
});The events for starting and stopping a drawing handler have been renamed to align with the standard event naming convention. Additionally, the property used to identify the drawing type in the event arguments has changed.
| Old Event | New Event |
|---|---|
drawing | draw:drawstart |
drawing-disabled | draw:drawstop |
Argument Change:
drawingType has been renamed to layerType in the event arguments.