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
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 class="map">
<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.
Downloads
Upload the RCS-file in your Relatics environment to view the examples in this article yourself. In the ZIP you will also find the XSLT-file, so you can start right away in your own workspace.
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).
Contact
Do you need help in applying the techniques and tips in your own case? Or do you have questions, comments or suggestions about this article? If so, don’t hesitate to contact one of our consultants