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.
Related
I have a GeoTiff file taken by a drone and I want to add it as a layer on my map using .addSource() and it doesn't seem to work.
mapboxMap.addSource("satellite", {
type: "raster",
url: "http://localhost:3000/images/satellite.tif",
});
Is uploading to Mapbox the only way to implement a GeoTiff to my Map?
The .png I tested before worked fine, both files are in the public folder right now.
Thanks!
As the documentation says, the raster type is:
A raster tile source.
Note the tile bit.
If you want a non-tiled raster source, you want to use the image type. I'm not certain if Mapbox GL JS supports TIFF, and whether it supports GeoTIFF. You may need to provide the coordinates explicitly.
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).
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
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 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