GOAL
I'm using Mapbox to generate raster tilesets from raw GeoTIFFs. The GeoTIFFs have a resolution such that a single pixel represents roughly a 5km x 5km square on the map. The generated raster tilesets will be hosted on Mapbox and then displayed in a Mapbox GL JS application.
PROBLEM
The issue I'm running into is extreme blurriness at high zoom levels. Below is a section of central Nigeria at about a zoom level of 7 displayed in our Mapbox GL JS app vs. the raw GeoTiff viewed in QGIS. The blurriness is of course worse at even higher zooms.
I created this raster tileset by uploading a sample GeoTIFF into Mapbox Studio (I've also used the Uploads API). The Tileset viewer in Studio displays a footnote that reads:
Zoom Extent
z0 – z5. Data will be overzoomed to z22, but simplified past 5.
I can verify this by looking at the network requests in the dev tools as I zoom in on the map – it actually seems that no new tiles are requested above z4.
QUESTION
Does Mapbox have any way to manually configure the zoom extent (specifically, the max zoom) for which raster tilesets are generated?
WHAT I'VE TRIED/RESEARCHED
I’ve clicked through to the Adjust Tileset Zoom Extent help page, which states:
For raster tilesets, the uploaded image resolution sets the minzoom
and maxzoom levels. Higher resolution images will result in the
tileset rendering at more zoom levels.
Again, the data I'm working with is of fixed resolution so I'm hoping to find a way to have tilesets generated for higher zoom levels regardless of image resolution. Mapbox Tiling Service and Tippecanoe both have custom configuration rules for specifying the max zoom (past which, simplification occurs) when creating vector tilesets. However, neither seems to handle rasters. The Uploads API does handle raster tilesets, but doesn't seem to have any zoom extent configuration options.
I've also tried adjusting various frontend configuration options in the Mapbox GL JS client like the source tileSize and the raster-resampling paint property, but to little avail. I'm definitely open to other suggestions for how to get crisp pixels at higher zoom levels, but mostly hoping there's some simple method I'm missing for getting Mapbox to generate raster tiles past z4/z5. I think even z0-z7 would be sufficient.
Related
I'm using mapbox studio to customize a map and I haven't found the way to display building-outline layer at any zoom level.
If I'm under of 16 zoom level, this layer disappears... even if I force opacity to 1.
Any idea ?
Thank you in advance
The minimum zoom level for the buildings layer in the current tileset (Mapbox Streets v8) is 13.
This means that if you zoom out further (from 12 to 0) the buildings layer will not be rendered on the map.
See documentation:
https://docs.mapbox.com/vector-tiles/reference/mapbox-streets-v8/#layer-reference
The reason for this restriction is that if you requested your browser to fetch and render every building polygon in a wider area (like an entire city or country), this would be more than a reasonable amount of data to render.
If you have your own buildings polygon data and you create a tileset from that, you could choose to include your data across more zoom levels. However, you might waste a lot of computing resources drawing shapes that are too tiny to understand at those further zoom levels.
I'm filtering on the 'poi-label' layer on the default Mapbox Streets V8 data source. What I'd like to have is that certain maki or class labels like 'fitness-centere' to always be visible (both icon and label) regardless of the zoom level.
I see no clear documentation on how to do this using Mapbox studio. Can it be done in that tool?
It is generally not possible to have layers in vector tile sources display at "all zoom levels" because they don't exist at all zoom levels within the vector tile sources.
Generally, the Mapbox tilesets are heavily optimised and only include data at the zoom levels that they are intended to display at in the corresponding Mapbox styles.
I'm in the process of rewriting route-planning web app from Mapbox.js to Mapbox GL JS library.
With all the features almost implemented, it's borderline unusable due to lags, non-smooth animations and general sluggishness of the map layer.
Now, it's entirely possible I'm using the API wrong. I made a quick comparison and published it here:
https://petrnagy.github.io/index.html#automove=no
Notice the old Mapbox.js (left) is much smoother than the new Mapbox GL JS (right).
You can see the difference more clearly here where both maps are moving and zooming:
https://petrnagy.github.io/index.html#automove=yes
This is just a basic example. The app itself also features:
Dynamically styled routes (traffic, air quality, elevation)
Rich UI which overlays the map
Additional layers (eg. bicycle lanes, POIs, air quality)
With all there features, Mapbox GL JS is pretty much unusable. Unlike the old Mapbox.js, which is smooth.
Any advice for optimizing the performance appreciated!
it's important to note that the older Mapbox.js library was serving raster tiles, which get rendered server side, where the more modern Mapbox GL JS is vector based and rendered client side. Due to the nature of raster vs. vector is why you might see this "dip" in performance, if you are looking strictly at FPS, because your machine may be struggling.
Mapbox.js, like other traditional JavaScript map libraries, used the basemap-overlay mapping convention. The basemap (or baselayer) is a raster tile layer that is served already rendered from the server and overlays are often vector data that sits on top of the basemap.
Mapbox GL JS has no distinction between baselayers and overlay layers, and uses mostly vector tiles. This means that map details like labels and icons and elements like streets and buildings can be modified with JavaScript, like overlays in earlier mapping libraries. Each layer provides rules about how the renderer should draw certain data in the browser, and the renderer uses these layers to draw the map on the screen.
You can read more about the difference here: https://docs.mapbox.com/help/how-mapbox-works/web-apps/
There are also some great guides on improving performance of Mapbox GL JS maps and working with large GeoJSON sources in Mapbox GL JS
I am a bit confused about Tiles in MapBox. As I understood, a tile is a little piece of map, as in a jigsaw puzzle.
MBTiles are images, but they are connected to a database to read data & let interactions be possible. So if I move the mouse, I can show details of the layers under the cursor.
Vector Tiles store all the data in vectors, and they are just used for a fast rendering of the image. Interaction with such data is not possible.
Am I wrong?
Now, I see that there is the tool TileMill for MBTiles, and MapBox Studio Classic for Vector Tiles. I guess they are for different purposes; the first for interactive maps, the latter for fast rendering.
So.... why is TileMill not supported anymore, in favor of MBStudio?
Is it possible to make interactive maps with MBStudio as well?
Thank you
This is a great question!
mbtile is a filetype that can contain either raster or vector tiles. Think about it like an Adobe Illustrator .ai file -- it can either contain vector or raster data. Both raster tiles and vector tiles can be in mbtile format.
With TileMill, your vector data (shapefile, CSV, etc.) was combined with your CartoCSS style and passed to Mapnik to generate a bunch of tiled images. You could then store your tiles and feed them to a web map via a tile server. With Mapbox Studio Classic, you are converting your data to vector tiles and creating a CartoCSS style to style the data, but the image tiles aren't created until the map is requested via the browser. Ultimately, the output on the map is the same -- a grid of raster tiles.
The interactivity you created in TileMill with raster tiles is happening via a UTFGrid. This is an invisible raster layer that sits beneath the image tiles and adds interactivity to certain locations. The interactivity is not actually connected to any individual features at all -- it's just at the same location as your features. This is also possible in Mapbox Studio Classic, as the output in the map will also be a grid of raster tiles. You can read more about how to do this in Mapbox Studio Classic in the style quickstart guide.
So to answer your question, the move to Mapbox Studio Classic was to take advantage of vector tiles. They are a lot smaller than raster image tiles, and they can be styled on the fly, so, for example, you don't have to store two separate sets of images to accommodate retina screens. It also means you can have multiple styles applied to the same vector data on the fly, which means you don't have to regenerate a whole set of images for every style or every small change.
If the Metadata table contains a record format=pbf then the mbtiles is a vector tiles and not raster. mbtiles SQLite database can be a container for vector tiles which have in the Tiles table and tile_data blob field PBF -Protocol Buffers - protobuf ( https://github.com/google/protobuf – language neutral platform neutral mechasism for serializing structured data) Developed by Google. Tools like MapBox Studio build vector tiles from GIS Vector Data and databases
I want to show secondary/tertiary roads at a zoom level like 10 or 11. At that zoom level I only see the primary roads, I did try to style it with carto css, but its not working.
Thank you
[class='secondary'][zoom>=11] {
line-color: red;
line-dasharray: 2,1;
line-width: 19.2;
}
It's not possible.
The mapbox-streets-v6 vector dataset that ships with Mapbox Studio Classic only has certain vector data layers at each zoom level. The waterway data does not appear in this dataset at any zoom lower than 8, which is why you can't style it at any other zoom level.
Fortunately, this data comes from OpenStreetMap, so you can add it as a custom source in Mapbox Studio Classic and style it along with the other data! There is even a guide on grabbing this data from OpenStreetMap with Overpass Turbo.