Scatter Mapbox on top of Choropleth Mapbox

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!

hi @jfeng1996

Have you tried looking into Dash Leaflet?

@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
    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():
        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,

1 Like