Limit zoom to button only in leaflet and phonegap - javascript

Is it possible to make it so you can only zoom in and out by using the zoom buttons as opposed to been able to pinch the screen? Perhaps only sensing one touch at a time or something similar?

The solution is right there in the Leaflet documentation: simply set the map option touchZoom to false when instantiating the map.

Related

Disable map panning using the arrow keys in the keyboard

I have a Leaflet map and I want to completely disable panning whether using the mouse, touchscreen, or keyboard, so that the map appears like a static image. I have added map.dragging.disable(); which works for mouse dragging.
But when the map container is focused using the Tab key, pressing the arrow keys on the keyboard will still pan the map. Is there any solution for this?
I think that there are a couple options on Leaflet maps that should resolve your issue.
First, the dragging option, if false, should prevent the mouse from dragging the map.
Next, the keyboard option, if false, should prevent the user from navigating the map with the keyboard.
Also, you should consider setting doubleClickZoom to false if you want your map to be static.
Finally, examine the map option documentation to ensure that I haven't missed any relevant options.
Hope this helps.

Leaflet zoom direction with javascript events

I need functionality to check in what direction is map scrolled.
I show some text on a map using tooltips and need to change font-size depending on zoom level.
I had tried with 'wheel' event but it is fired only out of a Map.
Also as I know there is no direction event on 'zoomstart' and 'zoomend' events.
I know that checking zoom direction is not Leaflet's by the book way but any suggestion or solution will help me a lot.

Google map Pinch Zoom Event

Currently iam using google map to display a particular location on map_canvas. There iam also plotting some markers too.
In my application there is an option to set zoom level of the map by the user. User can pinch zoom on map and return the current map zoom value, when clicking on a button the value will be saved. i attain it by using
this.mapObj.getZoom();
What my requirement is to get the zoom level of the map after the user performs the pinch zoom, so that i can display it in a div, so that the user can know the zoom level after each pinch zoom in/pinch zoom out.
Anyone have any idea how can i get the event just after the pinch zoom?
Hope you guys understand what i mean!
NB: Shoot! Found out!
Google Maps API v3: Is there a callback or event listener after zoom changed?
am gonna try this.
Yes, put this somewhere ( I would put that inside initialize() ):
google.maps.event.addListener(map, 'zoom_changed', function() {
...
}
And you read the zoom with map.getZoom().
Also, check out bounds_changed . That is triggerd by zoom, pan and resize of the map. Might become useful to you

OpenLayers JS - How to distinguish between user and programmatic view changes?

I have a 'moveend' listener established on an OpenLayers map. I can pan or zoom the map and the listener fires as expected. I also have the need in this app to programmatically change the zoom and the center location, however, when I do the 'moveend' listener fires. Is it possible to distinguish between user-driven view changes and programmatic view changes in OpenLayers?
I am using JavaScript OpenLayers version 2.12.
I don't think there is a way to distingish. But here's what you can do. When you programmatically zoom or change the center location, you can temporarily unregister the moveend event, and then re-register it afterwards:
map.events.unregister( "moveend", map, function );
.
.
programatically zoom
.
.
map.events.register( "moveend", map, function );
Also, when zooming or moving map programmaticaly, you could set some variable to true.
In listener, check that variable. If it's true, map is moved programmaticaly. After checking, set it back to false.

Map image with zoom in and zoom out as well as marker on different position of image

I am having trouble in developing mobile-web application. I want to allow users to upload map as an image of any location and other will tag or add marker on different position of it. I want want this functionality with zoom in and zoom out. I am able to do this without zoom in and zoom out. Can any body help me to achieve this by adding zoom in and zoom out on image with tags.
Have a look here https://github.com/can3p/iviewer/wiki. it is jquery component that you can use and has examples of zooming -in and -out with the coordinates and markers.

Categories

Resources