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.
Related
I am currently working on a leaflet app and came across the problem that the mouseover event for a marker is not correctly fired because, when i am hovering over the marker it just fires when the cursor is slighty out of the dragging object.
So as you can see the hover effect is not triggered because i have an object dragged over the marker but when i hover with the mouse over it without an object the hover effect is of course correctly triggered.
Maybe someone has a idea how to solve it or can point me in the right direction
Thanks in advance
I didn´t not managed to solve my problem with the mouse over function but found another solution. Maybe i can help someone with a similar problem.
My solution was to use the plugin 'leaflet-geometryutil'. This plugin gave me the option to calculate the distance from the current point to the nearest layer.
So i created a layer for every line on the map. When i am dragging a marker now i use the geometryutil plugin to find the nearest line-layer layer and change its appearing.
Recently I got an edited version of the JavaScript "Reel" by Pisi, which allows the user to use the mouse wheel to zoom in on a picture. The "reel" itself is working as a 360 view of an object, using many images which will jump to the next image in order when using mouse drag.
However, since I will use this application on a touch screen without a mouse I was thinking about rebinding the mouse wheel or adding events to a button which works like the mouse wheel. For example, below the DIV with the 360-slider I want two buttons, one that zooms in and one that zooms out. Any idea on how to make this work?
Any help is much appreciated!
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".
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/
I am adding popups for some items on a map. I refresh the elements every 30 seconds.
Here is the problem:
I hover one element and leave the mouse right there until the refresh
when I move the mouse away, the popup content is still there (it disappears only on zoom in/out, or if i drag the map)
I tried removing the entire layer and adding it again, deleting all markers, but no change.
Are popups cached somehow?
Can this be a OpenLayers bug?
You may want in the refresh event handler to close yourself any popups.
There are accessible through map.popups and use something like toggle or destroy or hide (depending on your needs) on each of them.