Adding "Home" Button to Map Chart

Map Chart can be zoomed and panned. There is, however, no built-in “go home” button. This tutorial will show how to add one which resets map’s zoom and position to initial state.

Base map

Let’s use this very basic map as our test subject.

Open in CodePen

We can pan the map by dragging with a mouse or touch.

We can zoom the map using mouse wheel, or buttons of the zoom control, or pinch gestures on touch displays.

What we can’t do is to reset the map to its original position.

Resetting position via API

MapChart has a handy API function - goHome() - which resets map’s original position. (Technically, it could work on your drunk friends, but we haven’t tested it very thoroughly :)

function resetMap() {
  chart.goHome();
}

function resetMap() {
  chart.goHome();
}

Calling our custom resetMap() function will reset the map.

However, a lose function is useless, unless it’s attached to a button. Let’s add one.

Adding a “home” button

amCharts 4 comes with a universal engine and an arsenal of built-in controls, including a Button.

We will also attach "hit" event to it which would use the goHome() function.

let button = chart.chartContainer.createChild(am4core.Button);
button.label.text = "...";
button.padding(5, 5, 5, 5);
button.width = 20;
button.align = "right";
button.marginRight = 15;
button.events.on("hit", function() {
  chart.goHome();
});

var button = chart.chartContainer.createChild(am4core.Button);
button.label.text = "...";
button.padding(5, 5, 5, 5);
button.width = 20;
button.align = "right";
button.marginRight = 15;
button.events.on("hit", function() {
  chart.goHome();
});

{
  // ...
  "chartContainer": {
    "callback": function() {
      var button = this.createChild(am4core.Button);
      button.label.text = "...";
      button.padding(5, 5, 5, 5);
      button.width = 20;
      button.align = "right";
      button.marginRight = 15;
      button.events.on("hit", function() {
        chart.goHome();
      });
    }
  }
}

Open in CodePen

Adding an image to button

If the "..." is not cool enough, Button provides means to add an actual image to it.

Let’s forage our favorite source for SVG icons - iconfinder.com - until we find a suitable home icon.

Grab SVG version of the icon, open it up, and take the “path” part, because this is the only part we need from it.

Drop the label part of the button. Add a new Sprite to icon and set its path, and we end up with a nice home button:

let button = chart.chartContainer.createChild(am4core.Button);
button.padding(5, 5, 5, 5);
button.align = "right";
button.marginRight = 15;
button.events.on("hit", function() {
  chart.goHome();
});
button.icon = new am4core.Sprite();
button.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";

var button = chart.chartContainer.createChild(am4core.Button);
button.padding(5, 5, 5, 5);
button.align = "right";
button.marginRight = 15;
button.events.on("hit", function() {
  chart.goHome();
});
button.icon = new am4core.Sprite();
button.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";

{
  // ...
  "chartContainer": {
    "callback": function() {
      var button = this.createChild(am4core.Button);
      button.padding(5, 5, 5, 5);
      button.align = "right";
      button.marginRight = 15;
      button.events.on("hit", function() {
        chart.goHome();
      });
      button.icon = new am4core.Sprite();
      button.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
    }
  }
}

Open in CodePen