I need to highlight a country's railways at zoom level ~4, and I'd like to do so just using the mapbox-streets-v8 data, but not matter what I seem to do, in Mapbox Studio, in the style JSON, or in the code, I can't seem to get the road/railways layer to be visible at a zoom level under 8.
It looks like, from tinkering around in Mapbox Studio, the source isn't even loaded until zoom 8, since the features don't appear as "filtered out", they just don't appear at all. I've set the "zoom extent" down to 5 on the layer (as low as it will go), but nothing I do seems to actually get it to appear at zoom 5, let alone at a level more zoomed out:
It's not possible. The data doesn't exist at that zoom level in those vector tiles. You would need to prepare your own vector tiles from your own data source.
Related
I have no idea how to make the bathymetry layer show on the most zoomed out zoom layer. It only seems to activate when I go above level 3 zoom.
I don't have any opacity changes based on zoom, it's just set to 1, so I don't know why it's not showing. Is it because we can't view complex data when fully zoomed out or zomething?
zoom at 2.9
zoom at 3.1
Presumably, your bathyrmetry tileset only exists at zoom levels 3 and above. There's nothing you can do to make it appear at levels below its minimum.
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'd like for my road-path-smooth elements to show at a lower zoom level than they currently are because my application is for the outdoors and these are more important elements. Is that possible? I can't seem to find out how to adjust this in studio.
If you're talking about displaying layers from the Mapbox Streets tileset, then no, it's probably not possible. The vector tiles are optimised for Mapbox's style (also, confusingly, called Mapbox Streets), and don't contain data that isn't already displayed.
Your need is a common one, but unfortunately the only way to solve it is to find a different set of vector tiles that meets your needs, or create one yourself.
For a few days, I've been trying to find out how to make Leaflet have fluid zoom, and by that I mean the one that can be found in for example OpenSeadragon. I've been playing around with the zoomSnap, wheelDebounceTime and wheelPxPerZoomLevel settings on the Map object, but all to no avail.
Fluid zoom has a huge 'wow'-factor and on top of that I would like to use Leaflet Draw to have users annotate tiled old maps, for storytelling purposes.
Is there anyone that has successfully achieved OpenSeadragon-style zooming? The .flyTo() method seems to relatively be able to smoothly zoom in and out, as does the TouchZoom handler. Also, when clicking the zoom-buttons the image zooms in smoothly. But I can't for the life of me figure out how to use that on scroll events.
Can anyone point me in the right direction?
A demo of the problem can be found here.
There is a Leaflet plugin called SmoothWheelZoom that has partial zoom levels for a smoother looking effect when zooming in or zooming out. SmoothWheelZoom is not listed on Leaflet's plugins page.
(It looks exactly like the OpenLayers smooth zoom.)
Leaflet now has partial zoom levels:
A feature introduced in Leaflet 1.0.0 was the concept of fractional zoom. Before this, the zoom level of the map could be only an integer number (0, 1, 2, and so on); but now you can use fractional numbers like 1.5 or 1.25.
Fractional zoom is disabled by default. To enable it, use the map’s zoomSnap option. The zoomSnap option has a default value of 1 (which means that the zoom level of the map can be 0, 1, 2, and so on).
[...]
zoomSnap can be set to zero. This means that Leaflet will not snap the zoom level.
This works especially well with pinch-zoom on smartphone, but it isn't as reactive as what I've seen on MapBox or OpenLayers.
See this article for a live demo with explanations
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