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"] } }
See the Pen amCharts 4: Configuring small map (1) by amCharts (@amcharts) on 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
See the Pen amCharts 4: Configuring small map (2) by amCharts (@amcharts) on CodePen.