Using Google Maps to show project information

How cool would it be to show your project information directly in Relatics on Google Maps? A user can already enter GPS coordinates in Relatics. But how can you give the visualization a nice boost? As a functional designer you have the opportunity embed a small Maps-viewer on the Detail presentation of an element. In this article I describe how to set it up.

Preparations

In this article I expect you have already aquired an API key for the Maps Embed API. Here you can find you the get an API key.

Include data type GPS of a Property in a Report

02_datatype_gps

In Relatics you can set the data type of a property on GPS, as described in the Knowledge Base here. I do notice that GPS is not often used, while this is very valuable! Because the GPS can be set effortlessly with a mobile device, an end user can provide the workspace by GPS coordinates rapidly (whether or not through a Context Portal). Some examples are risks, tests, inspections, locations of meetings or observations ‘in the field’.

In this article I describe the settings of an Object with a property Location, on which the data type GPS is applied. Based on this property, we’re going to embed Google Maps on the Detail presentation of a given Object, in which the Object is indicated with a marker. You can also view this marker in Google Street View! The table shows you how to set the data type. You can then include this in a report query.

Configuring the Report for the viewer

03_rapportage_query

The report that I use is simple. There are some special details summarized below:

  • OutputExtension: HTML
  • ReportFields:
    • Height [Default value: 300] (this is used to adjust the height of the viewer)
    • Zoom [Default value: 13] (this is used to adjust the zoom of the viewer)
    • APIkey [Default value: YOUR_API_KEY]
  • Query:
    • The root-node makes use of the @ID-parameter in the constraint
    • I use the Value-attribute of the property. The report query that is used through the rest of the article is presented below.

Setting up the XSLT-file for the viewer (the components)

The XSLT-file that is ‘behind’ this viewer utilizes the fact that Relatics is a web-based application. This means that you can make an HTML-page based on the data that is stored in Relatics, which can then be embedded in Relatics. By inserting the Google Maps JavaScript API we can generate a Google Maps viewer.

For this reason we need to add the following code in the XSLT:

XSLT: Load Google Maps JavaScript API


<head>

<script>

<xsl:attribute name=”src”

select=”concat(‘https://maps.googleapis.com/maps/api/js?key=’,Report/@APIkey)”/>

</script>

</head>

Next to HTML we will also generate JavaScript-code with the XSLT. We need this to provoke Google’s API, so this will generate the Google Maps viewer (client-sided). In this we will join our data from our Report.

The code below is a combination of JavaScript and XSLT. The final purpose is to create JavaScript-code (JS) in which our data is included; this will be performed using some XSLT-code. In the code below the JS-code is black and the XSLT-code red. Basically, the entire XSLT can be edited, but the red part depends on your Report. Maybe you can already recognize a pattern from the report query (for example the Location or the report field ‘Zoom’):

XSLT: Generating the JavaScript code for the Google Maps API

function initialize() {

var myLatlng = new google.maps.LatLng(<xsl:value-of select=”Report/Data/System_Object[1]/Location/@Location”/>);

var mapOptions = {

zoom: <xsl:value-of select=”Report/@Zoom”/>,

center: myLatlng

}

var map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions);

 

var marker = new google.maps.Marker({

position:  new google.maps.LatLng(<xsl:value-of select=”Report/Data/System_Object[1]/Location/@Location”/>),

map: map

});

}

 

$(document).ready(function(){

initialize();

});

In addition to the previous code, which takes care of loading the viewer, we will also need to add an HTML-element that functions as a ‘photo frame‘. Do you recognize the ‘map-canvas’ from the previous code in the code below?

XSLT: Adding the div-element for the actual viewer

<div id=”map-canvas”>

<xsl:attribute name=”style” select=”concat(‘height:’,Report/@Height,’px;width:100%;border: 1px solid black;’)”/>

</div>

Setting up the XSLT-file for the viewer (the complete code)

When we combine the earlier described chunks of code (and add a small bit of general XSLT-code), we will come to the following result.

Final XSLT: Embedding Google Maps on a Detail Presentation of an Element

<?xml version=”1.0″ encoding=”UTF-8″?>

<xsl:stylesheet version=”2.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:xs=”http://www.w3.org/2001/XMLSchema” xmlns:fn=”http://www.w3.org/2005/xpath-functions”>

<xsl:output method=”html” version=”1.0″ encoding=”UTF-8″ indent=”yes”/>

<xsl:template match=”/”>

<html>

<head>

<script>

<xsl:attribute name=”src”

select=”concat(‘https://maps.googleapis.com/maps/api/js?key=’,Report/@APIkey)”/>

</script>

</head>

<body>

<div>

<xsl:if test=”Report/Data/System_Object[1]/Location[@Location!=”]”>

<script>

function initialize() {

var myLatlng = new google.maps.LatLng(<xsl:value-of select=”Report/Data/System_Object[1]/Location/@Location”/>);

var mapOptions = {

zoom: <xsl:value-of select=”Report/@Zoom”/>,

center: myLatlng

}

var map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions);

 

var marker = new google.maps.Marker({

position:  new google.maps.LatLng(<xsl:value-of select=”Report/Data/System_Object[1]/Location/@Location”/>),

map: map

});

}

 

$(document).ready(function(){

initialize();

});

</script>

<div id=”map-canvas”>

<xsl:attribute name=”style” select=”concat(‘height:’,Report/@Height,’px;width:100%;border: 1px solid black;’)”/>

</div>

</xsl:if>

</div>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Configuring the report on a Detail Presentation

04_ontsluiten_van_rapportage

Once you have uploaded the XSLT you can embed the report in the Detail Presentation. This can be achieved through an ‘HTMLFragment’. In the example below, I have placed it next to the TransposedTable with the general properties (of a System Object).

The final result

When we check the Detail Presentation of one of the objects (of which the GPS-coordinate has been filled in), we will see our interactive Google Maps Viewer.


05_eindresultaat

Why interactive? We can also open Google Street View and view our marker there! Great for when a mobile device is used for entering the data and a colleague back at the office wants to get a first impression of the location.


06_eindresultaat_streetview

About Tom Rupke

Relatics Portret-120

After finishing his study in Civil Engineering, with a masters in Hydraulic Structures, Tom has been working as Specialist Risk Analysis & Contract Management at an engineering company. Since 2016, he works at Relatics as a Business Information Consultant. Tom enjoys working on new ideas and innovations to make the most out of Relatics. He also likes transferring know-how and specific knowledge to end-users and functional designers (both on projects and with customers as by teaching different training courses and workshops).