Update

master/examples/example-list.js

@@ -1 +1 @@
-var info={"index": {"and": {"2": 1, "3": 1}, "layer": {"3": 1}, "ed": {"2": 1, "3": 1}, "sync": {"2": 2, "3": 1}, "openaerial": {"0": 1, "1": 1}, "tilelayer": {"0": 1}, "popup": {"1": 1}, "mapquest": {"0": 1, "1": 1}, "overlays": {"1": 1}, "layers": {"3": 2}, "fullscreen": {"0": 1}, "overlay": {"1": 2}, "demonstrates": {"1": 1}, "webgl": {"2": 2, "3": 1}, "two": {"3": 2}, "maps": {"2": 1, "3": 1}, "tile": {"0": 1}, "map": {"0": 1}, "full": {"0": 2}, "screen": {"0": 2}, "object": {"2": 1}, "tilejson": {"3": 1}, "with": {"3": 1}, "by": {"2": 3}, "bingmaps": {"3": 1}, "a": {"0": 1}, "dom": {"2": 2, "3": 1}, "of": {"0": 1}, "bing": {"3": 1}, "example": {"0": 2, "1": 1, "2": 1, "3": 1}, "side": {"2": 6}}, "examples": [{"author": "\u00c9ric Lemoine", "tags": "fullscreen, mapquest, openaerial, tile, tilelayer", "modified": "2012-10-21T21:11:27+0200", "classes": [], "link": "full-screen.html", "shortdesc": "Example of a full-screen map.", "title": "Full-screen example", "example": "full-screen.html"}, {"author": "\u00c9ric Lemoine", "tags": "overlay, popup, mapquest, openaerial", "modified": "2012-10-21T21:11:27+0200", "classes": [], "link": "overlay-and-popup.html", "shortdesc": "Demonstrates Overlays.", "title": "Overlay example", "example": "overlay-and-popup.html"}, {"author": "\u00c9ric Lemoine", "tags": "side-by-side, webgl, dom, sync, object", "modified": "2012-10-20T21:43:34+0200", "classes": [], "link": "side-by-side.html", "shortdesc": "Side-by-side DOM and WebGL sync'ed maps.", "title": "Side-by-side example", "example": "side-by-side.html"}, {"author": "\u00c9ric Lemoine", "tags": "layers, tilejson, bing, bingmaps", "modified": "2012-10-20T21:43:34+0200", "classes": [], "link": "two-layers.html", "shortdesc": "Sync'ed DOM and WebGL maps with two layers.", "title": "Two-layer example", "example": "two-layers.html"}]}
+var info={"index": {"and": {"2": 1, "3": 1, "4": 1}, "layer": {"3": 1, "5": 1}, "projection": {"4": 3}, "ed": {"2": 1, "3": 1}, "national": {"4": 1}, "sync": {"2": 2, "3": 1}, "21781": {"4": 1}, "openaerial": {"0": 1, "1": 1}, "tilelayer": {"0": 1, "4": 1, "5": 1}, "popup": {"1": 1}, "mapquest": {"0": 1, "1": 1}, "overlays": {"1": 1}, "layers": {"3": 2, "4": 1}, "fullscreen": {"0": 1}, "overlay": {"1": 2}, "wms": {"4": 3, "5": 3}, "demonstrates": {"1": 1}, "webgl": {"2": 2, "3": 1}, "two": {"3": 2, "4": 1}, "parks": {"4": 1}, "custom": {"4": 1}, "1": {"4": 2}, "maps": {"2": 1, "3": 1}, "pixelmap": {"4": 1}, "tile": {"0": 1, "4": 1, "5": 1}, "map": {"0": 1}, "full": {"0": 2}, "screen": {"0": 2}, "object": {"2": 1}, "000": {"4": 2}, "tiled": {"4": 2, "5": 2}, "using": {"4": 1}, "tilejson": {"3": 1}, "with": {"3": 1, "4": 1}, "by": {"2": 3}, "bingmaps": {"3": 1}, "a": {"0": 1, "5": 1}, "dom": {"2": 2, "3": 1}, "of": {"0": 1, "4": 1, "5": 1}, "bing": {"3": 1}, "example": {"0": 2, "1": 1, "2": 1, "3": 1, "4": 2, "5": 2}, "epsg": {"4": 1}, "the": {"4": 1}, "side": {"2": 6}}, "examples": [{"author": "\u00c9ric Lemoine", "tags": "fullscreen, mapquest, openaerial, tile, tilelayer", "modified": "2012-10-21T21:11:27+0200", "classes": [], "link": "full-screen.html", "shortdesc": "Example of a full-screen map.", "title": "Full-screen example", "example": "full-screen.html"}, {"author": "\u00c9ric Lemoine", "tags": "overlay, popup, mapquest, openaerial", "modified": "2012-10-21T21:11:27+0200", "classes": [], "link": "overlay-and-popup.html", "shortdesc": "Demonstrates Overlays.", "title": "Overlay example", "example": "overlay-and-popup.html"}, {"author": "\u00c9ric Lemoine", "tags": "side-by-side, webgl, dom, sync, object", "modified": "2012-10-20T21:43:34+0200", "classes": [], "link": "side-by-side.html", "shortdesc": "Side-by-side DOM and WebGL sync'ed maps.", "title": "Side-by-side example", "example": "side-by-side.html"}, {"author": "\u00c9ric Lemoine", "tags": "layers, tilejson, bing, bingmaps", "modified": "2012-10-20T21:43:34+0200", "classes": [], "link": "two-layers.html", "shortdesc": "Sync'ed DOM and WebGL maps with two layers.", "title": "Two-layer example", "example": "two-layers.html"}, {"author": "ahocevar", "tags": "wms, tile, tilelayer, projection", "modified": "2012-10-29T09:33:00+0100", "classes": [], "link": "wms-custom-proj.html", "shortdesc": "Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.", "title": "Tiled WMS with custom projection example", "example": "wms-custom-proj.html"}, {"author": "ahocevar", "tags": "wms, tile, tilelayer", "modified": "2012-10-26T21:36:30+0200", "classes": [], "link": "wms.html", "shortdesc": "Example of a tiled WMS layer.", "title": "Tiled WMS example", "example": "wms.html"}]}

