I want to show on the map the features of the saved layers from a GeoServer server, but I don't know how to do this...

Like this, but with the dragbox interaction...

I have this code:

var select = new ol.interaction.Select();
var selectedFeatures = select.getFeatures();
var dragBox = new ol.interaction.DragBox({
        condition: ol.events.condition.always,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: [0, 0, 255, 1]


    dragBox.on('boxend', function(e) {
        if (capaActiva != null) {
            var info = [];
            var extent = dragBox.getGeometry().getExtent();
            var source = capaActiva.getSource();
            var url = source.getGetFeatureInfoUrl(extent, viewResolution, 'EPSG:3857',{'INFO_FORMAT': 'text/plain'});

        } else {
                title: 'Error',
                msg: 'Check a layer',
                buttonText: {                        
                    ok: 'Aceptar',
  • 1
    in general you can't select a WMS layer as it is a picture of your map data.
    – Ian Turton
    Commented Jun 23, 2015 at 19:18
  • 1
    More precisely, you can't give an extent to getGetFeatureUrl, as it can only query the server with a single pair of coordinates (that's how getFeatureInfo works in a WMS server). Commented Jun 23, 2015 at 19:24
  • Ok got it, but how can i do that? Commented Jun 23, 2015 at 19:41

1 Answer 1


WMS GetFeatureInfo only supports queries with one pair of coordinates at a time. Therefore, you can't use an extent to request feature information from a WMS server. You can however use WFS to load the vector data directly into the application, or use a click type interaction (ol.interaction.Pointer for example).

If you are using GeoServer, the request also lacks some required parameters. If only one pair of coordinates are passed to the function, it would return an error from the server side, as no QUERY_LAYERS options are set. The correct function would look like the following:

var source = capaActiva.getSource();
var viewResolution = map.getView().getResolution();
var queryLayers = source.getParams().layers;
var url = source.getGetFeatureInfoUrl(coords, viewResolution, 'EPSG:3857',{'INFO_FORMAT': 'text/plain', 'QUERY_LAYERS': queryLayers});

With the URL, you can send an XMLHttpRequest to the server, and process the response, if the request was successful.

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.