MapQuest

Example of a MapQuest map.Shows how to create custom controls.

Example of a MapQuest map.

<!DOCTYPE html>
<html>
  <head>
    <title>MapQuest</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>
  </head>
  <body>
    <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>
    <script>
      var layers = [
        new ol.layer.Tile({
          style: 'Road',
          source: new ol.source.MapQuest({layer: 'osm'})
        }),
        new ol.layer.Tile({
          style: 'Aerial',
          visible: false,
          source: new ol.source.MapQuest({layer: 'sat'})
        }),
        new ol.layer.Group({
          style: 'AerialWithLabels',
          visible: false,
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
            }),
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'hyb'})
            })
          ]
        })
      ];

      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [-73.979378, 40.702222], 'EPSG:4326', 'EPSG:3857'),
          zoom: 9
        })
      });

      var select = document.getElementById('layer-select');

      function onChange() {
        var style = select.value;
        var i, ii;
        for (i = 0, ii = layers.length; i < ii; ++i) {
          layers[i].set('visible', (layers[i].get('style') == style));
        }
      }

      select.addEventListener('change', onChange);

      onChange();
    </script>
  </body>
</html>