Mapbox GL: Add GeoTiff to Map without uploading to Mapbox - mapbox

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.

Related

How should we display GeoPackage on Mapbox GL JS?

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).

How to get satellite-street map in tileset in Mapbox

I want to use satellite-street map using tileset, but it is not available here. It is visible in style and dataset but not in tileset. I want to use mapID, not styleID.
How to get satellite-street map in tileset in Mapbox. It is available in styles and dataset but not in tileset. Any Help?
The raster tileset with the map ID satellite-streets would've been a composite of the satellite source (mapbox.satellite) and Mapbox Streets source (mapbox.streets). These tilesets were created as raster tiles using Mapbox Studio Classic and are no longer supported. Instead, it's recommended to create your own style with Mapbox Satellite and Streets sources and use the Static Tiles endpoint to generate raster tiles.

Leaflet - How to query rendered features in Vector tiles

I am new to leaflet. currently I am working on leaflet to render vector tiles. my application's requirement is that on click i should get features from map tiles in geojson format.
In Mapbox map.queryRenderedFeatures(e.point). I want to do exact same thing, but in leaflet. Please check here to check how mapbox is fetching features.
Please help.
Current Leaflet implementation does not supports querying rendered features. Hence switching to Mapboxgl

Upload tiff to mapbox gl js or mapbox.js

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.

Flattening Layers in MapBox

In brief, I’m looking for a way to either flatten layers in MapBox, or import a MapBox project into TileMill so I can flatten it into a new tile set.
My problem is this: I’m working with StroyMapJS (a JavaScript library) and it only recognizes the base layer coming from MapBox, with no additional layers. However, I have some vector data that is a critical part of the story that I want included. My thinking is that if I can flatten or merge the layers into a new basemap I would be fine. So, I would either:
Do this directly in MapBox – but I can’t find a feature to do this, or
Import the Terrain MapBox layer into TileMill, add my vector
data, and then export as a new set of tiles and create a new project
from these tiles in MapBox - but I can’t figure out how to bring a
MapBox project into TileMill.
Am I going about this the wrong way or am I mission something?
Thanks
but I can’t figure out how to bring a MapBox project into TileMill.
You would export your markers & overlays as GeoJSON - this will be in the Project UI in the map editor. Then you can import that GeoJSON into TileMill as a datasource.