WMS GetFeatureInfo (Image Layer)

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

#### WMS GetFeatureInfo (Image Layer)

Using an image WMS source with GetFeatureInfo requests

This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionally `map.forEachLayerAtPixel` is used to change the mouse pointer when hovering a non-transparent pixel on the map.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.layer.Image
,
- ol.source.ImageWMS

Copy Edit
WMS GetFeatureInfo (Image Layer) Using an image WMS source with GetFeatureInfo requests var wmsSource = new ol.source.ImageWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'ne:ne'}, serverType: 'geoserver', crossOrigin: 'anonymous' }); var wmsLayer = new ol.layer.Image({ source: wmsSource }); var view = new ol.View({ center: [0, 0], zoom: 1 }); var map = new ol.Map({ layers: [wmsLayer], target: 'map', view: view }); map.on('singleclick', function(evt) { document.getElementById('info').innerHTML = ''; var viewResolution = /** @type {number} */ (view.getResolution()); var url = wmsSource.getGetFeatureInfoUrl( evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'}); if (url) { document.getElementById('info').innerHTML = '<iframe seamless src="' + url + '"></iframe>'; } }); map.on('pointermove', function(evt) { if (evt.dragging) { return; } var pixel = map.getEventPixel(evt.originalEvent); var hit = map.forEachLayerAtPixel(pixel, function() { return true; }); map.getTargetElement().style.cursor = hit ? 'pointer' : ''; }); <div id="map" class="map"></div> <div id="info">&nbsp;</div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>WMS GetFeatureInfo (Image Layer)</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>
        <div id="info">&nbsp;</div>
        <script>
          var wmsSource = new ol.source.ImageWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: {'LAYERS': 'ne:ne'},
            serverType: 'geoserver',
            crossOrigin: 'anonymous'
          });

          var wmsLayer = new ol.layer.Image({
            source: wmsSource
          });

          var view = new ol.View({
            center: [0, 0],
            zoom: 1
          });

          var map = new ol.Map({
            layers: [wmsLayer],
            target: 'map',
            view: view
          });

          map.on('singleclick', function(evt) {
            document.getElementById('info').innerHTML = '';
            var viewResolution = /** @type {number} */ (view.getResolution());
            var url = wmsSource.getGetFeatureInfoUrl(
                evt.coordinate, viewResolution, 'EPSG:3857',
                {'INFO_FORMAT': 'text/html'});
            if (url) {
              document.getElementById('info').innerHTML =
                  '<iframe seamless src="' + url + '"></iframe>';
            }
          });

          map.on('pointermove', function(evt) {
            if (evt.dragging) {
              return;
            }
            var pixel = map.getEventPixel(evt.originalEvent);
            var hit = map.forEachLayerAtPixel(pixel, function() {
              return true;
            });
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
          });
        </script>
      </body>
    </html>