{
"cells": [
{
"cell_type": "markdown",
"metadata": {
"tags": []
},
"source": [
"# Interactive plots with Ipyleaflet"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Overview:\n",
"1. Interactively display images from remote map servers with ipyleaflet\n",
"2. Overlay gridded data on the interactive map "
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
" Older Enivronment Note that we are using an older Python 3 environment in this notebook! The ipyleaflet package is currently incompatible with the version of Jupyterlab that we have been using this semester.\n",
"
"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Prerequisites\n",
"\n",
"| Concepts | Importance | Notes |\n",
"| --- | --- | --- |\n",
"| Contextily | |\n",
"| Xarray | |\n",
"\n",
"* **Time to learn**: 20 minutes\n",
"***"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Imports"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"from datetime import datetime, timedelta\n",
"from ipyleaflet import Map, TileLayer, basemaps, basemap_to_tiles\n",
"from ipyleaflet.velocity import Velocity\n",
"import xarray as xr"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Interactively display images from remote map servers with ipyleaflet"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"While we've made some nice looking maps so far in the course, they are all *static* images ... i.e., they can only be viewed ... not interacted with. Most of us have browsed interactive map-based websites, such as Google Maps, where we can use our mouse or touch-enabled screen to move around, zoom in or out, or otherwise intereact with the plot. The **Javascript** programming language is what makes this interactivity possible. Here, we will use a Python package, [ipyleaflet](https://ipyleaflet.readthedocs.io/en/latest/), as a \"bridge\" to Javascript."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"
Note: The \"leaflet\" in
ipyleaflet refers to the
Leaflet open-source Javascript library.\n",
"
\n",
" Note: ipyleaflet can read in Xarray DataArray objects so we will exploit that here.\n",
"
"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Read in a dataset based on the 0.5-degree resolution GFS on a given date and time."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"ds = xr.open_dataset('https://thredds.ucar.edu/thredds/dodsC/grib/NCEP/GFS/Global_0p5deg_ana/GFS_Global_0p5deg_ana_'+ timeStr2 +'.grib2')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Examine the dataset"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"ds"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Specify an analysis time, and then create `DataArray` objects that are subset for the specified time and the 20m AGL level (this is the lowest level in the dataset)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"u = ds['u-component_of_wind_height_above_ground'].sel(time=timeObj,height_above_ground1=20)\n",
"v = ds['v-component_of_wind_height_above_ground'].sel(time=timeObj,height_above_ground1=20)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Create a Dataset that contains just the wind components"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"ipyleaflet's `Velocity` method produces an animated streamline effect. It accepts an Xarray dataset that contains just two arrays ... specifically, the u- and v- components of the wind vector we have chosen for visualization.\n",
"\n",
"(Perhaps there is a more efficient way of doing this, but the following cell will create a new Xarray Dataset that consists of just two arrays ... u and v.)"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"# First create the Dataset out of the 'u' Dataarray\n",
"dsWind = u.to_dataset()\n",
"\n",
"# Append v to the Dataset\n",
"dsWind['v'] = v\n",
"\n",
"# Rename the u DataArray to 'u'\n",
"name_dict = {'u-component_of_wind_height_above_ground':'u'}\n",
"dsWind = dsWind.rename_vars(name_dict)\n",
"\n",
"# Verify that the Dataset looks ok\n",
"dsWind"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Create the animation"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Center it, specify a zoom level, and select a background map; create and add a velocity layer from the Dataset that contains u and v."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"center = (40.0, -70.0)\n",
"zoom = 6\n",
"m = Map(center=center, zoom=zoom, interpolation='nearest', basemap=basemaps.CartoDB.DarkMatter)\n",
"\n",
"\n",
"display_options = {\n",
" 'velocityType': 'Global Wind',\n",
" 'displayPosition': 'bottomleft',\n",
" 'displayEmptyString': 'No wind data'\n",
"}\n",
"wind = Velocity(data=dsWind,\n",
" zonal_speed='u',\n",
" meridional_speed='v',\n",
" latitude_dimension='lat',\n",
" longitude_dimension='lon',\n",
" velocity_scale=0.01,\n",
" max_velocity=120,\n",
" display_options=display_options)\n",
"m.add_layer(wind)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Display the map."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"m"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"If you move your mouse/touchpad, you will see direction and speed at the nearest gridpoint displayed at the bottom left of the frame."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"
Things to try: \n",
"
- Create a velocity map using gridded data from another source ... such as RDA or another datasource from the Unidata THREDDS Server.
\n",
" - Make this notebook dynamic in terms of date so it will always provide a recent (e.g. one day ago) visualization.