I have a WMS PostGIS-based polygon layer served by GeoServer, and whenever I click on any feature I want to get its gid value, so I can pass this value to the DOM. Unfortunately, I could not find a straightforward way to do it. Here is my HTML code:

<div id="map"></div>
    <form id="detailed">
            <label>Polygon ID: <input type="text" id="featureid" value="" /></label>
            <label>Address: <input type="text" id="address" value="" />
            <input type="submit" id="submitdata" />

And here is my OpenLayers code:

var map, info, untiled, tiled, idtrigger;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

format = 'image/png';

var bounds = new OpenLayers.Bounds(110.1986240000002084, -7.5059889999999863, 110.2374630000001758, -7.4334989999999808);

var options = {
    controls: [],
    maxExtent: bounds,
    maxResolution: 0.0295137576322304,
    projection: "EPSG:4326",
    units: 'degrees'

map = new OpenLayers.Map('map', options);

tiled = new OpenLayers.Layer.WMS(
    "neighborhood:blocks - Tiled", "",
        LAYERS: 'neighborhood:blocks',
        STYLES: '',
        format: format,
        tiled: true,
        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
        buffer: 0,
        displayOutsideMaxExtent: true,
        isBaseLayer: true,
        yx : {'EPSG:4326' : true}

untiled = new OpenLayers.Layer.WMS(
    "neighborhood:blocks - Untiled", "",
        LAYERS: 'neighborhood:blocks',
        STYLES: '',
        format: format
        singleTile: true, 
        ratio: 1, 
        isBaseLayer: true,
        yx : {'EPSG:4326' : true}

map.addLayers([untiled, tiled]);

map.addControl(new OpenLayers.Control.PanZoomBar({
    position: new OpenLayers.Pixel(2, 15)

map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));

info = new OpenLayers.Control.WMSGetFeatureInfo({
    url: '',
    queryVisible: true,
    eventListeners: {
        getfeatureinfo: function(event) {
            idtrigger = map.getLonLatFromPixel(event.xy);
            /* up to this point, I need to pass idtrigger to featureid in my form via an $.ajax() [jQuery] request accessing PostGIS table. */


So, I planned to get the long + lat via WMSGetFeatureInfo, processed the string "lon=xxx,lat=xxx" into "xxx yyy", passed it to jQuery $.ajax() request accessing PostGIS table. Was it "the right way" to do it, or actually I'd been lost in a maze?

Attention for Moderator: Please flag this question as solved

Finally after struggling around the docs pages and other resources, I found the solution. Here is the solution, and hopefully it would be the "right way" to do it:

  1. I add the proxy handling for HTTP request:

    OpenLayers.ProxyHost = "./proxy.php?url=";
  2. Create file proxy.php like in OpenLayers Cookbook and place it on the same directory [or other properly dir] as the HTML/PHP page.

  3. Modify file proxy.php, I modified:

    $host = "";


    $port="8080"; /* it's GeoServer's port */
  4. Modify the WMSGetFeatureInfo block into:

    info = new OpenLayers.Control.WMSGetFeatureInfo({
        url: "",
        layers: [untiled,tiled],
        queryVisible: true,
        infoFormat: "application/vnd.ogc.gml",
        eventListeners: {
            getfeatureinfo: function(event) {
                console.log(event.features[0].attributes.id); /* inspecting result */
        vendorParams: {
            radius: 0
  • 2
    if you place your latest edit into an answer you can accept it as correct to show others how you solved the problem. – Ian Turton Jan 24 '14 at 8:38
  • Next time I'll do it, and thank you very much for your suggestion, @iant . – Andy Jan 24 '14 at 13:29

Try something like this. You may be trying to do to much. I have activated the control on startup, as you have. I also just ran a little test and could see good results in my console. Let me know if it works.

var format = "application/vnd.ogc.gml";
ctrl_getfeatureInfo = new OpenLayers.Control.WMSGetFeatureInfo({
  url:my geoserver,
  layers: [mylayer],
  queryVisible: true,
  infoFormat: format
ctrl_getfeatureInfo.events.register("getfeatureinfo", this, showfeature);

function showfeature(evt) {
  // get here from ctrl_getfeatureInfo.events.register("getfeatureinfo
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.