Save Vector Map position and zoom automatically

#1

Hi community, I have a Studio data application and I have been working on a Vector Map, but now I change the zoom and move the map and the changes are not persisted when I left the data app and enter again, maybe I change something wrong in the code. Please let me know how I can fix this.

#2

Hi Bob, to enable ChartFactor Studio to save the position and zoom of the Vector Map and the Geo Map in the definition of the visualization, you have to set the zoom and center properties. For example, take a look at the code of following Vector Map:

let myChart = myData.graph("Vector Map")
            .set("map", "world")
            .set("min", 0)
            .set("zoom", 0.85)
            .set("center", null)
            .execute();

It does not matter that the property of the center is initially set at null, the important thing is that the definitions are there. Then you can move and change the zoom and see how ChartFactor Studio updates the new center and zoom of the Vector Map in the code definition.

#3

hi @dario, thanks for the answer. It seems to work now, but I want to obtain the position and zoom when it changes to be sure, there is a way to do it?

#4

Sure, you can register listeners for the events of mapzoom and mapmove in your visual to output the zoom and center of your map when they change to the javascript console, and then after save the changes you can move and zoom the map and double check that the last value printed on the console is stored on the code of the visual, for example:

/* Configuration code for this widget */
let provider = cf.provider("Aktiun Elastic");
let source = provider.source('life_expectancy_region');
// Define metrics
let metric0 = cf.Metric("life_expectancy","avg");
// Define attributes to group by
let group1 = cf.Attribute("country")
			.limit(10)
			.sort("desc",metric0);
// Add metrics and groups to data source
let myData = source.groupby(group1)
			.metrics(metric0);
// Define chart options
let myChart = myData.graph("Vector Map")
			.set("map", "world")
			.set("min", 0)
			.set("zoom", 0.85)
			.set("center", null)
			.on('mapzoom', (x)=>{
          console.log("Current map zoom: ", x.data);
      })
      .on('mapmove', (x)=>{
        console.log("Current map center: ", x.data);
      })
     .execute();

After saving the code above, move and zoom the Vector Map do you open the code editor again and the values set to zoom and center has to be updated with the latest of showed on the console, in my case:

Console Output:
…
Current map center: (2) [39.95893575817796, 38.54582527025359]
Current map zoom: 1.3689335000000007
Current map center: (2) [40.4459308231815, 37.36891546799731]
Current map zoom: 1.505826850000001
Current map center: (2) [40.888655397017715, 36.29899784875501]

Code of the visual:
.set(“zoom”, 1.505826850000001)
.set(“center”, [40.888655397017715,36.29899784875501])

Let me know if this answers your question. Best regards