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.