Improved time slider example #335

gee-community · Mar 5, 2021 · 34bc658 · 34bc658
1 parent c696f7b
commit 34bc658
Show file tree

Hide file tree

Showing 5 changed files with 216 additions and 10 deletions.
diff --git a/docs/notebooks/62_time_slider.ipynb b/docs/notebooks/62_time_slider.ipynb
@@ -19,6 +19,13 @@
     "# geemap.update_package()"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Visualizing weather data"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -29,7 +36,7 @@
    "source": [
     "Map = geemap.Map()\n",
     "\n",
-    "ee_object = ee.ImageCollection('NOAA/GFS0P25') \\\n",
+    "collection = ee.ImageCollection('NOAA/GFS0P25') \\\n",
     "  .filterDate('2018-12-22', '2018-12-23') \\\n",
     "  .limit(24) \\\n",
     "  .select('temperature_2m_above_ground')\n",
@@ -40,14 +47,108 @@
     "  'palette': ['blue', 'purple', 'cyan', 'green', 'yellow', 'red']\n",
     "}\n",
     "\n",
-    "labels = [str(n).zfill(2) + \":00\" for n in range(0, 24)]\n",
+    "first_image = collection.first()\n",
     "\n",
+    "Map.addLayer(first_image, vis_params, \"First image\")\n",
     "Map.setCenter(-0.3490, 25.7900, 2)\n",
-    "Map.add_time_slider(ee_object, vis_params, labels=labels, time_interval=1)\n",
+    "Map"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "image = collection.toBands()\n",
+    "Map.addLayer(image, {}, \"Time series\", False)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "labels = [str(n).zfill(2) + \":00\" for n in range(0, 24)]\n",
+    "labels"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Map.add_time_slider(collection, vis_params, labels=labels, time_interval=1)\n",
+    "Map"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Visualizing vegetation data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "Map = geemap.Map()\n",
+    "\n",
+    "collection = ee.ImageCollection('MODIS/MCD43A4_006_NDVI') \\\n",
+    "                  .filter(ee.Filter.date('2018-04-01', '2018-05-01')) \\\n",
+    "                  .select(\"NDVI\")\\\n",
+    "\n",
+    "vis_params = {\n",
+    "  'min': 0.0,\n",
+    "  'max': 1.0,\n",
+    "  'palette': [\n",
+    "    'FFFFFF', 'CE7E45', 'DF923D', 'F1B555', 'FCD163', '99B718', '74A901',\n",
+    "    '66A000', '529400', '3E8601', '207401', '056201', '004C00', '023B01',\n",
+    "    '012E01', '011D01', '011301'\n",
+    "  ],\n",
+    "}\n",
     "\n",
+    "first_image = collection.first()\n",
+    "\n",
+    "Map.addLayer(first_image, vis_params, \"First image\")\n",
+    "Map.setCenter(-7.03125, 31.0529339857, 2)\n",
     "Map"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "image = collection.toBands()\n",
+    "Map.addLayer(image, {}, \"Time series\", False)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "labels = collection.aggregate_array(\"system:index\").getInfo()\n",
+    "Map.add_time_slider(collection, vis_params, labels=labels, time_interval=1)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Visualizing Landsat imagery"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -57,10 +158,10 @@
     "Map = geemap.Map()\n",
     "\n",
     "bands = ['B1', 'B2', 'B3', 'B4', 'B5', 'B7']\n",
-    "ee_object = ee.Image('LE7_TOA_5YEAR/1999_2003').select(bands)\n",
+    "image = ee.Image('LE7_TOA_5YEAR/1999_2003').select(bands)\n",
     "vis_params = {'min': 20, 'max': 200, 'gamma': 2.0}\n",
     "\n",
-    "Map.add_time_slider(ee_object, vis_params, labels=bands, time_interval=1)\n",
+    "Map.add_time_slider(image, vis_params, labels=bands, time_interval=1)\n",
     "\n",
     "Map"
    ]

diff --git a/docs/tutorials.md b/docs/tutorials.md
@@ -69,3 +69,4 @@ More video tutorials for geemap and Earth Engine are available on my [YouTube ch
 59. Accessing 477 whitebox tools for geospatial and hydrologcal analysis ([video](https://youtu.be/n8ODeZpuyCE) | gif | [notebook](https://geemap.org/notebooks/59_whitebox))
 60. Visualizing Earth Engine data with over 200 colormaps through dot notation ([video](https://youtu.be/RBCf7wgK3Cg) | gif | [notebook](https://geemap.org/notebooks/60_colormaps))
 61. Adding a scale bar to a cartoee map (video | gif | [notebook](https://geemap.org/notebooks/61_cartoee_scalebar))
+62. Using the time slider for visualizing Earth Engine time-series images ([video](https://youtu.be/w_nWkNz8fyI) | gif | [notebook](https://geemap.org/notebooks/62_time_slider))
diff --git a/examples/README.md b/examples/README.md
@@ -80,6 +80,7 @@ More video tutorials for geemap and Earth Engine are available on my [YouTube ch
 59. Accessing 477 whitebox tools for geospatial and hydrologcal analysis ([video](https://youtu.be/n8ODeZpuyCE) | gif | [notebook](https://geemap.org/notebooks/59_whitebox))
 60. Visualizing Earth Engine data with over 200 colormaps through dot notation ([video](https://youtu.be/RBCf7wgK3Cg) | gif | [notebook](https://geemap.org/notebooks/60_colormaps))
 61. Adding a scale bar to a cartoee map (video | gif | [notebook](https://geemap.org/notebooks/61_cartoee_scalebar))
+62. Using the time slider for visualizing Earth Engine time-series images ([video](https://youtu.be/w_nWkNz8fyI) | gif | [notebook](https://geemap.org/notebooks/62_time_slider))
 
 ### 1. Introducing the geemap Python package for interactive mapping with Google Earth Engine
 

diff --git a/examples/notebooks/62_time_slider.ipynb b/examples/notebooks/62_time_slider.ipynb
@@ -19,6 +19,13 @@
     "# geemap.update_package()"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Visualizing weather data"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -29,7 +36,7 @@
    "source": [
     "Map = geemap.Map()\n",
     "\n",
-    "ee_object = ee.ImageCollection('NOAA/GFS0P25') \\\n",
+    "collection = ee.ImageCollection('NOAA/GFS0P25') \\\n",
     "  .filterDate('2018-12-22', '2018-12-23') \\\n",
     "  .limit(24) \\\n",
     "  .select('temperature_2m_above_ground')\n",
@@ -40,14 +47,108 @@
     "  'palette': ['blue', 'purple', 'cyan', 'green', 'yellow', 'red']\n",
     "}\n",
     "\n",
-    "labels = [str(n).zfill(2) + \":00\" for n in range(0, 24)]\n",
+    "first_image = collection.first()\n",
     "\n",
+    "Map.addLayer(first_image, vis_params, \"First image\")\n",
     "Map.setCenter(-0.3490, 25.7900, 2)\n",
-    "Map.add_time_slider(ee_object, vis_params, labels=labels, time_interval=1)\n",
+    "Map"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "image = collection.toBands()\n",
+    "Map.addLayer(image, {}, \"Time series\", False)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "labels = [str(n).zfill(2) + \":00\" for n in range(0, 24)]\n",
+    "labels"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Map.add_time_slider(collection, vis_params, labels=labels, time_interval=1)\n",
+    "Map"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Visualizing vegetation data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "Map = geemap.Map()\n",
+    "\n",
+    "collection = ee.ImageCollection('MODIS/MCD43A4_006_NDVI') \\\n",
+    "                  .filter(ee.Filter.date('2018-04-01', '2018-05-01')) \\\n",
+    "                  .select(\"NDVI\")\\\n",
+    "\n",
+    "vis_params = {\n",
+    "  'min': 0.0,\n",
+    "  'max': 1.0,\n",
+    "  'palette': [\n",
+    "    'FFFFFF', 'CE7E45', 'DF923D', 'F1B555', 'FCD163', '99B718', '74A901',\n",
+    "    '66A000', '529400', '3E8601', '207401', '056201', '004C00', '023B01',\n",
+    "    '012E01', '011D01', '011301'\n",
+    "  ],\n",
+    "}\n",
     "\n",
+    "first_image = collection.first()\n",
+    "\n",
+    "Map.addLayer(first_image, vis_params, \"First image\")\n",
+    "Map.setCenter(-7.03125, 31.0529339857, 2)\n",
     "Map"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "image = collection.toBands()\n",
+    "Map.addLayer(image, {}, \"Time series\", False)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "labels = collection.aggregate_array(\"system:index\").getInfo()\n",
+    "Map.add_time_slider(collection, vis_params, labels=labels, time_interval=1)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Visualizing Landsat imagery"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -57,10 +158,10 @@
     "Map = geemap.Map()\n",
     "\n",
     "bands = ['B1', 'B2', 'B3', 'B4', 'B5', 'B7']\n",
-    "ee_object = ee.Image('LE7_TOA_5YEAR/1999_2003').select(bands)\n",
+    "image = ee.Image('LE7_TOA_5YEAR/1999_2003').select(bands)\n",
     "vis_params = {'min': 20, 'max': 200, 'gamma': 2.0}\n",
     "\n",
-    "Map.add_time_slider(ee_object, vis_params, labels=bands, time_interval=1)\n",
+    "Map.add_time_slider(image, vis_params, labels=bands, time_interval=1)\n",
     "\n",
     "Map"
    ]

diff --git a/geemap/geemap.py b/geemap/geemap.py
@@ -4617,10 +4617,12 @@ def pause_click(b):
         pause_btn.on_click(pause_click)
 
         def slider_changed(change):
+            self.default_style = {"cursor": "wait"}
             index = slider.value - 1
             label.value = labels[index]
             image = ee.Image(ee_object.toList(ee_object.size()).get(index))
             self.addLayer(image, vis_params, layer_name)
+            self.default_style = {"cursor": "default"}
 
         slider.observe(slider_changed, "value")