Create and show a vector layer from Geoserver using Openlayers3

Question

It seems the transition from OL2 to OL3 will be harder than I thought. There are significant differences and the online support its still limited (regarding examples etc.)

I am trying to do something relatively simply..to display a WFS layer on my map using OpenLayers3. I have found this example and tried to modify it to my needs.

He presents 3 different ways to create a vector layer from geoserver and I used the last one (JSONP format). That means that I had to enable JSONP in geoserver as described here.

When I try to see the map I get a blank page with the error:

Uncaught TypeError: undefined is not a function

on line 82 which is:

strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({

If I change this line into:

strategy: ol.loadingstrategy.box

then I see the map layer (but not the vector layer) and I get this error:

XMLHttpRequest cannot load http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFe…4558475.055843057%2C2678334.3618555046%2C4592871.718571385%2CEPSG%3A900913. 

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

This is my code in the init() function

function init() {

var center = ol.proj.transform([23.709719,37.973333], 'EPSG:4326','EPSG:900913');
var view = new ol.View ({
    center: center,
    zoom: 12,
});

var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

// WFS layer from Geoserver

loadFeatures = function(response) {
formatWFS = new ol.format.WFS(),
sourceVector.addFeatures(formatWFS.readFeatures(response));
};


sourceVector = new ol.source.Vector({
loader: function(extent) {
    $.ajax('http://localhost:8080/geoserver/wfs',{
        type: 'GET',
        data: {
            service: 'WFS',
            version: '1.1.0',
            request: 'GetFeature',
            typename: 'dSpatialAnalysis:categoriesdata',
            srsname: 'EPSG:900913',
            outputFormat: 'application/json',
            bbox: extent.join(',') + ',EPSG:900913'
            },
        }).done(loadFeatures);
    },
    strategy: ol.loadingstrategy.bbox
});

layerVector = new ol.layer.Vector({
    source: sourceVector,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
        })
    })
});

map = new ol.Map({
    target:'map',
    renderer:'canvas',
    view: view,
    layers: [newLayer, layerVector],
});

}

I have downloaded the library and call it locally:

<!-- Load Openlayers - openlayers 2.13 cause issue with geoserver-->
<script src="libs/OpenLayers-3/ol.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- add jquery -->

EDIT

Removing the port from the URL makes the request correctly and I can see in Firebug the response. But I still have issues displaying the points on the map.

looks like you have a cross origin request problem, use a proxy or set the header — Ian Turton, Nov 25 '15 at 16:18
Well in the OpelLayers 2 it was possible to use this: OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; But I found out that in OL3 using a proxy is not the way to do it. Please sea also the edit. — user1919, Nov 25 '15 at 16:21

score 1 · Answer 1 · answered Nov 25 '15 at 20:08

1

About the cross-domain scripting problem as @iant suggests you need to set a proxy. Removing the port will just make it work locally, or at least work when your http requests are executed from the same domain and port.

Now for your second problem I think it has to do with the projection you use. As far as I know new ol.source.OSM() is projected in EPSG:3857 so I would recommend to turn every projection you pass to this and check again

answered Nov 25 '15 at 20:08

pavlos

3,538
14
18

As I use JSONP (https://en.wikipedia.org/wiki/JSONP) I don't need to set a proxy. Also I read that in OL3 its recommended not to set a proxy in favor of other methids e.g. JSONP. – user1919 Nov 25 '15 at 20:27
The problem comes when you need authentication on geoserver. Proxy will solve this as well. I have tried with jsonp but could find an elegand way to authenticate. Aparently, did you try to change to EPSG to 3857?? – pavlos Nov 25 '15 at 20:39
I see. Ok. I will try to use the proxy and change the projection and come back to you. Till tomorrow. Cheers. – user1919 Nov 25 '15 at 20:46
So, in the end I used the proxy solution. Regarding the EPSG I found out that EPSG:3857 and EPSG:900913 is the same think! (http://gis.stackexchange.com/questions/40538/what-is-the-difference-between-epsg900913-and-epsg3857) – user1919 Nov 26 '15 at 10:22

score 1 · Accepted Answer · answered Nov 26 '15 at 10:20

This is how I managed this afer all. As @iant and @pavlos suggested I used a proxy:

var url="http://localhost:8080/geoserver/wfs?&service=wfs&version=1.1.0&request=GetFeature&typeNames=dSpatialAnalysis:categoriesdata";
var vector_layer=new ol.layer.Vector({
    title: 'layer_name',
    source: new ol.source.Vector({
        url: '/cgi-bin/proxy.cgi?url='+ encodeURIComponent(url),
        format: new ol.format.WFS({
        })
    }),
    style: iconStyle
});

Create and show a vector layer from Geoserver using Openlayers3

2 Answers2