✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Raster/Image overlay on mapbox maps through plotly/dash

I am using mapbox maps within dash apps and can currently only display point data (scatter) or overlay geojson data as a mapbox layer. Is there any plan to provide functionality to overlay raster/grid data or images on maps? This functionality already exists in leaflet.js, so it should be possible.


Hey, Even I’m looking out for on how can we integrate Raster images/jpeg/png overlay on the maps.
Since plotly dash does not have Leaflet integration like R shiny has.
I think for creating a Dashboard you can switch to R shiny which has integration with Leaflet.

I have released a Dash Leaflet component which supports image overlays. How large an area do your images span?

You can try this

mapboxgl.accessToken = ‘’;

var map = new mapboxgl.Map({

container: ‘map’,

style: ‘mapbox://styles/mapbox/light-v10’,

zoom: 8,

center: [-74.5447, 40.6892]


map.on(‘load’, function() {

map.addSource(‘wms-test-source’, {

‘type’: ‘raster’,

‘tiles’: [



‘tileSize’: 256




‘id’: ‘wms-test-layer’,

‘type’: ‘raster’,

‘source’: ‘wms-test-source’,

‘paint’: {}