Adding GetFeatureInfo capability

Earlier we issued an additional WMS request called GetLegendGraphic to show the legend. Similarly, we can use yet another WMS interface standard to retrieve attribute data of the maps by issuing the OGC GetFeatureInfo request. This involves some more work, because the result will be some arbitrary content that will arrive after an unknown amount of time. To handle this, we will need to use something called Asynchronous JavaScript.

First, we have to prepare MapServer to actually be set up to respond to the request in a way the OpenLayers script can handle:

Edit your .map file. In each LAYER object you want to query, put the lines:

    TOLERANCE 5
    TOLERANCEUNITS pixels

In each LAYER object's METADATA put the extra line:

    "wms_include_items" "all"

In each CLASS object put the extra line:

    TEMPLATE "empty"

TOLERANCE and TOLERANCEUNITS will make sure that an object is considered clicked upon, even if you are up to 5 pixels off. You can change these values if needed. wms_include_items tells MapServer to show all attributes it has available. You can change it to a comma-delimited list of attribute names if you want to limit the output. The TEMPLATE line is needed for GetFeatureInfo to work, but it does not have to point to an actual template document (that is why we put an "empty" value in there). In that case it will just retrieve the raw text output of MapServer's attribute query. If you want to nicely format the GetFeatureInfo output, you let it point to an actual template HTML file (see the Mapserver documentation for more information on how to use these).

Now edit your html file by adding a third div element to the HTML lay-out as a placeholder for the query results. See the highlighted line in the listing below.

<!doctype html>
<html>
<head>
  <!--include the OpenLayers CSS : -->
  <link rel="stylesheet" href="./lib/ol.css" type="text/css" />
  <!--include the OpenLayers API :-->
  <script src="./lib/ol.js" type="text/javascript"></script>
  <title>OpenLayers 4 example</title>
</head>
<script type="text/javascript">
  //  wrap whole thing in a function:
  function init() {
    //define map object & link to placeholder div:
    myMap = new ol.Map({target: "mapDiv"});
    // define layer as tiled map:
    osmLayer = new ol.layer.Tile({
      // load OSM (a connector predefined in the API) as source:
      source: new ol.source.OSM()
    });
    railroadLayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&",
        params: {"LAYERS": "railroad", "TILED": true}
      })
    });
    forestLayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&",
        params: {"LAYERS": "forest", "TILED": true}
      })
    });
    airportsLayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&",
        params: {"LAYERS": "airports", "TILED": true}
      })
    });
    // add layer to map:
    myMap.addLayer(osmLayer);
    myMap.addLayer(forestLayer);
    myMap.addLayer(railroadLayer);
    myMap.addLayer(airportsLayer);
    // create a map view:
    myMap.setView(
      //center coords and zoom level:
      new ol.View({ center: [11219175,1507650], zoom: 5})
    );
    // add event listener for click events on Map object
    // if clicked, run the function...
    myMap.on('singleclick', function(evt) {
      // first clear the contents of the results div:
      document.getElementById("queryresultsDiv").innerHTML = "";
      // retrieve map resolution details from the map object
      var viewResolution = myMap.getView().getResolution();
      // now create a url with an OGC GetFeatureInfo request:
      var url = forestLayer.getSource().getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/plain',  //format to ask info in
          'QUERY_LAYERS': 'forest,railroad,airports'} //layers to ask info for
      );
      // an iframe in the div fires the request and retrieves the results:
      document.getElementById("queryresultsDiv").innerHTML =
        '<iframe height="100%" seamless src="' + url + '"></iframe>';
    });
  }
</script>
<!--run init script after page body loaded : -->
<body onload="init()">
<!--map placeholder div: -->
<div id="mapDiv" style="position: absolute; left: 5px; top: 5px; width: 400px; height: 600px; overflow: hidden; border: 1px solid blue; "></div>
<div id="legend" style="position:absolute; width:250px; height:200px; left: 420px; top: 5px; overflow: auto; border: 1px solid blue; ">
  <input type="checkbox" checked onchange="forestLayer.setVisible(!forestLayer.getVisible())">
  <img align="middle" src="http://geoserver.itc.nl/cgi-bin/mapserv.exe?map=D:/Inetpub/mapserver/config.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=forest"><br/>
  <input type="checkbox" checked onchange="railroadLayer.setVisible(!railroadLayer.getVisible())">
  <img align="middle" src="https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=railroad"><br/>
  <input type="checkbox" checked onchange="airportsLayer.setVisible(!airportsLayer.getVisible())">
  <img align="middle" src="https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=airports"><br/>
