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.
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 developing a weather radar viewer using Mapbox. In a certain mode, there are 2 Mapbox maps on the screen at the same time showing different modes of the radar. The maps are locked to each other. When one map moves, rotates, or pans - the other one does as well. I did this by simply passing the properties of one map to the other. In the below screenshot, you will see how they are showing identical locations.
What I want to do is - when the user is hovering the mouse over "map1", I would like an identical (ghost or false) cursor on "map2". Here is what I am looking to do:
(edit: What you are looking at is an actual screenshot. Each map is enclosed in a DIV with 50% width of the screen, if this helps to explain)
I don't know if this is even possible in Mapbox. Hopefully someone can give some guidance as I can't find any other questions related to this and I really have no code to show without knowing where to start.
If you attempt to do this inside Mapbox-GL-JS (for instance, by constantly updating the location of a GeoJSON feature layer), I think the performance will be pretty poor.
But since the two views are exactly locked (and presumably the exact same dimensions), you can just do this at an HTML/CSS level. Detect mouse movement on the first map, and update the location of an absolutely-positioned element hovering over the second map to match.
Another approach would be using a canvas element overlaid over the second map, similarly updated.
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.
I am using mapbox and featureGroup control.
World map is repeating horizontally.How can I prevent horizontal repeating of world map.
I have tried 'no-wrap:true' ,but this seems to work only for tile layer.
For featureGroup,Please suggest some way.
var map = L.mapbox.map(mapData, MapBoxAccess.mapBoxAccess.accessId);
var featureGroup = L.featureGroup().addTo($scope.map);
I am adding my polygons and polylines on featureGroup
Please find attached image for better understanding.
That actually is the intended behavior and features cannot repeat across the globe like this. If you wanted to prevent scrolling across the globe, you can set bounds over the map so that someone can't scroll or pan side to side. Also, there is a Leaflet method called WorldCopyJump which will also bounce the view back to the bounds.
When I zoom in far enough on my map, the TileLayer disappears and I see a bunch of tiles that say "Map data not yet available". I believe these tiles may be coming from the provider, but I am not sure (I am using ESRI WorldImagery dataset).
Is there any way to, at a certain zoom level, just force the tiles to stretch, instead of requesting the tiles for that zoom level? I am ok with some blur, but I do need to zoom in further.
I tried playing around with the zoomOffset option, but whenever I put something there other than 0, my tiles just never load (all grey).
Thanks!
This can be solved by using two of the options of L.TileLayer.
First, set maxNativeZoom to the highest zoom level your tiles provide (the last zoom level before the "Map data not available" starts to appear - this tells Leaflet to stop requesting new tiles when zooming in beyond this level; stretched tiles will be used instead.
Second, set maxZoom to whatever zoom is appropriate; you might not want this to be more than a couple of levels higher than maxNativeZoom, since the stretched tiles will start to look pretty horrible.
You can find out more about the details by checking under "Options" in the documentation for L.TileLayer: http://leafletjs.com/reference.html#tilelayer