3

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

  • As I use JSONP (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! (gis.stackexchange.com/questions/40538/…) – user1919 Nov 26 '15 at 10:22
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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