QlikView Extensions: LeafletJS

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:

QVExt_LeafletJS

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:

QV

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: