# Plotly equivalent to Matplotlib pcolormesh for plotting raster image on map

**URL:** <https://community.plotly.com/t/plotly-equivalent-to-matplotlib-pcolormesh-for-plotting-raster-image-on-map/68685>\
**Category:** 📊 Plotly Python\
**Tags:** question\
**Created:** [October 7, 2022, 12:46pm UTC](https://community.plotly.com/t/plotly-equivalent-to-matplotlib-pcolormesh-for-plotting-raster-image-on-map/68685 "2022-10-07T12:46:45Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [October 10, 2022, 6:46pm UTC](https://community.plotly.com/t/plotly-equivalent-to-matplotlib-pcolormesh-for-plotting-raster-image-on-map/68685/8 "2022-10-10T18:46:39Z")

</div>

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

1. Image from a url:

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/3/03e9024b2d0902705baedf0debf841531c008d30.png)

1. local image

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/b/ab594dddc8bef7f5c592ab1f333869c3c65cec90.png)

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

---

_[View the full topic](https://community.plotly.com/t/plotly-equivalent-to-matplotlib-pcolormesh-for-plotting-raster-image-on-map/68685)._