Add touch support

[leaflet]

Add touch support

[wavded]

@michaelguild13 thanks for your work on this.. it's appreciated.

[michaelguild13]

It's a community effort. One of the reasons I prefer to work on open-source products :)

[alexkb]

@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!

[mphasize]

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!

mphasize@0455bb2

Marcus

[jacobtoye]

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.

[mphasize]

Had some time to do it myself . :-) See https://github.com/jacobtoye/Leaflet.draw/pull/5

[gamb]

+1 is touch polygon drawing on the horizon?

[jacobtoye]

Honestly not at this stage. :(

[gamb]

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?

[jacobtoye]

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.

[kingrollo]

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!

[thejae]

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!

[jacobtoye]

@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 :(

[thejae]

@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?

[philipn]

@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.

[jacobtoye]

@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.

[philipn]

Thanks! @mphasize - do you have any plans to dive back into this work?

[mphasize]

@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

[pztrick]

+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...

[pztrick]

Here is my work-in-progress. Basic touch support for Polyline/Polygon seems to be working in my application.

pztrick/Leaflet.draw@d567caf

h/t @mphasize

[sellonen]

Hey @pztrick , against all odds, your solution works really fine on my friend's Windows phone as well. Thanks a million!

[pztrick]

@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!

[sellonen]

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.

[pztrick]

Panning is a neat idea. Good luck!

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

[michaelguild13]

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

[peterb-2795]

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)

1. Chrome 33.0.1750.166
2. Firefox: 28.0.1

Device: Antique iPad 1
O/S: iOS 5.1.1

1. Safari ver ?? (sorry, can't seem to find version num
2. 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

[michaelguild13]

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)

1. Chrome 33.0.1750.166
2. Firefox: 28.0.1

Device: Antique iPad 1
O/S: iOS 5.1.1

1. Safari ver ?? (sorry, can't seem to find version num
2. 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 feedback

https://github.com/michaelguild13/Leaflet.draw

---

Reply to this email directly or view it on GitHub:
#2 (comment)

...........................
Peter Barratt

System Science Pty. Limited
M: [phone]

Bathurst,
NSW 2795
Australia

Reply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-38902501
.

Michael Guild
571.338.9782
[email protected]

[jacobtoye]

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.

[michaelguild13]

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]

[peterb-2795]

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

[michaelguild13]

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,
Peter

Reply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-39099116
.

Michael Guild
571.338.9782
[email protected]

[michaelguild13]

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....

[michaelguild13]

I made more progress. Please review:
https://github.com/michaelguild13/Leaflet.draw

[michaelguild13]

@jacobtoye ,

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!

[pztrick]

@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:

1. 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.)

2. 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. :)

[michaelguild13]

@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 ;)

[Badr-zaman]

@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);
        }
    },

[michaelguild13]

@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.

[michaelguild13]

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.

[aamirshahzad]

@Badr-zaman excellent solution this worked for me as well...

[pztrick]

@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.logs 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.

[michaelguild13]

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.

[michaelguild13]

@Badr-zaman , I believe I added that in.
@pztrick , thanks dood.

[tablackmore]

@pztrick
@michaelguild13

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

[pztrick]

@tablackmore
@michaelguild13

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.

[tablackmore]

@pztrick Argh, well it felt like a bit of a hack thanks for the heads up.

[pztrick]

@michaelguild13
@tablackmore

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:

1. Navigate to: chrome://flags/
2. 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...)

[rvramesh]

@michaelguild13 @pztrick

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?

[michaelguild13]

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/pztrick

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?

—
Reply to this email directly or view it on GitHub
#2 (comment).

Michael Guild
571.338.9782
[email protected]

[mvl22]

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.

[michaelguild13]

So, I should have time to fix and clean all of this up this weekend. So, anyone that is waiting on me, sorry.

[nikolaz111]

So still no support for touch events?

[tablackmore]

@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.

1. 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).

2. Implement so you can edit all features using touch interface or mouse or both at the same time.

3. Add in support for tooltips/tips, measure functionality. (Maybe trigger events and have a control to display the text?)

4. 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

[jacobtoye]

@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.

[christopherlakey]

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.

[michaelguild13]

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 :(.

[tablackmore]

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.

[olivierdalang]

@michaelguild13 @tablackmore

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.

[michaelguild13]

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/tablackmore

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.

—
Reply to this email directly or view it on GitHub
#2 (comment).

[olivierdalang]

@michaelguild13 that's great news ! Is your master branch already usable ? if so, I'll switch to it and live test your work

[joealbertvp]

Hey I'm here for the demand too =)... could you explain the status/plan for this issue?

[michaelguild13]

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).

[scherler]

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.

[michaelguild13]

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]

[scherler]

@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.

[michaelguild13]

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]

[michaelguild13]

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.

[mvl22]

This may be of interest:

http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx

[scherler]

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.

[michaelguild13]

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]

[mrmin24]

@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

[mrmin24]

@michaelguild13

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.

[dud3]

@michaelguild13 @tablackmore @mrmin24 do we have any live example of this feature ?

[mrmin24]

@dud3 Not from my side, sorry. It works well though and is pretty much the same as using a mouse.

[mrmin24]

@dud3 maybe here http://mapmaker.education.nationalgeographic.com/

[michaelguild13]

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]

[dud3]

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

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.

[DrPandemic]

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.

[michaelguild13]

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]

[MeiRct]

@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?

[michaelguild13]

@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.

[sellonen]

@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.

[michaelguild13]

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]

[sellonen]

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.

[michaelguild13]

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]

[alexkb]

@michaelguild13 any chance of getting that issue queue going for your fork? P.S. Great work on getting touch support.

[michaelguild13]

@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);

[sellonen]

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.

[alexkb]

@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! :)

[sellonen]

I can test Windows phone 8 if you publish a demo. And I agree, this discussion should take place somewhere else...

[michaelguild13]

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.

[omeid]

@michaelguild13 What is the end goal of the fork? are you intending to create a pull request at some stage?

[omeid]

Just saw #285, never mind. :) Good work by the way!

[michaelguild13]

@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.

[seedgabo]

is this folk working with the latest version of leaflet right now?

[michaelguild13]

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

[kajeagentspi]

This issue still exists on version 1.0.4. Thankfully @michaelguild13 fork still works but with warnings though.