Reading in local GeoJSON file for OpenLayers

Question

I am kinda new to OpenLayers and not (yet) very experienced in JavaScript.

I have a WordPress blog and I want to replicate and adjust the following script to my needs: http://jsfiddle.net/eqsrnjos/1/

With one big exception: I need to load the GeoJSON file from the server instead of defining it in the top (so replace the var geoJson).

However the most straight forward way does not seem to work for me:

function getData() {
return jQuery.getJSON("/json/studyCentroids.json");
}

var features = new ol.format.GeoJSON().readFeatures( getData() );

In Firebug I can see that the GeoJSON file is properly loaded, but it does not seem to appear for some reason?

Answer 1

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'http://yourserver.com/yourgeojsonfile.js'
    }),
    style: new ol.style.Style({
        image: new ol.style.Circle( /** @type {olx.style.IconOptions} */ ({
            radius: 20,
            fill: new ol.style.Fill({
                color: '#ffff00'
            })
        }))
    })
});

http://jsfiddle.net/expedio/9hnjok8n/

Answer 2

Just in case: an asynchronous method is one that returns immediately while the actual work continues in the background. This allows your program to continue to run while the request, which may take a long time, is blocking. In JavaScript, you usually pass in a function that will get called when the asynchronous task completes.

In your case, getData is returning the return value of getJSON which appears to be nothing, and you're passing that value (nothing) into readFeatures.

Instead, you want to wait until getJSON succeeds, then call readFeatures:

var features;
jQuery.getJSON("/json/studyCentroids.json", function(data) {
  features = new ol.format.GeoJSON().readFeatures( data );    
  alert(features); // success!
});
alert(features); // undefined

I put the alerts in there to show when you can use the features variable and when you can't.

Note: I haven't used jQuery for this, nor tested the snippet.

Answer 3

Here's a quick way of loading the geoJSON directly when creating the ol.layer.Vector object:

function createLayerCountries() {
    return new ol.layer.Vector({
        source: new ol.source.Vector({
            //url: 'http://www.yourserver.com/static/countries.geojson',
            url: './countries.geojson',
            format: new ol.format.GeoJSON()
        })
    });
}

url supports both remote and local files, the active line takes the geojson file from the same folder the page code is.