Mapbox : Add data layer for POIs - transportation, school and retail / grocery stores

Question

I am rendering a map using mapbox API and would like to enrich the map by displaying additional location / POI data.

Here's a similar example: https://github.com/patelnisarg61/Toronto-Fatal-Collisions-Analysis/blob/master/collision.py

mock code below:

       MAPBOX_KEY = "xxxxx"

       data = []

       data.append({

                    "type": "scattermapbox",
                    "lat": df["Lat"],
                    "lon": df["Long"],
                    "name": "Location",
                    "hovertext": name,
                    "showlegend": False,
                    "hoverinfo": "text",
                    "mode": "markers",
                    "clickmode": "event+select",
 
                    "marker": {
                               "symbol": "circle",
                               "size": 12,
                               "opacity": 0.7,
                               "color": "black"
                              }
                    }
       )

      

    layout = {

                 "autosize": True,
                 "hovermode": "closest",
                 "mapbox": {

                     "accesstoken": MAPBOX_KEY,
                     "bearing": 0,
                     "center": {
                         "lat": layout_lat,
                         "lon": layout_lon
                     },
                     "pitch": 0,
                     "zoom": zoom,
                     "style": "outdoors",

                 },

                 "margin": {
                    "r": 0,
                    "t": 0,
                    "l": 0,
                    "b": 0,
                    "pad": 0
                }

    }

How do I add additional POI data such as transit, hospitals, schools and grocery stores using either native mapbox API endpoints or data from other providers such as OSM / Google Maps?

For reference, this data is available via the OSM Feed: https://docs.mapbox.com/vector-tiles/reference/mapbox-streets-v8/

Plotly scattermapbox docs: https://plotly.com/python/reference/#scattermapbox-customdata

Answer 1

I used the example in the official reference as a basis, and the data used in the similar question. In this data, the data with bicycles in the 'VEHTYPE' column was extracted and used as the data for the graph. You will need a mapbox access token for this graph. For more information about markers, please refer to this page. However, it seems that not all icons can be used.

import plotly.graph_objects as go
import pandas as pd

url = 'https://raw.githubusercontent.com/patelnisarg61/Toronto-Fatal-Collisions-Analysis/master/Fatal_Collisions.csv'
df = pd.read_csv(url, sep=',')

df_bicycle = df[df['VEHTYPE'] == 'Bicycle']

mapbox_access_token = open("./mapbox_api_key.txt").read()

fig = go.Figure(go.Scattermapbox(
    mode = "markers+text",
    lon = df_bicycle['X'],
    lat = df_bicycle['Y'],
    marker = {'size': 15, 'symbol': ["bicycle"]*len(df_bicycle)},
    text = ["Bicycle"]*len(df_bicycle),
    textposition = "bottom right"))

fig.update_layout(
    autosize=False,
    height=600,
    width=1000,
    mapbox=dict(
        accesstoken=mapbox_access_token,
        style="streets",
        center=dict(
            lat=df_bicycle['Y'].mean(),
            lon=df_bicycle['X'].mean()
        ),
        zoom=10, 
        pitch=0),
    showlegend=False)

fig.show()