MapJS: custom-made analytical dashboard on your page

Illustration by Wojciech Tymicki

Traffic analysis has been Indoorway’s focus right from the beginning. That’s why we’ve developed Analytical Dashboard, a tool with unique features to unlock valuable data about visitors movement habits, and thus boost their indoor experience. Indoorway dashboard gives insights into real-time data, heat maps, user and room statistics and more. And what if our client wants to build a custom dashboard adjusted to his specific needs or including features that are not available yet?

Indoorway tools allow users to create maps and special features by themselves and in this article I’ll explain how.

When you want to implement an indoor positioning technology, the first thing you need to do is creating a digital map in the Map Creator. It’s a dedicated online editor for managing digital floor plans for any physical location. Thanks to our tools, you’re able to compose indoor maps and then present them to end users with plenty of helpful data. What kind of data is it? See the example of the Rooms Analytics below:

Room analytics with the most crowded rooms chart and a detailed data table.

As you can see on the screenshot, we provide an overview of data. It’s mostly raw data in the shape of numbers. Let’s say a user wants to briefly browse the data and see immediately which room was the most crowded in the selected period of time.

To make it simpler and more readable, I put colors on each room depending on its average visit time. As a result I got this:

Colorized rooms depending on average visit time in each of them. The more saturated green color is, the more time was spent in this area.

‘Long Hall’ and ‘Hall’ are not taken into account, because they would obfuscate our results with big values. To prevent it, we could divide average visit time of room by its area. On the grounds of this statistics, we can see that ‘Office’, ‘WC’, ‘Clothing store’ and ‘Greengrocer’ are the areas where people spend most of their time. On the other hand, the rooms with the least average visit time are ‘Pharmacy’, ‘Toy shop’ and ‘Travel agent’ which suggests that such spaces could be better optimized/managed.

In the further part of the post, I will explain what to do to see such data. For the article purposes, we used our demo account. You can create your free account on our Dashboard, and take advantage of Map Creator to build such maps on your own and analyze your data thanks to Analytical Dashboard.

Ready for the journey with digital maps?

First of all, create a directory. Then init npm project.

npm init

Now we can add map-js (https://www.npmjs.com/package/@indoorway/map-js):

npm i @indoorway/map-js

MapJS needs some basic styling. It’s based on Leaflet.js and uses their styling of map. However, we also have our own styles to handle icons and text labels.

I will also add style to enlarge the map so that it covers the whole page:

Now it’s time to create some space for the rendered map:

<div class="map-container" id="map-container"></div>

And we are ready for the best part, which is script. To be able to use JavaScript modules I will use:

<script type=”module”>

And because of this, only the most recent browser are our target

With script of type ‘module’, we can directly — without any build process and compilers — write:

Now, create a new instance of MapJS:

We have the instance of MapJS, but without map’s data it is useless. Let’s create a helper wrapper for fetch method:

As you can see, you will need API_ADDRESS:

https://julki.indoorway.com/v1/graphql

and WEB_API_TOKEN which is your API token from access section in the Indoorway’s Dashboard. You can also use our demo token, like I did:

cd433b4f-2916–4a3f-9143–31f62f24c57b

Now, we can fetch data from the server:

GraphQL schema is available here. You can read about all the data you can get from our servers at the moment. It’s still in active development, so expect more in the future.

makeAPICall will return a list of maps (Promise) with their unique ids, osm which is GeoJSON data with all areas in map, outline of the map which also is in GeoJSON format and logotypes list (every area can have their own logotype).

We requested a list of maps, but in this example I’m interested only in the first one, so we will render it to the container and then process it:

I started processing the map by gathering all available areas on the map and filtering out the ones we don’t need (‘open_space’ type in this example which are ‘Long Hall’ and the ‘Hall’)

where FILTERS:

When we have all the areas we want to explore, we have to take UUIDS of each area. They will be needed to gain data about this specific space:

Armed with UUIDS of each area we can finally get some data:

getAreaVisitsStats returns a promise and is a wrapper for makeAPICall:

Now we have to fetch all the data:

If a given room was busy that day and the data was collected, we get an array of arrays with the average visit time for each day we’d requested. We can now move on to making a select box with options for each day and colorize areas based on a single day, but I’m interested in the whole time span. So let’s sum it up and take an average:

I want to color each area with an intensity based on relative value to each other, so we have to calculate minimum and maximum values:

With these values we can iterate over each area and set the appropriate color for it:

Luckily, we can do this, because returned values are in order of the Promises passed.

And that’s all for now that we can do to improve our data visually. With this code we can just switch a map or time range and get new insights.

This is just a single map, not a real dashboard. But it’s a good starting point to make it bigger.

Here is a whole code of what we have done above To avoid block of modules, you have to run it with some kind of web server like local-web-server.