From 34803cf78b228e17b846fda9bf2c7df8b38eeeea Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Sat, 9 Mar 2013 17:18:41 +0100 Subject: [PATCH] Add semi-transparent layer example --- examples/semi-transparent-layer.html | 52 ++++++++++++++++++++++++++++ examples/semi-transparent-layer.js | 29 ++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 examples/semi-transparent-layer.html create mode 100644 examples/semi-transparent-layer.js diff --git a/examples/semi-transparent-layer.html b/examples/semi-transparent-layer.html new file mode 100644 index 0000000000..a70a848f59 --- /dev/null +++ b/examples/semi-transparent-layer.html @@ -0,0 +1,52 @@ + + + + + + + + + + Semi-transparent layer example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Semi-transparent layer example

+

Example of a map with a semi-transparent layer.

+
+

See the semi-transparent-layer.js source to see how this is done.

+
+
transparent, mapquest, tilejson
+
+ +
+ +
+ + + + + diff --git a/examples/semi-transparent-layer.js b/examples/semi-transparent-layer.js new file mode 100644 index 0000000000..7bc30def94 --- /dev/null +++ b/examples/semi-transparent-layer.js @@ -0,0 +1,29 @@ +goog.require('ol.Coordinate'); +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.projection'); +goog.require('ol.source.MapQuestOpenAerial'); +goog.require('ol.source.TileJSON'); + + +var map = new ol.Map({ + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.MapQuestOpenAerial() + }), + new ol.layer.TileLayer({ + source: new ol.source.TileJSON({ + uri: 'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp' + }) + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: ol.projection.transform( + new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'), + zoom: 5 + }) +});