community-visualizations
community-visualizations copied to clipboard
Maintain Filter Zoom State
Hoping i can get some help maintaining the zoom states when using the map as a filter. Currently, using Choromap and in filter mode when a selection is clicked the map reverts back to its original state/size. Can the zoomed in state stay at any level without reverting back when using the map as a filter?
Hi @Outcydaz - that's a good find! Just thinking out loud here to bounce some ideas, but the data viz subscribes to messages published from events (like using a filter or using the map itself as a filter) to Data Studio in order to run updates via the drawViz
function.
The drawViz
function removes and rebuilds the data viz and GeoJSON objects which is where I think it's losing and resetting the zoom state.
So if possible, I think maintaining the zoom state would likely require some changes to the source code and drawViz
specifically. One thing to explore could be whether it's possible when drawViz is called as a result of using the map as a filter to avoid rebuilding objects and instead make changes (currently just opacity level) to the existing objects.
Thanks both. I'll add this to the backlog to explore.
Thanks @sesi and @mshodge. Here is a work around so far, Im sure it'll need more work, let me know your thoughts. The js line 17581 drawViz constant was changed to:
const drawViz = data => {
var rowData = data.tables.DEFAULT;
if (d3.select('body')
.selectAll('svg').node() && data.interactions.onClick.value.data) {
var applyFilterData = data.interactions.onClick.value.data;
d3.selectAll('.area').style('opacity', 1);
//d3.select(applyFilterData.selectedPath).style('opacity',1)
var g = d3.select('body').selectAll('svg').select('g');
g.selectAll('path').style("opacity", function(d) {
if (d) {
var value = d.properties.dim;
var opacity = d3.select(this).style("opacity");
var applyFilterValue = applyFilterData.values[0][0];
if (applyFilterValue != value) {
return 0.4;
}
return opacity;
}
})
return
}