If you’ve never heard of it before, Leaflet.js is an open source JavaScript library for interactive maps. I’ve used it on my website as a way of showing, geographically, the places I’ve been to and where I’ve worked. Its ease of use (zooming, popups, etc.) makes for a great interactive experience. Given how simple it was to set up on my website, I thought I’d have a go at making a QlikView Extension Object that uses it.
The code I used is available on my GitHub repo.
Here’s the result:
Perhaps the first thing you notice (after the map) are the blue markers. When you hover over them you get a popup indicating the City’s name and its population.
N.B. In order to see the markers you may need to alter the defaulting properties so that the dimensions are set correctly (ie. right-click on the caption and select ‘Properties’). After amendment, your properties should look like:
The next thing to note is the ListBox on the right. If I click on any combination of cities, only the markers for those cities show up on the map. You do not have to stretch your imagination to extend this concept to any dimension associated with the city, eg. region, currency, etc. Clicking on those other dimensions would filter the cities which, in turn, would filter the markers on the map.
It’s worthwhile pointing out that Leaflet provides a lot of functionality out of the box. You set the image’s centre and initial zoom level using the setView method:
var mymap = L.map('mapMap').setView([20, 10], 2);
and Leaflet allows you to zoom in using your mouse’s scroll wheel. You can also click on the markers and this event can be captured in your JavaScript where you can handle it how you wish. For example, there is the SetVariable function exposed by the QlikView JavaScript API so you could control your selections based on clicks within the Extension. This is an exercise for the reader.
brainsnapped.com 
Hi Admin , i want to ask , i’m using your extension in my qv 12 but i got an error “There was an issue creating the map. Did you forget to set the PopUPHTML ?” what this error means ? i haven’t modify anything just drag n drop the extension into sheet. hope you can help , thankyou
Thanks for the feedback!
From what I can see, there appears to be a problem with some of the XML tags in the Definition.xml file as well as a missing ‘;’ in the Script.js file.
I’ve updated both files and it works on my instance of QlikView (v12.10.0.0, 64bit).
Please try again and, if the problem persists please let me know about the details of your QlikView environment.
Hi, Can you explain how you install the LeafletJS into QlikView or is there a link to a step by step installation of extension? Thank you.
Hi.
In this link you’ll see the following set of instructions:
Create a folder that will contain your assets. The folder should be created in the following location: \Users\your_username_here\AppData\Local\QlikTech\QlikView\Extensions\Objects.Example:
\Users\your_username_here\AppData\Local\QlikTech\QlikView\Extensions\Objects\SimpleHelloWorld
You need to create those sub-directories if they’re not there – but you don’t need to create the “SimpleHelloWorld” directory.
Instead you can either (a) clone my LeafletJS repo (using the link in the Blog post to get there and then using Git to clone the repo to your PC); or(b) create a “LeafletJS” directory instead of “SimpleHelloWorld” (above) and then copy the individual files within the “LeafletJS” folder of my repo into your LeafletJS directory on your PC.
You should copy all of the files except the README.md file as that file is just a GitHub thing and not required for the QV extension.
Once you’ve copied it, you can restart QlikView and go into the WebView mode and the extension should work. Follow the instructions under “Testing the extension” in the link I gave right at the start of this post.
Good luck!