Scatter Mapbox on top of Choropleth Mapbox

Dash Python
1

Hi, I’ve been pulling my hair out trying to create an interactive map where point features (e.g., grocery stores) and line features (e.g., markers and lines constructed out of stops in a person’s travel) are overlaid on top of polygon features (e.g., administrative areas.) Essentially, this is a visualization of points, lines, and polygons in a single map. However, I can’t seem to quite figure this out.

I’ve tried to first create a px.choropleth_mapbox object, then separately create another px.scatter_mapbox object and add this scatter_mapbox object as a trace to the choropleth_mapbox object. It seems to produce two separate map frames with the scatter_mapbox map frame overlayed on top of the choropleth_mapbox frame, and not a single cohesive map.

Any pointers, thoughts, or suggestions?!? Thank you in advance!

2

hi @jfeng1996

Have you tried looking into Dash Leaflet?

3

@adamschroeder I just figured it out, but thank you for the suggestion :slight_smile:

My very rudimentary solution:

map_2d = go.Figure(go.Choroplethmapbox(
                    geojson = json.loads(knox_bg.to_json()),
                    locations = knox_bg.index,
                    z = knox_bg['Population'],
                    colorscale = 'viridis',
                    colorbar_title = 'Population',
                    colorbar_x = -0.2
))
map_2d.update_layout(
    mapbox_style = 'open-street-map',
    height = 550,
    width = 770,
    mapbox_zoom = 9,
    mapbox_center = {'lat':35.99, 'lon':-83.9650}
)

for person in individuals['person_id'].unique():
    map_2d.add_trace(go.Scattermapbox(
        mode = 'markers+lines',
        lon = trajectories[trajectories['person_id'] == person]['longitude'],
        lat = trajectories[trajectories['person_id'] == person]['latitude'],
        marker = {'size': 2},
        name = 'Person ' + str(person)
    ))

map_stores = px.scatter_mapbox(
            data_frame = stores,
            lon = 'Longitude', 
            lat = 'Latitude',
            color = 'Type',
            hover_name = 'Name',
            size_max = 20,
        )

map_2d.add_traces(list(map_stores.select_traces()))
1 Like