leaflet / leaflet.draw Goto Github PK
View Code? Open in Web Editor NEWVector drawing and editing plugin for Leaflet
Home Page: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html
License: MIT License
Vector drawing and editing plugin for Leaflet
Home Page: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html
License: MIT License
Branch 0.2
The options object does not exist in the _disposeButton function in Toolbar.js:
_disposeButton: function (button) {
L.DomEvent
.off(button, 'click', L.DomEvent.stopPropagation)
.off(button, 'mousedown', L.DomEvent.stopPropagation)
.off(button, 'dblclick', L.DomEvent.stopPropagation)
.off(button, 'click', L.DomEvent.preventDefault)
.off(button, 'click', options.callback);
},
I think that you need something like
_disposeButton: function (button) {
L.DomEvent
.off(button, 'click', L.DomEvent.stopPropagation)
.off(button, 'mousedown', L.DomEvent.stopPropagation)
.off(button, 'dblclick', L.DomEvent.stopPropagation)
.off(button, 'click', L.DomEvent.preventDefault);
if (this.options.callback) {
L.DomEvent.off(button, 'click', this.options.callback);
}
},
Hey I've been working on a plugin that binds a Leaflet map to an HTML element (<input />
, <textarea>
, etc) and can read and write serialized GeoJSON features to and from the element. I am not sure what you have planned for Leaflet.draw but thought I'd bring this up here as aspects might potentially overlap.
The repository is here https://github.com/thegreat/Leaflet.widget.
I have developed with the intention of using it as wysiwyg-style input widget for a Drupal module but I figure it could be useful elsewhere too.
The plugin also comes with a 'select' control for selecting features. Selected features are managed by a handler and actions can be performed on the selected features. I have implemented a 'remove' action as an example but could see 'edit' (#31), 'group' and 'move' actions being useful.
The plugin is currently functional (will post a demo soon) but still pretty rough around the edges. There are also a few implementation aspects around layer management that feel a bit 'clunky' and I am not happy with. If you have time to review the code, I would greatly appreciate any feedback/insight you have.
Cheers,
Tom
(Sorry if I spammed you a little with updates, I accidentally submitted this a little early :P).
Leaflet/Leaflet#712
Leaflet/Leaflet#645
Leaflet/Leaflet#1369
What do you think Jacob? Leaflet.draw seems like a better place for this than the core.
Moved from Leaflet/Leaflet#996 @hknielsen
Hi,
Thanks for an awesome plugin.
Is it possible to, say, draw a rectangle without using the drawing control? We use our own controls to interact with the Leaflet map, and want to implement our own drawing toolbar.
For example, when you click the rectangle button in your implementation, the L.Handler.Draw.enable method is called, which looks like this:
enable: function() {
this.fire('activated');
this._map.fire('drawing', {drawingType: this.type});
L.Handler.prototype.enable.call(this);
}
I can already raise the map.drawing event, because I store a reference to the map. The this.fire() method is a little trickier, though. I assume the 'this' is a reference to the L.Handler.Draw object, so I'll need a reference to this object to call it from another class. Is it possible to get a reference to the current L.Handler.Draw object?
Thanks!
Aaron
Are these actually useful? For polylines the last marker is used to finish the line and for polygons the first marker. What about the rest of the markers.
Finding the first point when drawing a complex polygon can be confusing.
Methodology of drawing doesn't work at all for touch browsers :|
My use-case is an application that receives a GeoJSON feed of features, renders them on the map, and then the user can edit these features. I guess this is more of a question / looking for advice on best practice, sorry if this is not the best place to post, I could not find a mailing list, etc. so I'm assuming this is okay :-)
I currently accomplish this by using code that looks roughly like this:
$.getJSON(url, {}, function(feed) {
var features = feed.features;
features.forEach(function(feature) {
var geometry = L.GeoJSON.geometryToLayer(feature.geometry);
geometry.on("click", function(e) {
e.target.editing.enable();
});
geometry.addTo(someLayerOnMap);
});
});
This works, but is awkward, and I would much rather use a GeoJSON layer . However, I tried hooking into the onEachFeature callback to the layer to try and enable editing of features there, but had no luck.
Just wondering if there's something really basic I'm missing - I'm also really happy to work on this aspect / try to generalize editing of GeoJSON layers a bit if that's possible if anyone has any ideas. Thank you so much for a wonderful tool.
Thanks for the great plug-in!
I recently upgraded to the latest master and the behaviour of the polygon drawing seems to have changed a little. You can no longer place new markers for polygons over an existing polygon. This introduces a little usability quirk in my application. We only allow users to draw one polygon at a time, the old shapes are removed once any new ones are completed.
var line = new L.Polyline();
line.editing.enable();
line.setLatLngs(...) or line.addLatLng()
last methods should update editing state and redraw draggable points.
Current workaround: remove and re-add line into map layer.
Moved from Leaflet/Leaflet#711 @Larry0ua @peromax
An option to limit the polys that may be drawn
Branch 0.2
It would be good to be able to switch the feature group accessed by the edit controls without having to remove and recreate the associated draw control.
When you try to finish drawing in demo (http://jacobtoye.github.com/Leaflet.draw/), the folloing JS-error happens:
Uncaught TypeError: Object [object Object] has no method '_finishIsGood'
If you create a rectangle you retrieve 5 coordinates but if you create a polygon with 4 vertex you retrieve only 4 coordiantes and that it is a problem if you use GeoJSON because with the rectangle works but with polygon doesn´t work.
Is any way to change the style of the marker icons in a polyline when it is in edit mode?
When instantiating the drawControl I know that this it is possible:
var drawControl = new L.Control.Draw({
polyline: {
icon: new L.DivIcon({
iconSize: new L.Point(10, 10),
className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
})
}
});
However this only applies to drawing and the style reverts back to the "default" when entering edit mode. The only solution for achieving this when editing is to override the leaflet-editing-icon
css class which is kind of a dirty hack.
Am I missing something?
Hello,
I want to create a Drupal 7 Leaflet Draw input field. In this I want to use the libraries API (http://drupal.org/project/libraries). A requirement for this is a version string inside a file. Could you add a version to the readme or to one of the source files, so I can use the libraries API.
Hi, in internet explorer 8, if you click in the "square icon" and then click on the "polygon icon" the browser throws an exception or simply dont draw polygon.
Message: 'this._shape' is null or is not an object
Line: 6
Character: 11567
Código: 0
URI: http://localhost:27131/js/leaflet/leaflet.draw.js
Thanks.
It will be cool that while you are creating a polygon you could redimension that poligon dragging over their vertex.
I made some changes to before 0.5 release (probably tomorrow) so that common toolbar styles (used by zoom control) are extracted into separate classes. Please check it out and update the plugin if needed: Leaflet/Leaflet#1209
Hello,
Really great draw functionality support !
BTW, what about an 'update shape support' ?
It would be great to have a way for user to update an existing shape ? We could have a kind of 'Selector tool' which could then udpate shapes inside a LayerGroup (drawnItems layer group in library provided example)
May be this could be done in 3 steps process :
Regards,
got Uncaught exception: TypeError: Cannot convert 'this._parts' to object
when:
map.on('draw:poly-created', function (e) {
console.log(e.poly.getPathString())
});
ps. leaflet 0.6-dev
This toolbar would have select, edit and delete buttons. Edit and delete would only be enabled once a shape was selected.
Idea is from: https://github.com/tnightingale/Leaflet.widget
Would need edit support for square and circle. These have been done a couple of times. See:
https://github.com/CloudMade/Leaflet/pull/924
https://github.com/CloudMade/Leaflet/pull/938
Shapes should probably change colour when in edit mode.
Hi all,
It is possible to close the polygon with dbclick instead to end the shape clicking at the start point.
Here is example that you can do that. http://bit.ly/UFygfQ
Thank you!!
The guide line will show over the newly created line if you don't move the mouse after creating a vertex.
First of all, thank you very much for this plugin!
I'm quite new to leaflet, so I hope my question is relevant...
I need to build a user interface with several functions, allowing the user to add different kinds of markers, or to draw polylines.
I was wondering if it was possible to replace the drawControl by a custom-made toolbox ?
The idea would be to assign controls to specific DOM objects.
Exemple :
red polyline (activate Polyline.Draw)
green marker (activate Marker.Draw)
red marker (activate Marker.Draw)
Thanks :)
I am try to use requireJs to load it async and it doesn't load properly. Global "L" in leaflet-src isn't available by the time requireJs starts injecting leaflet.draw src.
wrapper class for leaflet-src
define(['../lib/leaflet/js/leaflet-src', '../lib/leaflet/js/leaflet.draw'], function () {
return {};
});
If there is a marker or vector layer on the map you cannot draw a polyline or polygon vertex over it.
The tip that follows the cursor should display over the vertex markers, rather than under them.
When the tool is disabled, the disable event fires first and then the disable method is called.
In my case I want the polygon tool (enabled from a custom control) to remain active until the tool is toggled off. I'm listening for the disable event to fire so I can re-enable the tool, but since the previous polygon is never cleaned out I can't draw a new polygon because the tool thinks I'm continuing on the previous one.
Swapping the two lines in Handler.Draw.js fixes this for me.
e.g., a polyline by default has
polyline: {
title: 'Draw a polyline'
}
set, but setting some custom options for polyline without speciffying a title overrides the options object, and so title becomes undefined.
For polylines & polygons it would be handy to be able to undo. This could be achieved via a key press (similar to cancel [ESC], maybe [CTRL+Z]) or by handling clicking on the vertex to remove.
Environment:
http://jacobtoye.github.com/Leaflet.draw/
Firefox 15.0
Leaflet 0.4.4
Leaflet Draw 0.1
Expected behaviour:
Click and drag to draw a circle allows the creation of a circle.
Actual behaviour:
Click and drag to draw a circle picks up and drags a map tile.
Steps to reproduce:
Other information:
Current there is a drawing tip that tells the user how to draw a shape. What is missing is information on cancelling and undoing.
When the mouse is clicked, the marker is not "released". It's working fine if the marker is placed directly on the map. But doesn't work when placing the marker over the rectangle.
Any possibility to get a snap drawing to layer functionality in a future version?
Are there any technical limitations within the leaflet framework which would prohibit a continue drawing feature?
If you zoom out and draw a largish polygon then click to create a vertex that will make a complex polygon the page breaks :(
Maybe you can suggest a good way to destroy all markers?
The desired behavior I'm after is when a user selects the draw box button, all existing boxes are destroyed, thus allowing only one box on the map at a time.
Indicate which tool was selected in the draw control panel. I.e. by highlighting the active button.
E.g. when you have a polgon already on the map and try to drop a marker on it. The marker handler is listening for click events on the map.
We should unbind event listeners etc when the control is removed from the map.
This bug report is linked to Leaflet/Leaflet#174
The _getMiddleLatLng returns a LatLng that does not get recalculated when zooming in. So, when you enable editing at a low zoomlevel (1-5) and zoom in afterwards (16-18), the middle icon can be off up to 10km.
Moved from Leaflet/Leaflet#509 @appelflap @leplatrem
Branch 0.2
The variable tolbarId in the array index in
onRemove: function (map) {
for (var toolbarId in this._toolbars) {
this._toolbars[tolbarId].removeToolbar();
}
},
should be toolbarId
Would it be possible to add events to an editable polyline? Right now there is only the 'edit' event. It would be nice that the returned events let us know if a point has been moved, removed or added and at what index.
Similar to what google maps api has:
google.maps.event.addListener(GPS_Line.getPath(), 'remove_at', process_remove_at);
google.maps.event.addListener(GPS_Line.getPath(), 'set_at', process_set_at);
google.maps.event.addListener(GPS_Line.getPath(), 'insert_at', process_insert_at);
I need such a feature to update an array that has point attributes corresponding to the points of the polyline. Right now, I compare the lat/lon of each point between the new polyline and the array until I find the location of edit.
If this can already be accomplished with LL, let me know.
Thanks,
Nick,
Moved from Leaflet/Leaflet#1152 @nhinze
Is there a way to edit existing shapes? For example, change the center and radius of an existing circle, add/remote points to/from a polyline, etc.?
Thanks!
Currently the user can press Esc to cancel drawing. Should also add a button that cancels as well. Could appear only when user has selected a drawing tool.
Branch 0.2
The references to map in the _getResizeMarkerPoint function in Edit.Circle.js should instead refer to this._shape._map
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.