GoogleMapsWidget-SciPyDemo-NDVI-anomaly.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:d1f9fa7fa078a94a38aab3441e37d3cc2fe858afcf6347cc7ea2712466738852"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%matplotlib inline\n",
      "\n",
      "from __future__ import print_function # For py 2.7 compat\n",
      "\n",
      "import ee\n",
      "import os\n",
      "\n",
      "from IPython.html import widgets\n",
      "from IPython.display import display\n",
      "from IPython.utils import traitlets\n",
      "from IPython.core.display import Javascript"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Create a Google Maps widget."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "class GoogleMapsWidget(widgets.DOMWidget):\n",
      "    _view_name = traitlets.Unicode('GoogleMapsView', sync=True)\n",
      "    value = traitlets.Unicode(sync=True)\n",
      "    description = traitlets.Unicode(sync=True)\n",
      "    lat = traitlets.CFloat(0, help=\"Center latitude, -90 to 90\", sync=True)\n",
      "    lng = traitlets.CFloat(0, help=\"Center longitude, -180 to 180\", sync=True)\n",
      "    zoom = traitlets.CInt(0, help=\"Zoom level, 0 to ~25\", sync=True)\n",
      "    bounds = traitlets.List([], help=\"Visible bounds, [W, S, E, N]\", sync=True)\n",
      "    \n",
      "    def __init__(self, lng=0.0, lat=0.0, zoom=2):\n",
      "        self.lng = lng\n",
      "        self.lat = lat\n",
      "        self.zoom = zoom\n",
      "        \n",
      "    def addLayer(self, image, vis_params=None, name=None, visible=True):\n",
      "        mapid = image.getMapId(vis_params)\n",
      "        self.send({'command':'addLayer', 'mapid': mapid['mapid'], 'token': mapid['token'], 'name': name, 'visible': visible})\n",
      "        \n",
      "    def center(self, lng, lat, zoom=None):\n",
      "        self.send({'command': 'center', 'lng': lng, 'lat': lat, 'zoom': zoom})"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 2
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Add the Javascript code for the widget."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "\n",
      "require([\"widgets/js/widget\"], function(WidgetManager){\n",
      "    var maps = [];\n",
      "    \n",
      "    // Define the GoogleMapsView\n",
      "    var GoogleMapsView = IPython.DOMWidgetView.extend({\n",
      "        \n",
      "        render: function() {\n",
      "            // Resize widget element to be 100% wide\n",
      "            this.$el.css('width', '100%');\n",
      "\n",
      "            // iframe source;  just enough to load Google Maps and let us poll whether initialization is complete\n",
      "            var src='<html style=\"height:100%\"><head>' +\n",
      "                '<scr'+'ipt src=\"http://maps.googleapis.com/maps/api/js?sensor=false\"></scr'+'ipt>' +\n",
      "                '<scr'+'ipt>google.maps.event.addDomListener(window,\"load\",function(){ready=true});</scr'+'ipt>' +\n",
      "                '</head>' +\n",
      "                '<body style=\"height:100%; margin:0px; padding:0px\"></body></html>';\n",
      "            \n",
      "            // Create the Google Maps container element.\n",
      "            this.$iframe = $('<iframe />')\n",
      "                .css('width', '100%')\n",
      "                .css('height', '500px')\n",
      "                .attr('srcdoc', src)\n",
      "                .appendTo(this.$el);\n",
      "                        \n",
      "            var self = this; // hold onto this for initMapWhenReady\n",
      "\n",
      "            // Wait until maps library has finished loading in iframe, then create map\n",
      "            function initMapWhenReady() {\n",
      "                // Iframe document and window\n",
      "                var doc = self.$iframe[0].contentDocument;\n",
      "                var win = self.$iframe[0].contentWindow;\n",
      "                if (!win || !win.ready) {\n",
      "                    // Maps library not yet loaded;  try again soon\n",
      "                    setTimeout(initMapWhenReady, 20);\n",
      "                    return;\n",
      "                }\n",
      "\n",
      "                // Maps library finished loading.  Build map now.\n",
      "                var mapOptions = {\n",
      "                    center: new win.google.maps.LatLng(self.model.get('lat'), self.model.get('lng')),\n",
      "                    zoom: self.model.get('zoom')\n",
      "                };\n",
      "                var mapDiv = $('<div />')\n",
      "                    .css('width', '100%')\n",
      "                    .css('height', '100%')\n",
      "                    .appendTo($(doc.body));\n",
      "                self.map = new win.google.maps.Map(mapDiv[0], mapOptions);\n",
      "                \n",
      "                \n",
      "                // Add an event listeners for user panning, zooming, and resizing map\n",
      "                // TODO(rsargent): Bind self across all methods, and save some plumbing here\n",
      "                win.google.maps.event.addListener(self.map, 'bounds_changed', function () {\n",
      "                    self.handleBoundsChanged();\n",
      "                });\n",
      "                \n",
      "                self.initializeLayersControl();\n",
      "            }\n",
      "            initMapWhenReady();\n",
      "        },\n",
      "        \n",
      "        LayersControl: function(widget, controlDiv, map) {\n",
      "            var win = widget.$iframe[0].contentWindow;\n",
      "            var chicago = new win.google.maps.LatLng(41.850033, -87.6500523);\n",
      "\n",
      "            // Set CSS styles for the DIV containing the control\n",
      "            // Setting padding to 5 px will offset the control\n",
      "            // from the edge of the map.\n",
      "            controlDiv.style.padding = '5px';\n",
      "\n",
      "            // Set CSS for the control border.\n",
      "            var $controlUI = $('<div />')\n",
      "                .css('backgroundColor', 'white')\n",
      "                .css('borderStyle', 'solid')\n",
      "                .css('borderWidth', '1px')\n",
      "                .css('cursor', 'pointer')\n",
      "                .css('textAlign', 'center')\n",
      "                .appendTo($(controlDiv));\n",
      "            \n",
      "            // Set CSS for the control interior.\n",
      "            var $controlContents = $('<div />')\n",
      "                .css('fontFamily', 'Arial,sans-serif')\n",
      "                .css('fontSize', '12px')\n",
      "                .css('paddingLeft', '4px')\n",
      "                .css('paddingRight', '4px')\n",
      "                .css('paddingTop', '0px')\n",
      "                .css('paddingBottom', '0px')\n",
      "                .appendTo($controlUI);\n",
      "            \n",
      "            this.$controlTable = $('<table />')\n",
      "                .append($('<tr><td colspan=2>Layers</td></tr>'))\n",
      "                .appendTo($controlContents);\n",
      "        },\n",
      "\n",
      "        initializeLayersControl: function() {\n",
      "            var doc = this.$iframe[0].contentDocument;\n",
      "            var win = this.$iframe[0].contentWindow;\n",
      "\n",
      "            // Create the DIV to hold the control and call the LayersControl() constructor\n",
      "            // passing in this DIV.\n",
      "    \n",
      "            var layersControlDiv = document.createElement('div');\n",
      "            this.layersControl = new this.LayersControl(this, layersControlDiv, this.map);\n",
      "\n",
      "            layersControlDiv.index = 1;\n",
      "            this.map.controls[win.google.maps.ControlPosition.TOP_RIGHT].push(layersControlDiv);\n",
      "        },\n",
      "        \n",
      "        // Map geometry changed (pan, zoom, resize)\n",
      "        handleBoundsChanged: function() {\n",
      "            this.model.set('lng', this.map.getCenter().lng());\n",
      "            this.model.set('lat', this.map.getCenter().lat());\n",
      "            this.model.set('zoom', this.map.getZoom());\n",
      "            var bounds = this.map.getBounds();\n",
      "            var playgroundCompatible = [bounds.getSouthWest().lng(), bounds.getSouthWest().lat(),\n",
      "                                        bounds.getNorthEast().lng(), bounds.getNorthEast().lat()];\n",
      "            this.model.set('bounds', playgroundCompatible);\n",
      "            this.touch();\n",
      "        },\n",
      "        \n",
      "        // Receive custom messages from Python backend\n",
      "        on_msg: function(msg) {\n",
      "            var win = this.$iframe[0].contentWindow;\n",
      "            if (msg.command == 'addLayer') {\n",
      "                this.addLayer(msg.mapid, msg.token, msg.name, msg.visible);\n",
      "            } else if (msg.command == 'center') {\n",
      "                this.map.setCenter(new win.google.maps.LatLng(msg.lat, msg.lng));\n",
      "                if (msg.zoom !== null) {\n",
      "                    this.map.setZoom(msg.zoom);\n",
      "                }\n",
      "            }\n",
      "        },\n",
      "        \n",
      "        // Add an Earth Engine layer\n",
      "        addLayer: function(mapid, token, name, visible) {\n",
      "            var win = this.$iframe[0].contentWindow;\n",
      "            var eeMapOptions = {\n",
      "                getTileUrl: function(tile, zoom) {\n",
      "                    var url = ['https://earthengine.googleapis.com/map',\n",
      "                               mapid, zoom, tile.x, tile.y].join(\"/\");\n",
      "                    url += '?token=' + token\n",
      "                    return url;\n",
      "                },\n",
      "                tileSize: new win.google.maps.Size(256, 256),\n",
      "                opacity: visible ? 1.0 : 0.0,\n",
      "            };\n",
      "            \n",
      "            // Create the overlay map type\n",
      "            var mapType = new win.google.maps.ImageMapType(eeMapOptions);\n",
      "                \n",
      "            // Overlay the Earth Engine generated layer\n",
      "            this.map.overlayMapTypes.push(mapType);\n",
      "\n",
      "            // Update layer visibility control\n",
      "            var maxSlider = 100;\n",
      "            \n",
      "            function updateOpacity() {\n",
      "                mapType.setOpacity($checkbox[0].checked ? $slider[0].value / 100.0 : 0);\n",
      "            }\n",
      "            \n",
      "            var $checkbox = $('<input type=\"checkbox\">')\n",
      "                .prop('checked', visible)\n",
      "                .change(updateOpacity);\n",
      "            \n",
      "            var $slider = $('<input type=\"range\" />')\n",
      "                .prop('min', 0)\n",
      "                .prop('max', maxSlider)\n",
      "                .prop('value', maxSlider)\n",
      "                .css('width', '60px')\n",
      "                .on('input', updateOpacity);\n",
      "\n",
      "            // If user doesn't specify a layer name, create a default\n",
      "            if (name === null) {\n",
      "                name = 'Layer ' + this.map.overlayMapTypes.length;\n",
      "            }\n",
      "            \n",
      "            var $row = $('<tr />');\n",
      "            $('<td align=\"left\" />').append($checkbox).append(name).appendTo($row);\n",
      "            $('<td />').append($slider).appendTo($row);\n",
      "\n",
      "            this.layersControl.$controlTable.append($row);\n",
      "        }\n",
      "    });\n",
      "    \n",
      "    // Register the GoogleMapsView with the widget manager.\n",
      "    WidgetManager.register_widget_view('GoogleMapsView', GoogleMapsView);\n",
      "});\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "require([\"widgets/js/widget\"], function(WidgetManager){\n",
        "    var maps = [];\n",
        "    \n",
        "    // Define the GoogleMapsView\n",
        "    var GoogleMapsView = IPython.DOMWidgetView.extend({\n",
        "        \n",
        "        render: function() {\n",
        "            // Resize widget element to be 100% wide\n",
        "            this.$el.css('width', '100%');\n",
        "\n",
        "            // iframe source;  just enough to load Google Maps and let us poll whether initialization is complete\n",
        "            var src='<html style=\"height:100%\"><head>' +\n",
        "                '<scr'+'ipt src=\"http://maps.googleapis.com/maps/api/js?sensor=false\"></scr'+'ipt>' +\n",
        "                '<scr'+'ipt>google.maps.event.addDomListener(window,\"load\",function(){ready=true});</scr'+'ipt>' +\n",
        "                '</head>' +\n",
        "                '<body style=\"height:100%; margin:0px; padding:0px\"></body></html>';\n",
        "            \n",
        "            // Create the Google Maps container element.\n",
        "            this.$iframe = $('<iframe />')\n",
        "                .css('width', '100%')\n",
        "                .css('height', '500px')\n",
        "                .attr('srcdoc', src)\n",
        "                .appendTo(this.$el);\n",
        "                        \n",
        "            var self = this; // hold onto this for initMapWhenReady\n",
        "\n",
        "            // Wait until maps library has finished loading in iframe, then create map\n",
        "            function initMapWhenReady() {\n",
        "                // Iframe document and window\n",
        "                var doc = self.$iframe[0].contentDocument;\n",
        "                var win = self.$iframe[0].contentWindow;\n",
        "                if (!win || !win.ready) {\n",
        "                    // Maps library not yet loaded;  try again soon\n",
        "                    setTimeout(initMapWhenReady, 20);\n",
        "                    return;\n",
        "                }\n",
        "\n",
        "                // Maps library finished loading.  Build map now.\n",
        "                var mapOptions = {\n",
        "                    center: new win.google.maps.LatLng(self.model.get('lat'), self.model.get('lng')),\n",
        "                    zoom: self.model.get('zoom')\n",
        "                };\n",
        "                var mapDiv = $('<div />')\n",
        "                    .css('width', '100%')\n",
        "                    .css('height', '100%')\n",
        "                    .appendTo($(doc.body));\n",
        "                self.map = new win.google.maps.Map(mapDiv[0], mapOptions);\n",
        "                \n",
        "                \n",
        "                // Add an event listeners for user panning, zooming, and resizing map\n",
        "                // TODO(rsargent): Bind self across all methods, and save some plumbing here\n",
        "                win.google.maps.event.addListener(self.map, 'bounds_changed', function () {\n",
        "                    self.handleBoundsChanged();\n",
        "                });\n",
        "                \n",
        "                self.initializeLayersControl();\n",
        "            }\n",
        "            initMapWhenReady();\n",
        "        },\n",
        "        \n",
        "        LayersControl: function(widget, controlDiv, map) {\n",
        "            var win = widget.$iframe[0].contentWindow;\n",
        "            var chicago = new win.google.maps.LatLng(41.850033, -87.6500523);\n",
        "\n",
        "            // Set CSS styles for the DIV containing the control\n",
        "            // Setting padding to 5 px will offset the control\n",
        "            // from the edge of the map.\n",
        "            controlDiv.style.padding = '5px';\n",
        "\n",
        "            // Set CSS for the control border.\n",
        "            var $controlUI = $('<div />')\n",
        "                .css('backgroundColor', 'white')\n",
        "                .css('borderStyle', 'solid')\n",
        "                .css('borderWidth', '1px')\n",
        "                .css('cursor', 'pointer')\n",
        "                .css('textAlign', 'center')\n",
        "                .appendTo($(controlDiv));\n",
        "            \n",
        "            // Set CSS for the control interior.\n",
        "            var $controlContents = $('<div />')\n",
        "                .css('fontFamily', 'Arial,sans-serif')\n",
        "                .css('fontSize', '12px')\n",
        "                .css('paddingLeft', '4px')\n",
        "                .css('paddingRight', '4px')\n",
        "                .css('paddingTop', '0px')\n",
        "                .css('paddingBottom', '0px')\n",
        "                .appendTo($controlUI);\n",
        "            \n",
        "            this.$controlTable = $('<table />')\n",
        "                .append($('<tr><td colspan=2>Layers</td></tr>'))\n",
        "                .appendTo($controlContents);\n",
        "        },\n",
        "\n",
        "        initializeLayersControl: function() {\n",
        "            var doc = this.$iframe[0].contentDocument;\n",
        "            var win = this.$iframe[0].contentWindow;\n",
        "\n",
        "            // Create the DIV to hold the control and call the LayersControl() constructor\n",
        "            // passing in this DIV.\n",
        "    \n",
        "            var layersControlDiv = document.createElement('div');\n",
        "            this.layersControl = new this.LayersControl(this, layersControlDiv, this.map);\n",
        "\n",
        "            layersControlDiv.index = 1;\n",
        "            this.map.controls[win.google.maps.ControlPosition.TOP_RIGHT].push(layersControlDiv);\n",
        "        },\n",
        "        \n",
        "        // Map geometry changed (pan, zoom, resize)\n",
        "        handleBoundsChanged: function() {\n",
        "            this.model.set('lng', this.map.getCenter().lng());\n",
        "            this.model.set('lat', this.map.getCenter().lat());\n",
        "            this.model.set('zoom', this.map.getZoom());\n",
        "            var bounds = this.map.getBounds();\n",
        "            var playgroundCompatible = [bounds.getSouthWest().lng(), bounds.getSouthWest().lat(),\n",
        "                                        bounds.getNorthEast().lng(), bounds.getNorthEast().lat()];\n",
        "            this.model.set('bounds', playgroundCompatible);\n",
        "            this.touch();\n",
        "        },\n",
        "        \n",
        "        // Receive custom messages from Python backend\n",
        "        on_msg: function(msg) {\n",
        "            var win = this.$iframe[0].contentWindow;\n",
        "            if (msg.command == 'addLayer') {\n",
        "                this.addLayer(msg.mapid, msg.token, msg.name, msg.visible);\n",
        "            } else if (msg.command == 'center') {\n",
        "                this.map.setCenter(new win.google.maps.LatLng(msg.lat, msg.lng));\n",
        "                if (msg.zoom !== null) {\n",
        "                    this.map.setZoom(msg.zoom);\n",
        "                }\n",
        "            }\n",
        "        },\n",
        "        \n",
        "        // Add an Earth Engine layer\n",
        "        addLayer: function(mapid, token, name, visible) {\n",
        "            var win = this.$iframe[0].contentWindow;\n",
        "            var eeMapOptions = {\n",
        "                getTileUrl: function(tile, zoom) {\n",
        "                    var url = ['https://earthengine.googleapis.com/map',\n",
        "                               mapid, zoom, tile.x, tile.y].join(\"/\");\n",
        "                    url += '?token=' + token\n",
        "                    return url;\n",
        "                },\n",
        "                tileSize: new win.google.maps.Size(256, 256),\n",
        "                opacity: visible ? 1.0 : 0.0,\n",
        "            };\n",
        "            \n",
        "            // Create the overlay map type\n",
        "            var mapType = new win.google.maps.ImageMapType(eeMapOptions);\n",
        "                \n",
        "            // Overlay the Earth Engine generated layer\n",
        "            this.map.overlayMapTypes.push(mapType);\n",
        "\n",
        "            // Update layer visibility control\n",
        "            var maxSlider = 100;\n",
        "            \n",
        "            function updateOpacity() {\n",
        "                mapType.setOpacity($checkbox[0].checked ? $slider[0].value / 100.0 : 0);\n",
        "            }\n",
        "            \n",
        "            var $checkbox = $('<input type=\"checkbox\">')\n",
        "                .prop('checked', visible)\n",
        "                .change(updateOpacity);\n",
        "            \n",
        "            var $slider = $('<input type=\"range\" />')\n",
        "                .prop('min', 0)\n",
        "                .prop('max', maxSlider)\n",
        "                .prop('value', maxSlider)\n",
        "                .css('width', '60px')\n",
        "                .on('input', updateOpacity);\n",
        "\n",
        "            // If user doesn't specify a layer name, create a default\n",
        "            if (name === null) {\n",
        "                name = 'Layer ' + this.map.overlayMapTypes.length;\n",
        "            }\n",
        "            \n",
        "            var $row = $('<tr />');\n",
        "            $('<td align=\"left\" />').append($checkbox).append(name).appendTo($row);\n",
        "            $('<td />').append($slider).appendTo($row);\n",
        "\n",
        "            this.layersControl.$controlTable.append($row);\n",
        "        }\n",
        "    });\n",
        "    \n",
        "    // Register the GoogleMapsView with the widget manager.\n",
        "    WidgetManager.register_widget_view('GoogleMapsView', GoogleMapsView);\n",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x108af6190>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Initialize Earth Engine."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# This script assumes your authentication credentials are stored as operatoring system\n",
      "# environment variables.\n",
      "MY_SERVICE_ACCOUNT = os.environ.get('MY_SERVICE_ACCOUNT')\n",
      "MY_PRIVATE_KEY_FILE = os.environ.get('MY_PRIVATE_KEY_FILE')\n",
      "\n",
      "# Initialize the Earth Engine object, using your authentication credentials.\n",
      "ee.Initialize(ee.ServiceAccountCredentials(MY_SERVICE_ACCOUNT, MY_PRIVATE_KEY_FILE))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stderr",
       "text": [
        "WARNING:oauth2client.util:new_request() takes at most 1 positional argument (4 given)\n"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Normalized Difference Vegetation Index Anomaly Example"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import datetime\n",
      "\n",
      "# Define a comparison time interval.\n",
      "testDateStart = datetime.datetime(2014, 1, 1)\n",
      "testDateEnd = datetime.datetime(2015, 1, 1)\n",
      "\n",
      "# Define a reference time interval.\n",
      "referenceDateStart = datetime.datetime(2000, 1, 1)\n",
      "referenceDateEnd = datetime.datetime(2014, 1, 1)\n",
      "\n",
      "# Define date range within year that is used for comparison.\n",
      "dayOfYearTarget = 10\n",
      "dayOfYearInterval = 8 # interval length in days \n",
      "\n",
      "dayOfYearStart = dayOfYearTarget - 0.5 * dayOfYearInterval\n",
      "dayOfYearEnd = dayOfYearTarget + 0.5 * dayOfYearInterval\n",
      "\n",
      "base_collection_ndvi = ee.ImageCollection('MCD43A4_NDVI')\n",
      "base_collection_ndsi = ee.ImageCollection('MCD43A4_NDSI')\n",
      "\n",
      "# define the visualization parameters\n",
      "vizNdvi = {\n",
      "    'min': 0, 'max': 1,\n",
      "    'palette': ','.join(\n",
      "            [\"FFFFFF\",\"CE7E45\",\"DF923D\",\"F1B555\",\"FCD163\",\"99B718\",\"74A901\",\"66A000\",\"529400\",\n",
      "             \"3E8601\",\"207401\",\"056201\",\"004C00\",\"023B01\",\"012E01\",\"011D01\",\"011301\"])\n",
      "  }\n",
      "vizNdsi = {\n",
      "    'min': -1, 'max': 1,\n",
      "    'palette': 'FF0000,000000,0000FF'\n",
      "  }\n",
      "vizAnomaly = {\n",
      "    'min':-0.4, 'max':0.4, \n",
      "    'palette': ','.join(\n",
      "        [\"87000A\",\"7C3E28\",\"EC712C\",\"FABF45\",\"FFFFFF\",\"51FF78\",\"3DCF4C\",\"215229\",\"0B260B\"])\n",
      "  }\n",
      "thresholdAnomaly = 0.01 # suppresses the display of low values\n",
      "vizLandcover = {\n",
      "    'min':0, 'max':17,\n",
      "    'palette': ','.join([\n",
      "      'aec3d4', # water\n",
      "      '152106', '225129', '369b47', '30eb5b', '387242', # forest\n",
      "      '6a2325', 'c3aa69', 'b76031', 'd9903d', '91af40',  # shrub, grass, savanah\n",
      "      '111149', # wetlands\n",
      "      'cdb33b', # croplands\n",
      "      'cc0013', # urban\n",
      "      '33280d', # crop mosaic\n",
      "      'd7cdcc', # snow and ice\n",
      "      'f7e084', # barren\n",
      "      '6f6f6f'  # tundra\n",
      "    ])}\n",
      "\n",
      "# create a land mask\n",
      "landcover = (ee.Image('MCD12Q1/MCD12Q1_005_2009_01_01')\n",
      "              .select('Land_Cover_Type_1'))\n",
      "landMask = landcover.neq(0)\n",
      "\n",
      "# create a agricultural area mask\n",
      "agMask = landcover.eq(12)\n",
      "\n",
      "# create a filter object that selects data based on the day-of-year\n",
      "dayOfYearFilter = ee.Filter(\n",
      "    ee.Filter.calendarRange(dayOfYearStart, dayOfYearEnd, 'day_of_year')\n",
      "  )\n",
      "\n",
      "# target collection\n",
      "test_collection = (base_collection_ndvi\n",
      "    .filterDate(testDateStart, testDateEnd)\n",
      "    .filter(dayOfYearFilter))\n",
      "\n",
      "# target collection - NDSI\n",
      "test_collection_ndsi = (base_collection_ndsi\n",
      "    .filterDate(testDateStart, testDateEnd)\n",
      "    .filter(dayOfYearFilter))\n",
      "\n",
      "# reference collection\n",
      "reference_collection = (base_collection_ndvi\n",
      "    .filterDate(referenceDateStart, referenceDateEnd)\n",
      "    .filter(dayOfYearFilter))\n",
      "\n",
      "anomaly = test_collection.median().subtract(reference_collection.median())\n",
      "\n",
      "# Mask out non-agricultural areas, and snowy areas (NDSI>0)\n",
      "#mask = agMask.and(test_collection_ndsi.median().lte(0))\n",
      "mask = test_collection_ndsi.median().lte(0)\n",
      "\n",
      "map = GoogleMapsWidget(lat=0, lng=0, zoom=2)\n",
      "display(map)\n",
      "\n",
      "map.addLayer(\n",
      "    image=landcover,\n",
      "    vis_params=vizLandcover,           \n",
      "    name=\"landcover\",\n",
      "    visible=False)\n",
      "map.addLayer(\n",
      "    image=ee.Image(0),\n",
      "    vis_params={'palette':\"000000\", 'opacity':0.5},           \n",
      "    name=\"background\",\n",
      "    visible=True)\n",
      "map.addLayer(\n",
      "    image=reference_collection.median().mask(mask),\n",
      "    vis_params=vizNdvi,           \n",
      "    name=\"Median of Reference Collection\",\n",
      "    visible=False)\n",
      "map.addLayer(\n",
      "    test_collection.median().mask(mask),\n",
      "    vis_params=vizNdvi,           \n",
      "    name=\"Median of Test Collection\",\n",
      "    visible=False)\n",
      "map.addLayer(\n",
      "    test_collection.median().mask(mask),\n",
      "    vis_params=vizNdsi,           \n",
      "    name=\"Median of Test Collection NDSI\",\n",
      "    visible=False)\n",
      "map.addLayer(\n",
      "    anomaly.mask(anomaly.abs().gte(thresholdAnomaly).multiply(mask)),\n",
      "    vis_params=vizAnomaly,           \n",
      "    name=\"NDVI anomaly (test - reference)\",\n",
      "    visible=True)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stderr",
       "text": [
        "WARNING:oauth2client.util:new_request() takes at most 1 positional argument (4 given)\n"
       ]
      },
      {
       "output_type": "stream",
       "stream": "stderr",
       "text": [
        "WARNING:oauth2client.util:new_request() takes at most 1 positional argument (4 given)\n"
       ]
      },
      {
       "output_type": "stream",
       "stream": "stderr",
       "text": [
        "WARNING:oauth2client.util:new_request() takes at most 1 positional argument (4 given)\n"
       ]
      },
      {
       "output_type": "stream",
       "stream": "stderr",
       "text": [
        "WARNING:oauth2client.util:new_request() takes at most 1 positional argument (4 given)\n"
       ]
      },
      {
       "output_type": "stream",
       "stream": "stderr",
       "text": [
        "WARNING:oauth2client.util:new_request() takes at most 1 positional argument (4 given)\n"
       ]
      },
      {
       "output_type": "stream",
       "stream": "stderr",
       "text": [
        "WARNING:oauth2client.util:new_request() takes at most 1 positional argument (4 given)\n"
       ]
      }
     ],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    }
   ],
   "metadata": {}
  }
 ]
}