How to use on mobile?

[shivanil]

Edited (in case it helps someone else): I've tried to do the following to make it work on iPad. I was expecting it to make the mouseover (or touch) work, but instead the map stays static and the touch events do not work. What's wrong?

Code follows below:

             map.on ({
                        touchstart: function () { draw = false; },
                        touchend:   function () { draw = true; },
                        touchmove: function (e) {
                            if (draw) {
                                heat.addLatLng(e.latlng);
                            }
                        }
             })

[IvanSanchez]

How can I reconfigure it so that it works with devices like iPad?

In which way does it fail?

This is a good time to remember How To Ask Questions The Smart Way.

For this case in particular, a bad question is "How do I make this work on an iPad?", and a good question would be "I've tried to do X on an iPad and was expecting Y, but instead I've got Z, what's wrong?".

I've researched and I see that I need to add touch events instead of the mouse handlers that we have in the sample code on Mapbox.

Are you sure of that?

Can anyone help, please?

Yes.

[shivanil]

Hi Ivan, I've reacted to your comments above to ensure that this is a useful question to the rest of the community. I have also now watched the entire video that you've linked to.

I believe I see the answer at 36:00. In the video, he starts by determining whether any mouse coordinates are returned or whether targetTouches has returned an object in the map div we're looking at:

                    var posX, posY;

                    function positionHandler(e) {
                    if ((e.clientX) && (e.clientY)) {
                        posX = e.clientX; posY = e.clientY;
                    } else if (e.targetTouches) {
                        posX =  e.targetTouches[0].clientX;
                        posY = e.targetTouches[0].clientY;
                        e.preventDefault();
                        }
                    }

I understand that we're defining a function here to return the coordinates of a mouse or touch event on screen. The question now is how to use this function properly within the statement that starts with map.on() { ... }. Any help would be appreciated.

[IvanSanchez]

You're still not asking a good question.

This is the issue tracker for Leaflet.heat, so what part of Leaflet.heat is not working for you?