Add a basic layer selector in bing-maps example

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');