Constant stroke dash size when zooming MapChart

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.

TypeScript

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;
});

JavaScript

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;
});

Open in CodePen