define_google_maps_interactive_widget.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:583e825c258d06f85ddedee1e31a550f57b842102b2fbdc2890365559c0d21e0"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Create a Google Maps widget"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.html import widgets\n",
      "from IPython.utils import traitlets"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 6
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Define the Python component of the 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, 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": 7
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Define the Javascript code for the widget.\n"
     ]
    },
    {
     "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', '300px')\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",
      "});"
     ],
     "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', '300px')\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 0x106aeeed0>"
       ]
      }
     ],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}