Datashader image distorted when passed to mapbox

Hi @ghavranek it is probably a projection problem; if you try to limit the range of latitude and longitude it works better, for example

uniqueStations = pd.read_csv('https://raw.githubusercontent.com/ghavranek/geoData/master/geoData.csv')
import datashader as ds
cvs = ds.Canvas(plot_width=1000, plot_height=1000)
stations = uniqueStations.query("longitude < -40").query("longitude > -100").query("latitude < 50").query("latitude > 30")
agg = cvs.points(stations, x='longitude', y='latitude')

# agg is an xarray object, see http://xarray.pydata.org/en/stable/ for more details
coords_lat, coords_lon = agg.coords['latitude'].values, agg.coords['longitude'].values

# Corners of the image, which need to be passed to mapbox
coordinates = [[coords_lon[0], coords_lat[0]],
               [coords_lon[-1], coords_lat[0]],
               [coords_lon[-1], coords_lat[-1]],
               [coords_lon[0], coords_lat[-1]]]


from colorcet import fire
import datashader.transfer_functions as tf
img = tf.shade(agg, cmap=fire)[::-1].to_pil()

img = img.resize((1400, 800))

import plotly.express as px

# Trick to create rapidly a figure with mapbox axes
fig = px.scatter_mapbox(uniqueStations[:1], lat='latitude', lon='longitude')

# Add the datashader image as a mapbox layer image
fig.update_layout(mapbox_style="carto-darkmatter",                  
                 mapbox_layers = [
                {
                    "sourcetype": "image",
                    "source": img,
                    "coordinates": coordinates
                }]
)
fig.show()

It is indeed hard to fit the sphere on a rectangle and I don’t know which projection mapbox is using but there is probably a mismatch between the two. What you could do is separate the latitude and longitude grid into smaller tiles and compute one image per tile, using datashader, and add all these images to mapbox. This would reduce the projection distortion, I hope.