</div>
<div id="queryresultsDiv" style="position: absolute; width: 250px; height: 395px; left: 420px; top: 210px; overflow: auto; border: 1px solid blue;">
</body>
</html>

</div>

</body>

</html>

We want to have clicks in the map result in a GetFeatureInfo request to MapServer. Fortunately, we can use existing OpenLayers functionality to achieve that: there is a getGetFeatureInfoUrl method to create an OGC-compatible request. And we can use an HTML <iframe> to actually fire the request and retrieve its results, by supplying it with the url constructed by the getGetFeatureInfoUrl method:

Put the highlighted code in the listing below at the end of the init function, just before the ending } character. Try to understand what it does, read the comments in the code... Test the result in a web browser.

<!doctype html>
<html>
<head>
  <!--include the OpenLayers CSS : -->
  <link rel="stylesheet" href="./lib/ol.css" type="text/css" />
  <!--include the OpenLayers API :-->
  <script src="./lib/ol.js" type="text/javascript"></script>
  <title>OpenLayers 4 example</title>
</head>
<script type="text/javascript">
  //  wrap whole thing in a function:
  function init() {
    //define map object & link to placeholder div:
    myMap = new ol.Map({target: "mapDiv"});
    // define layer as tiled map:
    osmLayer = new ol.layer.Tile({
      // load OSM (a connector predefined in the API) as source:
      source: new ol.source.OSM()
    });
    railroadLayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&",
        params: {"LAYERS": "railroad", "TILED": true}
      })
    });
    forestLayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&",
        params: {"LAYERS": "forest", "TILED": true}
      })
    });
    airportsLayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&",
        params: {"LAYERS": "airports", "TILED": true}
      })
    });
    // add layer to map:
    myMap.addLayer(osmLayer);
    myMap.addLayer(forestLayer);
    myMap.addLayer(railroadLayer);
    myMap.addLayer(airportsLayer);
    // create a map view:
    myMap.setView(
      //center coords and zoom level:
      new ol.View({ center: [11219175,1507650], zoom: 5})
    );
    // add event listener for click events on Map object
    // if clicked, run the function...
    myMap.on('singleclick', function(evt) {
      // first clear the contents of the results div:
      document.getElementById("queryresultsDiv").innerHTML = "";
      // retrieve map resolution details from the map object
      var viewResolution = myMap.getView().getResolution();
      // now create a url with an OGC GetFeatureInfo request:
      var url = forestLayer.getSource().getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/plain',  //format to ask info in
          'QUERY_LAYERS': 'forest,railroad,airports'} //layers to ask info for
      );
      // an iframe in the div fires the request and retrieves the results:
      document.getElementById("queryresultsDiv").innerHTML =
        '<iframe height="100%" seamless src="' + url + '"></iframe>';
    });
  }
</script>
<!--run init script after page body loaded : -->
<body onload="init()">
<!--map placeholder div: -->
<div id="mapDiv" style="position: absolute; left: 5px; top: 5px; width: 400px; height: 600px; overflow: hidden; border: 1px solid blue; "></div>
<div id="legend" style="position:absolute; width:250px; height:200px; left: 420px; top: 5px; overflow: auto; border: 1px solid blue; ">
  <input type="checkbox" checked onchange="forestLayer.setVisible(!forestLayer.getVisible())">
  <img align="middle" src="http://geoserver.itc.nl/cgi-bin/mapserv.exe?map=D:/Inetpub/mapserver/config.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=forest"><br/>
  <input type="checkbox" checked onchange="railroadLayer.setVisible(!railroadLayer.getVisible())">
  <img align="middle" src="https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=railroad"><br/>
  <input type="checkbox" checked onchange="airportsLayer.setVisible(!airportsLayer.getVisible())">
  <img align="middle" src="https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/config.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=airports"><br/>
