Next
Update
Prev
X-Axis +
X-Axis -
Y-Axis +
Y-Axis -
To Center

You can set the center point of the map by setting the percentCenterX and percentCenterY attributes. The center point of the map also can be changed when the user clicks on the button by using the JavaScript function. Try to click on the buttons below this sample map chart.

...
<MapChart ... percentCenterX="0" percentCenterY="0">
  ...
</MapChart>
...
					
function pan(dx, dy) {
  mapApp = document.getElementById("map1");
  mapRoot = mapApp.getRoot();
  mapRoot.pan(dx, dy);
}

function xyCenterReset() {
  mapApp = document.getElementById("map1");
  mapRoot = mapApp.getRoot();
  mapRoot.pan(0, 0);
}

KoolMap

centerX This property is to set the X- coordinate of the center point (default value : 0).
centerY This property is to set the Y- coordinate of the center point (default value : 0).
percentCenterX This property is to set the X-coordinate of the center point represented by the percentage value. If the value is 0, then the center location is at the center point. If the value is 100, then the center location is at the right end; otherwise if the value is -100, then the center location is at the left end. (default value : 0).
percentCenterY This property is to set the Y-coordinate of the center point represented by the percentage value. If the value is 0, then the center location is at the center point. If the value is 100, then the center location is at the bottom end; otherwise if the value is -100, then the center location is at the top end. (default value : 0).

© 2017 KoolChart. All rights reserved.