Using GeoJSON in OpenLayers 4 and Geoserver – A Guide

geojsongeoserveropenlayers

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:

  1. 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 /*

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

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

  4. 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',

Related Question