6_2_Interactive_maps.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interactive maps vs static maps"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Why interactive maps?\n",
    "Static maps have been there forever, but it is the era of interactive maps so that the user can interact with them and explore more.\n",
    "\n",
    "Most interactive maps are made with [Leaflet](https://leafletjs.com) or [OpenLayers](https://openlayers.org) JavaScipt library. JavaScript (JS) is a programming language mostly used for adding interactive content (zoom-able, pan-able maps) on webpages.\n",
    "\n",
    "[Folium](https://python-visualization.github.io/folium/quickstart.html) library helps you to visualize data on an interactive Leaflet map.\n",
    "\n",
    "Note: make sure your notebook is on \"Trusted Notebook\" mode by activating it in the \"FILE-->Trusted Notebook\"\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "# First, we are going to make a simple interactive web-map with no data on it. \n",
    "\n",
    "import folium\n",
    "\n",
    "# Create a Map instance\n",
    "m = folium.Map(location=[55.67, 12.57], zoom_start=5, control_scale=True)\n",
    "m # to make sure it comes live"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Let's check Folium's help \n",
    "You can see what tiles you can visualize as basemap in your map such as:\n",
    "- \"OpenStreetMap\"\n",
    "- \"Mapbox Bright\" (Limited levels of zoom for free tiles)\n",
    "- \"Mapbox Control Room\" (Limited levels of zoom for free tiles)\n",
    "- \"Stamen Toner\" (Terrain, Toner, and Watercolor)\n",
    "- \"Cloudmade\" (Must pass API key)\n",
    "- \"Mapbox\" (Must pass API key)\n",
    "- \"CartoDB\" (positron and dark_matter)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "import folium\n",
    "\n",
    "# Create a Map instance and this time add more attributes\n",
    "m = folium.Map(location=[55.67, 12.57], width='100%', height='100%', left='0%', top='0%', tiles=\"Stamen Toner\", zoom_start=4, control_scale=True)\n",
    "m"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# let’s export it to html file on your local driver\n",
    "\n",
    "outfp = \"GIT2_map.html\"\n",
    "m.save(outfp)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "os.getcwd() # where is working direcrtory"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Navigate to the file and open it with a text editor and check the script behind. You can also modify some settings there."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Let's make one more map with AAU in the center**"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import folium\n",
    "\n",
    "# Create a Map instance and this time add more attributes\n",
    "m = folium.Map(location=[55.66, 12.57], width='100%', height='100%', left='0%', top='0%', tiles='Stamen Toner', zoom_start=15, control_scale=True, prefer_canvas=True)\n",
    "m"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Let’s add a simple marker to the webmap.\n",
    "\n",
    "#Create a Map instance\n",
    "m = folium.Map(location=[55.6505, 12.5429],\n",
    "    zoom_start=16, control_scale=True)\n",
    "\n",
    "# Add marker\n",
    "# Run: help(folium.Icon) for more info about icons\n",
    "folium.Marker(\n",
    "    location=[55.6505, 12.5429],\n",
    "    popup='come to Aalborg University',\n",
    "    icon=folium.Icon(color='red', icon='cloud'),\n",
    ").add_to(m)\n",
    "\n",
    "#Show map\n",
    "m\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "and some interesting demos [here](https://python-visualization.github.io/folium/quickstart.html)\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's go to a mountainous area and enjoy a nice terrain map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Let's go to a mountainous area and enjoy a nice terrain map\n",
    "m = folium.Map(location=[45.372, -121.6972], zoom_start=11, tiles='Stamen Terrain')\n",
    "\n",
    "tooltip = 'hooorayuyuuyuy'\n",
    "\n",
    "folium.Marker([45.3288, -121.6625], popup='<i>Mt. Hood Meadows</i>', tooltip=tooltip).add_to(m)\n",
    "folium.Marker([45.3311, -121.7113], popup='<b>Timberline Lodge</b>', tooltip=tooltip).add_to(m)\n",
    "folium.Marker([45.3231, -121.7143], popup='<i>Base camp</i>', tooltip=tooltip).add_to(m)\n",
    "folium.Marker([45.3341, -121.7233], popup='<b>Jumping spot</b>', tooltip=tooltip).add_to(m)\n",
    "\n",
    "m"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "m = folium.Map(location=[55.6505, 12.5429], tiles='Stamen Toner', zoom_start=13)\n",
    "\n",
    "# the red one \n",
    "folium.Circle(\n",
    "    radius=100,\n",
    "    location=[55.6505, 12.5429],\n",
    "    popup='AAU',\n",
    "    color='crimson',\n",
    "    fill=True,\n",
    ").add_to(m)\n",
    "\n",
    "# the blue one\n",
    "folium.CircleMarker(\n",
    "    location=[55.6505, 12.5429],\n",
    "    radius=500,\n",
    "    popup='Area sorrounding AAU',\n",
    "    color='#2ca25f',\n",
    "    fill=False,\n",
    "    fill_color='#2ca25f'\n",
    ").add_to(m)\n",
    "\n",
    "\n",
    "# a function to enable lat/lng pop-overs:\n",
    "m.add_child(folium.LatLngPopup())\n",
    "\n",
    "m"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### link to a color brewer for chosing color  \n",
    "http://colorbrewer2.org/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import IFrame\n",
    "IFrame(src=\"http://colorbrewer2.org/\", width='100%', height='500px')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Reading the rainfall dataset and Convert it to GeoJson\n",
    "import os, sys\n",
    "import folium\n",
    "import geopandas as gpd\n",
    "sys.path.append(os.path.abspath('..')) # set default directory where this notebook is running from\n",
    "\n",
    "cov=gpd.read_file('Data/DK_rainfall.gpkg')\n",
    "\n",
    "\n",
    "# converting geodataframe to geojson and then introducing it to folium as a folium.features.GeoJson object \n",
    "gjson = cov.to_crs(epsg='4326').to_json()\n",
    "\n",
    "res_gjson = folium.features.GeoJson(gjson, name = \"rainfall stations\")\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "cov"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create a Map instance\n",
    "m = folium.Map(location=[55.6716, 12.5970], tiles = 'Stamen Toner', zoom_start=7, control_scale=True)\n",
    "\n",
    "# Add covid polygons to the map instance\n",
    "res_gjson.add_to(m)\n",
    "\n",
    "folium.LayerControl().add_to(m)\n",
    "\n",
    "#Show map\n",
    "m"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## More to do with Folium\n",
    "\n",
    "\n",
    "#### Exercise: \n",
    "\n",
    "Let's explore more visualization possibilities using Folium at [here](https://python-visualization.github.io/folium/)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Part 2: Let's dig more into interactive maps\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[Ipyleaflet](https://ipyleaflet.readthedocs.io/en/latest/#) is also another great library for making interactive maps.  \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here are a few examples and interesting controls that you can add to your map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# let's import some classes of ipyleaflet\n",
    "from ipyleaflet import Map, basemaps, basemap_to_tiles\n",
    "\n",
    "# we create a map instance just like we did with folium\n",
    "\n",
    "m = Map(\n",
    "    layers=(basemap_to_tiles(basemaps.NASAGIBS.ModisTerraTrueColorCR, \"2022-08-03\"), ),\n",
    "    center=(53.204793, 12.121558),\n",
    "    zoom = 5\n",
    ")\n",
    "\n",
    "m\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Note the basemap is a satellite image from [Modis-Terra](https://modis.gsfc.nasa.gov/about/)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# in this exmaple, you can make a split map showing two different kinds of basemaps, left: ESRI world imagery, \n",
    "# Right:Modis-Terra\n",
    "\n",
    "from ipyleaflet import Map, basemaps, basemap_to_tiles, SplitMapControl, FullScreenControl\n",
    "\n",
    "#create map instance with center point and zoom level\n",
    "m = Map(center=(55.68270593245531, 12.557038649382907), zoom=12)\n",
    "\n",
    "# set right and left windows' content, you can set the date of the image. Good luck to find a cloud free image\n",
    "right_layer = basemap_to_tiles(basemaps.Stamen.Terrain)\n",
    "left_layer = basemap_to_tiles(basemaps.Esri.WorldImagery)\n",
    "\n",
    "# add split control\n",
    "control = SplitMapControl(left_layer=left_layer, right_layer=right_layer)\n",
    "m.add_control(control)\n",
    "\n",
    "# add full screen control\n",
    "m.add_control(FullScreenControl())\n",
    "\n",
    "# show the map\n",
    "m\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### check out other kinds of [basemaps](https://ipyleaflet.readthedocs.io/en/latest/api_reference/basemaps.html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "``GeoData`` is an ``ipyleaflet`` class that allows you to visualize a GeoDataFrame on the Map.\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you have a moving object or trajectory data, this might be of interest"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipyleaflet import Map, AntPath\n",
    "\n",
    "m = Map(center=(51.332, 6.853), zoom=10)\n",
    "\n",
    "ant_path = AntPath(\n",
    "    locations=[\n",
    "        [51.185, 6.773], [51.182, 6.752], [51.185, 6.733], [51.194, 6.729],\n",
    "        [51.205, 6.732], [51.219, 6.723], [51.224, 6.723], [51.227, 6.728],\n",
    "        [51.228, 6.734], [51.226, 6.742], [51.221, 6.752], [51.221, 6.758],\n",
    "        [51.224, 6.765], [51.230, 6.768], [51.239, 6.765], [51.246, 6.758],\n",
    "        [51.252, 6.745], [51.257, 6.724], [51.262, 6.711], [51.271, 6.701],\n",
    "        [51.276, 6.702], [51.283, 6.710], [51.297, 6.725], [51.304, 6.732],\n",
    "        [51.312, 6.735], [51.320, 6.734], [51.369, 6.675], [51.373, 6.704],\n",
    "        [51.376, 6.715], [51.385, 6.732], [51.394, 6.741], [51.402, 6.743],\n",
    "        [51.411, 6.742], [51.420, 6.733], [51.429, 6.718], [51.439, 6.711],\n",
    "        [51.448, 6.716], [51.456, 6.724], [51.466, 6.719], [51.469, 6.713],\n",
    "        [51.470, 6.701], [51.473, 6.686], [51.479, 6.680], [51.484, 6.680],\n",
    "        [51.489, 6.685], [51.493, 6.700], [51.497, 6.714]\n",
    "    ],\n",
    "    dash_array=[1, 10],\n",
    "    delay=1000,\n",
    "    color='#7590ba',\n",
    "    pulse_color='#3f6fba'\n",
    ")\n",
    "\n",
    "m.add_layer(ant_path)\n",
    "\n",
    "m"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's expalore more examples of what you can do with iPyleaflet at [here](https://github.com/jupyter-widgets/ipyleaflet/tree/master/examples)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Is it possible to load/visualize satellite images e.g., Sentinel into my Jupyter notebook? \n",
    "\n",
    "Yes, you can add recent and time-specific satellite images into your applicaiton being directly read from a WMS. Check [this](https://sentinelhub-py.readthedocs.io/en/latest/examples/ogc_request.html) out"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}