In uMap, you can create a dashed line by using Advanced properties > dash array. There you have to enter some numbers, separated by comma’s. But I don’t really understand how this works.
Can someone please explain this to me?
How are the numbers related to the lengths of the dashes and spaces?
How many numbers should I use?
I thought that the numbers would represent the length of a dash and the length of a space. But if I enter 20,20 the space is smaller that the dash; to get equal lenths I have to enter 20,30.
After much experimenting I found that I can use 1,6,6 to get a nice dash-dot line. But what if I want to increase the length of the dot, while keeping the length of the dashes and spaces? See attached screenshot.
I don’t know the details of uMap, but if the line styles work like they do in other systems, then the numbers will be the lengths of alternating dashes and gaps. If you provide an odd number of values, then the pattern is repeated to get an even number. See stroke-dasharray - SVG: Scalable Vector Graphics | MDN
What you’re seeing (which appears to be at odds with this) is probably caused by the line cap style, causing the length of the dashes to extend beyond the stated length. See e.g. stroke-linecap - SVG: Scalable Vector Graphics | MDN .
In the case of “1,6,6” you should actually be getting “1,6,6,1,6,6” but the gap of “1” in the middle is vanishing due to the caps, so the two “6” dashes either side merge into one longer one. So it’s displaying the (almost) same as “1,6,13,6”. In that case the 1 and 13 are the two dash lengths and the "6"s are the gaps. But because of the caps, the dashes appear longer and the gaps a little shorter.
To control the dash/gap ratios, you can either keep the rounded caps and adjust the dash and space lengths by the width of the line, or change the cap style to flush/butt.
Thanks a lot!
It is as simple as I hoped it would be. I did not realize that you should always use an even number of values.
I don’t think you can change the line caps in uMap, but as I now know the trick I can easily compensate for it.
