15

I have a geojson layer in my OL3 app which I want to redraw every 5 seconds (to show movement on map) .

How do I do it ? Couldn't find the equivalent of Layer.redraw().

9
  • Have you looked at ol.animation? In general, vector drawing is smoother and handled differently in ol3, but it isn't entirely clear from your question what you are wanting to do. Oct 8, 2014 at 0:14
  • @JohnBarça - My GeoJson data comes from postgres which is being updated every 5 seconds with new GPS data. I want to redraw the layer to show each time the current position of the units on the map (it keep changing...)
    – Alophind
    Oct 8, 2014 at 5:49
  • So, you are requesting data every 5 seconds using a recursive setTimeout call (or something similar) and you just want to know how to force the vector features to refresh? Oct 8, 2014 at 9:22
  • @JohnBarça - If there is a better way I'm willing to learn ,but this is what I do , I want to show location of GPS in real time on map. GPS send their location to PostGIS and from there I read the data using GeoJSON (or I can use GeoServer) but I wish for the layer to update itself every once in a while.
    – Alophind
    Oct 8, 2014 at 19:28
  • Sure, I get what you are trying to do. Any chance of a code sample, because in my experience, if you put an animation loop in settimeout, with an ajax call to a remote server, and load the json that comes back using Format.GeoJSON or similar, the features will get updated. Oct 9, 2014 at 7:40

7 Answers 7

10

This is how you can refresh a vector source every 5 seconds, from a web service returning features in a GeoJSON document:

var vectorSource = new ol.source.Vector();
var geojsonFormat = new ol.format.GeoJSON();

window.setTimeout(function() {
  $.ajax('http://example.com/data.json', function(data) {
    var features = geojsonFormat.readFeatures(data
        {featureProjection:"EPSG:3857"});
    geojsonSource.clear();
    geojsonSource.addFeatures(features);
  });
}, 5000);

jQuery is used here for requesting the data through Ajax ($.ajax), but you can obviously use the library of your choice.

This code snippet also assumes that the map's projections is "EPSG:3857" (web mercator) and that the coordinates in the GeoJSON documents are longitudes and latitudes.

2
  • 3
    This code confuses me, should vectorSource and geojsonSource be merged? Jul 14, 2015 at 3:02
  • I think you mean window.setInterval not setTimeout; otherwise it only does it once.
    – Jonathan
    Mar 13, 2018 at 20:27
9

I know that this question is old but i've finally found a solution to refresh a layer on openlayers 3.

You have to update params of the layer source like this:

var source = yourLayer.getSource();
var params = source.getParams();
params.t = new Date().getMilliseconds();
source.updateParams(params);
2
  • 6
    It seems not all sources support the updateParams method; OL3.18.2 only shows it for ImageArcGISRest, ImageMapGuide, ImageWMS, TileArcGISRest and TileWMS, and not for, e.g., ol.source.Vector.
    – Arjan
    Sep 21, 2016 at 19:22
  • Date#getTime may be better than Date#getMilliseconds to invalidate cache and force the layer to redraw as it will ensure a unique number each time.
    – walkermatt
    Jul 26, 2018 at 11:19
5

You can refresh a WFS layer with myLayer.getSource().clear().

3
  • 1
    This did it for me with OpenLayers 3 v. 0.14.2 and a WFS GeoJSON vector source.
    – Dirk
    Mar 18, 2016 at 16:47
  • 3
    nothing wrong with a one-line answer if they are on the money. there should be a reputation award to have this info box removed. Jun 15, 2016 at 17:34
  • 1
    The answer is correct, but this might show some flickering: upon calling clear() any existing features will be removed from the map right away, and only be added again after receiving the HTTP response. This is true for both specifying a value for VectorOptions#url and for VectorOptions#loader. For realtime data, manually doing some WebSockets or XHR magic and then calling getSource().clear() followed by getSource().addFeatures(...) might look better to the end user.
    – Arjan
    Sep 29, 2016 at 13:14
5

You can use the changed method for layers to indicate a change and let OL repaint it:

layer.changed();
2
  • 2
    You need to explain a bit more about how layer.changed(); works perfect(ly) for layers. The documentation description Increases the revision counter and dispatches a 'change' event. isn't really helpful. How does using the changed() method answer the question regarding redrawing the map every 5 seconds?
    – nmtoken
    Nov 25, 2016 at 11:07
  • I have used Ajax to save a revised geojson source, and the problem I had was that if I closed the layer and re-opened it the map used the cached (unrevised) version of the source. Once I cleared the cache the layer used the revised source as I would expect. Unfortunately, the suggested layer.changed(); had no effect for me, but source.changed(); did the trick. Jan 15, 2018 at 19:37
3

With OL2 I used a layer refresh strategy which hasn't been added to OL3. Below is a self calling function that will use an ajax request to fetch the GeoJSON and then read it and add it to a source.

var yourSource = new ol.source.GeoJSON();

//add this source to a layer, the layer to a map with a view etc
...

//now fetch the data
var fetchData = function () {
    jQuery.ajax(url,
    {
        dataType: 'json',
        success: function (data, textStatus, jqXHR) {
            yourSource.clear(); //remove existing features
            yourSource.addFeatures(yourSource.readFeatures(data));
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    //call this again in 5 seconds time
    updateTimer = setTimeout(function () {
        fetchData();
    }, 5000);
};
fetchData(); //must actually call the function!

Hope this helps.

1

There is no need to refresh explicitly. Each time you update the content of a layer the map is refreshed requesting a new frame rendering.

To force rendering manually you have map.render() and map.renderSync()methods.

1
  • 1
    That doesn't update the content, just updates the map canvas itself.
    – Mapper
    Jun 1, 2015 at 7:15
0

I don't know if in OpenLayer 3 this works, but in actual version (OL6) I use a simple

layer.setStyle(layer.getStyle())

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.