Tiled WMS

This example uses OpenLayers v4.0.1. The latest is v.

#### Tiled WMS

Example of a tiled WMS layer.

WMS can be used as a Tile layer, as shown here, or as an Image layer, as shown in the Single Image 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.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.layer.Tile
,
- ol.source.OSM
,
- ol.source.TileWMS

Copy Edit
Tiled WMS Example of a tiled WMS layer. var layers = [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Tile({ extent: [-13884991, 2870341, -7455066, 6338219], source: new ol.source.TileWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'topp:states', 'TILED': true}, serverType: 'geoserver' }) }) ]; var map = new ol.Map({ layers: layers, target: 'map', view: new ol.View({ center: [-10997148, 4569099], zoom: 4 }) }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Tiled WMS</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/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.0.1/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.Tile({
              extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.TileWMS({
                url: 'https://ahocevar.com/geoserver/wms',
                params: {'LAYERS': 'topp:states', 'TILED': true},
                serverType: 'geoserver'
              })
            })
          ];
          var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
              center: [-10997148, 4569099],
              zoom: 4
            })
          });
        </script>
      </body>
    </html>