Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add Stamen example

  • Loading branch information...
commit 83225916c1f0021702a44fa4a612bf375cee4e42 1 parent 78780fa
Tom Payne twpayne authored tschaub committed
Showing with 73 additions and 0 deletions.
  1. +42 −0 examples/stamen.html
  2. +31 −0 examples/stamen.js
42 examples/stamen.html
View
@@ -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>
31 examples/stamen.js
View
@@ -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
+ })
+});
Please sign in to comment.
Something went wrong with that request. Please try again.