Configuring Small Map

This quick tutorial will show you how to configure appearance of the Small map control.

What is a Small map?

Small map is a control that shows a bird’s eye view on the whole map, indicating current zoomed in viewport.

Please refer to this section in Map chart article on how to enable it.

Just to recap, here’s how we enable it:

chart.smallMap = new am4maps.SmallMap();
chart.smallMap.series.push(polygonSeries);

chart.smallMap = new am4maps.SmallMap();
chart.smallMap.series.push(polygonSeries);

{
  // ... map config
  "series": [{
    "type": "MapPolygonSeries"
    "id": "s1", // setting id so we can reference it in `smallMap`
    // ...
  }],
  "smallMap": {
    "series": ["s1"]
  }
}

Open in CodePen

Viewport indicator outline

Viewport indicator is a rectangle showing precisely the area which is currently displayed on the main map.

To change the color and width of the outline use Small map’s rectangle object:

chart.smallMap.rectangle.stroke = am4core.color("#367B25");
chart.smallMap.rectangle.strokeWidth = 2;

chart.smallMap.rectangle.stroke = am4core.color("#367B25");
chart.smallMap.rectangle.strokeWidth = 2;

{
  // ..
  "smallMap": {
    "series": ["s1"],
    "rectangle": {
      "stroke": "#367B25",
      "strokeWidth": 2
    }
  }
}

Control outline and background

The background and outline of the whole Small map control can be configured via its background.

chart.smallMap.background.stroke = am4core.color("#7B3625")
chart.smallMap.background.strokeOpacity = 1;
chart.smallMap.background.fillOpacity = 0.9;

chart.smallMap.background.stroke = am4core.color("#7B3625")
chart.smallMap.background.strokeOpacity = 1;
chart.smallMap.background.fillOpacity = 0.9;

{
  // ..
  "smallMap": {
    // ...
    "background": {
      "stroke": "#7B3625",
      "strokeOpacity": 1,
      "fillOpacity": 0.9
    }
  }
}

Position

Default position of the Small map is the lower left corner. To change it use its align and valign properties:

chart.smallMap.align = "right";
chart.smallMap.valign = "top";

chart.smallMap.align = "right";
chart.smallMap.valign = "top";

{
  // ..
  "smallMap": {
    // ...
    "align": "right",
    "valign": "top"
  }
}

Series appearance

Whenever you add a series to Small map (by pushing into its series list), the control makes a copy of the series and pushes the “clone” into actual list.

So the last pushed series is actual a reference to a Small map clone of the real-map series.

You can access it and configure just like any other series.

For example, let’s remove the outline:

let smallSeries = chart.smallMap.series.getIndex(0);
smallSeries.mapPolygons.template.stroke = smallSeries.mapPolygons.template.fill;
smallSeries.mapPolygons.template.strokeWidth = 1;

var smallSeries = chart.smallMap.series.getIndex(0);
smallSeries.mapPolygons.template.stroke = smallSeries.mapPolygons.template.fill;
smallSeries.mapPolygons.template.strokeWidth = 1;

{
  // ..
  "smallMap": {
    // ...
    "series": ["s1"],
    "callback": function() {
      var smallSeries = this.series.getIndex(0);
      smallSeries.mapPolygons.template.stroke = smallSeries.mapPolygons.template.fill;
      smallSeries.mapPolygons.template.strokeWidth = 1;
    }
  }
}

Complete example

Open in CodePen