CODEWITHSUNDEEP
htmlamazon-web-servicesamazon-s3mapboxmapbox-gl-js
yngho
yngho

Reputation: 55

how to add raster data using mapbox gl js?

I want to add a Cloud Optimized Geotiff raster layer on map, data is in AWS s3 bucket. How to overlay my raster data on mapbox gl js? Is it correct to fetch the object url of s3? if you know how to do this please answer me..

map.on('load', function(){
  map.addSource('cog-data', {
    "type": "raster",
    "tiles": ["data url"],
    "tileSize": 256
  });

  map.addLayer({
    "id": "cog-data",
    "type": "raster",
    "source": "cog-data",
    "minzoom": 0,
    "maxzoom": 22,
    'layout': {
      'visibility': 'visible'
    },
  });

Upvotes: 4

Views: 2848

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126445

In order to use a raster source, the source data needs to be tiled. In that case, the URL would be something like .../{z}/{x}/{y}.png.

Since you apparently have a single TIF that covers the whole area, you should use an image source instead:

  map.addSource('cog-data', {
    "type": "image",
    "url": "...tif",
    "coordinates": [...]

  });

I'm not certain that this works, but hopefully it does.

Documentation: https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image

Upvotes: 2

Related Questions