diff --git a/examples/bing-maps.html b/examples/bing-maps.html
index c038972c4c..a410469301 100644
--- a/examples/bing-maps.html
+++ b/examples/bing-maps.html
@@ -30,6 +30,8 @@
             <option value="Aerial">Aerial</option>
             <option value="AerialWithLabels" selected>Aerial with labels</option>
             <option value="Road">Road</option>
+            <option value="collinsBart">Collins Bart</option>
+            <option value="ordnanceSurvey">Ordnance Survey</option>
           </select>
         </div>
       </div>
diff --git a/examples/bing-maps.js b/examples/bing-maps.js
index 68a48d9bb5..bef2c7a04c 100644
--- a/examples/bing-maps.js
+++ b/examples/bing-maps.js
@@ -2,13 +2,19 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.Tile');
-goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 
 
-var styles = ['Road', 'Aerial', 'AerialWithLabels'];
+var styles = [
+  'Road',
+  'Aerial',
+  'AerialWithLabels',
+  'collinsBart',
+  'ordnanceSurvey'
+];
 var layers = [];
-for (var i = 0; i < styles.length; ++i) {
+var i, ii;
+for (i = 0, ii = styles.length; i < ii; ++i) {
   layers.push(new ol.layer.Tile({
     visible: false,
     preload: Infinity,
@@ -23,14 +29,15 @@ var map = new ol.Map({
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.proj.transform([-123.1, 49.25], 'EPSG:4326', 'EPSG:3857'),
-    zoom: 8
+    center: [-6655.5402445057125, 6709968.258934638],
+    zoom: 13
   })
 });
 
 $('#layer-select').change(function() {
   var style = $(this).find(':selected').val();
-  for (var i = 0; i < layers.length; ++i) {
+  var i, ii;
+  for (i = 0, ii = layers.length; i < ii; ++i) {
     layers[i].setVisible(styles[i] == style);
   }
 });