Single Image WMS

Example of a single image WMS layer.

WMS can be used as an Image layer, as shown here, or as a Tile layer, as shown in the Tiled WMS example example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography.

<!DOCTYPE html>
<html>
  <head>
    <title>Single Image WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.2/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>

  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
      import ImageWMS from 'ol/source/ImageWMS.js';
      import OSM from 'ol/source/OSM.js';


      var layers = [
        new TileLayer({
          source: new OSM()
        }),
        new ImageLayer({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ImageWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: {'LAYERS': 'topp:states'},
            ratio: 1,
            serverType: 'geoserver'
          })
        })
      ];
      var map = new Map({
        layers: layers,
        target: 'map',
        view: new View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>