Constant stroke dash size when zooming MapChart

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

We can use setting strokeDasharray to make lines on a MapChart dashed. However, zooming in will also make dashes grow in size. This demo shows how we can add adapter which would maintain the same dash length across zooms.

lineSeries.mapLines.template.line.nonScalingStroke = true;
lineSeries.mapLines.template.line.strokeDasharray = "5 3";
lineSeries.mapLines.template.line.adapter.add("strokeWidth", function(strokeWidth, target){
  target.strokeDasharray = (5 / chart.zoomLevel) + " " + (3 / chart.zoomLevel)
  return strokeWidth;
});

lineSeries.mapLines.template.line.nonScalingStroke = true;
lineSeries.mapLines.template.line.strokeDasharray = "5 3";
lineSeries.mapLines.template.line.adapter.add("strokeWidth", function(strokeWidth, target){
  target.strokeDasharray = (5 / chart.zoomLevel) + " " + (3 / chart.zoomLevel)
  return strokeWidth;
});

See the Pen Constant stroke dash size when zooming MapChart by amCharts team (@amcharts) on CodePen.24419