[GIS] Is it possible to add another WMS to bing maps base layers list in OpenLayers 3

basemapbing-mapsopenlayerswms

I am using a drop down for the user to choose a bing basemap in web map. I'd like to also include a USGS WMS in the list of choices, but am unsure how to do it. This is the current code for populating the list of bing base layers:

var baseStyles = [
  'Road',
  'AerialWithLabels',
];
var baseLayers = [];
var i, ii;
for (i = 0, ii = baseStyles.length; i < ii; ++i) {
  baseLayers.push(new ol.layer.Tile({
    visible: false,
    preload: Infinity,
    source: new ol.source.BingMaps({
      key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
      imagerySet: baseStyles[i]
      // use maxZoom 19 to see stretched tiles instead of the BingMaps
      // "no photos at this zoom level" tiles
      // maxZoom: 19
    })
  }));
}

And here is the code for adding the USGS WMS:

var USGSimagery = new ol.layer.Tile({
                source: new ol.source.TileWMS(({
                    url: 'http://raster.nationalmap.gov/arcgis/services/Orthoimagery/USGS_EROS_Ortho_SCALE/ImageServer/WMSServer',
                    params: {
                        'LAYERS': 0
                        }
                    }))
 });

In my map I am adding one other vector layer besides the base layers:

var map = new ol.Map({
    layers: baseLayers.concat(layerVector),//new ol.layer.Tile({source: new ol.source.OSM()}), layerVector],
    loadTilesWhileInteracting: true,
    target: document.getElementById('map'),
    view: view
    });

And this is the code for setting the values for the choice list:

 <select id="layer-select">
       <option value="AerialWithLabels" selected>Aerial with labels</option>
       <option value="Road">Road</option>
     </select>
</div>   
<script>

I can add the USGSImagery WMS to the map the same as layerVector and it shows up, but I want it to be added to my list of base layers instead so I can choose whether or not it displays. I'm not sure how to do this, can anyone help?

Best Answer

imagerySet is a specific attribute for the type of bing maps. It cant be used with any layer. You missed to provide the code that changes the baselayr when an option form select list is selected. I am mentioning this cause thats the key to achive what you need. So do the following: pass an extra attribute of your choise for every layer you want to be in the select list and then use that attribute to verify wich one should be visible. Here is a fiddle where you can see it in action. Though for the layer you provide I have got white images as a response.

UPDATE

your javascript

var styles = [
  'Road',
  'Aerial',
  'AerialWithLabels',
  'collinsBart',
  'ordnanceSurvey',
  'USGSimagery'
];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
  layers.push(new ol.layer.Tile({
    visible: false,
    preload: Infinity,
    myattribute : styles[i],
    source: new ol.source.BingMaps({
      key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
      imagerySet: styles[i]
      // use maxZoom 19 to see stretched tiles instead of the BingMaps
      // "no photos at this zoom level" tiles
      // maxZoom: 19
    })
  }));
}
var USGSimagery = new ol.layer.Tile({
                myattribute:'USGSimagery',
                source: new ol.source.TileWMS(({
                    url: 'http://raster.nationalmap.gov/arcgis/services/Orthoimagery/USGS_EROS_Ortho_SCALE/ImageServer/WMSServer',

                    params: {
                        'LAYERS': 0
                        }
                    }))
 });
layers.push(USGSimagery);
var map = new ol.Map({
  layers: layers,
  // Improve user experience by loading tiles while dragging/zooming. Will make
  // zooming choppy on mobile or slow devices.
  loadTilesWhileInteracting: true,
  target: 'map',
  view: new ol.View({
    center: [-6655.5402445057125, 6709968.258934638],
    maxZoom: 20, 
    minZoom:0,
    zoom: 1
  })
});

var select = document.getElementById('layer-select');
function onChange() {
  var style = select.value;
  for (var i = 0, ii = layers.length; i < ii; ++i) {
    layers[i].setVisible(layers[i].get('myattribute') === style);
      console.log(layers[i].get('myattribute'));
  }
}
select.addEventListener('change', onChange);
onChange();

and your html

 <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" selected>Aerial with labels</option>
       <option value="Road">Road</option>
       <option value="collinsBart">Collins Bart</option>
       <option value="ordnanceSurvey">Ordnance Survey</option>
       <option value="USGSimagery">USGSimagery</option>
     </select>
   </div>
 </div>
Related Question