First time trying to draw an Openlayers map with GeoJSON instead of WMS, and not having much luck. My layer is hosted in Geoserver and is named 'sections', in a workspace called 'basic_map'. This is my code so far:
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://localhost:8082/geoserver/basic_map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=basic_map:sections&maxFeatures=50&outputFormat=application%2Fjson',
format: new ol.format.GeoJSON(),
crossOrigin: 'anonymous',
})
});
var mapcentre= ol.proj.transform([157.83430,-33.07209],
'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
layers: [
vectorLayer
],
target: 'map',
view: new ol.View({
center: mapcentre,
zoom: 14
})
});
The URL link is just copied from the layer preview, which I'm not sure on as some examples use wfs instead.
The developer console also shows an error saying 'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8082/geoserver/basic_map/ows?………'
Best Answer
Thanks to Alex Leith below for putting me on the right track...the fix was slightly different so I'll give the details:
Entered this script into web.xml, found in C:\Program Files (x86)\GeoServer 2.10.1\webapps\geoserver\WEB-INF (sorry the HTML tags are not displaying):
cross-origin org.eclipse.jetty.servlets.CrossOriginFilter
cross-origin /*
Download and copy jetty-servlets-9.2.13.v20150730.jar into C:\Program Files (x86)\GeoServer 2.10.1\webapps\geoserver\WEB-INF\lib, NOT the path mentioned in the OpenGeo Suite docs. Also I was a bit confused as I already had a .jar file called 'jetty-servlet-', without the 's'. Which is not the same thing.
For good measure, I removed the comment markers from this code in the web.xml file, and set it as 'true', eg.
ENABLE_JSONP true
For the URL in the openlayers ol.source.Vector/ ol.format.GeoJSON, I just copied the URL from the layer preview. Eg.
var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ format: new ol.format.GeoJSON(), crossOrigin: 'anonymous', url: http://localhost:8082/geoserver/basic_map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=basic_map:sections&maxFeatures=50&outputFormat=application%2Fjson',