Adding a legend to Icon Map Pro in Power BI

Unfortunately, the #IconMap #powerbi visual currently does not support legends. That said, James Dales made a blog in the icon map pro website about missing legends and how to overcome this already, but this focuses on cases with a discrete legend, like coloring red and blue states in a US election map.

For the new H3 functionality however there is no built in legend solution either. This stops interpreting results at the level 'much more thingies here than there' and 'likely a pattern here or there'. However you cannot tell from the image yet just how much distance was traveled in a certain H3 location for instance. Although exact numbers are irrelevant in my opinion per cell, a general view of the amounts on the map might be very helpful.

I asked James about the missing legend, and he indicated legends are definately on their development radar. Unlike DAX unfortunately, this developmet is neither easy nor simple.

James: "It's still going to be a really big piece of work in Icon Map Pro though, just because of how flexible the visual is - there are so many different types of visualisation and ways of formatting them. And people have lots of different views on what a legend should be and how it should appear"

Creating a legend with gradient colors: requirements

But hey, lets brew up some mad-scientist stuff, and lets work around this little problem. So what things do we want?

• The legend needs to look like a legend (sounds obvious, but its not)
• It needs to support gradient colors
• It needs to be dynamic
• It needs to be not too invasive
• I want it to be as much 'part of' the visual as possible
• It should be relatively easy to duplicate for others, but some macgyvering is ok!
• I dont want to use deneb (dont know how this works yet)
• I dont want to use a custom visual

Objects that might support creating a legend in Power BI

Power BI has a lot of visuals and other objects that can be used in an (optinionally combined) way that they are not per se designed for. We call this type of solutions macgyvering. After some tooling around, we found that for the above requirement list we basically have two realitively eays options,

1. Using a bar chart with a conditional color, borrowing its gradient legend
2. Using the new card visual with an SVG metric

The second one is the most promising and customizable one, and the first one is the most easy one to implement if you are not into SVG coding and just want a simple solution

Creating a legend for our visual using an additional bar chart

First, we need to know the color range. In the top image of this article, you can see values from white, through gray, ending up in green. You can find these settings under H3 formatting, as can be seen on the left hand side of the image below.

Then, we will start with a simple bar chart 1?? and for the example I took the cars involved in the data, and gave it a gray background so you can see the white better. Next, using expression based formatting on the color of the bar chart, see the middle panel of the image, we set the desired colors 2?? and finally we enable the legend 3??.

Unfortunately, the numbers on the low / mid / end part of the legend are now based on the x-axis of the bar chart rather than the H3 hexagon cells. So the low end is equal to the Niro car, the high end to Toyota car. In order to make the range of the values match, drag in the same H3 level ID column as you would use in the Icon Map Pro visual.

Next, remove any padding from the bar chart, remove x-axis, and anything that would make the visual as small as possible, without removing the legend from the visual. The image below shows the mini bar chart above the icon map. I placed it in Z-Order behind the icon map visual and made the title transparent. Then, you only have the legend visible left :). Be sure to keep the maintain layer order option on.

Creating a legend for our visual using an SVG metric in a new card visual

This method is my personal favorite, and although it is perhaps a little bit more complex, the legend placement and setup is a lot more flexible. To start, open up Power Point. Create a legend that looks nice to you. Horizontal, vertical, does not matter, but just make sure the gradient is created with three color points, of which one is at position 50%. (or two if you just use two in H3 formatting). In this case I added a rectangular shape, and two text fields.

Next up, right click the group and save as SVG.

Copy the SVG code (open it up with notepad) and replace " with '. Copy the svg code to a measure like the code below. It always starts with

yoursvgmeasure = 
"data:image/svg+xml;utf8," & "        

In total it leads to the following measure. Make sure to set the data catagory to IMAGE URL.

yoursvgmeasure = 
"data:image/svg+xml;utf8," & " <svg width='1535' height='175' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' xml:space='preserve' overflow='hidden'>
  <defs>
    <linearGradient x1='156.5' y1='103' x2='1347.5' y2='103' gradientUnits='userSpaceOnUse' spreadMethod='reflect' id='fill0'>
      <stop offset='0' stop-color='#FFFFFF'/>
      <stop offset='0.5' stop-color='#E8E8E8'/>
      <stop offset='1' stop-color='#4EA72E'/>
    </linearGradient>
  </defs>
  <g transform='translate(17 -27)'>
    <rect x='156.5' y='44.5' width='1191' height='117' stroke='#042433' stroke-width='0' stroke-miterlimit='8' fill='url(#fill0)'/> 
    <text font-family='Aptos, sans-serif' font-weight='400' font-size='83' transform='matrix(1 0 0 1 33 129)'>" & [legend_minimum] &  " </text>
    <text font-family='Aptos, sans-serif' font-weight='400' font-size='83' transform='matrix(1 0 0 1 1379.95 129)'>" & [legend_maximum] & "</text>
  </g>
</svg>"        

Note that i added in the SVG measure the following measures: [legend_minimum] and [legend_maximum]. As [legend_minimum] I used a MINX measure and as [legend_maximum] I used a MAXX measure on the H3 Level 7 data. In this way, we get the minimum and maximum data per cell

legend_minimum = MINX ( data[H3_L7], [distance travelled] )
legend_maximum = MAXX ( data[H3_L7], [distance travelled] )        

Finally, using the new card visual, add the [svgtest] measure in the data field. Turn off call out values and labels, all spacing, padding and other formatting options as backgrounds, borders, etc. On the Icon Map visual, make title spacing 10px and turn the divider on, make it white, and thick. The New card visual with the SVG sits nicely between the visual and title then :)

Limitation of this legend method

The legend usecase discussed here only works on the H3-ID based variant of H3 plotting. When using the Latitude/Longitude method in the Icon Map Pro visual, where the H3 level is set on the visual itself, there is no way to determine the maximum/minumum values per H3 cell. On the H3-ID based variant we can do this.

Conclusion

Adding a legend on top of Icon Map Pro is possible with standard Power BI visuals if you need it. However, it is likely that James Dales and his team will come with a native solution soon, and if that is the case it would have my preference.