Reloading a vector source when URL changes

[acanimal]

Hi,
following Bart's recommendation I open this ticket so the issue can be commented.

It starts with https://groups.google.com/forum/#!topic/ol3-dev/PjFBy5mxwgo and https://groups.google.com/forum/#!topic/ol3-dev/H6tZaFUUO4E topics on the forum.

Once a vector layer with its source pointing to some URL is created, there is no way to update the layer (really the source) content other than loading, cleaning and adding new features by hand.

Although manually loading is the most flexible option, I think it is a bit confusing. I a user loads data initially setting an url property, why we need to load content manually if we want update the source?

It could be easy to have a setUrl() that updates the urlproperty and invokes the loadFeaturesFromURL() method.

Any opinions?

PS: I offer as voluntary to make the code changes. But I don't know when I have enough free time :)

---

Want to back this issue? Place a bounty on it! We accept bounties via Bountysource.

[jankenr]

Hi there,

Where can I make a +1? ;-)
I would really like to reload a vector with a updated url by request.
At the moment I load all the data needed and filter this in a style function.

Best regards,
Roel

[elemoine]

This can easily be done at the application level:

function reload() {
  $.ajax(url_to_ws, function(response) {
    var geojsonFormat = new ol.format.GeoJSON();
    vectorSource.clear();
    vectorSource.addFeatures(geojsonFormat.readFeatures(response));
  });
}

No?

[akrherz]

I ran into this issue and it appears that all is now necessary is:

function reload() {
       var geojsonFormat = new ol.format.GeoJSON();
    vectorLayer.setSource(new ol.source.Vector({
        url: '/my/urlhere,json',
        format: geojsonFormat
    }));
}

I found that calling clear() causes a re-fetch of the remote resources, so the above would load the data twice?

[elemoine]

@akrherz note that setting a url and format on the vector source is not mandatory, you can do things manually if you want to fully control the behavior of your vector source. This is what I would use:

function loadSource(source, url) {
  $.ajax(url, function(response) {
    var geojsonFormat = new ol.format.GeoJSON();
    source.clear(true);
    source.addFeatures(geojsonFormat.readFeatures(response));
  });
}

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector()
});

// initial loading of the vector source
loadSource(vectorLayer.getSource(), initialUrl);

[akrherz]

@elemoine when I call source.clear(true); in your example, this causes the source to load the data. So the code example loads the data twice.

[elemoine]

@akrherz in my example the source does not have a url so I don't understand how clear could load the source. What am I missing?

[akrherz]

@elemoine I am unsure what to say, when I try your code example in my app (no public access) and simply call vectorLayer.getSource().clear(true); on the chrome devel console, this single action causes the app to refetch the geojson data from the server.

[elemoine]

I'd need to see your code.

[akrherz]

@elemoine if it does not do this when you try it, it likely means I am doing something wrong. It isn't worth your bother. Thanks for the responses and work on openlayers.

[Neznaykas]

Hello. I faced with the same problem.
How use this in ol.source.ServerVector with bbox?

When i call clear() it consumed a lot of resources.
Please, give a small example.

var vectorSource = new ol.source.ServerVector({
            format: new ol.format.KML({
                extractStyles: true,
            }),
            loader: function(extent, resolution, projection) {
                var epsg4326Extent = ol.proj.transformExtent(extent, projection, 'EPSG:4326');
                var server_url = url +
                    "?campus=" + campus +
                    "&zoom=" + zoom +
                    "&layer=" + layer +
                    "&KMLFeatures=" + features +
                    "&bbox="  + epsg4326Extent.join(',');
                $.ajax(server_url).then(function(response) {
                    vectorSource.clear(true);
                    vectorSource.addFeatures(vectorSource.readFeatures(response));
                });
            },
         projection: 'EPSG:3857'
        });

[elemoine]

What ol3 version do you use? Note that ServerVector was removed in 3.5.

[Neznaykas]

Oh, I used the last version (v3.2.1).

As I understand the new version does not have this problem?
Then I will update the version of the library, and use an existing solution.

Thank you.