master/examples/example-list.xml

@@ -1 +1 @@
-<?xml version="1.0" ?><feed xmlns="http://www.w3.org/2005/Atom"><title>OpenLayers Examples</title><id>http://openlayers.github.com/ol3/master/examples/example-list.xml#2012-10-21T07:26:32Z</id><updated>2012-10-21T07:26:32Z</updated><entry><title>Full-screen example</title><tags>fullscreen, mapquest, openaerial, tile, tilelayer</tags><link href="http://openlayers.github.com/ol3/master/examples/full-screen.html"/><summary>Example of a full-screen map.</summary><updated>2012-10-21T21:11:27+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/full-screen.html#2012-10-21T21:11:27+0200</id></entry><entry><title>Overlay example</title><tags>overlay, popup, mapquest, openaerial</tags><link href="http://openlayers.github.com/ol3/master/examples/overlay-and-popup.html"/><summary>Demonstrates Overlays.</summary><updated>2012-10-21T21:11:27+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/overlay-and-popup.html#2012-10-21T21:11:27+0200</id></entry><entry><title>Side-by-side example</title><tags>side-by-side, webgl, dom, sync, object</tags><link href="http://openlayers.github.com/ol3/master/examples/side-by-side.html"/><summary>Side-by-side DOM and WebGL sync'ed maps.</summary><updated>2012-10-20T21:43:34+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/side-by-side.html#2012-10-20T21:43:34+0200</id></entry><entry><title>Two-layer example</title><tags>layers, tilejson, bing, bingmaps</tags><link href="http://openlayers.github.com/ol3/master/examples/two-layers.html"/><summary>Sync'ed DOM and WebGL maps with two layers.</summary><updated>2012-10-20T21:43:34+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/two-layers.html#2012-10-20T21:43:34+0200</id></entry></feed>
+<?xml version="1.0" ?><feed xmlns="http://www.w3.org/2005/Atom"><title>OpenLayers Examples</title><id>http://openlayers.github.com/ol3/master/examples/example-list.xml#2012-11-02T03:45:01Z</id><updated>2012-11-02T03:45:01Z</updated><entry><title>Tiled WMS with custom projection example</title><tags>wms, tile, tilelayer, projection</tags><link href="http://openlayers.github.com/ol3/master/examples/wms-custom-proj.html"/><summary>Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</summary><updated>2012-10-29T09:33:00+0100</updated><author><name>ahocevar</name></author><id>http://openlayers.github.com/ol3/master/examples/wms-custom-proj.html#2012-10-29T09:33:00+0100</id></entry><entry><title>Tiled WMS example</title><tags>wms, tile, tilelayer</tags><link href="http://openlayers.github.com/ol3/master/examples/wms.html"/><summary>Example of a tiled WMS layer.</summary><updated>2012-10-26T21:36:30+0200</updated><author><name>ahocevar</name></author><id>http://openlayers.github.com/ol3/master/examples/wms.html#2012-10-26T21:36:30+0200</id></entry><entry><title>Full-screen example</title><tags>fullscreen, mapquest, openaerial, tile, tilelayer</tags><link href="http://openlayers.github.com/ol3/master/examples/full-screen.html"/><summary>Example of a full-screen map.</summary><updated>2012-10-21T21:11:27+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/full-screen.html#2012-10-21T21:11:27+0200</id></entry><entry><title>Overlay example</title><tags>overlay, popup, mapquest, openaerial</tags><link href="http://openlayers.github.com/ol3/master/examples/overlay-and-popup.html"/><summary>Demonstrates Overlays.</summary><updated>2012-10-21T21:11:27+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/overlay-and-popup.html#2012-10-21T21:11:27+0200</id></entry><entry><title>Side-by-side example</title><tags>side-by-side, webgl, dom, sync, object</tags><link href="http://openlayers.github.com/ol3/master/examples/side-by-side.html"/><summary>Side-by-side DOM and WebGL sync'ed maps.</summary><updated>2012-10-20T21:43:34+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/side-by-side.html#2012-10-20T21:43:34+0200</id></entry><entry><title>Two-layer example</title><tags>layers, tilejson, bing, bingmaps</tags><link href="http://openlayers.github.com/ol3/master/examples/two-layers.html"/><summary>Sync'ed DOM and WebGL maps with two layers.</summary><updated>2012-10-20T21:43:34+0200</updated><author><name>Éric Lemoine</name></author><id>http://openlayers.github.com/ol3/master/examples/two-layers.html#2012-10-20T21:43:34+0200</id></entry></feed>