</div>
<div id="queryresultsDiv" style="position: absolute; width: 250px; height: 395px; left: 420px; top: 210px; overflow: auto; border: 1px solid blue;">
</body>
</html>

myMap.setView(

//center coords and zoom level:

new ol.View({ center: [11219175,1507650], zoom: 5})

);

// add event listener for click events on Map object

// if clicked, run the function...

myMap.on('singleclick', function(evt) {

// first clear the contents of the results div:

document.getElementById("queryresultsDiv").innerHTML = "";

// retrieve map resolution details from the map object

var viewResolution = myMap.getView().getResolution();

// now create a url with an OGC GetFeatureInfo request:

var url = forestLayer.getSource().getGetFeatureInfoUrl(

evt.coordinate, viewResolution, 'EPSG:3857',

{'INFO_FORMAT': 'text/plain', //format to ask info in

'QUERY_LAYERS': 'forest,railroad,airports'} //layers to ask info for

);

// an iframe in the div fires the request and retrieves the results:

document.getElementById("queryresultsDiv").innerHTML =

'<iframe height="100%" seamless src="' + url + '"></iframe>';

});

}

</script>

The full mapviewer with all layers, legend and query.

OPTIONAL CHALLENGE: More sophisticated querying

As a challenge, try to create a more more sophisticated query system:

In our example above, we retrieved the GetFeatureInfo results as plain text. GetFeatureInfo results can also be provided by MapServer using a sophisticated mechanism of (interactive) templates: The results of queries are then parsed into HTML templates. This allows for example to only show certain attributes, to format the output nicely and even to building of a feedback mechanism, through HTML forms.

An working example of this can be found at this location. Try to see what happens if you query an airport...

More information on the templating can be found in the MapServer documentation at http://mapserver.org/mapfile/template.html

Try to create a more sophisticated query output, where you can retrieve

the names of airports,
the class of forest
the ID of railroads

all nicely formatted (so not just a text dump)...

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./lib/ol.css" type="text/css" />
<script src="./lib/ol.js" type="text/javascript"></script>
<title>OpenLayers 4 example</title>
</head>
<script type="text/javascript">
function init() {
	myMap = new ol.Map({target: "mapDiv"});
  osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });
  railroadLayer = new ol.layer.Tile({
  	source: new ol.source.TileWMS({
  		url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/configWMSquery.map&",
      params: {"LAYERS": "railroad", "TILED": true}
  	})
  });
  forestLayer = new ol.layer.Tile({
  	source: new ol.source.TileWMS({
  		url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/configWMSquery.map&",
      params: {"LAYERS": "forest", "TILED": true}
  	})
  });
  airportsLayer = new ol.layer.Tile({
  	source: new ol.source.TileWMS({
  		url: "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/configWMSquery.map&",
      params: {"LAYERS": "airports", "TILED": true}
  	})
  });
	myMap.addLayer(osmLayer);
	myMap.addLayer(forestLayer);
	myMap.addLayer(railroadLayer);
	myMap.addLayer(airportsLayer);
  myMap.setView(
  	new ol.View({center: [11219175,1507650], zoom: 5})
  );
  myMap.addControl(new ol.control.MousePosition());
	myMap.addControl(new ol.control.ScaleLine());
	myMap.on('singleclick', function(evt) {
  	document.getElementById("queryresultsDiv").innerHTML = "";
    var viewResolution = myMap.getView().getResolution();
    var url = forestLayer.getSource().getGetFeatureInfoUrl(
    	evt.coordinate, viewResolution, 'EPSG:3857', 
    	{'INFO_FORMAT': 'text/html', //format to ask info now HTML
        'QUERY_LAYERS': 'forest,railroad,airports'} //layers to ask info for
    );
    document.getElementById("queryresultsDiv").innerHTML = 
      '<iframe height="100%" seamless src="' + url + '"></iframe>';
  });
} 
</script>
<body onload="init()">
<div id="mapDiv" style="position: absolute; left: 5px; 
top: 5px; width: 400px; height: 600px; overflow: hidden; 
border: 1px solid blue; ">
</div>
<div id="legend" style="position:absolute; width:250px; height:200px; left: 420px; top: 5px; overflow: auto; border: 1px solid blue; ">
<input type="checkbox" checked onchange="forestLayer.setVisible(!forestLayer.getVisible())">
<img align="middle" src="https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/configWMSquery.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=forest"><br/>
<input type="checkbox" checked checked onchange="railroadLayer.setVisible(!railroadLayer.getVisible())">
<img align="middle" src="https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/configWMSquery.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=railroad"><br/>
<input type="checkbox" checked checked onchange="airportsLayer.setVisible(!airportsLayer.getVisible())">
<img align="middle" src="https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/configWMSquery.map&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=airports"><br/>
</div>
<div id="queryresultsDiv" style="position: absolute; width: 250px; height: 395px; left: 420px; top: 210px; overflow: auto; border: 1px solid blue;">
</div>
</body>
</html>

