maptastik
3/23/2018 - 8:03 PM

Loading rasters from Mapbox into Leaflet or ArcGIS JS API w/ transparency

Notes about loading rasters from Mapbox into Leaflet or ArcGIS JS API w/ transparency

Problem

When loading raster data containing transparent pixels from Mapbox, those transparent pixes show up as black. This happens in both Leaflet and ArcGIS JS API.

Suggested Solutions

Troubleshoot raster image with black background

I was trying to access the style I had added the raster tiles to. Even though it shows up the way I'd expected in Mapbox Studio, when rendering for Leaflet, all the transparent pixels were black. Other methods either wouldn't load anything. Lots of errors!

I was using the suggestion from the style's share and develop page. They suggested: https://api.mapbox.com/styles/v1/maptastik/cjez077k42lak2rs48w2rvgpw/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ

My solution

Mapbox API Documentation > Retrieve Tiles

  • Use the .png ending
  • For ArcGIS JS API, use {level}/{col}/{row} rather than {z}/{x}/{y}
  • `https://api.mapbox.com/v4/<Map ID from tileset/{z}/{x}/{y}.png?access_token=your-access-token

Include and example of it working and not working with both ArcGIS JS API and Leaflet. Show how it works normally with Mapbox GL JS