Issue #954: Balloon Widget

Source/DynamicScene/GeoJsonDataSource.css

@@ -0,0 +1,7 @@
+.geoJsonDataSourceTable tr:nth-child(even) {
+    background: #EEEEEE;
+}
+
+.geoJsonDataSourceTable tr:nth-child(odd) {
+    background: #CCCCCC;
+}

Source/DynamicScene/GeoJsonDataSource.js

@@ -54,6 +54,13 @@ define([
         return value;
     };
 
+    ConstantPositionProperty.prototype.getValueCartographic = function(time, result) {
+        if (Array.isArray(this._value)) {
+            return Ellipsoid.WGS84.cartesianArrayToCartographicArray(this._value, result);
+        }
+        return Ellipsoid.WGS84.cartesianToCartographic(this._value, result);
+    };
+
     //GeoJSON specifies only the Feature object has a usable id property
     //But since "multi" geometries create multiple dynamicObject,
     //we can't use it for them either.
@@ -70,8 +77,25 @@ define([
             }
             id = finalId;
         }
+
         var dynamicObject = dynamicObjectCollection.getOrCreateObject(id);
         dynamicObject.geoJson = geoJson;
+        dynamicObject.balloon = {
+            getValue : function() {
+                var html;
+                var properties = geoJson.properties;
+                if (typeof properties !== 'undefined') {
+                    html = '<table class="geoJsonDataSourceTable">';
+                    for ( var key in properties) {
+                        if (properties.hasOwnProperty(key)) {
+                            html += '<tr><td>' + key + '</td><td>' + properties[key] + '</td></tr>';
+                        }
+                    }
+                    html += '</table>';
+                }
+                return html;
+            }
+        };
         return dynamicObject;
     }
 

Source/Widgets/Balloon/Balloon.css

@@ -0,0 +1,103 @@
+.cesium-balloon-wrapper {
+    position: absolute;
+    font-size: 10pt;
+    background-color: #fff;
+    border-radius: 5px;
+    z-index: 1;
+    border: 1px solid #ccc;
+    padding: 5px;
+    min-height: 28px;
+    min-width: 28px;
+}
+
+.cesium-balloon-content {
+    overflow: auto;
+    margin-right: 20px;
+}
+
+.cesium-balloon-point-container{
+    position: absolute;
+    overflow: hidden;
+    z-index: 2;
+}
+
+.cesium-balloon-point-container-downup {
+    height: 16px;
+    width: 32px;
+}
+
+.cesium-balloon-point-container-leftright {
+    height: 32px;
+    width: 16px;
+}
+
+.cesium-balloon-point {
+    background-color: #fff;
+    height: 20px;
+    width: 20px;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border: 1px solid #ccc;
+}
+
+.cesium-balloon-point-down {
+    margin-left: 5px;
+    margin-top: -11px;
+}
+
+.cesium-balloon-point-up {
+    margin-left: 5px;
+    margin-top: 5px;
+}
+
+.cesium-balloon-point-left {
+    margin-top: 5px;
+    margin-left: 5px;
+}
+
+.cesium-balloon-point-right {
+    margin-left: -11px;
+    margin-top: 5px;
+}
+
+.cesium-balloon-wrapper-visible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.2s linear;
+    -webkit-transition: opacity 0.2s linear;
+    -moz-transition: opacity 0.2s linear;
+}
+
+.cesium-balloon-wrapper-hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 0.2s, opacity 0.2s linear;
+    -webkit-transition: visibility 0s 0.2s, opacity 0.2s linear;
+    -moz-transition: visibility 0s 0.2s, opacity 0.2s linear;
+}
+
+.cesium-balloon-point-show{
+    visibility: visible;
+}
+
+.cesium-balloon-point-hide{
+    visibility: hidden;
+}
+
+.cesium-balloon-close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 16px;
+    width: 16px;
+    display: block;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAl9JREFUSEullL1OG0EUhbegXPc8AEXKSLigoKBISZkHQLZl8fcWLt3kp4gEic07+AEoIp7ABQWFSz+AS4rN983e3YzZmCBxpSPfe+ac2Zk74ylexpei7P8serPbovc0K3qVMJf7yljIuoGgvCl6d2Faggk4C0zBClRq1IatDsgS8gHBGnwOeivg98AIbNTqiaE0gV/W/CGonYHm2En0JMJ9QbjsT4kgyI/AfpTW+3JRWrut6ps9oUEzit8x1pg34BFoFOZy+SQrG+sEdvs6+OZrGlyVv3mer2qq18TBk+BTKASNsWM2qNM23j9BbGEU/Euzv3meb2GStmAjKBbBO/DWJi5TEz0KCr/QXlOF4LVjPAX1MRpcijnE1hJ3BZoDsGb586Dq/8Gv+io7ycegO8HYiWa1eoKuQ+JHUd4ieAYL4L3XIK7BPajQ3HTMeXwvykObE6eTjtFczrGQ7Y7BYNC/uLiYgaerq6tKmMs5FrJuICjPz8/vwrQEE3AWmIIVqNSoDVsdkOXl5eUDgjX453sAvwdGYKNWTwylCfyy5v++B2iOnURPIobDYR/CZbfvAfkRaO+EuVyU1m6r0uveZxTte6AQbMAj0CjM5fJJVnqdwG637wF5Y3BV/uZ5vqqpXhMHt/7OCkFj7JgN6rSN908QW2jfA4WgMfub5/kWJmkLNoKifQ/I39rEpd78GNtrqhC8doynoD5Gg0sxh9ha4q5AcwDWfP3ve8DVbK6yk+x8Dxg70axWT9B1SIzH41sEz2ABvPcaxDW4BxWam445j9FodGhz7LAGYS7nWMgiiuIPrDnc+wQrd0kAAAAASUVORK5CYII=) bottom;
+    text-indent: -99999px;
+}
+
+.cesium-balloon-close:hover {
+    background-position: 0 0;
+}

