I have WMS layer with roads serverd from Geoserver (MS SQL View Layer)


I want the user to be able to click on a line and "highlight" it , set it selected so he can use edit tools (split,union) to edit it.

How can it be done ?

  • 1
    It can't be done with WMS - try using WFS
    – Ian Turton
    Commented Jul 23, 2013 at 7:59
  • I've tried doing something similiar to this example : openlayers.org/dev/examples/getfeature-wfs.html nothing worked.
    – Alophind
    Commented Jul 23, 2013 at 8:09
  • @iant : I've updated the JSFiddle with code for selection and it still doesn't work (using WFS). any idea why ?
    – Alophind
    Commented Jul 23, 2013 at 9:14
  • doesn't draw a map for me
    – Ian Turton
    Commented Jul 23, 2013 at 12:00
  • I've just tested it and it works.
    – Alophind
    Commented Jul 23, 2013 at 12:49

1 Answer 1


This is a late answer, but here is why your code won't work:

  • With Geoserver, by deafult the WMS and WFS urls are different. Hence OpenLayers.Protocol.WFS.fromWMSLayer won't work directly. You need to use the OWS Service endpoint, which is the same for WMS & WFS.
  • Secondly, even if you did manage to get the correct protocol, you will run into cross domain issues, and without a proxy, OpenLayers won't be able to make a XHR query for the WFS service. Hence you need to use a proxy, if your App is on webserver, different than your geoserver.

By making these two changes, I was able to get the app running. (Since this requires a proxy, it can't work on jsfiddle.) My code is as follows:

var map, trips;
function init(){
OpenLayers.ProxyHost = "/cgi-bin/proxy_Open.cgi?url="; 
    var zoom = 15, lon=34.798819, lat=31.2611;
    var geographic = new OpenLayers.Projection("EPSG:4326");
    var mercator = new OpenLayers.Projection("EPSG:3857");
    var GeoServerURL = ""

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: mercator

trips = new OpenLayers.Layer.WMS(
    "ViewTrips", GeoServerURL, {
    LAYERS: 'Taskir:ViewTrips',
    transparent: 'true',
    format: 'image/png'            
    }, {
        isBaseLayer: false,
        singleTile: 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]);
var pt=new OpenLayers.Geometry.Point(lon, lat).transform(geographic,mercator ); //project the location
map.setCenter(new OpenLayers.LonLat(pt.x, pt.y), zoom); // Set the Map at the given point

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) {
control.events.register("featureunselected", this, function (e) {
control.events.register("hoverfeature", this, function (e) {
control.events.register("outfeature", this, function (e) {

var vector_style = new OpenLayers.Style({
        'fillColor': '#ff0000',
        'strokeColor': '#ff0000',
        'strokeWidth': 10

var vector_style_map = new OpenLayers.StyleMap({
        'default': vector_style

//set the style for both the Hover & Select
hover.styleMap = vector_style_map; 
select.styleMap = vector_style_map;

I have found that the hovering creates too many requests. For a better User Experience, you could consider disabling hover, and keeping only the select.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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