Hello, I need to do something special for my react app, I have some basic visualizations like a Raw data table, Bars, Donut, some KPIs and a Geo Map GL, what i need is to apply a filter every single time the user changes the zoom or the current area, is there a way to do this?
Apply filter for geo map gl current area
emoya
#2
Sure, first you need to use the map move or map zoom event and then build a filter and apply it to the visualizations, let me show you an example:
let aktiveMap = cf.getVisualization("your-map");
let geoMap = aktiveMap.get("map");
geoMap.on("moveend", (e) => {
let bounds = geoMap.getBounds();
let nw = bounds.getNorthWest();
let se = bounds.getSouthEast();
let ne = {"lng":se.lng, "lat":nw.lat};
let sw = {"lng":nw.lng, "lat":se.lat};
let filterBoundaries = [[nw.lng, nw.lat], [ne.lng, ne.lat], [se.lng, se.lat], [sw.lng, sw.lat], [nw.lng, nw.lat]];
let boundaryFilter = cf.Filter("location").label("zoomFilter").type("POLYGON").operation("IN").value(filterBoundaries);
// get the visualization you want to update and apply the filter:
let viz = cf.getVisualization("your-chart");
viz.staticFilters([boundaryFilter]).execute(); // here you can use `filters` or `staticFilters` as you need
});
So, basically the idea is to create a box with the current area and then use it as a boundary filter.