Hello Everyone, Welcome to next tutorial of open layers in which we will learn to create feature information tool on map click in OpenLayers. So what is Feature Information in GIS ? Feature information is Non-GIS information associated with GIS data.
For complete source code of this tutorial, click here
Check the Live Feature Information Tool on map by clicking here
Let’s have a look in following code gist. At line number 2, we are defining a WMS(Web Map Service) layer. At line number 3, we are defining source for layer. To get more information on layer and source, click on following article.
View, Layer and Source in OpenLayers-Part 2
For WMS layer, we need to set url and params property. URL property set the url of GIS Server which in our case is GeoServer. PARAMS property set the layer name that we want to use. So layer name acts as unique identifier for layer. These properties are specific to GeoServer only. We will display feature information for this layer.
At line number 12, we are defining an OpenLayers map.
At line number 13, we defining an Overlay component. This overlay is very useful and it is used to create a popup/dialog on map. This component will be used to create a feature information tool on map click. The overlay component can positioned any where on map using it’s setPosition method which takes lat-lon value for setting it’s position
OpenLayer ol.Overlay component works with html element. You need to specify an html element in your html file that will be used by ol.Overlay. At line number 4, we are defining an map element. That map element will used by openlayers to render map on it. Inside map element, at line number 4, we are defining popup element. This popup element will be used by ol.Overlay component to render feature information.
We have created the map and added the layer for which we want to display feature information tool. Now, let’s create the main tool. For this tool to work, we need a map click event which will listen to click. OpenLayers provide necessary map events like click, hover, move etc. The map object define at line number has on function. This on function accepts event type and activates the event.
At line number 7 in below code gist, we are creating an on click event which will listens to map click.
At line number 8, we are using getFeatureInfoUrl method for wmsLayer to create a wms url. This function accepts coordinate parameter for map click location, map resolution, projection, info_format and peroperty_name. Based on the parameters, it will create a wms url. This url will give the feature information in json fromat when called.
At line number 17, we are calling the url using fetch method. The result is obtained in JSON format.
At line number 22, we are creating an overlay and at line number 23 we are setting it’s position on map. The overlay will be located on where we will click.
Once we have the feature information from url, we are creating table element and storing the result in it. The table is finally appended to overlay at line number 46. After that, overlay will be shown on map and will be positioned at click location.
The key take way from this course is getFeatureInfoUrl method and ol.Overlay component. This method is used to construct a feature url for a particular coordinate. If you remember, this method accepts a coordinate value where we have clicked. ol.Overlay is used to create overlay/popup