I am trying to add a WFS to map using OpenLayers 3. There is no error message and no layer displayed on map. GeoJSON object is received in response. Styling object is also getting initialized. Need help to understand if I am missing anything.

<!doctype html>
<html lang="en">
<link rel="stylesheet" 
 href="http://openlayers.org/en/v3.10.1/css/ol.css" type="text/css">
    .map {
        height: 100%;
        width: 100%;
<script src="http://openlayers.org/en/v3.10.1/build/ol.js" type="text/javascript"></script>
<h2>Sample Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
    var createPolygonStyleFunction = function () {
        return function (feature, resolution) {
            var style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 1
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.1)'
            return [style];
    var countrieslayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: 'http://example.com:80/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&typeNames=TEST:Countries&maxFeatures&outputFormat=application/json',
            format: new ol.format.GeoJSON()
        style: createPolygonStyleFunction()
    var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
              source: new ol.source.MapQuest({ layer: 'sat' })
        view: new ol.View({
            center: ol.proj.fromLonLat([37.41, 8.82]),
            zoom: 4

Are you sure that the Response is not empty? often errors like the one you describe have something to do with the same-origin-policy where your request is blocked because you request data from a different port or domain than your OpenLayers app.

You can have a look at my jsfiddle that your code is working if the Geoserver delivers the Layer:


Here you can see that one request delivers an empty response and one gives you the geojson objects:

enter image description here

You will find other posts concerning these topic like this here https://stackoverflow.com/questions/22363192/cors-tomcat-geoserver

| improve this answer | |

I have made a fiddle using your code. The only thing I have changed is the url to get the countries GeoJSON data. It works perfect. here is the fiddle. So I guess there should be the problem.

| improve this answer | |
  • Thanks Pavlos. I am trying to add Geoserver WFS as a Layer in OL3. – DrStrange Oct 28 '15 at 10:26
  • Adding a loader function helps. link – DrStrange Oct 28 '15 at 10:35

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.