advanced_isolines.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Advanced Isolines\n",
    "\n",
    "This notebook is an experiment in drawing very dynamic isolines on maps using the [HERE](https://developer.here.com) [Routing API](https://developer.here.com/documentation/routing/topics/resource-calculate-isoline.html). It is inspired by [mapnificent.net](http://mapnificent.net), a service which renders isolines for public transport data and selected cities in the world. In this case we render worldwide data for cars and pedestrians served by HERE Technologies. The goal is to make it extremely easy to explore the sense of \"reachability\" in time or distance for single or multiple spots in urban areas, and answer questions like \"Where is a good area to meet for people coming from rather distant places of a city? or \"Which area can I cover as a pedestrian tourist in a new city within some amount of time?\"\n",
    "\n",
    "Example:\n",
    "\n",
    "<img src=\"images/advanced_isolines.gif\" alt=\"isoline image\" style=\"width:80%;\"/>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The implementation is not optimized in any way, but results in a surprisingly smooth UI as-is."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "from math import log, fabs\n",
    "from functools import partial"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%bash\n",
    "# pip install requests\n",
    "# pip install geographiclib\n",
    "# conda install -y -c conda-forge ipywidgets\n",
    "# conda install -y -c conda-forge ipyleaflet\n",
    "# conda install -y -c conda-forge shapely"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import requests\n",
    "from geographiclib.geodesic import Geodesic\n",
    "from ipywidgets import IntSlider, VBox, HBox, Dropdown, Button, HTML, Layout\n",
    "from ipyleaflet import Map, Marker, Polyline, Polygon, basemaps, basemap_to_tiles\n",
    "from shapely.geometry import Point as GeoPoint\n",
    "from shapely.geometry.polygon import Polygon as GeoPolygon"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from credentials import APP_ID, APP_CODE"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "geod = Geodesic.WGS84\n",
    "\n",
    "def calc_perim_area(path):\n",
    "    \"\"\"Calculate and return geodesic perimeter and area of some path.\"\"\"\n",
    "    p = geod.Polygon()\n",
    "    for lat, lon in path:\n",
    "        p.AddPoint(lat, lon)\n",
    "    num, perim, area = p.Compute()\n",
    "    return num, perim, area"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def zoom_for_bbox(lon_min: float, lat_min: float, lon_max: float, lat_max: float):\n",
    "    \"\"\"Calculate appropriate zoom level for a given bounding box.\"\"\"\n",
    "    lat_diff = fabs(lat_max - lat_min)\n",
    "    lon_diff = fabs(lon_max - lon_min)\n",
    "    max_diff = max(lon_diff, lat_diff)\n",
    "    if max_diff < 360 / 2**20:\n",
    "        zoom_level = 21\n",
    "    else:\n",
    "        zoom_level = int(-1 * ((log(max_diff) / log(2)) - (log(360) / log(2))))\n",
    "        if zoom_level < 1:\n",
    "            zoom_level = 1\n",
    "    return zoom_level"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class DynamicIsolines(object):\n",
    "    \"\"\"\n",
    "    A class to draw isolines dynamically around some center on a map.\n",
    "\n",
    "    The markers at the center have a popup with some UI to modify the\n",
    "    isoline type (time/distance) range (secods/meters), resolution\n",
    "    (meters) and mode (car/pedestrian). Any change will continuously\n",
    "    update the respective isoline on the map.\n",
    "\n",
    "    The isoline data is shown with a red outline when newly fetched\n",
    "    via the API or a green one when data is reused from previously\n",
    "    cached API calls. The line is dashed when the isoline does not\n",
    "    contain the center (because it cannot be accessed by cars).\n",
    "\n",
    "    TODO:\n",
    "\n",
    "    - add reverse geocoding showing the address at the center\n",
    "    - use fontawesome icons car-side/walking icons for mode\n",
    "    - use fontawesome icons ruler/clock icons for rangetype\n",
    "    - add auto-resize toggle icon, maybe\n",
    "    - add HERE appcode/appid to some config for `__init__`\n",
    "    - add key modifier like Shift to `self.map_click`\n",
    "    - add isoline diameter in meters (the largest distance between \n",
    "      any pair of vertices)\n",
    "    \n",
    "    NOTES (for the developers of ipyleaflet):\n",
    "    \n",
    "    - sliders don't have a name attribute, but polylines and markers do\n",
    "    - callbacks registered with `marker.on_move()` don't get a marker/\n",
    "      owner argument \n",
    "    - callbacks registered with `map.on_interaction()` don't get modifier\n",
    "      keys pressed on the keyboard\n",
    "    - marker popups don't show/work nicely in Jupyter Lab (with or with-\n",
    "      out Sidecar installed)\n",
    "    \"\"\"\n",
    "    \n",
    "    default_iso = dict(\n",
    "        range=300,\n",
    "        rangetype='time',\n",
    "        resolution=50,\n",
    "        mode='car',\n",
    "        from_cache=False\n",
    "    )\n",
    "    \n",
    "    stats_format = ', '.join([\n",
    "        'L:&nbsp;{:.0f}&nbsp;pts',\n",
    "        'P:&nbsp;{:.0f}&nbsp;m',\n",
    "        'A:&nbsp;{:.0f}&nbsp;m<sup>2</sup>'\n",
    "    ])\n",
    "    \n",
    "    def __init__(self, a_map, isolines=None):\n",
    "        self.m = a_map\n",
    "        self.m.on_interaction(self.map_click)\n",
    "\n",
    "        self.isolines = isolines or []\n",
    "        self.cache = {}\n",
    "        self.auto_resize = False\n",
    "\n",
    "        self.app_id = APP_ID\n",
    "        self.app_code = APP_CODE\n",
    "\n",
    "        for i, iso0 in enumerate(self.isolines):\n",
    "            iso = self.default_iso.copy()\n",
    "            iso.update(iso0)\n",
    "            self.isolines[i] = iso\n",
    "            self.make_iso_interactive(iso)            \n",
    "            obj = iso.get('obj', self.get_isoline_cached(iso))\n",
    "            iso['obj'] = obj\n",
    "            self.render_on_map(iso)\n",
    "\n",
    "        self.resize()\n",
    "\n",
    "    # callbacks called by the popup UI\n",
    "\n",
    "    def rangetype_changed(self, change, iso):\n",
    "        \"\"\"Callback for events when a `rangetype` dropdown was changed.\"\"\"\n",
    "        if change['type'] == 'change' and change['name'] == 'value':\n",
    "            self.clean(iso, incl_slider=False)\n",
    "            iso['rangetype'] = change['new'].lower()\n",
    "            desc = 'Time (s)' if iso['rangetype']=='time' else 'Dist. (m)'\n",
    "            iso['range_slider'].description = desc\n",
    "            iso['obj'] = self.get_isoline_cached(iso)\n",
    "            self.render_on_map(iso, add_marker=False)\n",
    "            if self.auto_resize:\n",
    "                self.resize()\n",
    "\n",
    "    def mode_changed(self, change, iso):\n",
    "        \"\"\"Callback for events when a `mode` dropdown was changed.\"\"\"\n",
    "        if change['type'] == 'change' and change['name'] == 'value':\n",
    "            self.clean(iso, incl_slider=False)\n",
    "            iso['mode'] = change['new'].lower()\n",
    "            iso['obj'] = self.get_isoline_cached(iso)\n",
    "            self.render_on_map(iso, add_marker=False)\n",
    "            num, perim, area = map(fabs, calc_perim_area(iso['path']))\n",
    "            iso['stats'].value = self.stats_format.format(num, perim, area)\n",
    "            if self.auto_resize:\n",
    "                self.resize()\n",
    "\n",
    "    def obs_range_slider(self, change, iso):\n",
    "        \"\"\"Callback for events when a range slider was moved.\"\"\"\n",
    "        self.clean(iso, incl_slider=False)\n",
    "        iso['range'] = change.owner.value\n",
    "        iso['obj'] = self.get_isoline_cached(iso)\n",
    "        self.render_on_map(iso, add_marker=False)\n",
    "        if self.auto_resize:\n",
    "            self.resize()\n",
    "\n",
    "    def obs_reso_slider(self, change, iso):\n",
    "        \"\"\"Callback for events when a resolution slider was moved.\"\"\"\n",
    "        self.clean(iso, incl_slider=False)\n",
    "        iso['resolution'] = change.owner.value\n",
    "        iso['obj'] = self.get_isoline_cached(iso)\n",
    "        self.render_on_map(iso, add_marker=False)\n",
    "        if self.auto_resize:\n",
    "            self.resize()\n",
    "\n",
    "    def move_marker(self, event, location, iso):\n",
    "        \"\"\"Callback for events when marker was moved.\"\"\"\n",
    "        self.clean(iso)\n",
    "        iso['loc'] = tuple(location)\n",
    "        iso['obj'] = self.get_isoline_cached(iso)\n",
    "        self.render_on_map(iso)\n",
    "        if self.auto_resize:\n",
    "            self.resize()\n",
    "    \n",
    "    def click_delete(self, event, iso):\n",
    "        \"\"\"Callback for events when button was clicked.\"\"\"\n",
    "        self.clean(iso)\n",
    "        self.isolines.remove(iso)\n",
    "\n",
    "    def add_isoline(self, **kwargs):\n",
    "        \"\"\"Callback for events when map was clicked.\"\"\"\n",
    "        iso = self.default_iso.copy()\n",
    "        iso['loc'] = kwargs['loc']\n",
    "        self.make_iso_interactive(iso)            \n",
    "        obj = iso.get('obj', self.get_isoline_cached(iso))\n",
    "        iso['obj'] = obj\n",
    "        self.isolines.append(iso)\n",
    "        self.render_on_map(iso)\n",
    "        if self.auto_resize:\n",
    "            self.resize()\n",
    "\n",
    "    def map_click(self, **kwargs):\n",
    "        \"\"\"Callback for events when map was clicked.\"\"\"\n",
    "        if kwargs.get('type') == 'click':\n",
    "            kwargs['loc'] = tuple(kwargs.get('coordinates'))\n",
    "            del kwargs['coordinates']\n",
    "            self.add_isoline(**kwargs)\n",
    "            \n",
    "    # normal methods\n",
    "    \n",
    "    def clean(self, iso, incl_slider=True):\n",
    "        \"\"\"Remove current marker and/or isoline from map.\"\"\"\n",
    "        if incl_slider:\n",
    "            self.m -= iso['marker']\n",
    "        self.m -= iso['polyline']\n",
    "    \n",
    "    def make_iso_interactive(self, iso):\n",
    "        \"\"\"Make an iso object respond to UI.\"\"\"\n",
    "        range_slider = IntSlider(\n",
    "            value=iso['range'],\n",
    "            min=60, max=600, step=10,\n",
    "            description='Time (s)' if iso['rangetype']=='time' else 'Dist. (m)')\n",
    "        obs_range_slider = partial(self.obs_range_slider, iso=iso)\n",
    "        range_slider.observe(obs_range_slider, names='value')\n",
    "        iso['range_slider'] = range_slider\n",
    "\n",
    "        reso_slider = IntSlider(\n",
    "            value=iso['resolution'],\n",
    "            min=10, max=200, step=10,\n",
    "            description='Resol. (m)')\n",
    "        obs_reso_slider = partial(self.obs_reso_slider, iso=iso)\n",
    "        reso_slider.observe(obs_reso_slider, names='value')\n",
    "        iso['reso_slider'] = reso_slider\n",
    "\n",
    "        iso['stats'] = HTML('')\n",
    "\n",
    "    def get_isoline_cached(self, iso):\n",
    "        \"\"\"Get isoline data from cache or by executing an API call if needed.\"\"\"\n",
    "        fields = 'loc range rangetype resolution mode'.split()\n",
    "        key = tuple(iso[f] for f in fields)\n",
    "        if key not in self.cache:\n",
    "            obj = self.get_isoline(iso)\n",
    "            self.cache[key] = obj\n",
    "            iso['from_cache'] = False\n",
    "        else:\n",
    "            obj = self.cache[key]\n",
    "            iso['from_cache'] = True\n",
    "        iso['obj'] = obj\n",
    "        return obj\n",
    "\n",
    "    def get_isoline(self, iso):\n",
    "        \"\"\"Execute API call to get path data for isoline object.\"\"\"\n",
    "        url = 'https://isoline.route.api.here.com' \\\n",
    "              '/routing/7.2/calculateisoline.json'\n",
    "        params = dict(\n",
    "            app_id=self.app_id, \n",
    "            app_code=self.app_code,\n",
    "            start='geo!{lat},{lon}'.format(lat=iso['loc'][0], lon=iso['loc'][1]),\n",
    "            mode='fastest;{mode};traffic:disabled'.format(mode=iso['mode'].lower()),\n",
    "            rangetype=iso['rangetype'], # time/distance\n",
    "            range=str(iso['range']),  # seconds/meters\n",
    "            resolution=str(iso['resolution']),  # meters\n",
    "            #departure='now', # 2018-07-04T17:00:00+02\n",
    "        )\n",
    "        return requests.get(url, params=params).json()\n",
    "\n",
    "    def make_marker(self, iso):\n",
    "        \"\"\"Return a marker with popup to be put on a map.\"\"\"\n",
    "        del_btn = Button(icon='trash', layout=Layout(width='30px'))\n",
    "        click_delete = partial(self.click_delete, iso=iso)\n",
    "        del_btn.on_click(click_delete)\n",
    "        \n",
    "        rangetype_dd = Dropdown(\n",
    "            options=['Time', 'Distance'],\n",
    "            value=iso['rangetype'].capitalize(),\n",
    "            description='',\n",
    "            disabled=False,\n",
    "            layout=Layout(width='180px')\n",
    "        )\n",
    "        rangetype_changed = partial(self.rangetype_changed, iso=iso)\n",
    "        rangetype_dd.observe(rangetype_changed)\n",
    "\n",
    "        mode_dd = Dropdown(\n",
    "            options=['Car', 'Pedestrian'],\n",
    "            value=iso['mode'].capitalize(),\n",
    "            description='',\n",
    "            disabled=False,\n",
    "            layout=Layout(width='180px')\n",
    "        )\n",
    "        mode_changed = partial(self.mode_changed, iso=iso)\n",
    "        mode_dd.observe(mode_changed)\n",
    "        \n",
    "        here_url = 'https://developer.here.com'\n",
    "        isoline_url = 'https://developer.here.com/documentation/routing/topics/resource-calculate-isoline.html'\n",
    "        popup = VBox([\n",
    "            HBox([HTML('<b>Isoline</b>'), \n",
    "                  rangetype_dd,\n",
    "                  mode_dd, \n",
    "                  del_btn\n",
    "            ]), \n",
    "            iso['range_slider'], \n",
    "            iso['reso_slider'],\n",
    "            iso['stats'],\n",
    "            HTML(f'Using the <a href=\"{isoline_url}\">Routing&nbsp;API</a> '\\\n",
    "                 f'by <a href=\"{here_url}\">HERE.com</a>.')\n",
    "        ])\n",
    "        # popup = iso['range_slider']\n",
    "        lat, lon = iso['loc']\n",
    "        marker = Marker(location=(lat, lon), popup=popup, name='isoline_marker')\n",
    "        iso['marker'] = marker\n",
    "        move_marker = partial(self.move_marker, iso=iso)\n",
    "        marker.on_move(move_marker)\n",
    "        return marker\n",
    "        \n",
    "    def render_on_map(self, iso, add_marker=True):\n",
    "        \"\"\"Render isoline object on map.\"\"\"\n",
    "        obj = iso['obj']\n",
    "        center = obj['response']['center']\n",
    "        lat, lon = center['latitude'], center['longitude']\n",
    "        if add_marker:\n",
    "            self.m += self.make_marker(iso)\n",
    "        for isoline in obj['response']['isoline']:\n",
    "            shape = isoline['component'][0]['shape']\n",
    "            path = [tuple(map(float, pos.split(','))) for pos in shape]\n",
    "            color = 'green' if iso['from_cache'] else 'red'\n",
    "            dash_array = '5,5' if not GeoPolygon(path).contains(GeoPoint(iso['loc'])) else None\n",
    "            polyline = Polygon(locations=path,\n",
    "                                color=color,\n",
    "                                weight=2,\n",
    "                                fill=True,\n",
    "                                no_clip=True,\n",
    "                                dash_array=dash_array,\n",
    "                                name='isoline')\n",
    "            iso['polyline'] = polyline\n",
    "            iso['path'] = path\n",
    "            num, perim, area = map(fabs, calc_perim_area(path))\n",
    "            iso['stats'].value = self.stats_format.format(num, perim, area)\n",
    "            self.m += polyline\n",
    "\n",
    "    def resize(self):\n",
    "        \"\"\"Resize map, resetting map center and zoom level to show all isolines.\"\"\"\n",
    "        # reset center\n",
    "        locs = [iso['loc'] for iso in self.isolines]\n",
    "        len_locs = len(locs)\n",
    "        if len_locs == 0:\n",
    "            return\n",
    "        self.m.center = sum(loc[0] for loc in locs) / len_locs, sum(loc[1] for loc in locs) / len_locs\n",
    "\n",
    "        # reset zoom level\n",
    "        mins, maxs = [], []\n",
    "        for iso in self.isolines:\n",
    "            path = iso.get('path', None)\n",
    "            if path:\n",
    "                mins.append(min(path))\n",
    "                maxs.append(max(path))\n",
    "        self.m.zoom = zoom_for_bbox(*min(mins), *max(maxs))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create a map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "attribution = '<a href=\"http://here.com\">HERE</a>'\n",
    "url_pat = (\"https://1.{maptype}.maps.api.here.com\"\n",
    "           \"/maptile/2.1/{tiletype}/newest/{scheme}/{{z}}/{{x}}/{{y}}/{tilesize}/{format}\"\n",
    "           f\"?app_id={APP_ID}&app_code={APP_CODE}\")\n",
    "params = dict(\n",
    "    maptype  = 'traffic',\n",
    "    tiletype = 'traffictile',\n",
    "    scheme   = 'normal.day',\n",
    "    tilesize = '256',\n",
    "    format   = 'png8',\n",
    "    app_id   = APP_ID,\n",
    "    app_code = APP_CODE\n",
    ")\n",
    "basemap = dict(url=url_pat.format(**params), attribution=attribution)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Add Isolines\n",
    "\n",
    "**Warning:** The marker popups will show best inside classic Jupyter notebooks. Experiments with Jupyter Lab showed a couple of issues, quite likely related to styling: some elements are not shown when using Jupyter Lab's Dark theme, sliders don't seem to work as expected."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "m = Map(center=(52.5, 13.4), zoom=13, basemap=basemap)\n",
    "iso0 = dict(loc=(52.5, 13.4), range=300, rangetype='time', resolution=20, mode='car')\n",
    "dyniso = DynamicIsolines(m, isolines=[iso0])\n",
    "dyniso.m"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dyniso.add_isoline(loc=(52.52, 13.42), range=300, rangetype='time', resolution=100)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dyniso.resize()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dyniso.auto_resize = True"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dyniso.resize()"
   ]
  }
 ],
 "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.6.3"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": false,
   "sideBar": false,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": false,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}