ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #267 from twpayne/stamen-fixes

Browse Source 
Stamen fixes
This commit is contained in:
Tom Payne
2013-03-05 02:14:21 -08:00
parent 8fd25749c0 6f2d15bb5f
commit 68919b5ee3
5 changed files with 155 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/stamen.html
+42
View File
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
html, body, #map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#text {
position: absolute;
top: 8px;
right: 8px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
border-radius: 4px;
}
</style>
<title>Stamen example</title>
</head>
<body>
<div id="map">
<div id="text">
<h1 id="title">Stamen example</h1>
<div id="shortdesc">Example of a Stamen tile source.</div>
<div id="docs">
<p>See the
<a href="stamen.js" target="_blank">stamen.js source</a>
to see how this is done.</p>
</div>
</div>
</div>
<div id="tags">fullscreen, stamen, tilelayer</div>
<script src="loader.js?id=stamen" type="text/javascript"></script>
</body>
</html>
examples/stamen.js
+31
View File
@@ -0,0 +1,31 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.Stamen');
var layers = new ol.Collection([
new ol.layer.TileLayer({
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.TileLayer({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
]);
var map = new ol.Map({
layers: layers,
renderers: ol.RendererHints.createFromQueryData(),
scaleLineControl: true,
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 3
})
});
src/objectliterals.exports
+5 -2
View File
@@ -113,8 +113,11 @@
@exportObjectLiteralProperty ol.source.SingleImageWMSOptions.url string|undefined @exportObjectLiteralProperty ol.source.SingleImageWMSOptions.url string|undefined
@exportObjectLiteral ol.source.StamenOptions @exportObjectLiteral ol.source.StamenOptions
@exportObjectLiteralProperty ol.source.StamenOptions.flavor string|undefined @exportObjectLiteralProperty ol.source.StamenOptions.layer string
@exportObjectLiteralProperty ol.source.StamenOptions.provider string @exportObjectLiteralProperty ol.source.StamenOptions.minZoom number|undefined
@exportObjectLiteralProperty ol.source.StamenOptions.maxZoom number|undefined
@exportObjectLiteralProperty ol.source.StamenOptions.opaque boolean|undefined
@exportObjectLiteralProperty ol.source.StamenOptions.url string|undefined
@exportObjectLiteral ol.source.StaticImageOptions @exportObjectLiteral ol.source.StaticImageOptions
@exportObjectLiteralProperty ol.source.StaticImageOptions.attributions Array.<ol.Attribution>|undefined @exportObjectLiteralProperty ol.source.StaticImageOptions.attributions Array.<ol.Attribution>|undefined
src/ol/source/stamen.exports
-20
View File
@@ -1,21 +1 @@
@exportSymbol ol.source.Stamen @exportSymbol ol.source.Stamen
@exportSymbol ol.source.StamenFlavor
@exportProperty ol.source.StamenFlavor.TERRAIN_BACKGROUND
@exportProperty ol.source.StamenFlavor.TERRAIN_LABELS
@exportProperty ol.source.StamenFlavor.TERRAIN_LINES
@exportProperty ol.source.StamenFlavor.TONER_2010
@exportProperty ol.source.StamenFlavor.TONER_2011
@exportProperty ol.source.StamenFlavor.TONER_2011_LABELS
@exportProperty ol.source.StamenFlavor.TONER_2011_LINES
@exportProperty ol.source.StamenFlavor.TONER_2011_LITE
@exportProperty ol.source.StamenFlavor.TONER_BACKGROUND
@exportProperty ol.source.StamenFlavor.TONER_HYBRID
@exportProperty ol.source.StamenFlavor.TONER_LABELS
@exportProperty ol.source.StamenFlavor.TONER_LINES
@exportProperty ol.source.StamenFlavor.TONER_LITE
@exportSymbol ol.source.StamenProvider
@exportProperty ol.source.StamenProvider.TERRAIN
@exportProperty ol.source.StamenProvider.TONER
@exportProperty ol.source.StamenProvider.WATERCOLOR
src/ol/source/stamensource.js
+77 -55
View File
@@ -1,61 +1,76 @@
// FIXME Configure minZoom when supported by TileGrid
goog.provide('ol.source.Stamen'); goog.provide('ol.source.Stamen');
goog.provide('ol.source.StamenFlavor');
goog.provide('ol.source.StamenProvider');
goog.require('ol.Attribution'); goog.require('ol.Attribution');
goog.require('ol.source.XYZ'); goog.require('ol.source.XYZ');
/** /**
* @enum {string} * @type {Object.<string, {extension: string, opaque: boolean}>}
*/ */
ol.source.StamenFlavor = { ol.source.StamenLayerConfig = {
TERRAIN_BACKGROUND: 'background', 'terrain': {
TERRAIN_LABELS: 'labels', extension: 'jpg',
TERRAIN_LINES: 'lines', opaque: true
TONER_2010: '2010', },
TONER_2011: '2011', 'terrain-background': {
TONER_2011_LABELS: '2011-labels', extension: 'jpg',
TONER_2011_LINES: '2011-lines', opaque: true
TONER_2011_LITE: '2011-lite', },
TONER_BACKGROUND: 'background', 'terrain-labels': {
TONER_HYBRID: 'hybrid', extension: 'png',
TONER_LABELS: 'labels', opaque: false
TONER_LINES: 'lines', },
TONER_LITE: 'lite' 'terrain-lines': {
extension: 'png',
opaque: false
},
'toner-background': {
extension: 'png',
opaque: true
},
'toner': {
extension: 'png',
opaque: true
},
'toner-hybrid': {
extension: 'png',
opaque: false
},
'toner-labels': {
extension: 'png',
opaque: false
},
'toner-lines': {
extension: 'png',
opaque: false
},
'toner-lite': {
extension: 'png',
opaque: true
},
'watercolor': {
extension: 'jpg',
opaque: true
}
}; };
/** /**
* @enum {string} * @type {Object.<string, {minZoom: number, maxZoom: number}>}
*/ */
ol.source.StamenProvider = { ol.source.StamenProviderConfig = {
TERRAIN: 'terrain', 'terrain': {
TONER: 'toner', minZoom: 4,
WATERCOLOR: 'watercolor' maxZoom: 18
}; },
'toner': {
minZoom: 0,
/** maxZoom: 20
* @type {Object.<string, {type: string, minZoom: number, maxZoom: number}>} },
*/ 'watercolor': {
ol.source.StamenProviderConfig = {}; minZoom: 3,
ol.source.StamenProviderConfig[ol.source.StamenProvider.TERRAIN] = { maxZoom: 16
type: 'jpg', }
minZoom: 4,
maxZoom: 18
};
ol.source.StamenProviderConfig[ol.source.StamenProvider.TONER] = {
type: 'png',
minZoom: 0,
maxZoom: 20
};
ol.source.StamenProviderConfig[ol.source.StamenProvider.WATERCOLOR] = {
type: 'jpg',
minZoom: 3,
maxZoom: 16
}; };
@@ -63,9 +78,9 @@ ol.source.StamenProviderConfig[ol.source.StamenProvider.WATERCOLOR] = {
/** /**
* @constructor * @constructor
* @extends {ol.source.XYZ} * @extends {ol.source.XYZ}
* @param {ol.source.StamenOptions} stamenOptions Stamen options. * @param {ol.source.StamenOptions} options Options.
*/ */
ol.source.Stamen = function(stamenOptions) { ol.source.Stamen = function(options) {
var attribution = new ol.Attribution( var attribution = new ol.Attribution(
'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' + 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
@@ -75,18 +90,25 @@ ol.source.Stamen = function(stamenOptions) {
'under ' + 'under ' +
'<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'); '<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.');
var layer = stamenOptions.provider; var i = options.layer.indexOf('-');
if (goog.isDef(stamenOptions.flavor)) { var provider = i == -1 ? options.layer : options.layer.slice(0, i);
layer += '-' + stamenOptions.flavor; goog.asserts.assert(provider in ol.source.StamenProviderConfig);
} var providerConfig = ol.source.StamenProviderConfig[provider];
var config = ol.source.StamenProviderConfig[stamenOptions.provider]; goog.asserts.assert(options.layer in ol.source.StamenLayerConfig);
var layerConfig = ol.source.StamenLayerConfig[options.layer];
var url = goog.isDef(options.url) ? options.url :
'http://{a-d}.tile.stamen.com/' + options.layer + '/{z}/{x}/{y}.' +
layerConfig.extension;
goog.base(this, { goog.base(this, {
attributions: [attribution], attributions: [attribution],
maxZoom: config.maxZoom, maxZoom: providerConfig.maxZoom,
opaque: false, // FIXME uncomment the following when tilegrid supports minZoom
url: 'http://{a-d}.tile.stamen.com/' + layer + '/{z}/{x}/{y}.' + config.type //minZoom: providerConfig.minZoom,
opaque: layerConfig.opaque,
url: url
}); });
}; };