add ol.source.MapQuestHybrid and add all MapQuest types to the example

examples/mapquest.html

@@ -25,6 +25,11 @@
       <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">Aerial with labels</option>
+            <option value="Road" selected>Road</option>
+          </select>
         </div>
       </div>
 
@@ -43,6 +48,7 @@
 
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=mapquest" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/mapquest.js

@@ -1,22 +1,54 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
+goog.require('ol.layer.Group');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
+goog.require('ol.source.MapQuestHybrid');
 goog.require('ol.source.MapQuestOSM');
+goog.require('ol.source.MapQuestOpenAerial');
 
 
+var layers = [
+  new ol.layer.Tile({
+    style: 'Road',
+    source: new ol.source.MapQuestOSM()
+  }),
+  new ol.layer.Tile({
+    style: 'Aerial',
+    visible: false,
+    source: new ol.source.MapQuestOpenAerial()
+  }),
+  new ol.layer.Group({
+    style: 'AerialWithLabels',
+    visible: false,
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.MapQuestOpenAerial()
+      }),
+      new ol.layer.Tile({
+        source: new ol.source.MapQuestHybrid()
+      })
+    ]
+  })
+];
+
 var map = new ol.Map({
-  layers: [
-    new ol.layer.Tile({
-      source: new ol.source.MapQuestOSM()
-    })
-  ],
+  layers: layers,
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
     center: ol.proj.transform(
-        [139.6917, 35.689506], 'EPSG:4326', 'EPSG:3857'),
+        [-73.979378, 40.702222], 'EPSG:4326', 'EPSG:3857'),
     zoom: 9
   })
 });
+
+$('#layer-select').change(function() {
+  var style = $(this).find(':selected').val();
+  var i, ii;
+  for (i = 0, ii = layers.length; i < ii; ++i) {
+    layers[i].set('visible', (layers[i].get('style') == style));
+  }
+});
+$('#layer-select').trigger('change');