Creating a Geo Map with qdt-components and MapBox

[Yianni_Ververis]

Qdt-components is a library that we build in the Demo & Innovation Team to facilitate most of our needs by communicating with Qlik Servers and displaying visualizations in websites. This can happen with either the Capability API where we just supply the object id and show the visualization that we have already created in Qlik Sense or, by the Engine API where we only get the data and then decide on how we want them displayed on the page. To achieve the second, we have added great libraries like Picassojs and now MapBox.

If you have not used qdt-components before, we have setup integration guides for the top 3 most popular frameworks like React, Angular and Vue and one for no framehork, just simple html. 

https://github.com/qlik-demo-team/qdt-components#usage

---

We had a task for a live event that we needed to show data from around the US as a voting was taking place. We thought of trying out MapBox since it was a vary light and fast library that utilizes the latest in OpenGL technologies. We tried it with qdt-components and the results are amazing. Below is a simple example on how to use it and the one that loads over a million rows of data (examples are in ReactJs).

Code example:

<QdtComponent
  type="QdtMapBox"
  props={{
    cols: ['ID', 'lat', 'lon', 'gender'],
    height: 400,
    qPage: {
      qTop: 0,
      qLeft: 0,
      qWidth: 4,
      qHeight: 2500,
    },
}}

https://qdt-apps.qlik.com/qdt-components/react/#/mapbox

Swipe Night example with over a million rows of data

In order to get all 'swipe night' data, I passed the number of seconds that I want the library to loop through and then a callback to get the qData in my browser and calculate the percentages to display on the screen.

<QdtComponent
  type="QdtMapBox"
  props={{
    mapToken: 'pk.xxx',
    style: 'mapbox://styles/xxx',
    center: [-97.531708, 39.305878],
    zoom: 4.3,
    interactive: false,
    circleRadius: 2,
    cols: ['ID', 'lat', 'lon', 'gender'],
    height,
    getData: callback,
    getAllDataInterval: 1, // Get data In Seconds
    qPage: {
      qTop: 0,
      qLeft: 0,
      qWidth: 4,
      qHeight: 2500,
    },
    legend: false,
  }}

const callback = (qData, qLayout) => {
  totalRows = qLayout.qHyperCube.qSize.qcy;
  currentRows += qData.qMatrix.length;
  data = [...data, ...qData.qMatrix];
  console.log(`${currentRows}/${totalRows}`);
  const _labels = labels;
  qData.qMatrix.map((value) => {
    if (value[3].qText) {
      counter[value[3].qText] += 1;
      _labels[value[3].qText] = (counter[value[3].qText] / data.length) * 100;
      _labels[value[3].qText] = `${Number(_labels[value[3].qText].toFixed(2))}%`;
    }
    return true;
  });
  setLabels(() => ({ ...labels, ..._labels }));
};

This is it!! Happy Coding!!! 

Yianni