notebooks/11-plot-routes-folium-web-map.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plot street neworks and routes as interactive leaflet web maps\n",
    "\n",
    "Author: [Geoff Boeing](https://geoffboeing.com/)\n",
    "\n",
    "Use OSMnx to download a street network, calculate a route between two points, and create a Leaflet web map with folium.\n",
    "\n",
    "  - [Overview of OSMnx](http://geoffboeing.com/2016/11/osmnx-python-street-networks/)\n",
    "  - [GitHub repo](https://github.com/gboeing/osmnx)\n",
    "  - [Examples, demos, tutorials](https://github.com/gboeing/osmnx-examples)\n",
    "  - [Documentation](https://osmnx.readthedocs.io/en/stable/)\n",
    "  - [Journal article/citation](http://geoffboeing.com/publications/osmnx-complex-street-networks/)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import networkx as nx\n",
    "import osmnx as ox\n",
    "from IPython.display import IFrame\n",
    "\n",
    "%matplotlib inline\n",
    "ox.__version__"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# download the street network for Piedmont, CA\n",
    "G = ox.graph_from_place(\"Piedmont, California, USA\", network_type=\"drive\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Plot a city's street network as an interactive web map\n",
    "\n",
    "You can pass keyword args along to [folium](https://python-visualization.github.io/folium/modules.html#folium.vector_layers.PolyLine) PolyLine to style the lines."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# plot the street network with folium\n",
    "m1 = ox.plot_graph_folium(G, popup_attribute=\"name\", weight=2, color=\"#8b0000\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# save as html file then display map as an iframe\n",
    "filepath = \"data/graph.html\"\n",
    "m1.save(filepath)\n",
    "IFrame(filepath, width=600, height=500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can zoom into the street network above or click any edge to get more info."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Plot a route as an interactive web map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# use networkx to calculate the shortest path between two nodes\n",
    "origin_node = list(G.nodes())[0]\n",
    "destination_node = list(G.nodes())[-1]\n",
    "route = nx.shortest_path(G, origin_node, destination_node)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# plot the route with folium\n",
    "# like above, you can pass keyword args along to folium PolyLine to style the lines\n",
    "m2 = ox.plot_route_folium(G, route, weight=10)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# save as html file then display map as an iframe\n",
    "filepath = \"data/route.html\"\n",
    "m2.save(filepath)\n",
    "IFrame(filepath, width=600, height=500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Or plot a route on top of the complete street network map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# plot the route with folium on top of the previously created graph_map\n",
    "m3 = ox.plot_route_folium(G, route, route_map=m1, popup_attribute=\"length\", weight=7)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# save as html file then display map as an iframe\n",
    "filepath = \"data/route_graph.html\"\n",
    "m3.save(filepath)\n",
    "IFrame(filepath, width=600, height=500)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python (ox)",
   "language": "python",
   "name": "ox"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}