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.
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.
I have created a custom element named memory-game and I am able to create lots of them by clicking on the icon of the memory game. I want functionality so that when I click on a memory-game window, it appears on top of the other opened windows. I can't figure out how to do that.
Use z-index to control what order non-statically positioned divs appear on the page.
Aside from that, I'm not sure what you're trying to accomplish with the code you have provided.
On one of our main pages, Leaflet map occupies 90% of the page with only the top nav (position: fixed;)
But on touch devices, user can accidentally zoom-in not on a map, but on the entire page. If they do - there is no way for them to un-zoom to see the top nav, because any touch action would zoom-in-out the map.
Ideally, I'm trying to find solution so that the page would zoom-out, after Leaflet reaches minZoom level. Any other ideas are welcome! Thanks!
Cannot be done.
Leaflet relies on the touch-action CSS property to prevent the browser from pinch-zooming the whole page.
Note how there is no value for that property that allows to pinch-zoom only out. Leaflet can only enable/disable pinch-zooming as a whole.
You could disable the touchZoom handler of the map by running something like map.touchZoom.disable(), or map.on('zoomend', function(){ if (map.getZoom()===map.options.minZoom) map.touchZoom.disable() }) but that will disable all pinch-zooming in Leaflet, and enable all pinch-zooming of the whole page.
I am using InfoBox to display information boxes on a custom Google map, but when the user is scrolling around the map with dragging (ie. on an iPad or other mobile device, or with their mouse), attempting to drag on an open InfoBox window does nothing (ie. the map doesn't move).
Is there some way to allow the drag scrolling to continue, even while on an InfoBox? I feel like it should just be a simple option but I can't see anything in the documentation.
I've tried moving the InfoBox to the mapPane (instead of the floatPane) but it didn't help.
I am working with the google plus API for photospheres.
For showing a time lapse panorama I have set up two divs on top of each other which get iframes with the embedded panorama viewer.
Then I have set up a timer which blends over from the front to the back div and it all works fine.
I have set it up here on jsfiddle
My problem is, that those panoramas are interactive so you can click in it, drag it around and click again to resume autorotate or use the mouse wheel to zoom in or out. The moment I do that my two panoramas are no longer in sync so the "illusion" of time lapse does not work any more.
Is there a way to duplicate all mouse events and send them to both divs at the same time?
I was able to register clicks using jquery and
$('#firstDiv').click(function(){$('#seconddiv').click()})
but I am struggling to replicate the mouse dragging and wheel zooming to keep the two panoramas in sync.
You could maybe give this variation a shot:
$('#firstDiv).on('click', function(){
$('#secondDiv').trigger('click');
});
But it seems that the interactive controls for the sphere are handled on the google side. So, unless there's a callback option (by passing a query string parameter to the iframe) to enable explicit control, I'd say it's not possible.