master/examples/wms-custom-proj.html

@@ -0,0 +1,47 @@
+<!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;
+      }
+      @media only screen and (max-width: 600px) {
+        #text {
+          display: none;
+        }
+      }
+    </style>
+    <title>Tiled WMS with custom projection example</title>
+  </head>
+  <body>
+    <div id="map">
+      <div id="text">
+        <h1 id="title">Tiled WMS with custom projection example</h1>
+        <div id="shortdesc">Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</div>
+        <div id="docs">
+          <p>See the
+          <a href="wms-custom-proj.js" target="_blank">wms-custom-proj.js source</a>
+          to see how this is done.</p>
+        </div>
+      </div>
+    </div>
+    <div id="tags">wms, tile, tilelayer, projection</div>
+    <script src="loader.js?id=wms-custom-proj" type="text/javascript"></script>
+  </body>
+</html>

master/examples/wms-custom-proj.js

@@ -0,0 +1,61 @@
+goog.require('goog.debug.Console');
+goog.require('goog.debug.Logger');
+goog.require('goog.debug.Logger.Level');
+goog.require('ol.Collection');
+goog.require('ol.Coordinate');
+goog.require('ol.Map');
+goog.require('ol.Projection');
+goog.require('ol.source.TiledWMS');
+
+
+if (goog.DEBUG) {
+  goog.debug.Console.autoInstall();
+  goog.debug.Logger.getLogger('ol').setLevel(goog.debug.Logger.Level.INFO);
+}
+
+var epsg21781 = new ol.Projection('EPSG:21781', ol.ProjectionUnits.METERS,
+    // Validity extent from http://spatialreference.org
+    new ol.Extent(485869.5728, 76443.1884, 837076.5648, 299941.7864));
+ol.Projection.addProjection(epsg21781);
+
+var extent = new ol.Extent(420000, 30000, 900000, 350000);
+var layers = new ol.Collection([
+  new ol.layer.TileLayer({
+    source: new ol.source.TiledWMS({
+      url: 'http://wms.geo.admin.ch/?',
+      attributions: [new ol.Attribution(
+          '© ' +
+          '<a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">' +
+          'Pixelmap 1:1000000 / geo.admin.ch</a>')],
+      crossOrigin: null,
+      params: {'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale'},
+      projection: epsg21781,
+      extent: extent
+    })
+  }),
+  new ol.layer.TileLayer({
+    source: new ol.source.TiledWMS({
+      url: 'http://wms.geo.admin.ch/?',
+      attributions: [new ol.Attribution(
+          '&copy; ' +
+          '<a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">' +
+          'National parks / geo.admin.ch</a>')],
+      crossOrigin: null,
+      params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
+      projection: epsg21781,
+      extent: extent
+    })
+  })
+]);
+
+var map = new ol.Map({
+  renderer: ol.RendererHint.DOM,
+  center: new ol.Coordinate(660000, 190000),
+  projection: epsg21781,
+  // By setting userProjection to the same as projection, we do not need
+  // proj4js because we do not need any transforms.
+  userProjection: epsg21781,
+  layers: layers,
+  target: 'map',
+  zoom: 9
+});

