I use openlayers 3 and Geoserver 2.12. I'm writing a function to get features by mouse click but in the result I get the features far south-west from the clicked pixel.

I have to notice that my Geoserver's shapes and the group of layers are in EPSG:4326. OL loads my map normally but if try to set the EPSG:4326 projection in the view's declaration it doesn't load it. In debug I can see that view's projection is EPSG:4326 but the map is not shown.

As I know OL sets the EPSG:3857 by default and now I can't change it. So most likely because of the inconsistency of the projections it finds wrong features.

Here is the code:

function initMap() {

var wmsSource = new ol.source.TileWMS({
    url: '',
    params: {
        'FORMAT': 'image/png',
        'service':'WMS&version = 1.1',
        'LAYERS': 'CFD:CFD',
        'TILED': 'true'
    serverType: 'geoserver',
    transition: 0

var layers = [
    new ol.layer.Tile({
        source: wmsSource,
        minResolution: 0

var view = new ol.View({
   // projection: 'EPSG:4326', - if uncomment the map will not load
    center: ol.proj.transform([36.587147,50.598299], 'EPSG:4326', 'EPSG:3857'),

var map = new ol.Map({
    controls: ol.control.defaults().extend([
        new ol.control.ScaleLine({
            units: 'degrees'
    layers: layers,
    target: 'map',
    view: view

function onMapClick2(evt) {

    var pixel = evt.pixel;
    var bbox = evt.map.getView().calculateExtent(evt.map.getSize());

    var url = '' +
        'SERVICE=WMS&' +
        'VERSION=1.3.0&' +
        'REQUEST=GetFeatureInfo&' +
        'FORMAT=text/xml&' +
        'version%20%3D%201.1&' +
        'LAYERS=CFD:CFD&INFO_FORMAT=text/xml&' +
        'I=' + parseInt(pixel[1]) +'&'+
        'J=' + parseInt(pixel[0]) +'&'+
        'WIDTH='+ evt.map.getSize()[0] +'&' +
        'HEIGHT='+ evt.map.getSize()[1] + '&' +
        'CRS=EPSG:3857&' +
        'STYLES=&' +
        'BBOX=' + bbox[0] +',' + bbox[1] +',' + bbox[2] +',' + bbox[3];
    fetch(url).then(function(response) {
        return response.text();
    }).then(function(response) {

        var allFeatures = new ol.format.WMSGetFeatureInfo().readFeatures(response);
        document.getElementById('all').innerText = allFeatures.length.toString();
        var res = '';
        for (var i = 0; i < allFeatures.length; i++) {
            res = res + ' name = ' + allFeatures[i].getProperties().name +  ' fclass = ' +
                allFeatures[i].getProperties().fclass + ' || ';


1 Answer 1


I suspect your problem is caused by the fact you are mixing WMS versions and using EPSG:4326. Your map is being requested using WMS version 1.1.0 which defines EPSG:4326 as lon/lat while your GetFeatureInfo is using WMS 1.3.0 which defines EPSG:4326 as lat/lon.

The correct way to construct a GetFeatureInfo request is to take the GetMap URL and change the request to GetFeatureInfo and then add the X/Y (or I/J) pixel location of the click and a QueryLayers parameter to list the layer(s) you want to query. This way you are sure the server is using the same map as you are.

  • Yes! You are right! 1. I've changed the version to 1.1 and I to X, J to Y and the order of pixel array elements in my GetFeatureInfo url. Now everything looks ok. Thank you, Ian! Apr 29, 2018 at 21:25

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.