Embed geojson.io in a Jupyter / IPython notebook using geojsonio.py

geojsonio_embed.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:86ae111a2ec0ed9e7de7d983ad3fcb745f131ff4fa97623ec4a4a79caea6e4ee"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# geojson.io and IPython notebook\n",
      "Quickly style and plot a GeoJSON file. Style the data based on the values in a column. Here, use OSM's 'highway' field to plot in different colors.\n",
      "\n",
      "Use [geojsonio.py](http://github.com/jwass/geojsonio.py) to embed http://geojson.io in the notebook."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import geopandas as gpd\n",
      "import geojsonio\n",
      "import pandas as pd"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 14
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "## Setup the style guide\n",
      "\n",
      "Use colors from http://colorbrewer2.org. I'm using the qualitative, 7-class Set1 (and removed the yellow color since it doesn't work well for lines on this map)."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# Set up the simple style spec mapping of highway to color and width\n",
      "highway = ['motorway', 'trunk', 'primary', 'secondary', 'tertiary', 'residential']\n",
      "# Colors pasted from colorbrewer2.org, qualitative, 7-class Set1 (removing the yellow color)\n",
      "colors = \"\"\"\n",
      "#e41a1c\n",
      "#377eb8\n",
      "#4daf4a\n",
      "#984ea3\n",
      "#ff7f00\n",
      "#a65628\n",
      "\"\"\".split()\n",
      "widths = range(len(highway), 0, -1)  # Countdown so smallest is width 1\n",
      " \n",
      "# 'stroke' and 'stroke-width' are the defined properties for line color/width:\n",
      "# http://github.com/mapbox/simplestyle-spec\n",
      "style = pd.DataFrame({'stroke': colors,\n",
      "                      'stroke-width': widths,\n",
      "                      'highway': highway})\n",
      "\n",
      "style"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div style=\"max-height:1000px;max-width:1500px;overflow:auto;\">\n",
        "<table border=\"1\" class=\"dataframe\">\n",
        "  <thead>\n",
        "    <tr style=\"text-align: right;\">\n",
        "      <th></th>\n",
        "      <th>highway</th>\n",
        "      <th>stroke</th>\n",
        "      <th>stroke-width</th>\n",
        "    </tr>\n",
        "  </thead>\n",
        "  <tbody>\n",
        "    <tr>\n",
        "      <th>0</th>\n",
        "      <td>    motorway</td>\n",
        "      <td> #e41a1c</td>\n",
        "      <td> 6</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>1</th>\n",
        "      <td>       trunk</td>\n",
        "      <td> #377eb8</td>\n",
        "      <td> 5</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>2</th>\n",
        "      <td>     primary</td>\n",
        "      <td> #4daf4a</td>\n",
        "      <td> 4</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>3</th>\n",
        "      <td>   secondary</td>\n",
        "      <td> #984ea3</td>\n",
        "      <td> 3</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>4</th>\n",
        "      <td>    tertiary</td>\n",
        "      <td> #ff7f00</td>\n",
        "      <td> 2</td>\n",
        "    </tr>\n",
        "    <tr>\n",
        "      <th>5</th>\n",
        "      <td> residential</td>\n",
        "      <td> #a65628</td>\n",
        "      <td> 1</td>\n",
        "    </tr>\n",
        "  </tbody>\n",
        "</table>\n",
        "</div>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 15,
       "text": [
        "       highway   stroke  stroke-width\n",
        "0     motorway  #e41a1c             6\n",
        "1        trunk  #377eb8             5\n",
        "2      primary  #4daf4a             4\n",
        "3    secondary  #984ea3             3\n",
        "4     tertiary  #ff7f00             2\n",
        "5  residential  #a65628             1"
       ]
      }
     ],
     "prompt_number": 15
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "## Style each geometry\n",
      "Merge the style columns to the data, merge on the highway column. Because this is an inner join by default, it will drop any rows where highway is not in the style DataFrame."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# Load up the OSM data\n",
      "df = gpd.read_file('cambridge_raw_osm.geojson')\n",
      "\n",
      "df_styled = gpd.GeoDataFrame(df.merge(style, on='highway'))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 10
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "## Visualize\n",
      "Now each row contains 'stroke' and 'stroke-width' based on the 'highway' tag.\n",
      "\n",
      "Embed the http://geojson.io map right in the notebook here."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "geojsonio.embed(df_styled.to_json(na='drop'))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<iframe src=http://geojson.io/#id=gist:/56e75219d0b8370ff525 width=100% height=512></iframe>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 7,
       "text": [
        "<IPython.core.display.HTML at 0x10f6524d0>"
       ]
      }
     ],
     "prompt_number": 7
    }
   ],
   "metadata": {}
  }
 ]
}