Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next 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’: [{bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015


‘tileSize’: 256




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

‘type’: ‘raster’,

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

‘paint’: {}