GoogleMapsWidget-SciPyDemo-Classification.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:024b3a08803d4d4ced32d24e7bf7ca1e011dd5c36e57509dac1b57fcd8df22ef"
 },
 "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 0x10943b190>"
       ]
      }
     ],
     "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": [
      "Nile Delta Classification example"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "map = GoogleMapsWidget(lat=31.073, lng=30.732, zoom=8)\n",
      "display(map)\n",
      "\n",
      "composite = ee.Image(\"L7_TOA_1YEAR_2000\")\n",
      "\n",
      "bands = [\"10\", \"20\", \"30\", \"40\", \"50\", \"62\", \"70\"]\n",
      "\n",
      "# Use the MCD12 land-cover as training data.\n",
      "cover = ee.Image(\"MCD12Q1/MCD12Q1_005_2001_01_01\").select(\"Land_Cover_Type_1\")\n",
      "\n",
      "# A region of the image to train with.\n",
      "region = ee.Geometry.Rectangle(30, 30, 32.5, 31.6)\n",
      "\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",
      "    '8dc33b', # croplands\n",
      "    'cc0013', # urban\n",
      "    '6ca80d', # crop mosaic\n",
      "    'd7cdcc', # snow and ice\n",
      "    'f7e084', # barren\n",
      "    '6f6f6f'  # tundra\n",
      "])\n",
      "\n",
      "map.addLayer(\n",
      "    image=composite, \n",
      "    vis_params={'min':0, 'max':100, 'bands':\"30,20,10\"}, \n",
      "    name='Landsat 7 TOA 2000')\n",
      "map.addLayer(\n",
      "    image=cover,\n",
      "    vis_params={'palette': PALETTE, 'min':0, 'max':17},\n",
      "    name='MODIS land-cover',\n",
      "    visible=False)\n",
      "\n",
      "# Multiple trainings with different numbers of points.\n",
      "nums = [1000, 10000, 100000]\n",
      "for num in nums:\n",
      "    # Extract random points.\n",
      "    points = ee.FeatureCollection.randomPoints(region, num, num, 1)\n",
      "    training = cover.addBands(composite).reduceToVectors(\n",
      "        reducer=\"mean\",\n",
      "        geometry=points,\n",
      "        geometryType=\"centroid\",\n",
      "        scale=30, \n",
      "        crs=\"EPSG:4326\"\n",
      "    )\n",
      "    \n",
      "    classifier = training.trainClassifier(\n",
      "        property_list=bands,\n",
      "        class_property=\"label\",\n",
      "        classifier_name=\"FastNaiveBayes\"\n",
      "    )\n",
      "\n",
      "    # Apply the classifier to the original composite.\n",
      "    out = composite.classify(classifier)\n",
      "    map.addLayer(\n",
      "        image=out,\n",
      "        vis_params={'palette': PALETTE, 'min':0, 'max':17},\n",
      "        name=\"{0} points\".format(num),\n",
      "        visible=False\n",
      "    )\n",
      "\n",
      "# Add the region that constrains the random sampling.\n",
      "map.addLayer(\n",
      "        image=ee.Image().paint(ee.Feature(region), 0, 2),\n",
      "        name=\"Region\"\n",
      ")"
     ],
     "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
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    }
   ],
   "metadata": {}
  }
 ]
}