Comments (99)
@michaelguild13 thanks for your work on this.. it's appreciated.
from leaflet.draw.
It's a community effort. One of the reasons I prefer to work on open-source products :)
from leaflet.draw.
@michaelguild13 you're no idiot in my book, you've done some great work making an already good library work on a trending platform (mobile) and you should commended!
from leaflet.draw.
Hello Jacob,
I'm using your code for a project which I'm currently building for the iPad, so I added some "hacky" touch support. It's not perfect, but works for me. (I'm using it for drawing polygons only so far....) Maybe that could work as a starting point for you. Cheers and thanks for your work!
Marcus
from leaflet.draw.
Awesome! Thanks for that @mphasize. Your code will be a good start. I'll hopefully get the time within the next month of so to add support for the rest of the shapes/markers.
from leaflet.draw.
Had some time to do it myself . :-) See https://github.com/jacobtoye/Leaflet.draw/pull/5
from leaflet.draw.
+1 is touch polygon drawing on the horizon?
from leaflet.draw.
Honestly not at this stage. :(
from leaflet.draw.
Alas... I actually have sufficient impetus to work on this today, assume the solution isn't simply a case of binding ~touchClick events then? Before I take a look, are there some design issues I should consider?
from leaflet.draw.
Yeah I wish it were that easy :( unfortunately we would need to redo most if the handlers. Check out my responses to the pull request referenced above. Let me know what you think.
from leaflet.draw.
Could I possibly request two things if you're not planning to implement this at present? Firstly, could you look at disabling the buttons on mobile devices? Secondly, could you make it clear in your front page on Github that it isn't available on mobile? Just for the sake of clarity, you know...
Both would be much appreciated!
from leaflet.draw.
Hi jacobtoye & philipn, first of all, great work!! I'd like to know, if I want iPad support today, what is the easiest hack I can apply?
Thanks!
from leaflet.draw.
@thejae your best bet is to check out what this pull was doing and try apply it to a fork. It will be quite a bit of work :(
from leaflet.draw.
@jacobtoye Thanks for your reply :) do you accept donations in exchange for feature requests? If yes, what kind of donations are we speaking about for Touch support?
from leaflet.draw.
@jacobtoye This plugin is fantastic! I'd also be interested in knowing how much time and money it'd take to complete this work, as we may be able to sponsor a bit.
from leaflet.draw.
@philipn @thejae Thanks for the offer guys, however I'm too busy to work on another project.
Unfortunately it wouldn't be as simple as adding some touch handlers to the plugin. The handlers would need to create and edit the shapes differently.
from leaflet.draw.
Thanks! @mphasize - do you have any plans to dive back into this work?
from leaflet.draw.
@philipn Hej Philip, I don't have any immediate plans to get back to this, although I might need the touch support myself for a little side project next year.
Getting basic touch support working was easy a year ago, but I didn't stay up to date with Leaflet, so I don't know how that might have changed. Anyway, for public deployment you would want something more than just basic support. I think @jacobtoye already tried to explain, that the interaction patterns between mouse and touch drawing are quite different.
The basic support could probably be done in a day or two, but in order to create a natural, performant and delightful solution for touch drawing, I would probably need at least a weeks worth of programming hours plus time for the interaction design and graphics plus time for some user testing in between.
Just a few things to think about: Bigger touch targets for the handles and as a result of this coping with the problem of overlapping handles. Easy adjustment and repositioning of all handles even while drawing the shapes (since we have more than one finger, we should be able to use them). How to do exact positioning when the touch point is hidden behind your finger. How to deal with different screen sizes from phone to tablet and so on.
Cheers!
M
from leaflet.draw.
+1 for touch support :)
I looked at pull 5 and am dismayed that it apparently (?) no longer works for master branch. It seems like Polygon will be easier to implement (well, elegantly anyway) so if I find the time I'll effort that...
from leaflet.draw.
Here is my work-in-progress. Basic touch support for Polyline/Polygon seems to be working in my application.
h/t @mphasize
from leaflet.draw.
Hey @pztrick , against all odds, your solution works really fine on my friend's Windows phone as well. Thanks a million!
from leaflet.draw.
@sellonen It looks like a recent Chrome update vanquished my fix. I'll probably get to fixing it today or tomorrow if it's easy enough. (Still working in IE11.)
Just FYI in case you are using it!
from leaflet.draw.
Thanks for keeping me updated. My need will in fact only materialize in about a month. Markers are by far the most important in our product, and I think I will make a slightly different implementation for touch users: When the drawing starts, a marker is placed in the middle of the map with a popup saying "Drag the map until I'm at the correct location, and then click ok". The marker stays in the middle while map is being dragged, of course. I think that will be easier for touch users, who otherwise cannot see a marker until they have clicked on the map and then drawing finishes already... Also it's quite easy to accidentally produce a click event on the map on touch devices, so I don't think binding anything to it will be a good idea. Though this experience is with a bit older phones and openlayers, i have not tested modern tools.
from leaflet.draw.
Panning is a neat idea. Good luck!
from leaflet.draw.
I developed my webapplication specifically with leaflet and leaflet.draw because leaflet has a good support for mobile devices. I wasn't aware that leaflet.draw didn't support touch events :-(
My workaround is to use the Dolphin browser, the only browser on Android in which my webapplication works the same as on my laptop/desktop. My webapplication doesn't work in FireFox and Chrome or Chroma Beta (I didn't test Opera because Dolphin works ok)
Hopefully leaflet.draw will get native touch support so that it will work in all mobile browser.
BTW I use geoJSON with polygon's, polylines and points/markers in combination with a non-real-world background, and accuracy is not very important in my case. It's a kind of a rough map sketch tool
from leaflet.draw.
I am currently implementing touch for all of the tools. You can check it out and send me feedback
https://github.com/michaelguild13/Leaflet.draw
from leaflet.draw.
G'day Michael,
Music to my ears. I saw your email this morning and within 5 mins had
downloaded it and started testing against an application that I am
developing.
Tested on:
Device: Samsung GT-N5120
O/S: Android 4.1.2 (Jelly Bean)
- Chrome 33.0.1750.166
- Firefox: 28.0.1
Device: Antique iPad 1
O/S: iOS 5.1.1
- Safari ver ?? (sorry, can't seem to find version num
- Dingo ver ?? but both are probably 2-3 years old!)
At this point in time, all browsers exhibit a similar behaviour in regards
to one particular aspect of the touch scenario -> if you touch the screen
with two fingers, it causes a freeze. I can happily navigate around on a
single finger -> touch, drag the map, touch on one of my leaflet objects
(point, line, polygon) and it will generate the expected result (database
info or a popup).
The moment I touch the screen with two fingers and perform an action
(example, a squeeze), she's dead in the water. All graphic objects
disappear and most of my UI locks up to the extent that I lose all
dropdown menus. Leaflet zoom (+/-) is rendered non functional (but can see
them highlight when pressed) and the map is also frozen from being able to
be dragged etc. My leaflet layers component remains functional in that I
can still go to a different WMS and data is retrieved into same viewport,
but still does not free it up for user actions.
UI code is based upon:
TWBS 3.1.1
jQuery 1.10.2 and a few mixins.
Michael, The investigation and work you have done so far has already
taken the leaflet.draw plugin another step along the way. There has been a huge
interest expressed in touch capabilities and a while back, one
guy put some stuff up that had the beginnings of being workable. From
what I have briefly seen, your efforts to-date have provided a good basis
to develop from without being too intrusive to the code base. I also
remember reading a post (from JacobToye) that in order to implement touch,
there would be a lot of work to do in terms of icon sizing and user
interaction semantics (ie. multi-finger touches and swipes, swirls etc).
My gut feeling is that if there is basic (but consistent/reliable)
functionality, then this will get many of us past the post (at least in
being able to show our clients/bosses etc) that there is some simple touch
capability in the library. At this point, it might be easier to just
filter out those inputs that generate the multi-touch issue and focus on
basic single finger interaction robustness? At this point, I have only tested basic
query interactions and the planting of a point. All those good things related to
line and polygon input and editing are in the pretty hard basket..
All I can say is great work Michael, if you need any testing and feedback,
I am more than happy to help...
Best Regards,
Peter
from leaflet.draw.
Hey Peter,
Thanks for the feedback. Yeah, I was thinking the same thing when it came
to implementing touch for leaflet.draw
I am trying to just use the touch support that Leaflet already has but it's
lacking multi touch and barely supports single touch.
Based on how the tools currently work, I am trying to just get it to work
with single touch.
For the creating squares and circles, I will do a touch and drag.
As for the UI, I will be implementing separate tooltips and using
highlights so the user knows what tool they are on.
I am hoping to get touch for shapes in today...or at lest get it kind of in
:P
Best,
Michael Guild
On Fri, Mar 28, 2014 at 5:48 AM, Peter [email protected] wrote:
G'day Michael,
Music to my ears. I saw your email this morning and within 5 mins had
downloaded it and started testing against an application that I am
developing.Tested on:
Device: Samsung GT-N5120
O/S: Android 4.1.2 (Jelly Bean)
- Chrome 33.0.1750.166
- Firefox: 28.0.1
Device: Antique iPad 1
O/S: iOS 5.1.1
- Safari ver ?? (sorry, can't seem to find version num
- Dingo ver ?? but both are probably 2-3 years old!)
At this point in time, all browsers exhibit a similar behaviour in regards
to one particular aspect of the touch scenario -> if you touch the screen
with two fingers, it causes a freeze. I can happily navigate around on a
single finger -> touch, drag the map, touch on one of my leaflet objects
(point, line, polygon) and it will generate the expected result (database
info or a popup).The moment I touch the screen with two fingers and perform an action
(example, a squeeze), she's dead in the water. All graphic objects
disappear and most of my UI locks up to the extent that I lose all
dropdown menus. Leaflet zoom (+/-) is rendered non functional (but can see
them highlight when pressed) and the map is also frozen from being able to
be dragged etc. My leaflet layers component remains functional in that I
can still go to a different WMS and data is retrieved into same viewport,
but still does not free it up for user actions.UI code is based upon:
TWBS 3.1.1
jQuery 1.10.2 and a few mixins.Michael, The investigation and work you have done so far has already
taken the leaflet.draw plugin onto the next step. There has been a huge
interest expressed in touch capabilities and a couple of months back, one
guy pot some stuff up that had the beginnings of being workable. From
what I have briefly seen, your efforts to-date have provided a good basis
to develop from without being too intrusive to the code base. I do
recollect somewhere reading (from Jacob) that in order to implement touch,
there would be a lot of work to do in terms of icon sizing and user
interaction semantics (ie. multi-finger touches and swipes, swirls etc).My gut feeling is that if there is basic (but consistent/reliable)
functionality, then this will get many of us past the post (at least in
being able to show our clients/bosses etc) that there is some simple touch
capability in the library. At this point, it might be easier to just
filter out those inputs that generate the multi-touch issue and focus on
basic single finger interaction robustness?All I can say is great work Michael, if you need any testing and feedback,
I am more than happy to help...Best Regards,
Peter(Australia)
I am currently implementing touch for all of the tools. You can check it
out and send me feedbackhttps://github.com/michaelguild13/Leaflet.draw
Reply to this email directly or view it on GitHub:
#2 (comment)...........................
Peter BarrattSystem Science Pty. Limited
M: +61 (0)407 455 004Bathurst,
NSW 2795
AustraliaReply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-38902501
.
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
Hi Michael, great to see you looking into touch for Leaflet.draw.
The approach I would use for adding touch support to Leaflet.draw would be to create separate handlers. Where appropriate I would extend the existing handlers, E.g:
L.Draw.Polyline.Touch = L.Draw.Polyline.extend({
addHooks: function () {
...
}
});
Then in the places where the handlers are used you would test for touch to determine which handler to use. The reason behind this is that you keep a nice separation between your desktop code and your touch code.
Unfortunately the handlers for drawing/editing shapes on touch devices are significantly different from desktops (this is the main reason why touch hasn't been implemented yet). E.g. drawing rectangles and circles, also there is superfluous code in the polyline/polygon handlers to handle desktop only nuances.
I honestly do want to do this some time in the future, however since I have a newborn and work can't afford me much time for Leaflet.draw I cannot do so at this stage.
Good luck with your implementation. I'll try to keep abreast of your progress and help where I can.
from leaflet.draw.
Yeah, that's a good plan of action. I don't have enough time to do that
implementation though :(. My goal is to just get it to function with single
touch for now without hacking everything up.
On Sat, Mar 29, 2014 at 6:18 PM, Jacob Toye [email protected]:
Hi Michael, great to see you looking into touch for Leaflet.draw.
The approach I would use for adding touch support to Leaflet.draw would be
to create separate handlers. Where appropriate I would extend the existing
handlers, E.g:L.Draw.Polyline.Touch = L.Draw.Polyline.extend({
addHooks: function () {
...
}});Then in the places where the handlers are used you would test for touch to
determine which handler to use. The reason behind this is that you keep a
nice separation between your desktop code and your touch code.Unfortunately the handlers for drawing/editing shapes on touch devices are
significantly different from desktops (this is the main reason why touch
hasn't been implemented yet). E.g. drawing rectangles and circles, also
there is superfluous code in the polyline/polygon handlers to handle
desktop only nuances.I honestly do want to do this some time in the future, however since I
have a newborn and work can't afford me much time for Leaflet.draw I cannot
do so at this stage.Good luck with your implementation. I'll try to keep abreast of your
progress and help where I can.Reply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-39010947
.
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
Hi Michael,
This might sound like a bit of a wacky idea, but maybe the inclusion of a touch support library (such as hammer.js) might help a little in getting it past the post. Even if such a lib were used just to take control of all of the touch events to filter out all events that are not required (/dev/null), it might be of some use at the cost of an additional (but low) overhead of introducing another lib into one's apps.
Just a thought,
Peter
from leaflet.draw.
That was my original idea but then I said,"eff it" because this is
something a lot of people are asking for and I need it to work without an
extra lib.
So far, I have the polyLine, Makers and Circles working to a point. Feel
free to review my code.
There are some errors coming out because leaflet expects to get pageX &
pageY from directly the event object. The problem there is that in ios (and
possibly some other os) that doesn't get set. The correct pageX & pageY is
located inside of the e.touches[0].
So yeah, because leaflet expects that, there are errors that I will have to
fix later. But so far so good (decent).
On Mon, Mar 31, 2014 at 11:06 AM, Peter [email protected] wrote:
Hi Michael,
This might sound like a bit of a wacky idea, but maybe the inclusion of a
touch support library (such as hammer.js) might help a little in getting it
past the post. Even if such a lib were used just to take control of all of
the touch events and then filter out all events that are not required
(/dev/null), it might be of some use at the cost of an additional (but low)
overhead of introducing another lib into one's apps.Just a thought,
PeterReply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-39099116
.
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
So I don't know if I am just being foolish or not but I can't figure out why
L.Edit.Poly = L.Handler.extend({
doesn't include the touch handlers I made. on "click" works on touch because of the default leaflet support but my on "touchstart" isn't firing and I am pretty sure it's because it doesn't know it's there....
from leaflet.draw.
I made more progress. Please review:
https://github.com/michaelguild13/Leaflet.draw
from leaflet.draw.
Can you review my work and give me some of your thoughts please?
I might move things around like how you mentioned before:
L.Draw.Polyline.Touch = L.Draw.Polyline.extend({
addHooks: function () {
...
}
});
Thanks!
from leaflet.draw.
@michaelguild13 I tested your fork today on a web app. Since you don't have the Issues featured available on your fork I'll post here:
-
For Polyline: I cannot close the shape using a desktop/mouse cursor. However, touch works well and seems better than my own fork at closing shape (https://github.com/pztrick/Leaflet.draw). Sometimes I had a helluva time tapping the final vertice to close the shape (and would just place more and more vertices).
(Someone should try to repro this. Maybe I sub-classed something in my particular web app that doesn't jive with the new Leaflet.draw fork's code.) -
Do we want to stick with tapping for drawing vertices (similar to desktop cursor mouseclicks) or is it going to be better UI for mobile users to do panning placement instead: keep the cursor fixed in middle of map and have a separate button which can be tapped/clicked to place a market (after panning middle of map to desired point).
Thanks for your efforts, Michael!
edit: I may have some time later this week to fiddle with stuff, but I'm a javascript hacker -- not superstar programmer -- so it probably wouldn't be as elegant as you folks would all want. :)
from leaflet.draw.
@pztrick , I'll try to take care of this over the weekend if you haven't done it. Just fork and do a pull request ;)
from leaflet.draw.
@michaelguild13 I have found a work around to fix ploygon close issue on non touch devices with touch devices working fine with it. Please look at this.
in Draw.Ployline.js replace _onTouch function with this.
_onTouch: function (e) {
// #TODO: fix the glitchyness of not closing the polyline
// #TODO: use touchstart and touchend vs using click(touch start & end).
if (L.Browser.touch){
this._onMouseDown(e);
this._onMouseUp(e);
}
},
from leaflet.draw.
@pztrick , Can you give me browser details for issue 1 because I am not seeing the same bug when trying to reproduce.
For issue 2, from what I gathered from gorilla user testing, the current UI is easy to use. I am always open to improvements btw :D.
@Badr-zaman , That is a decent fix for now since leaflet's touch is very glitchy and rarely works. Click is suppose to support touch and mouse click but looking at the code, it just takes a touch and mimics a mouse click :/. I'll add in a #TODO for switching to just click once leaflet fixes their touch issues.
from leaflet.draw.
FYI, the Styles branch hold extra features:
- Color picker for fill and stroke
- Stroke thickness controller
- Text Lables
- Font Size Controller
- UI changes for editing. Using Dashes to indicate selected object for editing color, stroke, font-size and more to come.
from leaflet.draw.
@Badr-zaman excellent solution this worked for me as well...
from leaflet.draw.
@michaelguild13 I found time to test your code again using your latest build. I still encounter the same issue with closing the polygon. Seems to affect both desktop and touch devices.
OS: Windows 8.1
Browser: Chrome 35.0.1916.153 m
Issue: Cannot click first vertex to close polygon.
Code branch: https://github.com/michaelguild13/Leaflet.draw/tree/master (master)
I painstakingly went through the source and added console.log
s to see which event handlers were firing, and the _finishShape
was never being executed. It kept invoking addVertex
when you would click on the existing first vertex to try to close the polygon line.
I think that the binding to this._map
is overriding the binding to the first marker. See these lines:
// https://github.com/michaelguild13/Leaflet.draw/blob/master/dist/leaflet.draw-src.js#L693
// The first marker should have a click handler to close the polygon
if (markerCount === 1) {
this._markers[0].on('click', this._finishShape, this);
}
// https://github.com/michaelguild13/Leaflet.draw/blob/master/dist/leaflet.draw-src.js#L283
this._map
.on('mousemove', this._onMouseMove, this)
.on('mouseup', this._onMouseUp, this)
.on('zoomlevelschange', this._onZoomEnd, this)
.on('click', this._onTouch, this);
Sure enough... when I removed the 'click'
binding from this._map
, the desktop close bindings worked flawlessly. BUT... this broke touch/mobile altogether.
I reverted back to using my touch_hack
branch for now, which seems to work OK for mobile/desktop though I ultimately want to get to using your fork so that it benefits from the more thorough testing the community can give it. :)
https://github.com/pztrick/Leaflet.draw/tree/touch_hack
Hope this helps.
from leaflet.draw.
The thing is that according to leaflet, click is suppose to mimic a touch on touch devices. this is an issue with leaflet's touch support. a good temp fix is to add an _onTouch event for only mobile.
There is a reason leaflet.draw didn't use click :(.
Anyhoo, I'll probably fix later this week by reverting back to leaflet.draw's code and then adding in the ontouch.
from leaflet.draw.
@Badr-zaman , I believe I added that in.
@pztrick , thanks dood.
from leaflet.draw.
I had the same problem as pztrick with the polygon close in chrome. I just made the click event conditional to being int a touch environment.
i.e.
this._map
.on('mousemove', this._onMouseMove, this)
.on('mouseup', this._onMouseUp, this)
.on('zoomlevelschange', this._onZoomEnd, this);
if (L.Browser.touch) {
this._map.on('click', this._onTouch, this);
}
and it all seemed to work
from leaflet.draw.
I tried your code tablackmore, but it doesn't work for my development machine. I have a touchscreen tablet monitor so L.Browser.touch
is indeed true
. However, I'm using my Bluetooth mouse cursor to draw and so I can't close the polygon. This is a corner case, and your solution would work for many users. But I suppose lots of users have touchscreen tablets like Microsoft Surface (which I use), etc, and need the cursor click, too.
from leaflet.draw.
@pztrick Argh, well it felt like a bit of a hack thanks for the heads up.
from leaflet.draw.
FYI: In Chrome, there is a flag you can set to force a touch environment... This may be helpful for reproducing the behavior I get using a bluetooth mouse with Microsoft Surface tablet (which is a touchscreen device...).
On a normal, non-touch device using the Chrome browser:
- Navigate to: chrome://flags/
- Change "Enable touch event" from Automatic to Enabled
You should be able to draw using your mouse cursor, and experience the glitch where you can't click a vertice to close the polygon. (I think...)
from leaflet.draw.
From the above I understand the problem is now only with respect to closing the polygon by clicking on the first point. If this is only the case, can't we have another option "Close Polygon" along with "Delete last point" and "Cancel"? When the user wants to close the polygon they could use this option and finish the action?
from leaflet.draw.
I believe that action is already there. Btw, I've been swamped lately so I
haven't been able to fix these issues yet.
On Thu, Aug 7, 2014 at 4:25 AM, Ramesh Vijayaraghavan <
[email protected]> wrote:
@michaelguild13 https://github.com/michaelguild13 @pztrick
https://github.com/pztrickFrom the above I understand the problem is now only with respect to
closing the polygon by clicking on the first point. If this is only the
case, can't we have another option "Close Polygon" along with "Delete last
point" and "Cancel"? When the user wants to close the polygon they could
use this option and finish the action?—
Reply to this email directly or view it on GitHub
#2 (comment).
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
Just to say we'd certainly welcome touch support, which would definitely enhance our cycle collision data viewer at:
http://www.cyclestreets.net/collisions/
Being able to get reports using a touch device while in a meeting with officials from the local municipality for instance would become possible.
from leaflet.draw.
So, I should have time to fix and clean all of this up this weekend. So, anyone that is waiting on me, sorry.
from leaflet.draw.
So still no support for touch events?
from leaflet.draw.
@jacobtoye @michaelguild13 @pztrick
I've had a chance to look at leaflet draw touch support and been playing around with it for a couple of days. As @jacobtoye highlighted this is not a trivial thing to add as the interactions are different. I played quite a lot with your work @michaelguild13 too.
My suggestion is that we start a new branch to implement this with a total rewrite. It's not as bloody as it sounds. What we could do is successively Add features. Road map could be.
-
Implement so you can draw all features using touch interface or mouse. (or both see windows surface problem, where user could start a line with mouse and finish with touch).
-
Implement so you can edit all features using touch interface or mouse or both at the same time.
-
Add in support for tooltips/tips, measure functionality. (Maybe trigger events and have a control to display the text?)
-
Get the toolbars playing nicely.
As a step in that direction I've created such a branch. Where I have stripped out, things like tooltips, measure etc. and implement touch support for adding points, lines and polygons. The code is not DRY and I now want to refactor it. There are lots of design considerations now and would really like @jacobtoye input at this early stage so I get the basic structure stable.
I.e. I was considering now using a mixin for the standard touch event stuff but from what I read Leaflet is going away from this to a more traditional OO model, that sort of messes with my initial idea. This stuff could work nicely as a mixin.
Have a look at this branch:
https://github.com/tablackmore/Leaflet.draw/tree/touch
The stuff I'm working on is here, https://github.com/tablackmore/Leaflet.draw/tree/touch/src/draw/handler I think it now works OK on iOS, Android, Desktop and this model should work on a surface with both mouse and touch.
Examples to test in the browser are here
https://github.com/tablackmore/Leaflet.draw/tree/touch/examples
Looking forward to some tips on how best to refactor so we get a stable base for such a branch.
Regards
Tom
from leaflet.draw.
@tablackmore Nice write up.
As you have illustrated, there are a few issues here. What you want is for non touch users to get the non touch handlers and for touch supported user to get the touch handlers. So this leads me to believe that the best approach is to have separate handlers. However the difficulty is when users are using a device with both.
I like what you have done @tablackmore. This would have been my approach. Yes it is not totally DRY but you don't end up having to hack around the standard handlers. E.g. the invisible marker hack.
From here you can see what are the common methods/blocks of code that both handlers use and extract them out to an abstract class that both handlers extend.
from leaflet.draw.
I just read through the thread and see that several folks have gotten close to having something that works. I haven't looked at any of the patches yet, but would willing to test if things are close.
Would it be possible to use an api call to enable / disable touch mode? This way the you can use leaflet.draw in mobile apps where you already know that touch is supported. This removes the burden of detecting device capabilities.
Again, not having looked at the patches, I wonder if it's possible to add the required handlers as overrides to a standard version of leaflet.draw instead of creating a fork. This way the additional handlers could be more easily tested and optionally included.
from leaflet.draw.
It's been awhile since I've worked on this but if I recall so long as the api or library you choose can mimic a click, I think you will be alright. But you might run in to problems of them not working properly. I've tried this before in the very early stages and eventually said,"screw it, I am just going to fork this and do it"
If there is enough demand, I'll get back to working on this but I recall, the owners of the project rather go down a different route...which made sense to me but it's been like a year now and they still haven't gotten with it :(.
from leaflet.draw.
i had a project last year that required editing of points, lines and polygons on multiple devices. I forked the repo and slimed it to its core functionality that could work with both touch and mouse. I got it working and deployed in my project. I was planning slowly adding back the functionality I removed (such as tool tips) in a way that would give the developer more control, but ran out of time.
from leaflet.draw.
If there is enough demand, I'll get back to working on this
I'm here for the demand ;) I'm currently working on a slum mapping project, and we could definitely use this !! Unfortunately I'm not enough of a javascript/leaflet guru to help much on the code, but I'd be glad to help testing.
from leaflet.draw.
Alright, I'll pick it back up :)
On Jan 16, 2015 8:40 PM, "olivierdalang" [email protected] wrote:
@michaelguild13 https://github.com/michaelguild13 @tablackmore
https://github.com/tablackmoreIf there is enough demand, I'll get back to working on this
I'm here for the demand ;) I'm currently working on a slum mapping
project, and we could definitely use this !! Unfortunately I'm not enough
of a javascript/leaflet guru to help much on the code, but I'd be glad to
help testing.—
Reply to this email directly or view it on GitHub
#2 (comment).
from leaflet.draw.
@michaelguild13 that's great news ! Is your master branch already usable ? if so, I'll switch to it and live test your work
from leaflet.draw.
Hey I'm here for the demand too =)... could you explain the status/plan for this issue?
from leaflet.draw.
I'll start accepting bugs and fix them.
On Feb 18, 2015 1:18 PM, "joealbertvp" [email protected] wrote:
Hey I'm here for the demand too =)... could you explain the status/plan
for this issue?—
Reply to this email directly or view it on GitHub
#2 (comment).
from leaflet.draw.
Hi all,
I am as well evaluating ATM our options for bringing the draw features into Leaflet as touch ready. The biggest question now seems: who to fork? ;) Further I agree with people saying that the handling of the drawing would need to be adopted for "touch".
Problematic points I see in current approach in touch and under UX perspective:
- drawing of circle and rectangle are working different then drawing of polygon or polyline (UX)
- to hit the points in touch is pure luck since they are way too small (UX)
- edit hook icons in toolbar are as well way to small for touch devices (UX)
Our UX guy came up with the idea of drag and drop of the different forms on the plan, switching to edit mode on the form and then have save/cancel as context menu. The context menu in circle would not add much more then the common one, but e.g. the one for polygon would offer to add a point.
Our team can offer some time to fix outstanding issues and especially testing in a real case environment. First interest is that the touch events are fully supported the UX stuff is in a second level. Please let me know what (which fork) I need to use to review current stand and estimate when we could implement the full touch capability.
from leaflet.draw.
my fork is pretty active, feel free to review and check it out.
On Thu, Feb 19, 2015 at 7:31 AM, Thorsten Scherler <[email protected]
wrote:
Hi all,
I am as well evaluating ATM our options for bringing the draw features
into Leaflet as touch ready. The biggest question now seems: who to fork?
;) Further I agree with people saying that the handling of the drawing
would need to be adopted for "touch".Problematic points I see in current approach in touch and under UX
perspective:
- drawing of circle and rectangle are working different then drawing
of polygon or polyline (UX)- to hit the points in touch is pure luck since they are way too small
(UX)- edit hook icons in toolbar are as well way to small for touch
devices (UX)Our UX guy came up with the idea of drag and drop of the different forms
on the plan, switching to edit mode on the the form and then have
save/cancel as context menu. The context menu in circle would not add much
more then the common one, but e.g. the one for polygon would offer to add a
point.Our team can offer some time to fix outstanding issues and especially
testing in a real case environment. First interest is that the touch events
are fully supported the UX stuff is in a second level. Please let me know
what (which fork) I need to use to review current stand and estimate when
we could implement the full touch capability.—
Reply to this email directly or view it on GitHub
#2 (comment).
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
@michaelguild13 I just switched to your fork and yeah basically it works, but triggering the different forms is close to pure luck, however I think there we could use bigger symbols and we would be good as gold.
from leaflet.draw.
agreed :). So are you taking over or do people still want me to work on
this?
On Fri, Feb 20, 2015 at 5:19 AM, Thorsten Scherler <[email protected]
wrote:
@michaelguild13 https://github.com/michaelguild13 I just switched to
your fork and yeah basically it works, but triggering the different forms
is close to pure luck, however I think there we could use bigger symbols
and we would be good as gold.—
Reply to this email directly or view it on GitHub
#2 (comment).
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
Ok guys, I just updated my repo with upstream and I am back to working on this hardcore. I noticed that the methods for closing the polyline has changed, so that's the first thing I am going to fix.
I will start to accept bugs on my fork. :) Cheers.
from leaflet.draw.
This may be of interest:
from leaflet.draw.
Hi Micheal,
I did a while ago:
- "leaflet-draw": "^0.2.3",
+ "leaflet-draw": "michaelguild13/Leaflet.draw",
so far is working fine but a bit problematic is that sometimes you move the map while you are moving the single points in edit mode.
Further I have limited our usage of the lib on editing polygon only, no drawing at all. We are dropping rectangle (but under the hood they are actual polygons) shapes on the map and control the edit/save in the popup. However since we use your fork directly I will let you know about any issues we may see.
from leaflet.draw.
Well, crap hahaha. Why didn't you do a pull request for me? :) You would've
saved me sometime on merging in upstream hahahaha.
Any bugs you find, please report it on my repo and I will be getting to
them tonight and tomorrow morning. Thanks! :)
On Fri, Feb 27, 2015 at 2:39 AM, Thorsten Scherler <[email protected]
wrote:
Hi Micheal,
I did a while ago:
- "leaflet-draw": "^0.2.3",
- "leaflet-draw": "michaelguild13/Leaflet.draw",
so far is working fine but a bit problematic is that sometimes you move
the map while you are moving the single points in edit mode.Further I have limited our usage of the lib on editing polygon only, no
drawing at all. We are dropping rectangle (but under the hood they are
actual polygons) shapes on the map and control the edit/save in the popup.
However since we use your fork directly I will let you know about any
issues we may see.—
Reply to this email directly or view it on GitHub
#2 (comment).
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
@michaelguild13
Hi,
Firstly, great work on the touch support.
I noticed that if I use the touch support and try and "click" on a spot where there is already a polygon drawn on the map, the touch indicator does not show. The point is however registered. I think it is a z-index problem.
Not sure whether it is fixable on my side?
Thanks again
from leaflet.draw.
Hi Again,
more testing showed that I was a bit wrong. The touch event is not "ALWAYS" recognised when on top of another polygon/circle, but when it is the marker is shown. This happens even when I try and draw over the polygon I just drew with touch.
from leaflet.draw.
@michaelguild13 @tablackmore @mrmin24 do we have any live example of this feature ?
from leaflet.draw.
@dud3 Not from my side, sorry. It works well though and is pretty much the same as using a mouse.
from leaflet.draw.
@dud3 maybe here http://mapmaker.education.nationalgeographic.com/
from leaflet.draw.
Yep, that's the live example.
On Thu, Apr 9, 2015 at 9:03 AM, mrmin24 [email protected] wrote:
@dud3 https://github.com/dud3 maybe here
http://mapmaker.education.nationalgeographic.com/—
Reply to this email directly or view it on GitHub
#2 (comment).
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
Thanks a lot Guys.
One more quick question: does the "add pin" work for anyone, I have the following configuration on mobile:
- Chrome 41.0.2272.96
- Android 5.0.2;
- JS v8 4.1.0.21
But for some reason the feature just doesn't work ;(.
Thanks a lot.
cc: @michaelguild13
from leaflet.draw.
Hi @michaelguild13, first thanks for your awesome job!
I'm working with your repo and i'have this error when i start edit mode in a brower:
It still work but this error appear when i click on the map after enabling edit.
I look into your code and i found this in L.EditToolbar.edit:
addHooks: function () {
var map = this._map;
if (map) {
map.getContainer().focus();
this._featureGroup.eachLayer(this._enableLayerEdit, this);
this._tooltip = new L.Tooltip(this._map);
this._tooltip.updateContent({
text: L.drawLocal.edit.handlers.edit.tooltip.text,
subtext: L.drawLocal.edit.handlers.edit.tooltip.subtext
});
this._map
.on('mousemove', this._onMouseMove, this)
.on('touchmove', this._onMouseMove, this)
.on('click', this._editStyle, this); // what's _editStyle?
}
},
_editStyle: function() // this function doesn't exist
{
console.log("Doesn't exist");
},
The function editStyle doesn't exist and i think you never remove this onclick event. So when we click on the map it cause the previous error.
I didn't know where to put this, so sorry if i'm not in the right place.
Thx and sorry for my english.
from leaflet.draw.
Thank you for all your work @michaelguild13, your fork saved me!
I found something interresting while playing with it on iPad. While drawing a new polygon, I was unable to easily add "points" to this polygon if I was clicking on a zone with multiple layers under it. I think I had 3 or 4 layers.
To fix it I simply reduce the number of layers that I was using.
from leaflet.draw.
Thanks Jean! I've been meaning to update this lib with the one on ng's
mapmaker but haven't found the time. I'll do my best to fix that this week.
Sorry to everyone working with the old version.
On Monday, August 24, 2015, Jean-Samuel Aubry-Guzzi <
[email protected]> wrote:
Thank you for all your work @michaelguild13
https://github.com/michaelguild13, your fork saved me!
I found something interresting while playing with it on iPad. While
drawing a new polygon, I was unable to easily add "points" to this polygon
if I was clicking on a zone with multiple layers under it. I think I had 3
or 4 layers.
To fix it I simply reduce the number of layers that I was using.—
Reply to this email directly or view it on GitHub
#2 (comment).
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
@michaelguild13 Can you please list the changes that should come with the updated version?
@jacobtoye Are you still on this project, or we should follow another one?
from leaflet.draw.
@MeiRct , right now I am trying to get the code that I built for the mapmaker project so I can update this repo with the latest. But I currently no longer work for natgeo so there's that. For now, I am just going to go though this chat and trouble shoot what I can.
from leaflet.draw.
@michaelguild13 I've been using your code for a while now, thank you a lot. However, windows phones sometimes send 'touchcancel' and 'touchleave' events, causing on error in the Leaflet function L.DomEvent.AddPointerListener ( https://github.com/Leaflet/Leaflet/blob/stable/src/dom/DomEvent.Pointer.js#L20 )
I could overcome this by editing that function directly in Leaflet, but I'd rather not do it, not least because of the changes coming up in leaflet-1.0. Could we somehow treat touchcancel and touchleave as touchend events directly in Leaflet.draw? That way I wouldn't have to create a fork of my own for Leaflet.
from leaflet.draw.
If your report a bug, I'll do a fix for it.
On Monday, September 14, 2015, sellonen [email protected] wrote:
@michaelguild13 https://github.com/michaelguild13 I've been using your
code for a while now, thank you a lot. However, windows phones sometimes
send 'touchcancel' and 'touchleave' events, causing on error in the Leaflet
function L.DomEvent.AddPointerListener (
https://github.com/Leaflet/Leaflet/blob/stable/src/dom/DomEvent.Pointer.js#L20
)I could overcome this by editing that function directly in Leaflet, but
I'd rather not do it, not least because of the changes coming up in
leaflet-1.0. Could we somehow treat touchcancel and touchleave as touchend
events directly in Leaflet.draw? That way I wouldn't have to create a fork
of my own for Leaflet.—
Reply to this email directly or view it on GitHub
#2 (comment).
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
Do you mean "raise an issue"? I'm probably a bit noob with github, but there is no "issues" section in your fork of Leaflet.draw.
from leaflet.draw.
haha, you're right...weird...
ok, I'll look into this tomorrow evening.
On Mon, Sep 14, 2015 at 7:43 AM, sellonen [email protected] wrote:
Do you mean "raise an issue"? I'm probably a bit noob with github, but
there is no "issues" section in your fork of Leaflet.draw.—
Reply to this email directly or view it on GitHub
#2 (comment).
Michael Guild
571.338.9782
[email protected]
from leaflet.draw.
@michaelguild13 any chance of getting that issue queue going for your fork? P.S. Great work on getting touch support.
from leaflet.draw.
@sellonen , What's your fix for the windows phone?
@alexkb , Sadly, I don't have a windows phone to test with and I also don't have a good emulator setup to catch the events.
To play it safe, might change the code up so touchleave or touchcancel are treated the same as touchend.
L.DomEvent.on(this._container, 'touchcancel', this._onTouchEnd, this);
L.DomEvent.on(this._container, 'touchleave', this._onTouchEnd, this);
from leaflet.draw.
Hi, because I have never really looked at the code of Leaflet.Draw and didn't feel comfortable editing it, I resorted to making small modifications to Leaflet itself. Here's what worked: sellonen/Leaflet@0f7760b
Let me know if an update to your Leaflet.Draw renders my hack unnecessary.
from leaflet.draw.
@michaelguild13 I don't have a windows phone either. My point about the issue queue was so we could ask other questions relating to your fork, instead of asking them all in this one thread! :)
from leaflet.draw.
I can test Windows phone 8 if you publish a demo. And I agree, this discussion should take place somewhere else...
from leaflet.draw.
Ok, so I am an idiot and didn't realize that I had issues setting turned off on this repo. Anyhoo,
Everyone, please report issues here https://github.com/michaelguild13/Leaflet.draw/issues.
Also, if you want to work with me on this, please feel free to do pull requests.
from leaflet.draw.
@michaelguild13 What is the end goal of the fork? are you intending to create a pull request at some stage?
from leaflet.draw.
Just saw #285, never mind. :) Good work by the way!
from leaflet.draw.
@omeid , I tried doing a pull request a few years ago and they didn't want to accept it, stating that they wanted me to create another class for only touch instead of integrating it as I have.
If they want it, I am more than happy for them to take it.
Also, I haven't been that active on this due to working more in react as of late.
from leaflet.draw.
is this folk working with the latest version of leaflet right now?
from leaflet.draw.
Most likely not. I've given up supporting this fork since I've been busy on other projects.
I think their latest version took some of the code from this fork and merged it in...I think... No promises :P
from leaflet.draw.
This issue still exists on version 1.0.4. Thankfully @michaelguild13 fork still works but with warnings though.
from leaflet.draw.
Related Issues (20)
- Use the saved circle from the db and make it editable HOT 1
- Resizing in active edit mode
- Edit.Poly middle marker custom icon
- Rectangle and circle options documentation typo
- Using the Delete tool, the drawn layer cannot be deleted after the layer is overlaid
- Couldn't draw polygons/polylines using leaflet, leaflet.draw HOT 1
- TypeError: can't access property "falseFn", L.Util is undefined
- Add drawing markers to custom pane
- Cannot read properties of undefined (reading 'Poly') HOT 1
- Right click triggers `draw:drawvertex` event
- can't have delete without edit HOT 1
- Create polyline with some points non editable
- tooltips option on enableDraw() not working? HOT 1
- Programmatically set drawing mode / external toolbar
- 图层覆盖 HOT 2
- Impossible de modifier le cercle Leaflet
- Tool enabling disables text selection on the entire document HOT 1
- Drawing a rectangle using leaflet.draw library doesn't work (it throws error in console). HOT 1
- save/load leaflet.draw and use editing/delete buttons HOT 2
- MouseEvent.mozPressure is deprecated. MouseEvent.mozInputSource is deprecated.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.draw.