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

src/ol/source/mapquestsource.exports

@@ -1,2 +1,3 @@
 @exportSymbol ol.source.MapQuestOSM
 @exportSymbol ol.source.MapQuestOpenAerial
+@exportSymbol ol.source.MapQuestHybrid

src/ol/source/mapquestsource.js

@@ -1,3 +1,4 @@
+goog.provide('ol.source.MapQuestHybrid');
 goog.provide('ol.source.MapQuestOSM');
 goog.provide('ol.source.MapQuestOpenAerial');
 
@@ -73,3 +74,36 @@ ol.source.MapQuestOpenAerial = function(opt_options) {
 
 };
 goog.inherits(ol.source.MapQuestOpenAerial, ol.source.XYZ);
+
+
+
+/**
+ * @constructor
+ * @extends {ol.source.XYZ}
+ * @param {olx.source.MapQuestOptions=} opt_options MapQuest options.
+ * @todo stability experimental
+ */
+ol.source.MapQuestHybrid = function(opt_options) {
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
+  var attributions = [
+    new ol.Attribution({
+      html: 'Tiles Courtesy of ' +
+          '<a href="http://www.mapquest.com/" target="_blank">MapQuest</a>'
+    }),
+    ol.source.OSM.DATA_ATTRIBUTION
+  ];
+
+  goog.base(this, {
+    attributions: attributions,
+    crossOrigin: 'anonymous',
+    logo: 'http://developer.mapquest.com/content/osm/mq_logo.png',
+    maxZoom: 18,
+    opaque: true,
+    tileLoadFunction: options.tileLoadFunction,
+    url: 'http://oatile{1-4}.mqcdn.com/tiles/1.0.0/hyb/{z}/{x}/{y}.jpg'
+  });
+
+};
+goog.inherits(ol.source.MapQuestHybrid, ol.source.XYZ);