I am using Leaflet in a mobile app and want to get rid of the two zooming buttons in the top corner, but I need the exact same effect (zooming without the possibility of panning around with it) but using a pinching gesture. Alas, the default pinching gesture does not keep the view centred!
I don't know why, but keeping the zoom centred when using the mousewheel or doubleclick are available options for the map object:
If passed 'center', double-click zoom will zoom to the center of the view regardless of where the mouse was.
If passed 'center', it will zoom to the center of the view regardless of where the mouse was.
But not for touchZoom, I tried. maybe the nice people at Leaflet thought the effect doesn't "feel" nice, but I really wish I could try it nonetheless and judge it by myself.
Anyone knows how to get a similar effect? I don't really want to end up calling setView() at every "zoom" event call, if that even was an option...
Found out that I could use the maxBounds option. If you set both corners on a single point (the one you'd use for setView, for example), the map won't be able to pan away from it.
Related
Fairly new to Mapbox and getting there (slowly).
I have a map initially loaded at zoom level 1 for use in a web browser. When a user clicks on a marker, it'll center and zoom to level 10.
When that marker loses focus, I'd like to zoom back out to level 1.
This page discussing web applications does it (link below), but there doesn't seem to be (that I can find - sorry!) any documentation on how to achieve this.
https://docs.mapbox.com/help/getting-started/web-apps/
Any and all help appreciated!
For the first event, to zoom in when clicking a marker, you could adapt this example to zoom in addition to panning when calling flyTo
https://docs.mapbox.com/mapbox-gl-js/example/center-on-feature/
For the second part, you'd need to add a listener for another event depending on what you have in mind by "losing focus".
https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events
I am using the super useful Leaflet.markercluster for leaflet which has been great for performance because of the nice getExpandedVisibleBounds feature.
One problem I am running into is on mobile devices with the keyboard changing the viewport/bounds. When I enter an input box and the keyboard pops up, it shrinks the map viewport. After the keyboard goes away the viewport/bounds don't seem to update for the markercluster. The map is fully visible again but markers that are on the lower half of the map (where the keyboard was) are now not visible. Panning the map and zooming in and out don't seem to fix it. After a minute or so of use it seems to correct itself and the markers and now visible on the whole viewport again.
Any suggestions on how to fix this issue? Thanks!
I was trying Leaflet, the display looks like Google Maps, but I find a lot of ways cannot meet my requirements. Is there any way in the web, the phone shows the following?
Bad display:
The first time it is entered, it can be dragged to the outside of the screen.
Good display:
The first time it enters it is highly full-screen and cannot be dragged.
Have a look at the Leaflet documentation for initialising the map. You can pass several options that will do what you want:
var world = new L.LatLngBounds([[90,-180],[-90,180]]);
var map = L.map('map', {
minZoom:2,
maxBounds: world,
maxBoundsViscosity: 1,
}).setView([0,0], 0);
Setting minZoom stops users being able to zoom out so far that the top and bottom of the map are both visible (and overrides the zoom value passed to setView()). You may need to calculate an appropriate value based on the height of the screen, and how much of the world it is useful to display in your application. On its own, this still lets users pan off the edge of the map.
Setting maxBounds limits the view to a specific set of coordinates (the whole world in the example above). You also have to set maxBoundsViscosity to stop users being able to pan the map beyond these limits.
If you really don't want users to be able to pan the map at all, you can also set dragging: false. This still lets you pan the map using the .panTo() method.
How can I know when the user is zooming in or zooming out? I want to start an animation if the user zooms after some level. Is it possible to know this when the event zoomstart is triggered?
How can I know when the user is zooming in or zooming out?
At every zoom level, calculate how much map.getZoom() has changed.
Is it possible to know this when the event zoomstart is triggered?
No.
Consider the following scenario: A user, using a touchscreen (phone/tablet).
The user puts two fingers down on the screen. Half a frame after, one of the fingers moves a couple of pixels towards the center, triggering a pinch-zoom with a tiny change in the zoom level.
Your code catches the zoomstart and zoom events that happen inmediately after. "I know!" - your code says - "The user is zooming out!".
And then the user starts moving their fingers wider and wider, zooming in. And your code gets confused.
But the user changes their mind, and then starts zooming out for whatever reason. And then in again. And then out again. And then they lift the fingers and the zoom snaps to a zoom level.
This is why you can not know what the final zoom level is going to be when you listen to a zoomstart or zoom event in Leaflet.
Am working on a project where we have a Bing map being resized depending on whether or not a panel is shown/hidden on the left-hand side of the map. Because of this, and Microsoft's terms preventing overlaying anything over the logo/copyright, etc, I'm using the VEMap.resize method to resize the map, and then am moving the panel out of the way. The issue is that there's an awkward autopan that occurs as part of the resize - because we're declaring a center point to determine the resize, the map pans to include this point in the center without any control over it. Without declaring a center, the map doesn't pan, but it also doesn't pull the new data (map tiles) in our resize in either, resulting in an awkward grey bar on the right-hand side..
Is there a simple way to either resize the map and disable that autopan, moving the center prior to the panning, or to force the map tiles to be rendered upon the resize itself? Any help would be appreciated.
You may want to try the new version 7.0 as you could get rid of this annoyance by using "map.setView({center: map.getCenter(), animate:false})" after resizing; that should override the nice but annoying pan movement on resize.
However there are a few features (like infoboxes or client-side clustering) currently missing in 7.0 when migrating from 6.3 however and the classnames changed, so you may want to wait for now, however it would be the good moment to prepare yourself for 7.