Source/Widgets/Balloon/Balloon.js

@@ -0,0 +1,136 @@
+/*global define*/
+define([
+        '../../Core/defineProperties',
+        '../../Core/DeveloperError',
+        '../../Core/destroyObject',
+        '../getElement',
+        './BalloonViewModel',
+        '../../ThirdParty/knockout'
+    ], function(
+        defineProperties,
+        DeveloperError,
+        destroyObject,
+        getElement,
+        BalloonViewModel,
+        knockout) {
+    "use strict";
+
+    /**
+     * A widget for displaying data in a balloon pointing to a picked object
+     *
+     * @alias Balloon
+     * @constructor
+     *
+     * @param {Element|String} container The DOM element or ID that will contain the widget.
+     * @param {Scene} scene The Scene instance to use.
+     *
+     * @exception {DeveloperError} container is required.
+     * @exception {DeveloperError} Element with id "container" does not exist in the document.
+     *
+     * @see Fullscreen
+     */
+    var Balloon = function(container, scene) {
+        if (typeof container === 'undefined') {
+            throw new DeveloperError('container is required.');
+        }
+
+        container = getElement(container);
+
+        this._container = container;
+        container.setAttribute('data-bind',
+                'css: { "cesium-balloon-wrapper-visible" : showBalloon, "cesium-balloon-wrapper-hidden" : !showBalloon }');
+        var el = document.createElement('div');
+        this._element = el;
+        el.className = 'cesium-balloon-wrapper';
+        container.appendChild(el);
+        el.setAttribute('data-bind', 'style: { "bottom" : _positionY, "left" : _positionX}');
+
+        var contentWrapper = document.createElement('div');
+        contentWrapper.className = 'cesium-balloon-content';
+        contentWrapper.setAttribute('data-bind', 'style: {"max-width": _maxWidth, "max-height": _maxHeight}');
+        el.appendChild(contentWrapper);
+        var ex = document.createElement('a');
+        ex.href = '#';
+        ex.className = 'cesium-balloon-close';
+        ex.setAttribute('data-bind', 'click: function(){showBalloon = false; return false;}');
+        el.appendChild(ex);
+
+
+        this._content = document.createElement('div');
+        contentWrapper.appendChild(this._content);
+        this._content.setAttribute('data-bind', 'html: _contentHTML');
+        var pointContainer = document.createElement('div');
+        pointContainer.className = 'cesium-balloon-point-container';
+        pointContainer.setAttribute('data-bind',
+                'css: { "cesium-balloon-point-container-downup" : _down || _up, "cesium-balloon-point-container-leftright" : _left || _right,\
+                "cesium-balloon-point-show" : showPoint, "cesium-balloon-point-hide" : !showPoint},\
+                style: { "bottom" : _pointY, "left" : _pointX}');
+        var point = document.createElement('div');
+        point.className = 'cesium-balloon-point';
+        point.setAttribute('data-bind',
+                'css: { "cesium-balloon-point-down" : _down,\
+                        "cesium-balloon-point-up" : _up,\
+                        "cesium-balloon-point-left" : _left,\
+                        "cesium-balloon-point-right" : _right}');
+        pointContainer.appendChild(point);
+        container.appendChild(pointContainer);
+
+        var viewModel = new BalloonViewModel(scene, this._element, this._container);
+        this._viewModel = viewModel;
+
+        this._pointContainer = pointContainer;
+        this._point = point;
+        this._contentWrapper = contentWrapper;
+
+        knockout.applyBindings(this._viewModel, this._container);
+    };
+
+    defineProperties(Balloon.prototype, {
+        /**
+         * Gets the parent container.
+         * @memberof Balloon.prototype
+         *
+         * @type {Element}
+         */
+        container : {
+            get : function() {
+                return this._container;
+            }
+        },
+
+        /**
+         * Gets the view model.
+         * @memberof Balloon.prototype
+         *
+         * @type {BalloonViewModel}
+         */
+        viewModel : {
+            get : function() {
+                return this._viewModel;
+            }
+        }
+    });
+
+    /**
+     * @memberof Balloon
+     * @returns {Boolean} true if the object has been destroyed, false otherwise.
+     */
+    Balloon.prototype.isDestroyed = function() {
+        return false;
+    };
+
+    /**
+     * Destroys the widget.  Should be called if permanently
+     * removing the widget from layout.
+     * @memberof Balloon
+     */
+    Balloon.prototype.destroy = function() {
+        var container = this._container;
+        knockout.cleanNode(container);
+        container.removeChild(this._element);
+        container.removeChild(this._pointContainer);
+        return destroyObject(this);
+    };
+
+    return Balloon;
+});