From 9050ee550f62270debd6b9b692d61b3de8c1b717 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Wed, 18 May 2016 21:14:25 -0600
Subject: [PATCH] Demonstrate how source.setUrl() works

---
 examples/reusable-source.html | 12 +++++++++++
 examples/reusable-source.js   | 39 +++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 examples/reusable-source.html
 create mode 100644 examples/reusable-source.js

diff --git a/examples/reusable-source.html b/examples/reusable-source.html
new file mode 100644
index 0000000000..e93074b7f6
--- /dev/null
+++ b/examples/reusable-source.html
@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: Reusable Source
+shortdesc: Updating a tile source by changing the URL.
+docs: >
+  You can call <code>source.setUrl()</code> to update the URL for a tile source.  Note that when you change the URL for a tile source, existing tiles will not be replaced until new tiles are loaded.  If you are interested instead in clearing currently rendered tiles, you can call the <code>source.refresh()</code> method.  Alternatively, you can use two separate sources if you want to remove rendered tiles and start over loading new tiles.
+---
+<div id="map" class="map"></div>
+<button class="switcher" value="0">January</button>
+<button class="switcher" value="1">January (with bathymetry)</button>
+<button class="switcher" value="2">July</button>
+<button class="switcher" value="3">July (with bathymetry)</button>
diff --git a/examples/reusable-source.js b/examples/reusable-source.js
new file mode 100644
index 0000000000..b9c4ac3ca3
--- /dev/null
+++ b/examples/reusable-source.js
@@ -0,0 +1,39 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.XYZ');
+
+var urls = [
+  'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png',
+  'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png',
+  'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png',
+  'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png'
+];
+
+var source = new ol.source.XYZ();
+
+var map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: source
+    })
+  ],
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+
+function updateUrl(index) {
+  source.setUrl(urls[index]);
+}
+
+var buttons = document.getElementsByClassName('switcher');
+for (var i = 0, ii = buttons.length; i < ii; ++i) {
+  var button = buttons[i];
+  button.addEventListener('click', updateUrl.bind(null, Number(button.value)));
+}
+
+updateUrl(0);