Here is my scenario. The page loads and the map loads with an empty vector layer. So its there, but has no features. Then the user clicks a button and a CQL filter loads features according to the CQL settings.
My methodology to implement this. I set an empty vector layer, no loader
or strategy
. The button the user clicks for the first time calls a "initialization " function (=firstTimeOnly()
) that:
sets a loader
and a strategy
to the vector layer
now that a loader
exists, calls another "filtering" function (=changeFilter()
) that
resets the loader's cql filter and loads features
Here is my code
<button id= "magicButton", onclick="firstTimeOnly()">Click me</button>
//set globals to use them
var cqlFilter = "name='testpoint9'";
var urlTemplate = 'http://localhost:5550/geoserver/mymap/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=mymap:layerName&CQL_FILTER={{CQLFILTER}}&outputFormat=application/json';
var loader = function (extent) {
var url = urlTemplate.replace('{{CQLFILTER}}', cqlFilter);
$.ajax(url, {
type: 'GET',
success: function(response) {
var res = response;
var geojsonFormat = new ol.format.GeoJSON();
sourceVector.addFeatures(geojsonFormat.readFeatures(response));
}
})
};
var strategy = new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}));
//empty vector source
var sourceVector = new ol.source.Vector({});
function changeFilter() {
//remove all, set cql and reload
var featsToRemove = layerVector.getSource().getFeatures();
for (var f=0;f<featsToRemove.length;f++)
{
layerVector.getSource().removeFeature(featsToRemove[f]);
}
cqlFilter = "name LIKE 'p'";
sourceVector.clear(true);
}
layerVector = new ol.layer.Vector({
source: sourceVector,
style:styleFunction
});
function firstTimeOnly() {
sourceVector.set('loader', loader);
sourceVector.set('strategy', strategy);
changeFilter();
document.getElementById("magicButton").removeEventListener("click", firstTimeOnly, false);
document.getElementById("magicButton").addEventListener("click", changeFilter, false);
}
This is based to erilem's code for cql filter resetting and if I use just his code works fine. But if I want to start with an empty layer and edit it as the above, I get nothing. My code gives no errors. But, if I click the button I get nothing.
Please advide me how to fix this. Or maybe its an overkill and you suggest something smarter.
Thanks
UPDATE
If I put
console.log("loader "+sourceVector.get('loader'));
at the end of the changeFilter I get the loader function. So, I guess the first time I click the button, the firstTimeOnly actually sets a loader and calls changeFilter. So, the loader is there, but does not work? Any help?
Without getting into potential issues with Openlayers the issue I see is that removeEventListener
only works for removing listeners that were set with addEventListener
. Since you bound the onclick
declaratively in the HTML the way to unbind it would be by doing document.getElementById("magicButton").onclick = null
.
That said I would change your example so that somewhere in your code you set the event listener using addEventListener
.
Example:
function firstTimeOnly() {
sourceVector.set('loader', loader);
sourceVector.set('strategy', strategy);
changeFilter();
document.getElementById("magicButton").removeEventListener("click", firstTimeOnly, false);
document.getElementById("magicButton").addEventListener("click", changeFilter, false);
}
document.getElementById("magicButton").addEventListener("click", firstTimeOnly, false);
And get rid of the onclick
in the HTML.
Also consider caching the reference to magicButton
so that you don't have to be constantly calling getElementById
.
var magicButton = document.getElementById("magicButton");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With