var url = forestLayer.getSource().getGetFeatureInfoUrl(

evt.coordinate, viewResolution, 'EPSG:3857',

{'INFO_FORMAT': 'text/html', //format to ask info now HTML

'QUERY_LAYERS': 'forest,railroad,airports'} //layers to ask info for

);

MAP
NAME "Thailand"
IMAGECOLOR 255 255 255
SIZE 600 800
IMAGETYPE PNG24
PROJECTION
	"init=epsg:4326" #latlon on WGS84
END #default projection
EXTENT 97.3 5.6 105.7 20.5 # lon/lat extents of Thailand
WEB
	METADATA
		"ows_enable_request" "*"
		"map" "[NETPATH]/configWMSquery.map"
		"ows_schemas_location" "http://schemas.opengeospatial.net"
		"ows_title" "ThailandWMS"
		"ows_onlineresource" "https://gisedu.itc.utwente.nl/cgi-bin/mapserv.exe?map=[NETPATH]/configWMSquery.map&"
		"ows_srs" "EPSG:4326 EPSG:3857" #latlon      
		"wms_feature_info_mime_type" "text/plain"
		"wms_feature_info_mime_type" "text/html"
		"wms_server_version" "1.3.0"
		"wms_formatlist" "image/png,image/gif,image/jpeg"
		"wms_format" "image/png"
	END #web metadata
END #web

SYMBOL
   NAME "circle_sym"
   TYPE ellipse
   FILLED true
    POINTS
      1 1
    END
END #symbol

FONTSET  "fonts/fonts.list"

SYMBOL
    NAME "airport_sym"
    TYPE TRUETYPE
    FONT "ESRI_Default_Marker"
    FILLED true
    ANTIALIAS true
    CHARACTER "o"
END #symbol

LEGEND
    KEYSIZE 16 12
    LABEL
        COLOR 0 0 0
        TYPE TRUETYPE
        FONT "arial"
        SIZE 10
    END #label
    STATUS ON
    POSITION LR
END #legend

LAYER
	NAME "forest"
	TYPE POLYGON
	STATUS ON
	TOLERANCE 5
  TOLERANCEUNITS pixels
	CONNECTIONTYPE postgis
	CONNECTION "user=exercises password=exercises dbname=exercises host=gisedu.itc.utwente.nl port=5432 options='-c client_encoding=UTF8'"
	DATA "geom FROM thailand.forest USING UNIQUE id USING srid=4326"
	METADATA
		"ows_title" "forest"
		"ows_extent" "97.3 5.6 105.7 20.5"
		"wms_include_items" "all"
	END #layer metadata
	PROJECTION
		"init=epsg:4326"
	END #layer projection
	#data attribute to use for classifying:
    CLASSITEM "for_type"
    CLASS
    	NAME "Forest Reserve"
        TEMPLATE "templates/forestquery.html" #path to template for FOREST query
    	EXPRESSION "FR" #if for_type=FR
    	COLOR 56 168 0
    END #class FR
    CLASS
    	NAME "National Park"
        TEMPLATE "templates/forestquery.html" #path to template for FOREST query
    	EXPRESSION "NP" #if for_type=NP
    	COLOR 171 205 102
    END #class NP
    CLASS
    	NAME "Wildlife Sanctuary"
        TEMPLATE "templates/forestquery.html" #path to template for FOREST query
    	EXPRESSION "WS" #if for_type=WS
    	COLOR 245 245 122
    END #class WS
    CLASS
    	NAME "Not forest"
        TEMPLATE "templates/forestquery.html" #path to template for FOREST query
    	EXPRESSION "NF" #if for_type=NF
    	COLOR 200 200 200
    END #class NF