master/examples/wms.html

@@ -0,0 +1,47 @@
+<!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;
+      }
+      @media only screen and (max-width: 600px) {
+        #text {
+          display: none;
+        }
+      }
+    </style>
+    <title>wms example</title>
+  </head>
+  <body>
+    <div id="map">
+      <div id="text">
+        <h1 id="title">Tiled WMS example</h1>
+        <div id="shortdesc">Example of a tiled WMS layer.</div>
+        <div id="docs">
+          <p>See the
+          <a href="wms.js" target="_blank">wms.js source</a>
+          to see how this is done.</p>
+        </div>
+      </div>
+    </div>
+    <div id="tags">wms, tile, tilelayer</div>
+    <script src="loader.js?id=wms" type="text/javascript"></script>
+  </body>
+</html>

master/examples/wms.js

@@ -0,0 +1,36 @@
+goog.require('goog.debug.Console');
+goog.require('goog.debug.Logger');
+goog.require('goog.debug.Logger.Level');
+goog.require('ol.Collection');
+goog.require('ol.Coordinate');
+goog.require('ol.Map');
+goog.require('ol.source.MapQuestOpenAerial');
+goog.require('ol.source.TiledWMS');
+
+
+if (goog.DEBUG) {
+  goog.debug.Console.autoInstall();
+  goog.debug.Logger.getLogger('ol').setLevel(goog.debug.Logger.Level.INFO);
+}
+
+
+var layers = new ol.Collection([
+  new ol.layer.TileLayer({
+    source: new ol.source.MapQuestOpenAerial()
+  }),
+  new ol.layer.TileLayer({
+    source: new ol.source.TiledWMS({
+      url: 'http://demo.opengeo.org/geoserver/wms',
+      crossOrigin: null,
+      params: {'LAYERS': 'topp:states', 'TILED': true},
+      extent: new ol.Extent(-13884991, 2870341, -7455066, 6338219)
+    })
+  })
+]);
+var map = new ol.Map({
+  renderer: ol.RendererHint.DOM,
+  layers: layers,
+  target: 'map',
+  center: new ol.Coordinate(-10997148, 4569099),
+  zoom: 4
+});