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.

Answer 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

Answer 2

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
});