5

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?

2
  • 1
    According to the docs, getJSON is asynchronous. You probably need a callback function.
    – Rob Skelly
    Sep 27, 2015 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, 2015 at 20:30

3 Answers 3

9
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/

1
  • How would access the properties of that geojson file?
    – dwright
    Nov 5, 2020 at 10:30
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.

2
  • 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, 2015 at 18:53
  • No worries. The other answer is definitely better than mine.
    – Rob Skelly
    Sep 28, 2015 at 20:21
1

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.