Interactive Choropleth map with custom geojson extremely laggy

📊 Plotly Python
1

Hi! I am trying to create interactive maps using astronomical data, i.e. zoom and pan with multiple projections available. Plotly choropleth seems perfect, as I can create my own geojson where polygons represent pixels, and map it using latitude and longitude, and then get exactly the plot I am looking for. However, once I scale up to high definition images, the interactive plot becomes much too memory intensive and causes tremendous lag.
Does anyone know a way to improve performance? Or perhaps a better way than using all of the polygons? Thanks in advance!

Here is the code I am using:



def make_rectangular_geojson(lons, lats, cart):
    """
    Create a rectangular grid GeoJSON where each polygon corresponds
    to a cell in the lat-lon grid, and the polygon's value is the value
    at the bottom-left corner.

    lons: 1D array of longitudes (sorted ascending)
    lats: 1D array of latitudes (sorted ascending)
    values: 2D array with shape (len(lats), len(lons))
    """
    features = []
    id_val=0
    for i in range(len(lats)-1):
        for j in range(len(lons)-1):
            # bottom-left corner
            lon_bl = lons[j] 
            lat_bl = lats[i] 

            # bottom-right
            lon_br = lons[j] 
            lat_br = lats[i+1] 

            # top-right
            lon_tr = lons[j+1] 
            lat_tr = lats[i+1] 

            # top-left
            lon_tl = lons[j+1] 
            lat_tl = lats[i] 

            polygon_coords = [[
                [lon_bl, lat_bl],
                [lon_br, lat_br],
                [lon_tr, lat_tr],
                [lon_tl, lat_tl],
                [lon_bl, lat_bl]  # close polygon
            ]]

            features.append({
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": polygon_coords
                },
                "properties": {
                    "id": id_val #,"value": cart[i,j]
                }
            })
            id_val+=1
    geojson = {
        "type": "FeatureCollection",
        "features": features
    }
    return geojson

id_val = 0
vals = []
ids = []
for i in range(len(lats)-1):
    for j in range(len(lons)-1):
        vals.append(cart[i,j])
        ids.append(id_val)
        id_val+=1
        
df = pd.DataFrame({
    "value": np.array(vals),
    "id": ids
})

geojson_data = make_rectangular_geojson(lons, lats, cart)

fig = go.Figure(go.Choropleth(geojson=geojson, z=df["value"], locations=df["id"],
                    featureidkey="properties.id", colorscale="Viridis", 
                              zmin = vmin, zmax = vmax, zauto=False, hoverinfo='none'))

fig.update_geos(fitbounds="locations", visible=False)
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.update_traces(marker_line_width=0.5, marker_line_color='rgba(0,0,0,0)')
fig.update_layout(
    geo=dict(
        bgcolor="white",
        showland=False,        # turn off filled land
        showcoastlines=False,  # turn off coastlines
        showcountries=False,   # turn off country borders
        showlakes=False,       # turn off lakes
        showrivers=False,      # turn off rivers if any
        showframe=False,       # turn off frame box
        projection=dict(type="orthographic"),
    ),
    paper_bgcolor='white',
    plot_bgcolor='white',
    margin={"r":0,"t":0,"l":0,"b":0}
)


fig.show()