Build interactive map from python

user_301175 0
Viewed 1693

I am trying to build webpage showing an interactive map (taking up 100% of the page) where I present points or lines with information. Plotly seems perfect for this and I really like its visualization but it does however not have support for maps such as Open Street Map built in, it uses Mapbox for this. I don't have anything against Mapbox, but from what I can find it is free of charge up to a certain numbers of views (while it uses OSM).

Simply said: is there an easy (as open source and free to use) way using python to build such a webpage with a map that shows information?

mapbox plotly openstreetmap python
2 Answers
user_67164210

You can indeed use OSM maps free of charge without restrictions or a Mapbox API account in Plotly and Dash, see https://plotly.com/python/mapbox-layers/:

Base Maps in layout.mapbox.style

The accepted values for layout.mapbox.style are one of:

  • "white-bg" yields an empty white canvas which results in no external HTTP requests
  • "open-street-map", "carto-positron", "carto-darkmatter", "stamen-terrain", "stamen-toner" or "stamen-watercolor" yeild maps composed of raster tiles from various public tile servers which do not require signups or access tokens
  • "basic", "streets", "outdoors", "light", "dark", "satellite", or "satellite- streets" yeild maps composed of vector tiles from the Mapbox service, and do require a Mapbox Access Token or an on-premise Mapbox installation.
  • A Mapbox service style URL, which requires a Mapbox Access Token or an on-premise Mapbox installation.
  • A Mapbox Style object as defined at https://docs.mapbox.com/mapbox-gl-js/style-spec/

Here is a code example from the same plotly documentation that uses the OSM basemap without any authetification token:

import pandas as pd
us_cities = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv")

import plotly.express as px

fig = px.scatter_mapbox(us_cities, lat="lat", lon="lon", hover_name="City", hover_data=["State", "Population"],
                        color_discrete_sequence=["fuchsia"], zoom=3, height=300)
fig.update_layout(mapbox_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()

As for builing an actual website, I recommend using Dash, which is a webserver well integrated with plotly.

user_150591320
Related