CODEWITHSUNDEEP
mapboxmapbox-gl-js
pbms
pbms

Reputation: 633

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.

Upvotes: 1

Views: 4902

Answers (3)

tmcw
tmcw

Reputation: 11882

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.

Upvotes: 7

James Conkling
James Conkling

Reputation: 3663

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.

Upvotes: 0

Lucas Wojciechowski
Lucas Wojciechowski

Reputation: 3802

You can add gif, png, and jpg images to GL JS using the image source type. Here is an example.

Upvotes: 0

Related Questions