Plotly equivalent to Matplotlib pcolormesh for plotting raster image on map

📊 Plotly Python
8

@Guiux
With Plotly you can add images on mapbox maps.

  1. Image from a url:
import  plotly.graph_objects as  go

fig1 = go.Figure(go.Scattermapbox(), layout=dict(width=700, height=500))
mapboxt = open(".mapbox_token").read().rstrip() #my  mapbox access token
mapbox = dict(zoom= 4.5, 
              accesstoken=mapboxt,
              style='light',  #set here your prefered mapbox style 
              center=dict(
                        lat=42, 
                        lon=-74.5), 
              layers=[
                  dict(
                  below ='',    
                  source = "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif", 
                  sourcetype= "image", 
                  coordinates =  [
                          [-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.93]
                                 ])
                     ])             
fig1.update_layout(mapbox=mapbox)

imgurl
imgurl700×500 77.1 KB

  1. local image
import  plotly.graph_objects as  go
import numpy as np
import base64, io
# create an image:
h= 0.05
y, x = np.mgrid[-5 : 5  : h, -5 : 10 : h]
z = np.sin(x)**10 + np.cos(10 + y*x) + np.cos(x) + 0.2*y + 0.1*x
fig2 =go.Figure(go.Heatmap(x= x[0, :], y = y[:, 0], z=z, colorscale="Blues", showscale=False))
fig2.update_layout(width=500, height=300, xaxis_showticklabels=False, yaxis_showticklabels=False,
                  margin=dict(t=0, r=0, b=0, l=0)  ### Very important to set margins=0!!!!

#define  an empty Scattermapbox  to put our image on the base map
b = io.BytesIO(fig2.to_image(format="png"))
b64 = base64.b64encode(b.getvalue())
imgsource= "data:image/png;base64,"+b64.decode("utf-8")

fig3 = go.Figure(go.Scattermapbox())
mapboxt = open(".mapbox_token").read().rstrip() #my  mapbox access token
mapbox2 = dict(zoom= 4.35, 
              accesstoken=mapboxt,
              style='open-street-map',  #set here your prefered mapbox style 
              center=dict(
                        lat=43, 
                        lon=-75.5), 
              layers=[
                  dict(
                  #below ='',    
                  source = imgsource, 
                  sourcetype= "image", 
                  coordinates =  [
                          [-80.425, 46.437], [-75.516, 46.437], [-75.516, 43.936], [-80.425, 43.93]
                                 ])
                     ])      
                             
fig3.update_layout(mapbox=mapbox2)

local_image

This image can be placed in a oblique position, too.

1 Like