tutorial-5-leaflet-maps (2).ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Python Maps - Leaflet Example\n",
    "\n",
    "for more learning examples using leaflet visit [jupyter-widgets/ipyleaflet Notebook Examples](https://github.com/jupyter-widgets/ipyleaflet/tree/master/examples)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Setup"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%capture\n",
    "!pip install ipyleaflet\n",
    "!pip install ipywidgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "import json\n",
    "import random\n",
    "import requests\n",
    "import pandas\n",
    "from ipywidgets import *\n",
    "from ipyleaflet import *\n",
    "from google.cloud import bigquery\n",
    "from google.oauth2 import service_account"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "# CONSTANTS\n",
    "MAP_LAT=40.3900\n",
    "MAP_LON=-86.8220\n",
    "MAP_CENTER = (MAP_LAT, MAP_LON)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "# FUNCTIONS\n",
    "def print_basemaps():\n",
    "    basemap_list = basemaps.keys()\n",
    "    print(\"\\n\",\"Basemaps\")\n",
    "    print(\"=========\")\n",
    "    print(\"-\", \"\\n- \".join(basemap_list))\n",
    "\n",
    "def print_basemap_themes(name):\n",
    "    basemap_theme_list = basemaps[name].keys()\n",
    "    print(\"\\n\", name, \"Themes\")\n",
    "    print(\"=========\")\n",
    "    print(\"\\n\".join(basemap_theme_list))\n",
    "\n",
    "def random_color(feature):\n",
    "    return {\n",
    "        'color': 'black',\n",
    "        'fillColor': random.choice([\n",
    "            'red', \n",
    "            'yellow', \n",
    "            'green', \n",
    "            'orange'\n",
    "        ]),\n",
    "    }\n",
    "\n",
    "def fetch_json(url):\n",
    "    r = requests.get(tipp_cbg_url)\n",
    "    text = r.content.decode(\"utf-8\")\n",
    "    data = json.loads(text)\n",
    "    return data\n",
    "\n",
    "def unique(list1):\n",
    "    list_set = set(list1)\n",
    "    unique_list = (list(list_set))\n",
    "    return unique_list"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "\n",
      " Basemaps\n",
      "=========\n",
      "- OpenStreetMap\n",
      "- OpenTopoMap\n",
      "- Hydda\n",
      "- Esri\n",
      "- HikeBike\n",
      "- MtbMap\n",
      "- CartoDB\n",
      "- NASAGIBS\n",
      "- Strava\n",
      "- Stamen\n",
      "\n",
      " Esri Themes\n",
      "=========\n",
      "WorldStreetMap\n",
      "DeLorme\n",
      "WorldTopoMap\n",
      "WorldImagery\n",
      "NatGeoWorldMap\n"
     ]
    }
   ],
   "source": [
    "# PREVIEW LEAFLET MAP BASELAYERS\n",
    "# ------------------------------\n",
    "# see: https://leaflet-extras.github.io/leaflet-providers/preview/\n",
    "# see: https://ipyleaflet.readthedocs.io/en/latest/api_reference/tile_layer.html\n",
    "print_basemaps()\n",
    "print_basemap_themes(\"Esri\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Mapping Census Block Groups and Tippecanoe County"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8c9083f400c043139d04efc29c151785",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Map(center=[40.39, -86.822], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "tipp_cbg_url = 'https://raw.githubusercontent.com/ironhacks/Tutorials-COVID-19/master/resources/tippecanoe-county-census-blocks.json'\n",
    "\n",
    "data = fetch_json(tipp_cbg_url)\n",
    "\n",
    "m = Map(\n",
    "    center=MAP_CENTER, \n",
    "    zoom=10,\n",
    "    basemap=basemaps.Stamen.Toner,\n",
    ")\n",
    "\n",
    "geo_json = GeoJSON(\n",
    "    data=data,\n",
    "    style={\n",
    "        'opacity': 1, \n",
    "        'dashArray': '9', \n",
    "        'fillOpacity': 0.4,\n",
    "        'weight': 1\n",
    "    },\n",
    "    hover_style={\n",
    "        'color': 'white', \n",
    "        'dashArray': '0', \n",
    "        'fillOpacity': 0.3\n",
    "    },\n",
    "    style_callback=random_color\n",
    ")\n",
    "\n",
    "m.add_layer(geo_json)\n",
    "\n",
    "display(m)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Plotting Points of Interest from Google BigQuery"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/opt/conda/lib/python3.7/site-packages/google/cloud/bigquery/client.py:441: UserWarning: Cannot create BigQuery Storage client, the dependency google-cloud-bigquery-storage is not installed.\n",
      "  \"Cannot create BigQuery Storage client, the dependency \"\n"
     ]
    }
   ],
   "source": [
    "BIGQUERY_PROJECT = 'ironhacks-covid19-data'\n",
    "BIGQUERY_KEYPATH = 'service-account.json'\n",
    "\n",
    "os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = BIGQUERY_KEYPATH\n",
    "bigquery_client = bigquery.Client(project=BIGQUERY_PROJECT)\n",
    "\n",
    "\n",
    "WEEKLY_PATTERNS_QUERY = \"\"\"\n",
    "SELECT \n",
    "  poi_id, \n",
    "  poi_cbg,\n",
    "  location_name,\n",
    "  latitude,\n",
    "  longitude,\n",
    "  top_category,\n",
    "  raw_visit_counts\n",
    "FROM `ironhacks_covid19_competition.weekly_patterns` \n",
    "WHERE week_number = 11\n",
    "\"\"\"\n",
    "\n",
    "query_job = bigquery_client.query(WEEKLY_PATTERNS_QUERY)\n",
    "poi_geo = query_job.to_dataframe()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>poi_id</th>\n",
       "      <th>poi_cbg</th>\n",
       "      <th>location_name</th>\n",
       "      <th>latitude</th>\n",
       "      <th>longitude</th>\n",
       "      <th>top_category</th>\n",
       "      <th>raw_visit_counts</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>6a2d40f8-c477-49b6-a5d5-69c31f001afc</td>\n",
       "      <td>181570016001</td>\n",
       "      <td>Auto Express</td>\n",
       "      <td>40.367561</td>\n",
       "      <td>-86.868565</td>\n",
       "      <td>None</td>\n",
       "      <td>23</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>49636347-5a9d-4bf3-9d9a-c21a4ba7d8f1</td>\n",
       "      <td>181570003001</td>\n",
       "      <td>Del Real Auto Connection</td>\n",
       "      <td>40.438210</td>\n",
       "      <td>-86.859945</td>\n",
       "      <td>None</td>\n",
       "      <td>9</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>d98b37cd-ed64-456c-b580-c2c299c9f6d6</td>\n",
       "      <td>181570012001</td>\n",
       "      <td>Bear's Auto Sales</td>\n",
       "      <td>40.409919</td>\n",
       "      <td>-86.869882</td>\n",
       "      <td>None</td>\n",
       "      <td>11</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>efb4f5e7-28c2-47be-9d47-254280b8458e</td>\n",
       "      <td>181570001002</td>\n",
       "      <td>Gta Auto Sales</td>\n",
       "      <td>40.440608</td>\n",
       "      <td>-86.877960</td>\n",
       "      <td>None</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>16f4e696-2065-4854-8ba6-a8cab2b67bf7</td>\n",
       "      <td>181570001002</td>\n",
       "      <td>Steve Firestone Auto Sales</td>\n",
       "      <td>40.439060</td>\n",
       "      <td>-86.880571</td>\n",
       "      <td>None</td>\n",
       "      <td>22</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1607</th>\n",
       "      <td>50c0e1b7-fca7-42c7-9a03-ae365b04a85f</td>\n",
       "      <td>181570052001</td>\n",
       "      <td>West Lafayette Fire Department Station 2</td>\n",
       "      <td>40.451514</td>\n",
       "      <td>-86.915309</td>\n",
       "      <td>Justice, Public Order, and Safety Activities</td>\n",
       "      <td>9</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1608</th>\n",
       "      <td>79d4b9e1-f93f-4fb4-aa5a-092e976d4e33</td>\n",
       "      <td>181570104001</td>\n",
       "      <td>Purdue University Fire Department</td>\n",
       "      <td>40.404468</td>\n",
       "      <td>-86.894375</td>\n",
       "      <td>Justice, Public Order, and Safety Activities</td>\n",
       "      <td>32</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1609</th>\n",
       "      <td>4fd58993-41ea-4db9-9a23-fa044395d052</td>\n",
       "      <td>181570018002</td>\n",
       "      <td>Lafayette Fire Department Station 5</td>\n",
       "      <td>40.424580</td>\n",
       "      <td>-86.839675</td>\n",
       "      <td>Justice, Public Order, and Safety Activities</td>\n",
       "      <td>4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1610</th>\n",
       "      <td>ddfdb9d2-0f5a-46d8-8996-c437332d96a5</td>\n",
       "      <td>181570007001</td>\n",
       "      <td>Lafayette Fire Department Station 3</td>\n",
       "      <td>40.417589</td>\n",
       "      <td>-86.877738</td>\n",
       "      <td>Justice, Public Order, and Safety Activities</td>\n",
       "      <td>29</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1611</th>\n",
       "      <td>137ac315-a3a8-4cf7-a820-d4b11cad02dd</td>\n",
       "      <td>181570052002</td>\n",
       "      <td>BMV License Agency West Lafayette</td>\n",
       "      <td>40.452275</td>\n",
       "      <td>-86.917854</td>\n",
       "      <td>Administration of Economic Programs</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>1612 rows × 7 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "                                    poi_id       poi_cbg  \\\n",
       "0     6a2d40f8-c477-49b6-a5d5-69c31f001afc  181570016001   \n",
       "1     49636347-5a9d-4bf3-9d9a-c21a4ba7d8f1  181570003001   \n",
       "2     d98b37cd-ed64-456c-b580-c2c299c9f6d6  181570012001   \n",
       "3     efb4f5e7-28c2-47be-9d47-254280b8458e  181570001002   \n",
       "4     16f4e696-2065-4854-8ba6-a8cab2b67bf7  181570001002   \n",
       "...                                    ...           ...   \n",
       "1607  50c0e1b7-fca7-42c7-9a03-ae365b04a85f  181570052001   \n",
       "1608  79d4b9e1-f93f-4fb4-aa5a-092e976d4e33  181570104001   \n",
       "1609  4fd58993-41ea-4db9-9a23-fa044395d052  181570018002   \n",
       "1610  ddfdb9d2-0f5a-46d8-8996-c437332d96a5  181570007001   \n",
       "1611  137ac315-a3a8-4cf7-a820-d4b11cad02dd  181570052002   \n",
       "\n",
       "                                 location_name   latitude  longitude  \\\n",
       "0                                 Auto Express  40.367561 -86.868565   \n",
       "1                     Del Real Auto Connection  40.438210 -86.859945   \n",
       "2                            Bear's Auto Sales  40.409919 -86.869882   \n",
       "3                               Gta Auto Sales  40.440608 -86.877960   \n",
       "4                   Steve Firestone Auto Sales  40.439060 -86.880571   \n",
       "...                                        ...        ...        ...   \n",
       "1607  West Lafayette Fire Department Station 2  40.451514 -86.915309   \n",
       "1608         Purdue University Fire Department  40.404468 -86.894375   \n",
       "1609       Lafayette Fire Department Station 5  40.424580 -86.839675   \n",
       "1610       Lafayette Fire Department Station 3  40.417589 -86.877738   \n",
       "1611         BMV License Agency West Lafayette  40.452275 -86.917854   \n",
       "\n",
       "                                      top_category  raw_visit_counts  \n",
       "0                                             None                23  \n",
       "1                                             None                 9  \n",
       "2                                             None                11  \n",
       "3                                             None                 2  \n",
       "4                                             None                22  \n",
       "...                                            ...               ...  \n",
       "1607  Justice, Public Order, and Safety Activities                 9  \n",
       "1608  Justice, Public Order, and Safety Activities                32  \n",
       "1609  Justice, Public Order, and Safety Activities                 4  \n",
       "1610  Justice, Public Order, and Safety Activities                29  \n",
       "1611           Administration of Economic Programs                 1  \n",
       "\n",
       "[1612 rows x 7 columns]"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "poi_geo"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Marker Cluster with Popups"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "688a0f3bf6474658a4d3c61c983eae1c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Map(center=[40.39, -86.822], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "m = Map(center=MAP_CENTER, zoom=10)\n",
    "\n",
    "markers = []\n",
    "\n",
    "for index, point in poi_geo.iterrows():\n",
    "    marker = Marker(\n",
    "        location=[point.latitude, point.longitude],\n",
    "        draggable=False,\n",
    "    )\n",
    "    marker_message = HTML()\n",
    "    marker_message.value = \"<strong>\" + str(point.location_name) + \"</strong>\" + \"<br>Visit Count: \" + str(point.raw_visit_counts)\n",
    "    marker.popup = marker_message\n",
    "    markers.append(marker)\n",
    "\n",
    "m.add_layer(MarkerCluster(markers=markers))\n",
    "\n",
    "display(m)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "1b0812f47b494e8ba6a26f58d64fce7c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Map(center=[40.39, -86.822], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "circle_map = Map(\n",
    "    basemap=basemaps.CartoDB.Positron,\n",
    "    center=MAP_CENTER, \n",
    "    zoom=14,\n",
    ")\n",
    "\n",
    "VISIT_COUNT_MIN = poi_geo[\"raw_visit_counts\"].min()\n",
    "VISIT_COUNT_MAX = poi_geo[\"raw_visit_counts\"].max()\n",
    "CIRCLE_SCALE = 150 # meters\n",
    "\n",
    "def get_circle_radius(value):\n",
    "    return int((value / VISIT_COUNT_MAX) * CIRCLE_SCALE)\n",
    "\n",
    "circles = []\n",
    "\n",
    "for index, point in poi_geo.iterrows():\n",
    "    circle = Circle()\n",
    "    circle.location=[point.latitude, point.longitude]\n",
    "    circle.radius=get_circle_radius(point.raw_visit_counts)\n",
    "    circle.color=\"red\"\n",
    "    circle.stroke=True\n",
    "    circle.opacity=.8\n",
    "    circle.fill=True\n",
    "    circle.fill_color=\"red\"\n",
    "    circle.fill_opacity=.5\n",
    "    circle.weight=2\n",
    "\n",
    "    circle_message = HTML()\n",
    "    circle_message.value = \"<strong>\" + str(point.location_name) + \"</strong>\" + \"<br>Visit Count: \" + str(point.raw_visit_counts)\n",
    "    circle.popup = circle_message\n",
    "    \n",
    "    circles.append(circle)\n",
    "\n",
    "circle_group = LayerGroup(layers=circles)\n",
    "circle_map.add_layer(circle_group)\n",
    "\n",
    "display(circle_map)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Advanced Mapping Techniques"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Multiple Tile Layers with Interaction"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "7556230941904b7a8affae95ee007e8e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Map(center=[40.39, -86.822], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# INTERACTIVE MAP\n",
    "\n",
    "basemap_example_map = Map(\n",
    "    center=MAP_CENTER, \n",
    "    zoom=5\n",
    ")\n",
    "\n",
    "ee_basemaps={}\n",
    "\n",
    "# Handles Dropdown control event\n",
    "def on_click(change):\n",
    "    basemap_name = change['new']\n",
    "    old_basemap = basemap_example_map.layers[-1]\n",
    "    basemap_example_map.substitute_layer(old_basemap, ee_basemaps[basemap_name])\n",
    "\n",
    "# Loops through all ipyleaflet basemaps\n",
    "for item in basemaps.values():\n",
    "    try:\n",
    "        name = item['name']\n",
    "        basemap = 'basemaps.{}'.format(name)\n",
    "        ee_basemaps[name] = basemap_to_tiles(eval(basemap))\n",
    "    except:\n",
    "        for sub_item in item:\n",
    "            name = item[sub_item]['name']\n",
    "            basemap = 'basemaps.{}'.format(name)\n",
    "            basemap = basemap.replace('Mids', 'Modis')\n",
    "            ee_basemaps[name] = basemap_to_tiles(eval(basemap))\n",
    "\n",
    "# Adds a Dropdown widget\n",
    "dropdown = Dropdown(\n",
    "    options=list(ee_basemaps.keys()),\n",
    "    value='OpenStreetMap.Mapnik',\n",
    "    description='Basemaps'\n",
    ")\n",
    "\n",
    "dropdown.observe(on_click, 'value')\n",
    "\n",
    "# Adds control to the map\n",
    "basemap_control = WidgetControl(widget=dropdown, position='topright')\n",
    "basemap_example_map.add_control(basemap_control)\n",
    "\n",
    "display(basemap_example_map)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Multiple Maps"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c6470eeb97f54a03ac600f94fe1ee4a7",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Map(center=[40.39, -86.822], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_i…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "map2 = Map(center=[43.6, 1.44], zoom=10)\n",
    "HBox([m, circle_map])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "For more examples for mapping with leaflet in python visit the [official docs](https://ipyleaflet.readthedocs.io/en/latest/index.html)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "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.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}