← Back to the blog

Dynamic Map Labels

The map labels spanning different sizes and forms of areas are drawn in SVG.

First, the composite area boundaries are calculated by taking all neighboring provinces with the same label value into account. Then the extremas (Min-X, Max-X, Min-Y, Max-Y) are calculated as well as the centroid of the area. Using these values a SVG:textPath is drawn from the upper left to the centroid to the lower right. Eventually a SVG:text is drawn along the baseline of the previously created textPath.

Here is an early test which was made for the Chronas app, using a Voronoi diagram:

Some modifications were made in special cases, such as that the textPath had to be drawn in the opposite direction (right to left) if a text needed to be displayed in the reverse direction (very steep angles), also the text-size has been dynamically increased for longer text paths and decreased or entirely hidden if the label's character length did not fit the text path at minimum font-size.

Be the first to reply