Merge pull request #2162 from AnalyticalGraphicsInc/simplestyle

Simplestyle
CesiumGS · Oct 1, 2014 · bd558c8 · bd558c8
2 parents 20238ba + 9d2a314
commit bd558c8
Show file tree

Hide file tree

Showing 16 changed files with 3,358 additions and 70 deletions.
diff --git a/Apps/SampleData/simplestyles.geojson b/Apps/SampleData/simplestyles.geojson
diff --git a/Apps/Sandcastle/gallery/GeoJSON and TopoJSON.html b/Apps/Sandcastle/gallery/GeoJSON and TopoJSON.html
@@ -33,9 +33,7 @@
 
 //Example 1: Load a GeoJSON or TopoJSON file with default settings.
 Sandcastle.addDefaultToolbarButton('Basic loading', function() {
-    var dataSource = new Cesium.GeoJsonDataSource();
-    viewer.dataSources.add(dataSource);
-    dataSource.loadUrl('../../SampleData/ne_10m_us_states.topojson');
+    viewer.dataSources.add(Cesium.GeoJsonDataSource.fromUrl('../../SampleData/ne_10m_us_states.topojson'));
 });
 
 //Example 2: Apply custom graphics to a GeoJSON or TopoJSON file 

diff --git a/Apps/Sandcastle/gallery/GeoJSON simplestyle.html b/Apps/Sandcastle/gallery/GeoJSON simplestyle.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Load GeoJSON with simplestyle information.">
+    <meta name="cesium-sandcastle-labels" content="Showcases, DataSources">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar"></div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    "use strict";
+//Sandcastle_Begin
+//Create the viewer
+//Create the viewer
+var viewer = new Cesium.Viewer('cesiumContainer', {timeline : false, animation : false});
+Cesium.viewerEntityMixin(viewer);
+
+//Load a GeoJSON file containing simplestyle information.
+//To learn more about simplestyle, see https://github.com/mapbox/simplestyle-spec
+viewer.dataSources.add(Cesium.GeoJsonDataSource.fromUrl('../../SampleData/simplestyles.geojson'));
+
+//Set the camera to view the data.
+var camera = viewer.scene.camera;
+camera.viewRectangle(Cesium.Rectangle.fromDegrees(-0.1, 0.2, 1.5, -1.1));
+
+//In this particular example, the name of each entity is set to its maki icon identifier.
+//Clicking on each billboard will show it's identifier in the InfoBox.
+//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/GeoJSON simplestyle.jpg b/Apps/Sandcastle/gallery/GeoJSON simplestyle.jpg
diff --git a/Apps/Sandcastle/gallery/PinBuilder.html b/Apps/Sandcastle/gallery/PinBuilder.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Load GeoJSON with simplestyle information.">
+    <meta name="cesium-sandcastle-labels" content="Showcases, Tutorial">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar"></div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    "use strict";
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer', {timeline : false, animation : false});
+
+var pinBuilder = new Cesium.PinBuilder();
+var billboardCollection = new Cesium.BillboardCollection();
+viewer.scene.primitives.add(billboardCollection);
+
+//Create a blank, solid colored pin.
+billboardCollection.add({
+    image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48),
+    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
+    position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667, 0)
+});
+
+//Create a black pin labeled with a quesiton mark.
+billboardCollection.add({
+    image : pinBuilder.fromText('?', Cesium.Color.BLACK, 48),
+    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
+    position : Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071, 0)
+});
+
+//Create a green pin labeled with a png file on the server.
+var url = Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png');
+Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function(canvas){
+    billboardCollection.add({
+        image : canvas,
+        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
+        position : Cesium.Cartesian3.fromDegrees(-75.1705217, 39.921786, 0)
+    });
+});
+
+//Create a red pin representing a hospital from the maki icon set.
+Cesium.when(pinBuilder.fromMakiIconId('hospital', Cesium.Color.RED, 48), function(canvas) {
+    billboardCollection.add({
+        image : canvas,
+        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
+        position : Cesium.Cartesian3.fromDegrees(-75.1698606, 39.9211275, 0)
+    });
+});
+
+//Set the view to the location of our pins.
+var camera = viewer.scene.camera;
+camera.lookAt(Cesium.Cartesian3.fromDegrees(-75.1703817, 39.9182722, 250),
+              Cesium.Cartesian3.fromDegrees(-75.1703817, 39.9212722, 0), Cesium.Cartesian3.UNIT_Z);//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/PinBuilder.jpg b/Apps/Sandcastle/gallery/PinBuilder.jpg
diff --git a/CHANGES.md b/CHANGES.md
@@ -6,17 +6,22 @@ Change Log
 * Deprecated
   * Types implementing the `TerrainProvider` interface should now include the new `getTileDataAvailable` function.  The function will be required starting in Cesium 1.4.
 * Fixed model orientations to follow the same Z-up convention used throughout Cesium. There was also an orientation issue fixed in the [online model converter](http://cesiumjs.org/convertmodel.html). If you are having orientation issues after updating, try reconverting your models.
-* Fixed a bug in `Model` where the wrong animations could be used when the model was created from glTF JSON instead of 
-a url to a glTF file.  [#2078](https://github.com/AnalyticalGraphicsInc/cesium/issues/2078)
+* Fixed a bug in `Model` where the wrong animations could be used when the model was created from glTF JSON instead of a url to a glTF file.  [#2078](https://github.com/AnalyticalGraphicsInc/cesium/issues/2078)
 * Fixed a bug in `GeoJsonDataSource` which was causing polygons with height values to be drawn onto the surface.
+* Fixed a bug that could cause a crash when quickly adding and removing imagery layers.
 * Eliminated imagery artifacts at some zoom levels due to Mercator reprojection.
+* Added support for the GeoJSON [simplestyle specification](https://github.com/mapbox/simplestyle-spec). ([Sandcastle example](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20simplestyle.html))
+* Added `GeoJsonDataSource.fromUrl` to make it easy to add a data source in less code.
+* Added `PinBuilder` class for easy creation of map pins. ([Sandcastle example](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=PinBuilder.html))
+* Added `Color.brighten` and `Color.darken` to make it easy to brighten or darker a color instance.
 * Added a constructor option to `Scene`, `CesiumWidget`, and `Viewer` to disable order independent translucency.
 * Added support for WKID 102113 (equivalent to 102100) to `ArcGisMapServerImageryProvider`.
 * Added `TerrainProvider.getTileDataAvailable` to improve tile loading performance when camera starts near globe.
 * Added `Globe.showWaterEffect` to enable/disable the water effect for supported terrain providers.
 * Added `Globe.baseColor` to set the color of the globe when no imagery is available.
-* Fixed a bug that could crash a crash when quickly adding and removing imagery layers.
-* Cesium now ships with a default web.config file to simplify IIS deployment.  
+* Changed default `GeoJSON` Point feature graphics to use `BillboardGraphics` with a blue map pin instead of color `PointGraphics`.
+* Cesium now ships with a version of the [maki icon set](https://www.mapbox.com/maki/) for use with `PinBuilder` and GeoJSON simplestyle support.
+* Cesium now ships with a default web.config file to simplify IIS deployment.
 
 ### 1.1 - 2014-09-02
 

diff --git a/Documentation/Images/PinBuilder.png b/Documentation/Images/PinBuilder.png
diff --git a/Source/Assets/Textures/maki/cesium.png b/Source/Assets/Textures/maki/cesium.png
diff --git a/Source/Assets/Textures/pin.svg b/Source/Assets/Textures/pin.svg
diff --git a/Source/Core/Color.js b/Source/Core/Color.js
@@ -583,6 +583,68 @@ define([
         return scratchUint32Array[0];
     };
 
+    /**
+     * Brightens this color by the provided magnitude.
+     *
+     * @param {Number} magnitude A positive number indicating the amount to brighten.
+     * @param {Color} result The object onto which to store the result.
+     * @returns {Color} The modified result parameter.
+     *
+     * @example
+     * var brightBlue = Cesium.Color.BLUE.brighten(0.5, new Color());
+     */
+    Color.prototype.brighten = function(magnitude, result) {
+        //>>includeStart('debug', pragmas.debug);
+        if (!defined(magnitude)) {
+            throw new DeveloperError('magnitude is required.');
+        }
+        if (magnitude < 0.0) {
+            throw new DeveloperError('magnitude must be positive.');
+        }
+        if (!defined(result)) {
+            throw new DeveloperError('result is required.');
+        }
+        //>>includeEnd('debug');
+
+        magnitude = (1.0 - magnitude);
+        result.red = 1.0 - ((1.0 - this.red) * magnitude);
+        result.green = 1.0 - ((1.0 - this.green) * magnitude);
+        result.blue = 1.0 - ((1.0 - this.blue) * magnitude);
+        result.alpha = this.alpha;
+        return result;
+    };
+
+    /**
+     * Darkens this color by the provided magnitude.
+     *
+     * @param {Number} magnitude A positive number indicating the amount to darken.
+     * @param {Color} result The object onto which to store the result.
+     * @returns {Color} The modified result parameter.
+     *
+     * @example
+     * var darkBlue = Cesium.Color.BLUE.darken(0.5, new Color());
+     */
+    Color.prototype.darken = function(magnitude, result) {
+        //>>includeStart('debug', pragmas.debug);
+        if (!defined(magnitude)) {
+            throw new DeveloperError('magnitude is required.');
+        }
+        if (magnitude < 0.0) {
+            throw new DeveloperError('magnitude must be positive.');
+        }
+        if (!defined(result)) {
+            throw new DeveloperError('result is required.');
+        }
+        //>>includeEnd('debug');
+
+        magnitude = (1.0 - magnitude);
+        result.red = this.red * magnitude;
+        result.green = this.green * magnitude;
+        result.blue = this.blue * magnitude;
+        result.alpha = this.alpha;
+        return result;
+    };
+
     /**
      * An immutable Color instance initialized to CSS color #F0F8FF
      * <span class="colorSwath" style="background: #F0F8FF;"></span>