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
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
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
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.
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.
About Tom Rupke
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).