Custom labels and dynamic symbols in Qlik GeoAnalytics using data URIs
In the current version of Qlik GeoAnalytics there are limitations in the styling of labels and storage location of symbols to the bubble layer. Using data URIs with inline image files of PNG or SVG is neat workaround that works fine. The inline SVG can be produced on the fly with a Qlik expression which opens up a lot of possibilities, some use cases listed below. There are also some caveats which are listed in the end together with links to more information.
Tip! Test the data URI directly in the browser, paste the URI in the browser (won't work in IE) bar
Data URIs must be in either in Base64 encoding or URL safe ANSI ASCII. Since Qlik don't have URL or Base64 encoding built in we can use translation tables, online tools or for instance Notepad++ to do the conversion. Base64 is suitable for images and content that don't need to change dynamically. URL encoding is good for dynamic SVG where we want to change the appearance of the icon or the symbol with Qlik expressions. Options:
Base64 conversion with external tool
URL encode with external tool
URL encode with translation table
URL encode with expression
Or to combine 2,3 and 4
(3) Translation table example, useful for conversion of static content at load time. Here's an example with Western symbols, other tables can be found for other character sets. Note the use of MapSubstring.
Replace([Character], 'space', ' ') as ASCII_Character,
MapSubstring('URL_Encoding_Reference', address) as encoded_address;
(txt, utf8, embedded labels, delimiter is ';');
(4) Translation expression, note that it's not complete, it's a list common symbols, useful for translations in runtime. More symbols needs to be escaped to become URL safe, especially when working with UTF-8 characters.
The bubble layer requires all symbols to be reachable by URL from the map server. But a data URI can be used instead, use an external tool to do the conversion. After that store the data URI in a string and place in the 'Image URL' in the bubble layer properties.
Labels has fixed font, size and color in QGA, a SVG symbol with text can be used to overcome that.
In SVG standard coordinate system y axis is point downwards.
The bubble layer centers the symbol on the point location.
SVG uses CSS colors.
Font type, weight and size can be specified.
Here's an SVG that set font and color and size for a single row label:
When properly URL safe encoded and put in QV expression the data URI looks like this, note how the label text is inserted in to the expression. The URL encoding was done with Notepad++ and the MIME tool plugin, there are also online encoders.