1

I have configured a WMS layer into OpenLayers localhost (port 8080), I want to show a layer toggling button which can show only OSM basemap checkbox and my layers.

What is code for it how to add this in my code?

My code is given as:

<!DOCTYPE html>
<html>
  <head>
    <title>Single Image WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Image({
         extent: [8244154.7535121385,3665112.8581176517,8307313.820683872,3727346.668855488],
          source: new ol.source.ImageWMS({
            url: 'http://localhost:8080/geoserver/wms',
            params: {'LAYERS': 'airport'},
            ratio: 1,
            serverType: 'geoserver'
          })
        }),
        new ol.layer.Image({
         extent: [8244154.7535121385,3665112.8581176517,8307313.820683872,3727346.668855488],
          source: new ol.source.ImageWMS({
            url: 'http://localhost:8080/geoserver/wms',
            params: {'LAYERS': 'parks'},
            ratio: 1,
            serverType: 'geoserver'
          })
        }),
      ];
      var lahore = ol.proj.transform([74.3572, 31.5546], 'EPSG:4326', 'EPSG:3857');
      //alert(olCoordinates);
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center:lahore,
          zoom: 12
        })
      });
    </script>
  </body>
</html>
  • Did you try to implement a layer switcher and have some problem? – nmtoken Jan 17 '18 at 5:31
  • No,i dont know which code should use for switcher and where to adjust it in code. – Shanzae Jan 17 '18 at 8:39
  • Possible duplicate of Missing LayerSwitcher in OpenLayers3? – bennos Jan 17 '18 at 8:52