Leaflet label plugin on mobile devices - javascript

I have been developing a map using leaflet along with leaflet label plugin.
The plugin is working fine but on mobile devices it is not destroying the previous popup when another polygon touched.
You can check a demo here :
http://leaflet.github.io/Leaflet.label/
It would be very kind if anyone could help me to solve the problem with touch or find any other popup plugin with hover works in touch devices also.
Thanks in advance.

dwkns opened an issue in the Leaflet.label repository on GitHub. They also proffered an untested response which involved modifying the library. The plugin author hasn't yet replied.
One possible solution is to use L.Browser.touch to test for touch device support, and then bind a Leaflet popup for touch browsers and labels for non-touch browsers. Good luck!

Related

Resizeable and pinch to zoom plugin

I'm looking for a JS plugin that does something identical to jQuery UI Resizeable but works on pinch-to-zoom on touch devices.
What would be the simplest way to implement that functionality?
You should check hammer.js out.
The documentation is also very clear so you should be ok.

Sencha Touch 2 zoom panel content

Is there any plugin for pinch to zoom in ST2. I need a simple zooming of html loaded inside sencha panel. Any ideas are welcome!
Thanks
Please see PinchZoomImage in sencha market
I dont think there are any available plugins, but I did stumble accross a git that looks like it has the functionality you are looking for: https://gist.github.com/1002303
Have you checked out the pinch zoom with carousel code from the Sencha Touch forum?

Phonegap IOS App Image ZOOM Multitouch

I'm developing an app with Phonegap for IOS. I would zoom and move an image contained in a box div (overflow hidden) with the finger: multitouch for zoom in and out and touchmove for move the image.
Is it possible? and how?
I'm looking with Google for the solution but I don't find it!
There are a couple ways to do it.
Probably the easiest way is to use iScroll4's pinch/zoom feature: http://cubiq.org/iscroll-4
You should check this tutorial about Multitouch and HTML/JS. It works with PhoneGap applications too. http://www.appliness.com/multitouch-with-hammer-js/
this one is a nice simple tutorial in using iscroll4 for image zooming:
http://iphonedevlog.wordpress.com/2013/07/03/adding-picture-zooming-to-your-phonegap-app-with-iscroll4/
helped me a bit in my phonegap app. now, if i could only figure out how to use it with an svg. hmmm..

Pinch Zoom in webview [Android]

On my website, which is loaded in the webview, there is a map. There are also java scripts that detects double tap for zoom, dragging etc. But is it possible to have a javascript that detects the use of pinch zoom ? there are several examples of it working on an iphone, and on my website there is a script for the pinch zoom but it is only working on iphone.....
Is it possible to get it to work on Android ?
Thanks
When you would like to scale web content in you WebView and enable pinch and zoom, I prefer the simple android way.
webView.getSettings().setBuiltInZoomControls(true);
and you can even hide the controls if you are using API 11 or higher
webView.getSettings().setDisplayZoomControls(false)
There's an open-source library called android-pinch that you can include in your project to enable pinch zoom if you switch your WebView to a WebImageView. Here's an example of usage...
// create the WebImageView object from xml
WebImageView img = (WebImageView) findViewById(R.id.main_pic);
// fetches the image in a background thread
img.setImageFromURL("http://www.mysite.com/mypicture.jpg");
// enable pinch-zoom abilities on the image
new PinchImageView(img);
It's not exactly in a webview, but in any layout, that I wrote a piece of code for detecting pinch in an Android view.
It took me days to find out a solution for this, so I made my own custom pinch gesture detector.
You can see it in Github: http://github.com/luisfer/Neckar
Hope it helps.
This excellent tutorial shows how to implement the Pinch gesture.

How to handle drag events on iphone and ipad with javascript/jquery?

I have a little app that has been under development for some time. My friends and I have been working really hard on this and are near release of the beta version.
I want to give some demos using iPhone and iPad to look cool :p
Now my problem is how to handle:
Mouse Down
Mouse Up
Mouse Leave
The multitouch interface of the iPhone (which I expect is similar to the iPad) handles mouse move on a browser has a scrolling event. One could try to capture the scrolling event and use it to simulate the dragging but I don't even know if it will be doable or if it will only be a hack.
Any one knows of a more robust manner to manage dragging events on the iphone/ipad?
Apple's Developer pages have a lot of good info on handling just these types of issues.
Handling Events
I was having the same problem and I realized that in the short time-span I had, developing codes to handle raw mouse (down, move and up) events would take time. So, I went ahead and modified the ThreeDumsMedia jQuery.event.drag plugin to make it to work on iPhone.
Get the jQuery.event.drag from http://www.shamasis.net/2011/06/javascript-drag-events-on-iphone-and-other-touch-based-devices/ and the 'drag' event would work just fine on iOS devices.
let me know if this helped.
Try this :
jquery.event.drag - v 2.2
Three Dub Media - http://threedubmedia.com
If you are using jQuery, then use jquery.ui.mouse.touch.js with jquery UI 1.9.

Categories