Custom OpenLayer Control

Today I decided to write a small tutorial on how to write a custom control in Openlayers (2.x) that can identify a wfs feature without the wfs being displayed in the map.
The data I am working are mainly polygons, they cover the whole area that the project focuses because they obey a basic topology (no overlapping and no gaps).

  • Step: One
  • we have to name our control, so I choose the obvious name Identify

  • Step: Two
  • what is important is to write the initialize function and decide what handler our control will use, OpenLayers has several handlers that one can use. In this Controls we will use the Click Handler because we need the user to click and map also we need to define some default options for it

  • Step: Three
  • then we need to write a trigger for our handler, what will happen when the user clicks the map

  • Step: Four
  • In order to get the feature from the wfs layerwe need to create a filter that will query the wfs layer and return only the feature we need. To do this what we do is get the click coordinates and check whether or not they intersect a feature in the layer. OpenLayers have build in function to create such a filter. The nice thing about the Filter function is that it doesn’t matter what is the type of the geometry we pass, it will build the correct gml-feature. One thing we unfortunately have to know beforehand is the name of the Geometry Column in our database. (property: “GEOM”)

  • Step: Five
  • Then we transform our filter to xml so we can post it to our Server using the corresponding OpenLayer build in functions

  • Step: Six
  • Our Last Steps involve building our Ajax Request. Personally because I use mostly GeoExt2 in my OpenLayers Projects the obvious choice for me is through the Ext Library but it can be easily done with other libraries as well such as Jquery or without libraries at all (for some odd reason)

  • Step: Seven
  • My projects usually have a config file where I define a lot of global variables some of the usual global variables are the
    OpenLayers.ProxyHost Only necessary if your application and your gis server do not reside in the same application server (which is usually the case)
    geoserverWfsDefaults.wfsUrl The address of the wfs node of your gis server (in this case I am using GeoServer)
    geoserverWfsDefaults.wfsVersion The version of wfs that your gis server is using (some use more than one)

  • Step: Eight
  • What you will do on success is up to you this example has a small snippet on how to build a OpenLayers feature from the Response (using Ext.JSON.decode).
    You can add it to a vector layer or you can iterate the attributes and display a popup (i do both with my identify tool). Also it is wise to add some code to check whether the request returned any features or not.

  • Step: Nine
  • Write some code to handle any failure

  • Step: Ten
  • In order to use this control you need to call it like this
    var ident = new OpenLayers.Control.Identify();
    ident.activate;
    usually by pressing a button. But after using the control if we don’t want to repeat its actions every time the user clicks on the map. We can deactivate it and activate it again the next time the button is pressed.