4

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?

  • 1
    According to the docs, getJSON is asynchronous. You probably need a callback function. – Rob Skelly Sep 27 '15 at 16:31
  • Can you give me a short example of how such a function might look like? Pretty new to javascripting ;) – Curlew Sep 27 '15 at 20:30
8
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/

2

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.

  • How to to on windows path? – jlSta Feb 12 at 20:40
1

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.

  • Many thanks for the explanation! Didn't know about those asynchronous tasks before. Nevertheless I will accept @Thomas-b answer as his solutions works out of the box. – Curlew Sep 28 '15 at 18:53
  • No worries. The other answer is definitely better than mine. – Rob Skelly Sep 28 '15 at 20:21

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.