From 02e6937db3cc5ccdd2602c1df8d7ff75b36628cd Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Wed, 13 Mar 2013 13:36:31 +0100
Subject: [PATCH] Add a basic layer selector in bing-maps example

---
 examples/bing-maps.html |  7 +++++++
 examples/bing-maps.js   | 28 ++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/examples/bing-maps.html b/examples/bing-maps.html
index 1265dac5c3..b4c20e3071 100644
--- a/examples/bing-maps.html
+++ b/examples/bing-maps.html
@@ -28,6 +28,12 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <select id="layer-select">
+            <option value="Aerial">Aerial</option>
+            <option value="AerialWithLabels" selected>Aerial with labels</option>
+            <option value="Road">Road</option>
+          </select>
         </div>
       </div>
 
@@ -46,6 +52,7 @@
 
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=bing-maps" type="text/javascript"></script>
 
   </body>
diff --git a/examples/bing-maps.js b/examples/bing-maps.js
index 9592719ecc..e4be7be46a 100644
--- a/examples/bing-maps.js
+++ b/examples/bing-maps.js
@@ -7,15 +7,19 @@ goog.require('ol.projection');
 goog.require('ol.source.BingMaps');
 
 
-var map = new ol.Map({
-  layers: [
-    new ol.layer.TileLayer({
-      source: new ol.source.BingMaps({
-        key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
-        style: 'AerialWithLabels'
-      })
+var styles = ['Road', 'Aerial', 'AerialWithLabels'];
+var layers = [];
+for (var i = 0; i < styles.length; ++i) {
+  layers.push(new ol.layer.TileLayer({
+    visible: false,
+    source: new ol.source.BingMaps({
+      key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
+      style: styles[i]
     })
-  ],
+  }));
+}
+var map = new ol.Map({
+  layers: layers,
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
@@ -24,3 +28,11 @@ var map = new ol.Map({
     zoom: 8
   })
 });
+
+$('#layer-select').change(function() {
+  var style = $(this).find(':selected').val();
+  for (var i = 0; i < layers.length; ++i) {
+    layers[i].setVisible(styles[i] == style);
+  }
+});
+$('#layer-select').trigger('change');