END #layer forest

LAYER
    NAME railroad
    TYPE LINE
    STATUS ON
	TOLERANCE 5
  TOLERANCEUNITS pixels
    CONNECTIONTYPE postgis
	CONNECTION "user=exercises password=exercises dbname=exercises host=gisedu.itc.utwente.nl port=5432 options='-c client_encoding=UTF8'"
	DATA "geom FROM thailand.railroad USING UNIQUE id USING srid=4326"
    METADATA
      "ows_title" "railroad"
  	  "ows_extent" "97.3 5.6 105.7 20.5"
		"wms_include_items" "all"
    END
    PROJECTION
     "init=epsg:4326"
    END
    CLASS
      NAME "railroad"
        TEMPLATE "templates/railroadquery.html" #path to template for RAILROAD query
      STYLE
        COLOR 255 0 0
        WIDTH 2
      END #style
    END #class
END #layer railroad

LAYER
    NAME airports
    TYPE POINT
    STATUS ON
	TOLERANCE 5
  TOLERANCEUNITS pixels
    CONNECTIONTYPE postgis
	  CONNECTION "user=exercises password=exercises dbname=exercises host=gisedu.itc.utwente.nl port=5432 options='-c client_encoding=UTF8'"
	  DATA "geom FROM thailand.airports USING UNIQUE id USING srid=4326"
    METADATA
      "ows_title" "airports"
  		"ows_extent" "97.3 5.6 105.7 20.5"
		"wms_include_items" "all"
    END
    PROJECTION
      "init=epsg:4326"
    END
    #attribute to use for labels:
    LABELITEM "name"
    CLASS
        NAME "airports" 
        TEMPLATE "templates/airportquery.html" #path to template for AIRPORT query
        STYLE
          SYMBOL "airport_sym"
          SIZE 18
          COLOR 0 0 0
        END #style
        LABEL
          COLOR 0 0 0
          TYPE TRUETYPE
          FONT "arial"
          MINSIZE 5
          MAXSIZE 8
          POSITION AUTO
          PARTIALS FALSE
          BUFFER 2
        END  #label
    END #class
END #layer airports

END #map

CLASSITEM "for_type"

CLASS

NAME "Forest Reserve"

TEMPLATE "templates/forestquery.html" #path to template for FOREST query

EXPRESSION "FR" #if for_type=FR

COLOR 56 168 0

END #class FR

CLASS

NAME "National Park"

TEMPLATE "templates/forestquery.html" #path to template for FOREST query

EXPRESSION "NP" #if for_type=NP

COLOR 171 205 102

END #class NP

<!- MapServer Template ->
<!doctype html>
<html>
<body>
The type of this forest is: [for_type]
<hr>
</body>
</html>

<!- MapServer Template ->

<!doctype html>

<html>

<body>

The type of this forest is: [for_type]

<hr>

</body>

</html>

<!- MapServer Template ->
<!doctype html>
<html>
<body>
The ID of this railroad is: [id] <br />
<hr>
</body>
</html>

<!- MapServer Template ->

<!doctype html>

<html>

<body>

The ID of this railroad is: [id] <br />

<hr>

</body>

</html>

<!- MapServer Template ->
<!doctype html>
<html>
<body>
You clicked at map coordinates [mapx],[mapy] <br/>
The name of this airport is: [name]
<hr>
</body>
</html>

<!- MapServer Template ->

<!doctype html>

<html>

<body>

You clicked at map coordinates [mapx],[mapy] <br/>

The name of this airport is: [name]

<hr>

</body>

</html>

OpenLayers functionality for WMS layers

Adding GetFeatureInfo capability

OPTIONAL CHALLENGE: More sophisticated querying

Exercise Sections

Page Content