Knowledge Base

Always exporting fully zoomed out map

Exporting a chart or map to an image always produces a snapshot of a current view. This means if you zoom in your map and then export it to a PNG, you will get an image of its zoomed in state.

This demo shows how you can use Export plugin’s beforeCapture and afterCapture handlers to temporarily zoom out the map before export, so it produces full map image, regardless of its current zoom state.

We are also using map’s init event to log its zoom settings when it first loads.

"listeners": [{
  "event": "init",
  "method": function(e) {
    
    var map = e.chart;
    
    /**
     * Log initial zoom settings
     */
    map.initialZoom = {
      "zoomLevel": e.chart.zoomLevel(),
      "zoomLongitude": e.chart.zoomLongitude(),
      "zoomLatitude": e.chart.zoomLatitude()
    };
  }
}]

Then we can use Export’s own events to quickly restore those initial zoom settings using maps zoomToLongLat() method, just before export. Then restore back to current zoom.

"export": {
  "enabled": true,
  "position": "bottom-right",
  "beforeCapture": function() {
    var map = this.setup.chart;
    /**
     * Log current zoom settings so we can restore after export
     */
    map.currentZoom = {
      "zoomLevel": map.zoomLevel(),
      "zoomLongitude": map.zoomLongitude(),
      "zoomLatitude": map.zoomLatitude()
    };
    
    /**
     * Zoom to initial position
     */
    map.zoomToLongLat(
      map.initialZoom.zoomLevel,
      map.initialZoom.zoomLongitude,
      map.initialZoom.zoomLatitude,
      true
    );
  },
  "afterCapture": function() {
    var map = this.setup.chart;
    setTimeout(function() {
      /**
       * Restore current zoom
       */
      map.zoomToLongLat(
        map.currentZoom.zoomLevel,
        map.currentZoom.zoomLongitude,
        map.currentZoom.zoomLatitude,
        true
      );
    }, 10);
  }
}