{ "cells": [ { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "# Interactive maps on Leaflet\n", "\n", "JavaScript (JS) is a programming language which is mostly used for adding interactive content (such a zoomamble maps!) on webpages.\n", "\n", "Whenever you go into a website that has some kind of interactive map, it is quite probable that you are wittnessing a map that has been made with a JavaScipt library called [Leaflet](http://leafletjs.com/). Another popular JavaSCript library is called [OpenLayers](https://openlayers.org/). \n", "\n", "In this lesson, we will learn how to publish interactive online maps using Python and Leaflet. In spesific, we will have a look at two different libraries; **Folium** and **mplleaflet** which both allow you to create interactive maps (using the Leaflet JavaScript library) after manipulating data in Python.\n", "\n", "\n", "## Folium\n", "\n", "\n", "[Folium](https://github.com/python-visualization/folium) is a Python library that makes\n", "it possible visualize data on an interactive Leaflet map.\n", "\n", "**Resources:**\n", "\n", "- [Folium Documentation](https://python-visualization.github.io/folium/docs-v0.6.0/)\n", "- [Example Gallery](https://nbviewer.jupyter.org/github/python-visualization/folium/tree/master/examples/)\n", "- [Folium Quickstart](https://python-visualization.github.io/folium/quickstart.html)\n", "\n", "### Creating a simple interactive web-map\n", "\n", "Let's first see how we can do a simple interactive web-map without any data on it. We just visualize OpenStreetMap on a specific location of the a world.\n", "\n", "- First thing that we need to do is to create a Map instance. There are few parameters that we can use to adjust how in our Map instance that will affect how the background map will look like.\n" ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "collapsed": true, "deletable": true, "editable": true }, "outputs": [], "source": [ "import folium\n", "\n", "# Create a Map instance\n", "m = folium.Map(location=[60.25, 24.8],\n", " zoom_start=10, control_scale=True)" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "The first parameter ``location`` takes a pair of lat, lon values as list as an input which will determine where the map will be positioned when user opens up the map. ``zoom_start`` -parameter adjusts the default zoom-level for the map (the higher the number the closer the zoom is). ``control_scale`` defines if map should have a scalebar or not." ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "- Let's see what our map looks like: " ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "source": [ "m" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "- We can also save the map already now \n", "- Let's save the map as a html file ``base_map.html``:" ] }, { "cell_type": "code", "execution_count": 4, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [], "source": [ "outfp = \"results/base_map.html\"\n", "m.save(outfp)" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "**TASK:** Navigate to the location where you saved the html file and open it in a web browser (preferably Google Chrome). Open the file also in a text editor to see the source script.\n", "\n", "- Let's change the basemap style to ``Stamen Toner`` and change the location of our map slightly. The ``tiles`` -parameter is used for changing the background map provider and map style (see the [documentation](http://python-visualization.github.io/folium/docs-v0.5.0/modules.html) for all in-built options)." ] }, { "cell_type": "code", "execution_count": 5, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Let's change the basemap style to 'Stamen Toner'\n", "m = folium.Map(location=[40.730610, -73.935242], tiles='Stamen Toner',\n", " zoom_start=12, control_scale=True, prefer_canvas=True)\n", "\n", "m" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "**TASK:** Modify the codeblock above and visualize a couple of different maps with different parameters (bacground maps, zoom levels etc). See documentation of [class folium.folium.Map()](http://python-visualization.github.io/folium/docs-v0.5.0/modules.html) for all avaiable options." ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "### Adding layers to the map\n", "\n", "Let's first have a look how we can add a simple marker on the webmap:" ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 6, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Create a Map instance\n", "m = folium.Map(location=[60.20, 24.96],\n", " zoom_start=12, control_scale=True)\n", "\n", "# Add marker\n", "# Run: help(folium.Icon) for more info about icons\n", "folium.Marker(\n", " location=[60.20426, 24.96179],\n", " popup='Kumpula Campus',\n", " icon=folium.Icon(color='green', icon='ok-sign'),\n", ").add_to(m)\n", "\n", "#Show map\n", "m" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "As mentioned, Folium combines the strenghts of data manipulation in Python with the mapping capabilities of Leaflet.js. Eventually, we would like to first manipulate data using Pandas/Geopandas before creating a fancy map.\n", "\n", "Let's first practice by adding the address points (locations of transport stations) onto the Helsinki basemap:\n", "- read input points using Geopandas:" ] }, { "cell_type": "code", "execution_count": 7, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
addressidgeometry
0Kampinkuja 1, 00100 Helsinki, Finland1001POINT (24.9301701 60.1683731)
1Kaivokatu 8, 00101 Helsinki, Finland1002POINT (24.9418933 60.1698665)
2Hermanstads strandsväg 1, 00580 Helsingfors, F...1003POINT (24.9774004 60.18735880000001)
3Itäväylä, 00900 Helsinki, Finland1004POINT (25.0919641 60.21448089999999)
4Tyynenmerenkatu 9, 00220 Helsinki, Finland1005POINT (24.9214846 60.1565781)
\n", "
" ], "text/plain": [ " address id \\\n", "0 Kampinkuja 1, 00100 Helsinki, Finland 1001 \n", "1 Kaivokatu 8, 00101 Helsinki, Finland 1002 \n", "2 Hermanstads strandsväg 1, 00580 Helsingfors, F... 1003 \n", "3 Itäväylä, 00900 Helsinki, Finland 1004 \n", "4 Tyynenmerenkatu 9, 00220 Helsinki, Finland 1005 \n", "\n", " geometry \n", "0 POINT (24.9301701 60.1683731) \n", "1 POINT (24.9418933 60.1698665) \n", "2 POINT (24.9774004 60.18735880000001) \n", "3 POINT (25.0919641 60.21448089999999) \n", "4 POINT (24.9214846 60.1565781) " ] }, "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ "import geopandas as gpd\n", "\n", "# File path\n", "points_fp = r\"data/addresses.shp\"\n", "\n", "# Read the data\n", "points = gpd.read_file(points_fp)\n", "\n", "#Check input data\n", "points.head()" ] }, { "cell_type": "code", "execution_count": 8, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [], "source": [ "# Convert points to GeoJson\n", "points_gjson = folium.features.GeoJson(points, name = \"Public transport stations\")" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "Now we have our population data stored as GeoJSON format which basically contains the\n", "data as text in a similar way that it would be written in the ``.geojson`` -file." ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "- add the points onto the Helsinki basemap" ] }, { "cell_type": "code", "execution_count": 9, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 9, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Create a Map instance\n", "m = folium.Map(location=[60.25, 24.8], tiles = 'cartodbpositron', zoom_start=10, control_scale=True)\n", "\n", "# Add points to the map instance\n", "points_gjson.add_to(m)\n", "\n", "# Alternative syntax for adding points to the map instance\n", "#m.add_child(points_gjson)\n", "\n", "#Show map\n", "m" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "### Heatmap\n", "\n", "[Folium plugins](https://python-visualization.github.io/folium/plugins.html) allow us to use popular plugins available in leaflet. One of these plugins is [HeatMap](https://python-visualization.github.io/folium/plugins.html#folium.plugins.HeatMap), which creates a heatmap layer from input points. \n", "\n", "Let's visualize a heatmap of the public transport stations in Helsinki using the addresses input data. [folium.plugins.HeatMap](https://python-visualization.github.io/folium/plugins.html#folium.plugins.HeatMap) requires a list of points, or a numpy array as input, so we need to first manipulate the data a bit:" ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "collapsed": true, "deletable": true, "editable": true }, "outputs": [], "source": [ "# Get lat and lon coordinates\n", "points['lon'] = points[\"geometry\"].x\n", "points['lat'] = points[\"geometry\"].y\n", "\n", "# Conver lat and lon to numpy array (old method: .as_matrix())\n", "points_array = points[['lat', 'lon']].values" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Check the output:" ] }, { "cell_type": "code", "execution_count": 11, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "\n", "[[60.1683731 24.9301701]\n", " [60.1698665 24.9418933]\n", " [60.1873588 24.9774004]\n", " [60.2144809 25.0919641]\n", " [60.1565781 24.9214846]]\n" ] } ], "source": [ "print(type(points_array))\n", "print(points_array[:5])" ] }, { "cell_type": "code", "execution_count": 12, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 12, "metadata": {}, "output_type": "execute_result" } ], "source": [ "from folium.plugins import HeatMap\n", "\n", "# Create a Map instance\n", "m = folium.Map(location=[60.25, 24.8], tiles = 'stamentoner', zoom_start=10, control_scale=True)\n", "\n", "# Add heatmap to map instance\n", "# Available parameters: HeatMap(data, name=None, min_opacity=0.5, max_zoom=18, max_val=1.0, radius=25, blur=15, gradient=None, overlay=True, control=True, show=True)\n", "HeatMap(points_array).add_to(m)\n", "\n", "# Alternative syntax:\n", "#m.add_child(HeatMap(points_array, radius=15))\n", "\n", "# Show map\n", "m" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "### Choroplet map" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "Next, let's check how we can overlay a population map on top of a basemap using [folium's choropleth method](http://python-visualization.github.io/folium/docs-v0.5.0/modules.html#folium.folium.Map.choropleth). This method is able to read the geometries and attributes directly from a geodataframe. \n", "This example is modified from the [Folium quicksart](https://python-visualization.github.io/folium/quickstart.html#Choropleth-maps).\n", "\n", "- First download the population grid data following instructions from [lesson 3](https://automating-gis-processes.github.io/2018/notebooks/L3/spatial-join.html#Download-and-clean-the-data)\n", "- Read the data using Geopandas" ] }, { "cell_type": "code", "execution_count": 13, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
INDEXASUKKAITAASVALJYYSIKA0_9IKA10_19IKA20_29IKA30_39IKA40_49IKA50_59IKA60_69IKA70_79IKA_YLI80geometry
0688928.0999999999999999999POLYGON Z ((25472499.99532626 6689749.00506918...
1710844.0999999999999999999POLYGON Z ((25472499.99532626 6684249.00413040...
2711590.0999999999999999999POLYGON Z ((25472499.99532626 6683999.00499700...
37151237.0999999999999999999POLYGON Z ((25472499.99532626 6682998.99846143...
4848644.0999999999999999999POLYGON Z ((25472749.99291839 6690249.00333598...
\n", "
" ], "text/plain": [ " INDEX ASUKKAITA ASVALJYYS IKA0_9 IKA10_19 IKA20_29 IKA30_39 \\\n", "0 688 9 28.0 99 99 99 99 \n", "1 710 8 44.0 99 99 99 99 \n", "2 711 5 90.0 99 99 99 99 \n", "3 715 12 37.0 99 99 99 99 \n", "4 848 6 44.0 99 99 99 99 \n", "\n", " IKA40_49 IKA50_59 IKA60_69 IKA70_79 IKA_YLI80 \\\n", "0 99 99 99 99 99 \n", "1 99 99 99 99 99 \n", "2 99 99 99 99 99 \n", "3 99 99 99 99 99 \n", "4 99 99 99 99 99 \n", "\n", " geometry \n", "0 POLYGON Z ((25472499.99532626 6689749.00506918... \n", "1 POLYGON Z ((25472499.99532626 6684249.00413040... \n", "2 POLYGON Z ((25472499.99532626 6683999.00499700... \n", "3 POLYGON Z ((25472499.99532626 6682998.99846143... \n", "4 POLYGON Z ((25472749.99291839 6690249.00333598... " ] }, "execution_count": 13, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Filepaths\n", "fp = \"data/Pop17/Vaestoruudukko_2017.shp\"\n", "\n", "# Read Data\n", "data = gpd.read_file(fp)\n", "\n", "# Check the data\n", "data.head()" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "- re-project layer into WGS 84 (epsg: 4326)\n", "- Modify columns:" ] }, { "cell_type": "code", "execution_count": 14, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "{'no_defs': True, 'init': 'epsg:4326'}\n" ] }, { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
geoidASUKKAITAgeometry
009POLYGON Z ((24.50236241370834 60.3192786485171...
118POLYGON Z ((24.50311210582754 60.2699165231241...
225POLYGON Z ((24.50314612020954 60.2676727893988...
3312POLYGON Z ((24.50328212493893 60.2586977569763...
446POLYGON Z ((24.50681848707329 60.3237829367646...
\n", "
" ], "text/plain": [ " geoid ASUKKAITA geometry\n", "0 0 9 POLYGON Z ((24.50236241370834 60.3192786485171...\n", "1 1 8 POLYGON Z ((24.50311210582754 60.2699165231241...\n", "2 2 5 POLYGON Z ((24.50314612020954 60.2676727893988...\n", "3 3 12 POLYGON Z ((24.50328212493893 60.2586977569763...\n", "4 4 6 POLYGON Z ((24.50681848707329 60.3237829367646..." ] }, "execution_count": 14, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Re-project to WGS84\n", "data = data.to_crs(epsg=4326)\n", "\n", "# Check layer crs definition\n", "print(data.crs)\n", "\n", "# Make a selection (only data above 0 and below 1000)\n", "data = data.loc[(data['ASUKKAITA'] > 0) & (data['ASUKKAITA'] <= 1000)]\n", "\n", "# Create a Geo-id which is needed by the Folium (it needs to have a unique identifier for each row)\n", "data['geoid'] = data.index.astype(str)\n", "\n", "# Select only needed columns\n", "data = data[['geoid', 'ASUKKAITA', 'geometry']]\n", "\n", "# Convert to geojson (not needed for the simple coropleth map!)\n", "#pop_json = data.to_json()\n", "\n", "#check data\n", "data.head()" ] }, { "cell_type": "code", "execution_count": 15, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 15, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Create a Map instance\n", "m = folium.Map(location=[60.25, 24.8], tiles = 'cartodbpositron', zoom_start=10, control_scale=True)\n", "\n", "# Plot a choropleth map\n", "# Notice: 'geoid' column that we created earlier needs to be assigned always as the first column\n", "folium.Choropleth(\n", " geo_data=data,\n", " name='Population in 2017',\n", " data=data,\n", " columns=['geoid', 'ASUKKAITA'],\n", " key_on='feature.id',\n", " fill_color='YlOrRd',\n", " fill_opacity=0.7,\n", " line_opacity=0.2,\n", " line_color='white', \n", " line_weight=0,\n", " highlight=False, \n", " smooth_factor=1.0,\n", " #threshold_scale=[100, 250, 500, 1000, 2000],\n", " legend_name= 'Population in Helsinki').add_to(m)\n", "\n", "#Show map\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Tooltips\n", "\n", "It is possible to add different kinds of pop-up messages and tooltips to the map. Here, it would be nice to see the population of each grid cell when you hover the mouse over the map. Unfortunately this functionality is not apparently implemented implemented in the Choropleth method we used before. \n", "\n", "Add tooltips, we can add tooltips to our map when plotting the polygons as GeoJson objects using the `GeoJsonTooltip` feature. (folliwing examples from [here](http://nbviewer.jupyter.org/gist/jtbaker/57a37a14b90feeab7c67a687c398142c?flush_cache=true) and [here](https://nbviewer.jupyter.org/github/jtbaker/folium/blob/geojsonmarker/examples/GeoJsonMarkersandTooltips.ipynb))\n", "\n", "For a quick workaround, we plot the polygons on top of the coropleth map as a transparent layer, and add the tooltip to these objects. *Note: this is not an optimal solution as now the polygon geometry get's stored twice in the output!*" ] }, { "cell_type": "code", "execution_count": 16, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 16, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Convert points to GeoJson\n", "folium.features.GeoJson(data, name='Labels',\n", " style_function=lambda x: {'color':'transparent','fillColor':'transparent','weight':0},\n", " tooltip=folium.features.GeoJsonTooltip(fields=['ASUKKAITA'],\n", " aliases = ['Population'],\n", " labels=True,\n", " sticky=False\n", " )\n", " ).add_to(m)\n", "\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Rember that you can also save the output as an html file: " ] }, { "cell_type": "code", "execution_count": 17, "metadata": { "collapsed": true }, "outputs": [], "source": [ "outfp = \"results/choropleth_map.html\"\n", "m.save(outfp)" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "### Clustered point map\n", "\n", "Let's visualize the address points (locations of transport stations in Helsinki) on top of the choropleth map using clustered markers." ] }, { "cell_type": "code", "execution_count": 18, "metadata": { "collapsed": true, "deletable": true, "editable": true }, "outputs": [], "source": [ "from folium.plugins import MarkerCluster\n", "\n", "# Create a Clustered map where points are clustered\n", "marker_cluster = MarkerCluster().add_to(m)" ] }, { "cell_type": "code", "execution_count": 19, "metadata": { "collapsed": true, "deletable": true, "editable": true }, "outputs": [], "source": [ "# Create clustered points on top of the map\n", "for idx, row in points.iterrows():\n", " # Get lat and lon of points\n", " lon = row['geometry'].x\n", " lat = row['geometry'].y\n", "\n", " # Get address informatin\n", " address = row['address']\n", " \n", " # Add marker to the marker cluster\n", " folium.RegularPolygonMarker(location=[lat, lon], popup=address, fill_color='#2b8cbe', number_of_sides=6, radius=8).add_to(marker_cluster)" ] }, { "cell_type": "code", "execution_count": 20, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 20, "metadata": {}, "output_type": "execute_result" } ], "source": [ "#Show map:\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Layer control\n", "\n", "We can also add a `LayerControl` object on our map, which allows the user to control which map layers are visible. See the [documentation](http://python-visualization.github.io/folium/docs-v0.5.0/modules.html#folium.map.LayerControl) for available parameters (you can e.g. change the position of the layer control icon)." ] }, { "cell_type": "code", "execution_count": 21, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
" ], "text/plain": [ "" ] }, "execution_count": 21, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Create a layer control object and add it to our map instance\n", "folium.LayerControl().add_to(m)\n", "\n", "#Show map\n", "m" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "## From matplotlib to leaflet using mllpleaflet" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "We can also convert maptlotlib plots directly to interactive web maps using [mllpleaflet](https://github.com/jwass/mplleaflet). \n", "\n", "All you need to do is to:\n", "\n", "1. visualize your data using matplotlib (or geodataframe.plot())\n", "2. convert the plot into a webmap using `mplleaflet.show()`" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "Let's demonstrate this using the static map we plotted earler in this lesson" ] }, { "cell_type": "code", "execution_count": 22, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [], "source": [ "import geopandas as gpd\n", "import matplotlib.pyplot as plt\n", "import mplleaflet" ] }, { "cell_type": "code", "execution_count": 23, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [], "source": [ "# 1.Plot data:\n", "points.plot()\n", "\n", "# 2. Convert plot to a web map:\n", "mplleaflet.show()" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "(the code above opens up a new tab with the visualized map)" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "We can also render the map insite the notebook (following [this example](http://nbviewer.jupyter.org/github/jwass/mplleaflet/blob/master/examples/NYC%20Boroughs.ipynb)):" ] }, { "cell_type": "code", "execution_count": 24, "metadata": { "collapsed": false, "deletable": true, "editable": true }, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "execution_count": 24, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# 1. Plot data:\n", "ax = points.plot(markersize = 50, color = \"red\")\n", "\n", "# 2. Convert plot to a web map:\n", "mplleaflet.display(fig=ax.figure, crs=points.crs)" ] }, { "cell_type": "markdown", "metadata": { "deletable": true, "editable": true }, "source": [ "**TASK:** create a map using your geopandas/matplotlib skills and convert it into a webmap using `mplleaflet.show()`" ] } ], "metadata": { "anaconda-cloud": {}, "kernelspec": { "display_name": "Python gis", "language": "python", "name": "gis" }, "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.5.0" } }, "nbformat": 4, "nbformat_minor": 2 }