1

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?

1

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>
  • Thanks for the reply, I'm having trouble opening your fiddle? Also, the imagery in the WMS is only visible at certain scales. – kflaw Dec 2 '15 at 17:14
  • fiddle is working fine. I double checked it. I have edited my answer to include the code within the fiddle. – pavlos Dec 2 '15 at 19:25
  • Thanks for this, it works great. I think I almost had it but was missing a couple of elements you included. thanks again – kflaw Dec 2 '15 at 20:56
  • Incidentally, do you know of a way I can combine two WMS in one tle layer? For this USGS WMS, it only shows up when zoomed in and I'd like another less detailed service to draw when the user is zoomed out - but I'd like them to be combined. Is that possible? I tried to add a list of urls for the url parameter but it didn't work. – kflaw Dec 2 '15 at 21:05
  • ok I got it, use urls instead of url - although it's behaving strangely so maybe not it – kflaw Dec 2 '15 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.