{
"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='' +\n",
" '' +\n",
" 'google.maps.event.addDomListener(window,\"load\",function(){ready=true});' +\n",
" '' +\n",
" '';\n",
" \n",
" // Create the Google Maps container element.\n",
" this.$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 = $('')\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 = $('')\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 = $('')\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 = $('')\n",
" .append($('| Layers |
'))\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 = $('')\n",
" .prop('checked', visible)\n",
" .change(updateOpacity);\n",
" \n",
" var $slider = $('')\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 = $('|
');\n",
" $(' | ').append($checkbox).append(name).appendTo($row);\n",
" $(' | ').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='' +\n",
" '' +\n",
" 'google.maps.event.addDomListener(window,\"load\",function(){ready=true});' +\n",
" '' +\n",
" '';\n",
" \n",
" // Create the Google Maps container element.\n",
" this.$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 = $('')\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 = $('')\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 = $('')\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 = $('')\n",
" .append($('| Layers |
'))\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 = $('')\n",
" .prop('checked', visible)\n",
" .change(updateOpacity);\n",
" \n",
" var $slider = $('')\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 = $('|
');\n",
" $(' | ').append($checkbox).append(name).appendTo($row);\n",
" $(' | ').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": [
""
]
}
],
"prompt_number": 8
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": []
}
],
"metadata": {}
}
]
}