Constant stroke dash size when zooming MapChart

Maps#map

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

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Constant stroke dash size when zooming MapChartconstant-stroke-dash-size-when-zooming-mapchart