I found this thread and the issue interesting, so following Randy's tip I built an example project that uses a dynamic SVG map:
All the values are in a collection (8 records), so inside the SVG image I loop the collection through and using each value, I convert it to x and y and build a polygon to be placed on the map.
Here is the OnVisible code of the screen. A point to raise is that my solution requires each category to know, where the max value (5) is located pixel-wise on the map. Knowing that, it's easy to reverse-engineer the locations of 4, 3, 2 and 1 going towards zero, the middle of the map.
//set default values for map properties
UpdateContext({
map_center_x: 315;
map_center_y: 300;
var_fill:true;
var_border:true
});;
//Set default values for collection
ClearCollect(
coll_data;
{code:"EM"; prev_code:"SO";
label:"Emotional Welness"; value:5; max_x:430; max_y:75};
{code:"SP"; prev_code:"EM";
label:"Spiritual Welness"; value:5; max_x:555; max_y:210};
{code:"IN"; prev_code:"SP";
label:"Intellectual Welness"; value:5; max_x:555; max_y:395};
{code:"PH"; prev_code:"IN";
label:"Physical Welness"; value:5; max_x:420; max_y:525};
{code:"EN"; prev_code:"PH";
label:"Environmental Welness"; value:5; max_x:230; max_y:525};
{code:"FI"; prev_code:"EN";
label:"Financial Welness"; value:5; max_x:95; max_y:380};
{code:"OC"; prev_code:"FI";
label:"Occupational Welness"; value:5; max_x:95; max_y:210};
{code:"SO"; prev_code:"OC";
label:"Social Welness"; value:5; max_x:230; max_y:75}
);;
And here is the code I put into the "Image" property of the SVG image:
"data:image/svg+xml;utf8, " &
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' " &
$"viewBox='0 0 {img_Map.Width} {img_Map.Height}'> " &
$"<polygon points='" &
Concat(
ForAll(
coll_data As record;
With(
{
x_step:
Round(
(LookUp(
coll_data;
code=record.code
).max_x - map_center_x ) / 5
; 0);
y_step:
Round(
(LookUp(
coll_data;
code=record.code
).max_y-map_center_y) / 5
; 0)
};
$"{map_center_x+record.value * x_step} " &
$"{map_center_y+record.value * y_step} "
)//with
);Value;","
)//Concat
&
"' "&
If(
var_border;
" stroke='red' stroke-width='2' ";
" stroke='none' "
) &
If(
var_fill;
" fill-opacity='0.3' fill='red' ";
" fill='none' "
) &
"/>" &
"</svg>"
)//encodeURL
I also attached a working sample project, if you have the courage to download stuff from the internet.
