04-geojson-and-zooming.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# GeoJSON and Outline Features"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import dash\n",
    "import dash_leaflet as dl\n",
    "from jupyter_dash import JupyterDash\n",
    "import random"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from jupyter_dash.comms import _send_jupyter_config_comm_request\n",
    "_send_jupyter_config_comm_request()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Data Import From Last Lesson\n",
    "import geopandas as gpd\n",
    "import json\n",
    "zipfile = \"zip://data/cb_2018_us_state_20m.zip\"\n",
    "states = gpd.read_file(zipfile)\n",
    "zipfile = \"zip://data/cb_2018_us_county_20m.zip\"\n",
    "counties = gpd.read_file(zipfile)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "JupyterDash.infer_jupyter_proxy_config()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Basic customizations\n",
    " * `color` - border color\n",
    " * `fillColor` - content color\n",
    " * `weight` - border thickness\n",
    " * `opacity` - border opacity\n",
    " * `fillOpacity` - content opacity\n",
    " * `dashArray`, `dashOffset` - governs dashed boundary pattern\n",
    "\n",
    "These stylings should us CSS syntax\n",
    "\n",
    "Use `options` property to change static colors, use a `hover_style` function to change the property"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## When last we left you\n",
    "### Exercise 1: Customizing the Outlines"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "layer = dl.GeoJSON(data=json.loads(states.to_json()))\n",
    "app = JupyterDash()\n",
    "app.layout = dl.Map([layer, dl.TileLayer()],\n",
    "                    center=[39, -98],\n",
    "                    zoom=4,\n",
    "                    style={\n",
    "                        'width': '1000px',\n",
    "                        'height': '500px'\n",
    "                    })\n",
    "\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "## Final Version\n",
    "layer=dl.GeoJSON(data=json.loads(states.to_json()), options=dict(weight=6,\n",
    "                color='rgb(0, 146, 159)',\n",
    "                fillColor='rgb(0, 146, 159)',\n",
    "                opacity='0.1',\n",
    "                fillOpacity='0.2', dashArray='20,10', dashOffset=5))\n",
    "app = JupyterDash()\n",
    "app.layout = dl.Map([layer, dl.TileLayer()],\n",
    "                    center=[39, -98],\n",
    "                    zoom=4,\n",
    "                    style={'width': '1000px', 'height': '500px'})\n",
    "\n",
    "app.run_server(mode='inline',port=random.choice(range(2000,10000)))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Seque: A Javascript Digression\n",
    "Several properties in the dash leaflet components require specifying a javascript function as the property. The `dash_extensions.javascript` module supplies three methods:\n",
    " \n",
    " * `arrow_function` - returns an fixed object. Useful if you want a function to return the same thing all the time\n",
    " * `assign` - allows you to inline javascript as a string\n",
    " * `Namespace` specifies a javascript namespace where the function is encapsulated. More on this one later.\n",
    " \n",
    "#### Why is this important?\n",
    "The property `hoverStyle` takes a **javascript function**. The simplest example is the use of the `arrow_function`\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Exercise 2: Adding Hover Behaviour"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from dash_extensions.javascript import arrow_function\n",
    "hover_style = dict(weight=6)\n",
    "layer = dl.GeoJSON(data=json.loads(states.to_json()),\n",
    "                   hoverStyle=arrow_function(hover_style))\n",
    "app = JupyterDash()\n",
    "app.layout = dl.Map([layer, dl.TileLayer()],\n",
    "                    center=[39, -98],\n",
    "                    zoom=4,\n",
    "                    style={\n",
    "                        'width': '1000px',\n",
    "                        'height': '500px'\n",
    "                    })\n",
    "\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "### Final Version\n",
    "from dash_extensions.javascript import arrow_function\n",
    "hover_style = dict(weight=6,\n",
    "                   color='rgb(0, 146, 159)',\n",
    "                   fillColor='rgb(0, 146, 159)',\n",
    "                   fillOpacity='0.2',\n",
    "                   dashArray='20,10',\n",
    "                   dashOffset=5)\n",
    "layer = dl.GeoJSON(data=json.loads(states.to_json()),\n",
    "                   hoverStyle=arrow_function(hover_style))\n",
    "app = JupyterDash()\n",
    "app.layout = dl.Map([layer, dl.TileLayer()],\n",
    "                    center=[39, -98],\n",
    "                    zoom=4,\n",
    "                    style={\n",
    "                        'width': '1000px',\n",
    "                        'height': '500px'\n",
    "                    })\n",
    "\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Exercise 3: Tooltips\n",
    "Tooltips are easy and a little strangely implemented. If the `data` has a column named `tooltip` that will be the tool tip. Bear in mind it can contain html."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "states_with_tooltip = states.copy(deep=True)\n",
    "states_with_tooltip['tooltip'] = states.NAME\n",
    "layer = dl.GeoJSON(data=json.loads(states_with_tooltip.to_json()))\n",
    "app = JupyterDash()\n",
    "app.layout = dl.Map([layer, dl.TileLayer()],\n",
    "                    center=[39, -98],\n",
    "                    zoom=4,\n",
    "                    style={\n",
    "                        'width': '1000px',\n",
    "                        'height': '500px'\n",
    "                    })\n",
    "\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "# Final Version\n",
    "states_with_tooltip = states.copy(deep=True)\n",
    "states_with_tooltip['tooltip'] = states.NAME + '<BR>FIPS: ' + states.STATEFP\n",
    "\n",
    "layer = dl.GeoJSON(data=json.loads(states_with_tooltip.to_json()))\n",
    "app = JupyterDash()\n",
    "app.layout = dl.Map([layer, dl.TileLayer()],\n",
    "                    center=[39, -98],\n",
    "                    zoom=4,\n",
    "                    style={\n",
    "                        'width': '1000px',\n",
    "                        'height': '500px'\n",
    "                    })\n",
    "\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Exercise 4: Data Filtering"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from dash import html\n",
    "from dash.dependencies import Input, Output\n",
    "layer = dl.GeoJSON(id='borders',\n",
    "                   data=json.loads(states.to_json()),\n",
    "                   zoomToBoundsOnClick=True)\n",
    "app = JupyterDash()\n",
    "app.layout = html.Div([\n",
    "    dl.Map([dl.TileLayer(), layer],\n",
    "           center=[39, -98],\n",
    "           zoom=4,\n",
    "           style={\n",
    "               'width': '1000px',\n",
    "               'height': '500px'\n",
    "           }),\n",
    "    html.Button(\"Click Me!\", id='btn')\n",
    "])\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "# Final Version\n",
    "from dash import html\n",
    "from dash.dependencies import Input, Output\n",
    "layer = dl.GeoJSON(id='borders',\n",
    "                   data=json.loads(states.to_json()),\n",
    "                   zoomToBoundsOnClick=True)\n",
    "app = JupyterDash()\n",
    "app.layout = html.Div([\n",
    "    dl.Map([dl.TileLayer(), layer],\n",
    "           center=[39, -98],\n",
    "           zoom=4,\n",
    "           style={\n",
    "               'width': '1000px',\n",
    "               'height': '500px'\n",
    "           }),\n",
    "    html.Button(\"Click Me!\", id='btn')\n",
    "])\n",
    "\n",
    "\n",
    "@app.callback(Output('borders', 'data'), Input('btn', 'n_clicks'))\n",
    "def filter(input_):\n",
    "    if input_ and (input_ % 2 == 1):\n",
    "        return json.loads(states[states.STATEFP == '06'].to_json())\n",
    "    else:\n",
    "        return json.loads(states.to_json())\n",
    "\n",
    "\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Exercise 5: Zoom Control"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from dash import html\n",
    "from dash.dependencies import Input, Output\n",
    "california = counties[counties.STATEFP == '06']\n",
    "layer = dl.GeoJSON(id='counties',\n",
    "                   data=json.loads(california.to_json()),\n",
    "                   zoomToBoundsOnClick=True,\n",
    "                   zoomToBounds=False)\n",
    "app = JupyterDash()\n",
    "app.layout = html.Div([\n",
    "    dl.Map([dl.TileLayer(), layer],\n",
    "           center=[37, -119],\n",
    "           zoom=5,\n",
    "           style={\n",
    "               'width': '1000px',\n",
    "               'height': '500px'\n",
    "           }),\n",
    "    html.Button(\"Click Me!\", id='btn')\n",
    "])\n",
    "\n",
    "\n",
    "@app.callback(Output('counties', 'data'), Input('btn', 'n_clicks'))\n",
    "def sandiego(input_):\n",
    "    if input_ and (input_ % 2 == 1):\n",
    "        return json.loads(california[california.COUNTYFP == '073'].to_json())\n",
    "    else:\n",
    "        return json.loads(california.to_json())\n",
    "\n",
    "\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bonus: The Anti-meridian Problem\n",
    "If you try the same exercise with Alaska, you'll notice the the zoom is not working as expected. That is because the county of Aleutians West County crosses the \"Antimeridian\" line (180$^\\circ$ longitude). So some values might be -179 others might be 179 longitude. The way to correct it is to map 179 latitude to -181 latitude.\n",
    "\n",
    "The following visualization illustrates the issue. Note that the FIPS code for Aleutians West is 016"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from dash import html\n",
    "from dash.dependencies import Input, Output\n",
    "alaska = counties[counties.STATEFP == '02']\n",
    "# alaska = alaska[alaska.COUNTYFP!='016']\n",
    "layer = dl.GeoJSON(id='counties',\n",
    "                   data=json.loads(alaska.to_json()),\n",
    "                   zoomToBoundsOnClick=True,\n",
    "                   zoomToBounds=True)\n",
    "app = JupyterDash()\n",
    "app.layout = html.Div([\n",
    "    dl.Map([dl.TileLayer(), layer],\n",
    "           center=[39, -98],\n",
    "           zoom=4,\n",
    "           style={\n",
    "               'width': '1000px',\n",
    "               'height': '500px'\n",
    "           }),\n",
    "    html.Button(\"Click Me!\", id='btn')\n",
    "])\n",
    "\n",
    "\n",
    "@app.callback(Output('counties', 'data'), Input('btn', 'n_clicks'))\n",
    "def select_alaska(input_):\n",
    "    if input_ and (input_ % 3 == 1):\n",
    "        return json.loads(alaska[alaska.COUNTYFP == '068'].to_json())\n",
    "    elif input_ and (input_ % 3 == 2):\n",
    "        return json.loads(alaska[alaska.COUNTYFP == '016'].to_json())\n",
    "    else:\n",
    "        return json.loads(alaska.to_json())\n",
    "\n",
    "\n",
    "app.run_server(mode='inline', port=random.choice(range(2000, 10000)))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.8.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}