Openlayers WMS select feature

by João Rodrigues

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<div id="map" class="smallmap"></div>

CSS

html, body, #map {
    height: 100%;
    width: 100%;
}
div.olMap {
    z-index: 0;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default;
}
div.olMapViewport {
    text-align: left;
}
div.olLayerDiv {
    -moz-user-select: none;
    -khtml-user-select: none;
}
.olLayerGoogleCopyright {
    left: 2px;
    bottom: 2px;
}
.olLayerGoogleV3.olLayerGoogleCopyright {
    right: auto !important;
}
.olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;
}
.olLayerGoogleV3.olLayerGooglePoweredBy {
    bottom: 15px !important;
}
.olControlAttribution {
    font-size: smaller;
    right: 3px;
    bottom: 4.5em;
    position: absolute;
    display: block;
}
.olControlScale {
    right: 3px;
    bottom: 3em;
    display: block;
    position: absolute;
    font-size: smaller;
}
.olControlScaleLine {
    display: block;
    position: absolute;
    left: 10px;
    bottom: 15px;
    font-size: xx-small;
}
.olControlScaleLineBottom {
    border: solid 2px black;
    border-bottom: none;
    margin-top:-2px;
    text-align: center;
}
.olControlScaleLineTop {
    border: solid 2px black;
    border-top: none;
    text-align: center;
}
.olControlPermalink {
    right: 3px;
    bottom: 1.5em;
    display: block;
    position: absolute;
    font-size: smaller;
}
div.olControlMousePosition {
    bottom: 0;
    right: 3px;
    display: block;
    position: absolute;
    font-family: Arial;
    font-size: smaller;
}
.olControlOverviewMapContainer {
    position: absolute;
    bottom: 0;
    right: 0;
}
.olControlOverviewMapElement {
    padding: 10px 18px 10px 10px;
    background-color: #00008B;
    -moz-border-radius: 1em 0 0 0;
}
.olControlOverviewMapMinimizeButton, .olControlOverviewMapMaximizeButton {
    height: 18px;
    width: 18px;
    right: 0;
    bottom: 80px;
    cursor: pointer;
}
.olControlOverviewMapExtentRectangle {
    overflow: hidden;
    background-image: url("img/blank.gif");
    cursor: move;
    border: 2px dotted...

JavaScript

(function ($) {

    var map, select, hover, control;

    var epsg4326 = new OpenLayers.Projection('EPSG:4326');
    var epsg900913 = new OpenLayers.Projection('EPSG:900913');
    var GeoServerURL = "http://192.168.1.201:8080/geoserver/labs/wms";

    var lon = -0.125,
        lat = 51.5,
        zoom = 16;
 
    function init() {
        map = new OpenLayers.Map('map', {
            units: 'm',
            numZoomLevels: 16,
            controls: [
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.ScaleLine(),
            new OpenLayers.Control.MousePosition(),
            new OpenLayers.Control.LayerSwitcher()],
            projection: epsg900913,
            displayProjection: epsg4326
        });

        var trips = new OpenLayers.Layer.WMS(
            "labs:tvm_cell_sector", GeoServerURL, {
            LAYERS: 'labs:tvm_cell_sector',
            STYLES: '',
            transparent: 'true',
            format: 'image/png',
            tiled: true,
            tilesOrigin: map.maxExtent.left + ',' + map.maxExtent.bottom
        }, {
            buffer: 0,
            displayOutsideMaxExtent: true,
            isBaseLayer: false,
            yx: {
                'EPSG:4326': true
            }
        });

        select = new OpenLayers.Layer.Vector("Selection", {
            styleMap: new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
        });

        hover = new OpenLayers.Layer.Vector("Hover");

        var osm = new OpenLayers.Layer.OSM();

        map.addLayers([osm, trips, hover, select]);

        control = new OpenLayers.Control.GetFeature({
            protocol: OpenLayers.Protocol.WFS.fromWMSLayer(trips),
            box: true,
            hover: true,
            multipleKey: "shiftKey",
            toggleKey: "ctrlKey"
        });
        control.events.register("featureselected", this, function (e) {
            select.addFeatures([e.feature]);
...