💸 Reduce costs by consolidating proprietary analytics & reporting software to open-source & Dash.
Challenge us to replace your analytics with Dash and reduce costs.

Faster rendering 800+ lines on a Scattermapbox

Hi community,

I’m a geologist and I’m currently making an active tectonic faults catalog with dash (it´s for an academic project and it’s gonna be an official website). I started with Scattermapbox layers but it didn’t have hover options so I switched to traces. My issue is that there’s more than 800 active faults in the catalog and my browser crashes or it gets very laggy.

One option is to have filters and show only parts of the catalog, but I wonder if is possible to have faster rendering.

Here my code:

fallas = #my geojson file
fig = go.Figure(
    data=[
        go.Scattermapbox(
            lat=np.array(feature["geometry"]["coordinates"])[:, 1],
            lon=np.array(feature["geometry"]["coordinates"])[:, 0],
            mode="lines",
            line=dict(width=1, color="#F00"),
            text = 'id: '+ str(feature['properties']['id'])+'<br>'+'dominio: '+ str(feature['properties']['dominio']) + '<br>'+ 'tipo: '+ str(feature['properties']['tipo']),
            hoverinfo='text',
            showlegend=False
        )
        for i, feature in enumerate(fallas["features"]) 
    ]
)

fig.update_layout(
    margin={"r":0,"t":0,"l":0,"b":0},
    mapbox=go.layout.Mapbox(
        style="light",
        accesstoken=token
    )
)```

You could do this in a single trace … the technique described here works as well with Scattermapbox as Scattergeo (or really any Scatter-like trace type :slight_smile: ) https://plotly.com/python/lines-on-maps/#performance-improvement-put-many-lines-in-the-same-trace

The trick is to concatenate the lat/lng vectors, with None in between line segments that you don’t want connected.

1 Like

thank you, I’ll give it a try. If I do so, could i lost the hover property to distinct every line??

No, you retain hoverlabels :slight_smile: