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
Related
We used wgrib2 to convert weather radar data into NetCDF format. We converted it to GeoPackage format using gdal_translate. We created a Color Map on QGIS 3.10 and the GeoPackage appeared as expected.
We would like to display this on the Internet using these files or processed versions of these files. We have Mapbox GL JS as a candidate for that but it is not required. We have not found a way to display the gpkg files we have generated. How can we get it to display?
https://docs.mapbox.com/mapbox-gl-js/guides/
We generated png images using gdaldem color-relief and we also tried the following method
However, when we zoomed in on the map with this method, the quality of the image was rough and it could not be displayed beautifully.
https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/
Since the gpkg we generated displays correctly in QGIS, it would be most desirable to be able to display the gpkg on MapBox. However, if that is not possible, we would like to display that data beautifully, even in another format.
We also tried to generate tiles using gdal2tiles.py. It worked as we expected when we created data up to zoom level 10. However, when we created the data for zoom level 11, it took more than 12 minutes. Since our data is generated every 5 minutes, we cannot spend any more time on tile generation.
Mapbox GL JS specialises in displaying vector tiles, but can also display raster tiles. If you can't generate static raster tiles from your GeoPackage data source (because they're too big and change too fast), you'll need some kind of server that can read GeoPackage and serve up raster tiles on demand.
Running GeoServer would be one way to do that. It supports GeoPackage natively and could serve up the requested tiles without having to generate them all in advance.
There is also a NetCDF extension that might let you skip the GeoPackage conversion step.
(What you tried was generating a single raster image, which was probably insufficiently detailed for your needs).
Leaflet supports both image and tile server layers as a mapping layer (along with a few other raster layers). However, both of these seem to only work with "standard" image types, for example jpeg, png, etc. If I have an image in some higher dynamic range format - specifically, astronomical images in FITS format which have more than 8 bits per channel, is there any way to serve these using leaflet, or do they need to be converted into tiles or images in a more standard format?
As of now (early 2019), there are some Leaflet plugins for non-standard image formats, specifically Leaflet.TileLayer.IIP and Leaflet-IIIF. You might be able to transform your images from FITS to one of those formats.
If you're able to slice your image in small tiles, and then generate two (or more) .pngs or .jpgs per each of your FITS image (e.g. one .png per each original channel), then you might want to consider a more exotic solution: WebGL through Leaflet.TileLayer.GL. That Leaflet plugin will allow you to grab pixels from several images at once and combine them with a custom shader function. See Mapbox's Terrain-RGB tiles and the TileLayer.GL documentation&demos for more info.
As a side note: Leaflet supports displaying .webp tiles if your web browser supports .webp.
I have played with Mapbox and can quite easily create a Choropleth map in Mapbox studio and interact with it in Javascript.
I would like to create Choropleth map of the states with the ability to change the colours of the states for 100 years of different data points. I'm not allowed to upload the data into Mapbox as its sensitive healthcare data and I can't get sign of for the $499 a month cost.
My idea is I create a mapbox style layer in MapBox Studio then push the data client side for each of the states depending on the year x that the user selects. I have seen quite a few cloropeth tutorials such as this https://www.mapbox.com/help/choropleth-studio-gl-pt-1/ but the data is added in through a layer in Mapbox Studio. My thoughts are to embed the large GeoJson in the style and only push the data to the Polygon ID's, whilst creating transtions between the two.
Does anyone have any ideas if this is possible? and perhaps any useful API requests which may help me achieve this https://www.mapbox.com/api-documentation/.
It's possible. There are two approaches:
Upload the geometry as a Dataset in Studio, or load it directly as a GeoJSON.
Set data attributes directly on the geometry.
Create a style with data-driven styles (eg, map "47" to "rgb(100,0,0)" and "153" to "rgb(250,250,0)" and let Mapbox interpolate.
Or:
Upload the geometry as a Tileset to Studio.
Calculate the color you want to represent each possible value of each state.
Generate a data-driven style property that maps each state's code to the color you want, like ...['FL','rgb(143,15,0)']....
Neither method will cope with large numbers of regions, but should be ok for 50 US states at low resolution.
More discussion here: https://github.com/mapbox/mapbox-gl-js/issues/4261
I want to add a geotif image layer on map, I can do this in mapbox studio easily, Is there any way to do this using mapbox gl js library.
I added the geojson file using below code with mapbox gl js library:
map.addSource("quakes", {
"type": "geojson",
"data": "http://localhost:3000/Srikakulam.geojson"
});
For tiff images I don't find any solution like this.
I have hundreds of tiff images to load dynamically based on weather and date.
It's very uncommon to add georeferenced images like GeoTIFFs directly to a map. GeoTIFF is a relatively inefficient format, so the images will be very large, so requiring longer times to download and slower performance.
It's more common to process GeoTIFF into tiles: you can do so by uploading them to Mapbox, or by using a tool like TileMill, gdal2tiles, or MapTiler to generate tiles locally and then uploading those tiles to a server. Once you've generated tiles, you can include them in Mapbox GL JS, Mapbox.js, or any other client as a tile layer.
You can add gif, png, and jpg images to GL JS using the image source type. Here is an example.
If you don't want to convert your tiff to gif/png/jpg and load as an image source type (as #lucas-wojciechowski suggested), couldn't you create a vector tile source in MapBox Studio Classic and load it into your MB-gl-js map as a vector-source.
Note that vector tilesets, like most vector data formats, can also embed raster data, but that you lose vector functionality like over zooming, client-side rendering, and client-side data queries.
I want to create georeferenced map tiles from raster (jpg map of small area) and display in Leaflet. MapTiler seems to be a prefect solution for my problem, but free version doesn't allow set zoom range, aslo has a watermark.
Is there any free/opensource solution with same funcionality? Im woking on non-profit project, so dont have any budget.
See https://stackoverflow.com/a/13641838/4768502 for a pointer to gdal2tiles.
You can also use other software such as GeoServer, MapServer or MapProxy to serve tiles based on an image or some vector data.