13

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().

  • 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. – John Powell Oct 8 '14 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 '14 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? – John Powell Oct 8 '14 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 '14 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. – John Powell Oct 9 '14 at 7:40
9

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.

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

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);
  • 3
    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 '16 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 '18 at 11:19
5

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

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • 1
    This did it for me with OpenLayers 3 v. 0.14.2 and a WFS GeoJSON vector source. – Dirk Mar 18 '16 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. – Dennis Bauszus Jun 15 '16 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 '16 at 13:14
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.

2

This works perfect for layers:

layer.changed();

as per http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changed

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • 1
    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 '16 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. – Peter Cooper Jan 15 '18 at 19:37
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.

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

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.