Using OpenLayers 4 displaying a map with GeoJSON data(few polygons and circles features in it). Onload everything is displaying as expected.
Now trying to show different GeoJson data on ajax onClick event. Tried docketSource.refresh();
But not working. Please suggest me a solution.
My button
<p:commandButton value="Change Data" ajax="true"
actionListener="#{geojsonMapController.prepareGeoJson}" oncomplete="changeGeoJsonData();"/>
JS code
var map, docketLayer, docketSource;
docketSource = new ol.source.Vector({
url:'http://localhost:8080/mapApp/resources/map/fetch?111',
format: new ol.format.GeoJSON()
});
docketLayer = new ol.layer.Vector({
source: docketSource,
style: styleFunction
});
map = new ol.Map({
layers: [docketLayer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
function changeGeoJsonData(){
docketSource = new ol.source.Vector({
url: 'http://localhost:8080/mapApp/resources/map/fetch?555',
format: new ol.format.GeoJSON()
});
docketSource.refresh();
}
It appears you are not updating the Vector source. You should call the setSource() method on the vector:
docketLayer.setSource(...); <-- new Source config here