Add a basic layer selector in bing-maps example

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>

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({
+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: 'AerialWithLabels'
+      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');