I am working on Leaflet with a custom image whose tiles are being generated using "zoomify". I am currently facing the issues below:
1) On minimum zoom level, the image should not be draggable which is achieved using map.dragging.disable().
But the issue arises when the image is currently at maximum zoom level and user is dragging, as I don't want the focus to go beyond the tiles, i.e user should not be able to see "grey border" once he reaches beyond the bounds limit. Is it possible to do using Leaflet. For example, user drags the image and once grey border is starting to appear, the drag gets disabled. Although it does come back to current position by setting bounceAtZoomLimits: false as well as map.fitBounds(), but that is only when user ends dragging.
2) On Pinch zooming, the user can zoom in/out as much he/she can. Hence the image could contract as much as the user pinch zooms IN as well as pinch zooms OUT. Is it possible to stop this behaviour, i.e the user can only pinch zoom IN to the maximum zoom level set as well as pinch zoom OUT to the minimum zoom level set?
Any help would be appreciated. Thanks :)
Leaflet checks bounds only after dragging. You need to add drag process listener to fix tile layer position in action:
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds, { animate: false });
});
Example: http://jsfiddle.net/asleepwalker/exqar2w4/
UPD: I wrote a small plugin to perform it. Here is it: https://github.com/asleepwalker/leaflet.hardbounds
This has been answered here.
In Leaflet 1.0.0+ there is an option maxBoundsViscosity to "slow down map dragging" or make "the bounds fully solid".
Related
I have two similar problems with an Openlayers 3 map. They both pertain to making the map refresh/redraw when it doesn't have focus; i.e. when the mouse is not over it.
1) I show an outline of a country when the mouse is over it, but it becomes transparent when the mouse moves off. However, if the country is at the edge of the map view and I move the mouse off that edge of the map, the country stays outlined, because the map never sees the mouse over another area outside the country.
2) When I click on a country, it becomes permanently highlighted (i.e. a layer becomes visible). I have a button off the map that when clicked resets all the layers to transparent. When I click the button, nothing happens until I move the mouse back over the map, at which point the change becomes apparent and the layers disappear.
Is there a way to force the map to update when the mouse is not over it?
I have tried several options: map.redraw(), layer.redraw(), source.refresh(), map.refresh(), layer.refresh(), source.refresh(), document.getElementById("map").focus() and anything else I can find suggested to force a map to refresh, but none of them work until the mouse is moved over the map.
My mistake, simple bug. Failed to update the style directly, assuming another routine was handling it.
In my app when I click on a feature displayed on the map it zooms in and everything is centered correctly.
map.getView().fit(feature.getGeometry(), map.getSize())
However, I'd like to zoom in to some pixels left or right from this feature. I cannot see any fit property about that. How can I do this?
So I want to make a scroll zoom feature on a map I have created. The map contains an image and a number of divs positioned on top of the map marking out positions (pins).
I have found a number of jQuery tools which allows me to scroll zoom on an image. And I could probably try and use the mouse position and scroll amount to edit the coordinates of my divs as well. Is this the best way of going about this, or does anyone know any jQuery tools that will allow me to scroll zoom in and out of divs?
Here are some tools I found for scrolling on images.
image zoomer
Wheel zoom
You could try using leaflet.js. It is a lightweight javascript library meant to be used for maps, but it also work for images. This tutorial could help you start, and you might want to check this post.
Here is a very basic example of what it could look like.
Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.
Question:
How do I zoom in on the mouse position on mouse wheel scrolls?
Details:
I am trying to merge this complete solution on Stack Overflow, which allows for zooming of the stage, with this incomplete solution, which allows for zooming in around the mouse when clicked. I have forked the jsfiddle code here. The code works fine once you get it zoomed in, but upon first scrolling, the stage jumps to a different location and I can't figure out why. Can anyone tell me why it is happening, and how to solve it. Thanks.
Just a guess, but you are using the mouse position relative to the page not the canvas
When you zoom, the position under your mouse position gets changed (the reason of jumping). To move back the position to its original position, you need to pan the offset( difference between the previous position and the new position(after zoom)). To avoid stage jumping to a different location, you can use stage.setOffset function of KineticJS.
JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/