✊🏿 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.

3 Likes

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’: [

https://img.nj.gov/imagerywms/Natural2015?bbox={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

});

map.addLayer(

{

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

‘type’: ‘raster’,

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

‘paint’: {}

},

‘aeroway-line’

);

});