Geocaching your data or the simplest way to hide/show data based on user location

2 Likes

Wikipedia says: Geocaching is an outdoor recreational activity in which participants use a Global Positioning System (GPS) receiver or mobile device and other navigational techniques to hide and seek containers called "geocaches," or "caches," at specific locations marked by coordinates all over the world.

You might wonder how does that apply to the data in your SAS Visual Analytics report? This article will show you how you can adapt the report content (the data) to show only the information based on user location.

First a bit of background, modern browsers offer the functionality to geolocate the user. This feature is nice when it comes to finding the nearest restaurant, adapt the content of a web page, block access to certain information based on the current location of the user, etc... Many of us worry that the internet giants are tracking us since browsers prompt users to Allow or Block the location. Have you seen a popup like this?

Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.

Think of the possibilities of using SAS Visual Analytics to filter the report data based on the user location. This functionality is not available out of the box but it can easily be achieved using the Data-Driven Content object. I've already written a few articles about this object type:

This article will explain the html code and the technique to filter the data based on user location.

If you have not already heard about the Data-Driven Content object and the benefits it brings to Visual Analytics, you can read the following information:

Prepare your environment

Going forward, this article will assume the basic understanding of Data-Driven Content objects. First, we will copy files to the web server that will host the web content that gets rendered by the Data-Driven Content object.

For this article, we will have to store the web page in a web application that can be accessed through HTTPS. This is a geolocation requirement for the browsers to implement the needed security layer as mentioned on the following documentation. This means that you should access all the web applications using HTTPS protocol. We will use the web server that is configured with SAS Viya. If the environment is not set for HTTPS protocol, the filtering might not work as expected. You should ask your administrator to configure the environment for HTTPS.

To ease the development, you can find all the needed files on GitHub. You can use the provided files to start your own developments. The files should be located in /var/www/html directory on the machine hosting the web server. By default, only the root user can write to that location. You should ask an administrator to change the rights in such a way that your user or group has read and write access on the directory.

Here are the files that you should download and the location on the web server:

/var/www/html/util/contentUtil.js from contentUtil.js
/var/www/html/util/messagingUtil.js from messagingUtil.js
/var/www/html/geoLocation/index.html from index.html

In order to create the report, you should also have some data. In our example, we will be matching the geolocation data and the report data on a two letters country code based on ISO 3166-1 standard. The file should contain your country so that the report will work. If your country is not listed, you can find any dataset with multiple countries including the one you are currently connecting from and having the needed country code.

We will test that the html page can be accessed using a browser. You should open a browser and type the URL of your environment. In my environment, the URL is: https://sasviya01.race.sas.com/geoLocation/index.html

You should just get a web page with "Loading data ..." message. At this stage, no data is loaded as we are not integrated with the Data-Driven Content object. The objective is just to test that our HTML page renders properly.

Create the report

The html page is now working, and we can attach it to a report. Here are the steps to create the report:

Connect to SAS Visual Analytics
Load the provided data
Add a List Table object to the report with the following Roles:
Add a Data-Driven Content object to the report with the following Roles, Actions, and Options. The URL should point to the page we tested previously. In my example: https://sasviya01.race.sas.com/geoLocation/index.html

We are defining here the variable that is passed to the HTML page and will be matched with the country code coming from the geolocation.

The action that we define triggers the filtering of the data in the List Table based on the value returned by the HTML page.
After adding the URL in the Options pane, you should get the following prompt. Just click on Allow.
The data should now be filtered and the report looks like this. This data is showing the Country name and the population for the selected years.

Writing the HTML page

You have now a working example but how difficult is it to create the html page. We will see that in this section.

As you've seen earlier, we have imported two JavaScript files and one HTML file. The JavaScript files are provided as-is and should not be changed. I will focus on the HTML page. You might imagine that I had to write a lot of lines. If you open the HTML page, you will see only 70 lines of code. Out of those lines, only three functions are useful and they represent around 40 lines of code. In the world of HTML coding, it's not really much.

Let's start with the lines that are not really interesting to explain but which are required for the HTML page to work.

The HEAD section defines the path to the JavaScript files. I've set those at the root level of the web server as they can be used for all the Data-Driven Content objects. They do not contain any specific information for the current project.

The BODY section contains an empty paragraph with an id. It will serve as placeholder for the location information. The content of the paragraph will be inserted by our JavaScript code which is defined right after.

In the SCRIPT section, we first define a few variables. Those variables are used to pass data between functions.

We have then three functions that I will explain and a lonely line at the bottom. That single line is the glue. Without that line, the functions would be useless.

This line defines the function that should be called when the data are received from the VA report. In this case, we are calling a function named filter.

The filter function is called when the data are received from the VA report. The function assigns values provided by the report and calls the navigator object which will get the current location. If the geolocation is not supported a message will be displayed.

As you can see the getCurrentPosition method requires a few arguments. Those arguments are the two functions that are defined in our SCRIPT section.

The showError function handles the errors and related messages. If everything works fine, you should not see any of those errors appearing in the VA report.

The showCountryName function is the callback function that will be used when the getCurrentPosition receives the longitude and latitude from the browser.

A position object is passed to the function. That object contains the latitude and longitude information. The values are used to call a service provided by OpenStreetMap. That service returns the address based on the latitude and longitude. In our case, we want to retrieve the country_code from the address.

The postSelectionMessage method is the function that will pass the filter information to the VA report. It requires two arguments the Result Name that was originally received from the report and an array of row ids. Those row ids are retrieved from the received data. In this example, we select only the row ids from the source data matching the data.address.country_code that is retrieved from OpenStreetMap.

Conclusion

You've now seen how easy it is to filter data based on the user location. There is only one limitation: security. The connection should be made through HTTPS and user should allow the browser to retrieve the location information. Besides that, you can create any kind of filter based on geolocation. From the address, you can retrieve the street, the country. You can also use other web services to retrieve the language, the province, the state, ... the sky is the limit in terms of usage. You should just make sure that the information provided in the report matches the data from the web service.