Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplestyle #2162

Merged
merged 21 commits into from
Oct 1, 2014
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,314 changes: 2,314 additions & 0 deletions Apps/SampleData/simplestyles.geojson

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions Apps/Sandcastle/gallery/GeoJSON and TopoJSON.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
55 changes: 55 additions & 0 deletions Apps/Sandcastle/gallery/GeoJSON simplestyle.html
Original file line number Diff line number Diff line change
@@ -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>
Binary file added Apps/Sandcastle/gallery/GeoJSON simplestyle.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 87 additions & 0 deletions Apps/Sandcastle/gallery/PinBuilder.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!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.
Cesium.when(pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48), function(canvas){
billboardCollection.add({
image : canvas,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667, 0)
});
});

//Create a black pin labeled with a quesiton mark.
Cesium.when(pinBuilder.fromText('?', Cesium.Color.BLACK, 48), function(canvas){
billboardCollection.add({
image : canvas,
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>
Binary file added Apps/Sandcastle/gallery/PinBuilder.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,19 @@ Change Log
* 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 `GeoJson.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 version of the [maki icon set](https://www.mapbox.com/maki/) for use with `PinBuilder` and GeoJSON simplestyle support.
* Changed default `GeoJSON` Point feature graphics to use `BillboardGraphics` with a blue map pin instead of color `PointGraphics`.

### 1.1 - 2014-09-02

Expand Down
Binary file added Documentation/Images/PinBuilder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Source/Assets/Textures/maki/cesium.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions Source/Assets/Textures/pin.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 60 additions & 0 deletions Source/Core/Color.js
Original file line number Diff line number Diff line change
Expand Up @@ -583,6 +583,66 @@ 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');

result.red = Math.min(1.0, this.red + magnitude);
result.green = Math.min(1.0, this.green + magnitude);
result.blue = Math.min(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');

result.red = Math.max(0.0, this.red - magnitude);
result.green = Math.max(0.0, this.green - magnitude);
result.blue = Math.max(0.0, this.blue - magnitude);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typically, when darkening a color, one uses a multiply instead of a subtract. This is so that colors like bright orange (1.0, 0.5, 0.0) when "darkened" by 0.5 become dark orange (0.5, 0.25, 0.0) instead of dark red (0.5, 0.0, 0.0).

To brighten a color, you flip the effect over by subtracting from 1 before and after the multiply, like so:

    result.red = 1.0 - ((1.0 - this.red) * (1.0 - magnitude));

result.alpha = this.alpha;
return result;
};

/**
* An immutable Color instance initialized to CSS color #F0F8FF
* <span class="colorSwath" style="background: #F0F8FF;"></span>
Expand Down
Loading