Geocoding widget

CHANGES.md

@@ -64,6 +64,7 @@ Beta Releases
 * Added `Primitive.allowPicking` to save memory when picking is not needed.
 * Added `debugShowBoundingVolume`, for debugging primitive rendering, to `Primitive`, `Polygon`, `ExtentPrimitive`, `EllipsoidPrimitive`, `BillboardCollection`, `LabelCollection`, and `PolylineCollection`.
 * Added `DebugModelMatrixPrimitive` for debugging primitive's `modelMatrix`.
+* Added a `Geocoder` widget that allows users to enter an address or the name of a landmark and zoom the camera to that location.  It is enabled by default in applications that use the `Viewer` widget.
 
 ### b21 - 2013-10-01
 

Source/Widgets/BaseLayerPicker/BaseLayerPicker.js

@@ -116,7 +116,7 @@ define([
 
         var element = this._element = document.createElement('button');
         this._element.type = 'button';
-        this._element.className = 'cesium-widget-button cesium-widget-small-icon';
+        this._element.className = 'cesium-widget-button cesium-widget-toolbar-icon';
         this._element.setAttribute('data-bind', 'attr: { title: selectedName }, click: toggleDropDown');
         container.appendChild(this._element);
 

Source/Widgets/CesiumWidget/CesiumWidget.css

@@ -72,7 +72,7 @@
     cursor: default;
 }
 
-.cesium-widget-small-icon {
+.cesium-widget-toolbar-icon {
     box-sizing: border-box;
     width: 32px;
     height: 32px;
@@ -81,14 +81,6 @@
     z-index: 0;  /* Workaround for rounded raster image corners in Chrome */
 }
 
-.cesium-widget-vertical-icon {
-    box-sizing: border-box;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    margin: 3px 0;
-}
-
 .cesium-widget-errorPanel {
     position: absolute;
     top: 0;

Source/Widgets/FullscreenButton/FullscreenButton.js

@@ -48,7 +48,7 @@ define([
 
         this._element = document.createElement('button');
         this._element.type = 'button';
-        this._element.className = 'cesium-widget-button cesium-widget-small-icon cesium-fullscreenButton';
+        this._element.className = 'cesium-widget-button cesium-fullscreenButton';
         this._element.setAttribute('data-bind', '\
 attr: { title: tooltip },\
 click: command,\

Source/Widgets/Geocoder/Geocoder.css

@@ -0,0 +1,45 @@
+.cesium-geocoder-input {
+    border: solid 1px #888;
+    background-color: rgba(40, 40, 40, 0.7);
+    color: white;
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    padding-right: 32px;
+    height: 32px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    opacity: 0.55;
+    -webkit-transition: width ease-in-out 0.25s, opacity ease-in-out 0.25s;
+    -moz-transition: width ease-in-out 0.25s, opacity ease-in-out 0.25s;
+    transition: width ease-in-out 0.25s, opacity ease-in-out 0.25s;
+}
+
+.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input {
+    border-color: #aef;
+    box-shadow: 0 0 8px #fff;
+}
+
+.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input,
+.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus,
+.cesium-viewer-geocoderContainer .cesium-geocoder-input-wide {
+    padding-left: 4px;
+    width: 250px;
+    opacity: 1;
+}
+
+.cesium-geocoder-goButton {
+    display: inline-block;
+    position: absolute;
+    cursor: pointer;
+    width: 32px;
+    top: 1px;
+    right: 1px;
+    height: 32px;
+    vertical-align: middle;
+    fill: #edffff;
+}
+
+.cesium-geocoder-goButton:hover {
+    background-color: rgba(76, 142, 184, 0.8);
+}

Source/Widgets/Geocoder/Geocoder.js

@@ -0,0 +1,157 @@
+/*global define*/
+define([
+        '../../Core/defined',
+        '../../Core/defineProperties',
+        '../../Core/destroyObject',
+        '../../Core/DeveloperError',
+        '../SvgPath/SvgPath',
+        '../getElement',
+        './GeocoderViewModel',
+        '../../ThirdParty/knockout'
+    ], function(
+        defined,
+        defineProperties,
+        destroyObject,
+        DeveloperError,
+        SvgPath,
+        getElement,
+        GeocoderViewModel,
+        knockout) {
+    "use strict";
+
+    var startSearchPath = 'M29.772,26.433l-7.126-7.126c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127L29.772,26.433zM7.203,13.885c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486c-0.007,3.58-2.905,6.476-6.484,6.484C10.106,20.361,7.209,17.465,7.203,13.885z';
+    var stopSearchPath = 'M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z';
+
+    /**
+     * A widget for finding addresses and landmarks, and flying the camera to them.  Geocoding is
+     * performed using the <a href="http://msdn.microsoft.com/en-us/library/ff701715.aspx">Bing Maps Locations API</a>.
+     *
+     * @alias Geocoder
+     * @constructor
+     *
+     * @param {Element|String} description.container The DOM element or ID that will contain the widget.
+     * @param {Scene} description.scene The Scene instance to use.
+     * @param {String} [description.url='http://dev.virtualearth.net'] The base URL of the Bing Maps API.
+     * @param {String} [description.key] The Bing Maps key for your application, which can be
+     *        created at <a href='https://www.bingmapsportal.com/'>https://www.bingmapsportal.com/</a>.
+     *        If this parameter is not provided, {@link BingMapsApi.defaultKey} is used.
+     *        If {@link BingMapsApi.defaultKey} is undefined as well, a message is
+     *        written to the console reminding you that you must create and supply a Bing Maps
+     *        key as soon as possible.  Please do not deploy an application that uses
+     *        this widget without creating a separate key for your application.
+     * @param {Ellipsoid} [description.ellipsoid=Ellipsoid.WGS84] The Scene's primary ellipsoid.
+     * @param {Number} [description.flightDuration=1500] The duration of the camera flight to an entered location, in milliseconds.
+     *
+     * @exception {DeveloperError} description.container is required.
+     * @exception {DeveloperError} description.scene is required.
+     */
+    var Geocoder = function(description) {
+        if (!defined(description) || !defined(description.container)) {
+            throw new DeveloperError('description.container is required.');
+        }
+        if (!defined(description.scene)) {
+            throw new DeveloperError('description.scene is required.');
+        }
+
+        var container = getElement(description.container);
+        var form = document.createElement('form');
+        form.setAttribute('data-bind', 'submit: search');
+
+        var textBox = document.createElement('input');
+        textBox.type = 'text';
+        textBox.className = 'cesium-geocoder-input';
+        textBox.setAttribute('placeholder', 'Enter an address or landmark...');
+        textBox.setAttribute('data-bind', 'value: searchText, valueUpdate: "afterkeydown", css: { "cesium-geocoder-input-wide" : searchText.length > 0 }');
+        form.appendChild(textBox);
+
+        var goButton = document.createElement('span');
+        goButton.className = 'cesium-geocoder-goButton';
+        form.appendChild(goButton);
+
+        container.appendChild(form);
+
+        this._container = container;
+        this._viewModel = new GeocoderViewModel(description);
+        this._form = form;
+        this._svgPath = new SvgPath(goButton, 32, 32, startSearchPath);
+        knockout.applyBindings(this._viewModel, this._container);
+
+        var that = this;
+        this._subscription = knockout.getObservable(this._viewModel, 'isSearchInProgress').subscribe(function(isSearchInProgress) {
+            that._svgPath.path = isSearchInProgress ? stopSearchPath : startSearchPath;
+        });
+
+        this._onInputBegin = function(e) {
+            if (!container.contains(e.target)) {
+                textBox.blur();
+            }
+        };
+
+        this._onInputEnd = function(e) {
+            if (container.contains(e.target)) {
+                textBox.focus();
+            }
+        };
+
+        //We subscribe to both begin and end events in order to give the text box
+        //focus no matter where on the widget is clicked.
+        document.addEventListener('mousedown', this._onInputBegin, true);
+        document.addEventListener('mouseup', this._onInputEnd, true);
+        document.addEventListener('touchstart', this._onInputBegin, true);
+        document.addEventListener('touchend', this._onInputEnd, true);
+    };
+
+    defineProperties(Geocoder.prototype, {
+        /**
+         * Gets the parent container.
+         * @memberof Geocoder.prototype
+         *
+         * @type {Element}
+         */
+        container : {
+            get : function() {
+                return this._container;
+            }
+        },
+
+        /**
+         * Gets the view model.
+         * @memberof Geocoder.prototype
+         *
+         * @type {GeocoderViewModel}
+         */
+        viewModel : {
+            get : function() {
+                return this._viewModel;
+            }
+        }
+    });
+
+    /**
+     * @memberof Geocoder
+     * @returns {Boolean} true if the object has been destroyed, false otherwise.
+     */
+    Geocoder.prototype.isDestroyed = function() {
+        return false;
+    };
+
+    /**
+     * Destroys the widget.  Should be called if permanently
+     * removing the widget from layout.
+     * @memberof Geocoder
+     */
+    Geocoder.prototype.destroy = function() {
+        document.removeEventListener('mousedown', this._onInputBegin, true);
+        document.removeEventListener('mouseup', this._onInputEnd, true);
+        document.removeEventListener('touchstart', this._onInputBegin, true);
+        document.removeEventListener('touchend', this._onInputEnd, true);
+        this._subscription.dispose();
+
+        var container = this._container;
+        knockout.cleanNode(container);
+        container.removeChild(this._form);
+        return destroyObject(this);
+    };
+
+    return Geocoder;
+});