Skip to content

Instantly share code, notes, and snippets.

@jkeefe
Last active May 10, 2022 17:27
Show Gist options
  • Save jkeefe/3344844b4b5dc4db1829149b550cbb54 to your computer and use it in GitHub Desktop.
Save jkeefe/3344844b4b5dc4db1829149b550cbb54 to your computer and use it in GitHub Desktop.
Add raster layer in Mapbox maps - and preserve transparency in Safari
// Force mapbox-gl to load raster tiles as PNGs to preserve transparency.
// (Safari will use JPGs otherwise, and 'transparent' areas will show up black.)
// For more troubleshooting, see: https://docs.mapbox.com/help/troubleshooting/raster-transparency-issues/
map.addSource('noaa_map', {
type: 'raster',
tiles: [
`https://api.mapbox.com/v4/TILESET_ID.ABCDEFG/{z}/{x}/{y}.png?access_token=${mapboxgl.accessToken}`,
],
});
map.addLayer({
id: 'raster-layer',
type: 'raster',
source: 'noaa_map',
minzoom: 0,
maxzoom: 8,
}, 'road-simple');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment