I'm using google maps markers to show some locations with custom icons. Sometimes there are a lot and on mobile the markers take up a good portion of the screen.
I set google maps to gestureHandling: 'cooperative', so the page can be scrolled while the map is on screen. When the user starts scrolling on a marker, the "Use two fingers to move the map" info appears but the page does not scroll. Start dragging anywhere on the map, the page scrolls just like intended.
This behaviour can also be observed on the Marker API Docs (https://developers.google.com/maps/documentation/javascript/examples/marker-simple) in mobile mode (touch).
Is there a way to unlock page scrolling when the user starts on a marker?
I found that adding a touchstart listener to all marker <img tags which stops propagation will block google's event and thus allow page scrolling.
I've had luck with the following code, but it is worth noting that:
tilesloaded is not strictly when markers are loaded so its a bit of a race condition. If you can find a better event then let me know.
The selector is a bit messy, it captures all of my marker images but I'd be happier if it was more intentionally specific.
google.maps.event.addListenerOnce(map, "tilesloaded", () => document.querySelectorAll(`.gm-style div[role='button'] img[draggable='false']`).forEach(x => x.addEventListener("touchstart", (e) => { e.stopImmediatePropagation() })));
I've also upvoted the issue but I'm not holding my breath.
Related
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 have an Ionic Tabs App (I used the Cordova templates on Visual Studio 2015) with a Leaflet map on the second tab. On the first tab I have some search parameters for POIs that I want to show on the map with markers. Everything is working fine, including the map is showing all the tiles, until I start interacting with the controls on the first tab. Specifically, when I enter an input control and the soft keyboard appears, if I then go to the second tab, the map is only showing the first tile. If I zoom in or out, the map refreshes but shows only the first tile. The problem is solved though if I change orientation of the device.
The soft keyboard is not the only thing that causes the problem. On Ripple for example, the soft keyboard does not show (I use the laptop keyboard) but after a while manipulating the search parameters on the first tab, the map stops working properly.
Also, I have tried with the Mapbox API instead of Leaflet and the problem occurs exactly the same way.
The L.Map instance is unable to correctly get/calculate it's dimensions because at initialization the instance's parent container has a style of display: none. You can call invalidateSize on your map instance to make it recalculate it's dimensions when the tab containing your map is shown:
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
http://leafletjs.com/reference.html#map-invalidatesize
I'm by far no ionic expert but according to the docs/reference, ion-tab has a on-select callback where you could do this:
Called when this tab is selected.
http://ionicframework.com/docs/api/directive/ionTab/
<ion-tab on-select="onTabSelected()"></ion-tab>
function onTabSelected () {
//Assuming 'map' holds a reference to your map instance.
map.invalidateSize();
}
As mentioned in the comments below by the question poster, the above works, but so does listening for the $ionicView.enter event and using invalidateSize in it's callback:
$scope.$on('$ionicView.enter', function () {
map.invalidateSize();
});
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.
When implementing a bing maps based solution, the logo on the bottom left (highlighted in image above) causes a search box to appear to search with bing. Has anyone been successful in disabling this feature?
Ideally the solution will not involve disabling hovering events on the map completely, as there are hover events that we have implemented to provide functionality.
When initialising the map, set the enableSearchLogo property to False.
http://msdn.microsoft.com/en-us/library/gg427603.aspx