Google Maps gebruiken om project informatie te tonen

Hoe gaaf zou het zijn om jouw projectinformatie direct in Relatics op Google Maps te kunnen zien? De gebruiker kan al in Relatics GPS-coördinaten invoeren. Maar hoe geef je daarmee de visualisatie een mooie boost? Als functioneel beheerder heb jij de mogelijkheid om een kleine Maps-viewer op de Detail Presentatie van een element weer te geven. In dit artikel beschrijf ik hoe je dit kunt instellen.

Datatype GPS van een Eigenschap meegeven in een rapportage

In Relatics kun je op een eigenschap het datatype GPS instellen, zoals hier beschreven op de Knowledge Base. Ik zie dat GPS in de praktijk nog niet vaak gebruikt wordt, terwijl deze juist erg waardevol is! Doordat de GPS erg gemakkelijk via de mobiele telefoon is in te stellen, kan een eindgebruiker (al dan niet via een Context Portal) snel de workspace van GPS-coördinaten voorzien. Denk hierbij aan risico’s, keuringen, locaties van vergaderingen of waarnemingen ‘in het veld’.

In dit artikel beschrijf ik de instelling van een Object met een eigenschap Locatie, waarop het datatype GPS is toegepast. Op basis van deze eigenschap gaan we een kaartje tonen op de detail presentatie van het betreffende Object, waarbij het Object met een marker is aangewezen. Deze kun je ook nog eens in Google Street View bekijken! De tabel laat zien waar je het datatype instelt. Deze kun je vervolgens in een rapportage query meegeven.

Instellen van de Report voor de viewer

De rapportage die ik gebruik is eenvoudig. Er zijn een aantal bijzonderheden die hieronder worden opgesomd:

  • OutputExtension: HTML
  • ReportFields:
    • Height [Default value: 300] (hiermee kunnen we de hoogte van de viewer aanpassen)
    • Zoom [Default value: 13] (hiermee kunnen we de zoom van de viewer aanpassen)
  • Query:
    • De root-node maakt in de constraint gebruik van de @ID-parameter
    • Ik ontsluit het Value-attribuut van de eigenschap. Hieronder is de rapportage query te zien die in de rest van het artikel wordt gebruikt.

Het XSLT-bestand opstellen voor de viewer (de componenten)

Het XSLT-bestand dat ‘achter’ deze viewer zit maakt gebruik van het feit dat Relatics een web-based applicatie is. Dat wil zeggen dat je op basis van de data in Relatics een HTML-pagina kan maken, die je ergens in Relatics kan laten zien. Door de Google Maps JavaScript API op te nemen kunnen we een Google Maps viewer maken.

In de XSLT nemen we daarom onderstaande code op:

XSLT: Google Maps JavaScript API inladen

...
   <head>
      <script src="https://maps.googleapis.com/maps/api/js"/>
   </head>
...

Naast HTML gaan we ook JavaScript laten genereren met de XSLT. Deze hebben we nodig om op de API van Google in te haken, zodat deze (client-sided) een Google Maps viewer zal genereren. Hierin zullen we namelijk gegevens uit onze Report gaan toevoegen.

De code hieronder is een combinatie van Javascript en XSLT. Het uiteindelijke doel is om een code van JavaScript (JS) te maken, waar onze data in verwerkt zit. Dat laatste wordt dan weer met een XSLT gedaan. In de code hieronder is de JS-code zwart en de XSLT-code rood. In principe is de gehele XSLT aan te passen, maar het rode deel is variabel afhankelijk van jouw Report. Misschien herken je hier al een patroon in van de rapportage query (bijvoorbeeld de Locatie of het report field ‘Zoom’):

XSLT: Genereren van de JavaScript code voor de 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();

  });

...

Naast de hierboven beschreven code, die zorgt dat de viewer zal gaan laden, zullen we ook nog een HTML-element moeten toevoegen die als een ‘fotolijstje’ zal gaan fungeren. Herken je de ‘map-canvas’ uit de bovenstaande code hieronder?

XSLT: div-element toevoegen voor de daadwerkelijke viewer

...

              <div id="map-canvas">

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

              </div>

...

Het XSLT-bestand opstellen voor de viewer (het geheel)

Wanneer we de bovenstaande stukken code samenvoegen (en er een klein beetje standaard XSLT-code aan toevoegen) komen we tot het onderstaande resultaat.

Uiteindelijke XSLT: Google Maps op een Detail Presentatie van een Element tonen

<?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 src="https://maps.googleapis.com/maps/api/js"/>

        </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>

De rapportage ontsluiten op een Detail Presentatie

Als je de XSLT hebt geüpload kun je de rapportage ontsluiten op de Detail Presentation. Dit kun je doen door middel van een ‘HTMLFragment’. In onderstaand voorbeeld heb ik deze naast de TransposedTable met de algemene gegevens gezet.

Het eindresultaat

Als we op de detail presentatie van een van de objecten kijken (waarvan een GPS-coördinaat is ingevuld), dan zien we daar onze interactieve Google Maps viewer.

Waarom interactief? We kunnen namelijk ook Google Street View openen en daar onze marker zien! Ideaal als er op een mobiel een invoer is gedaan en een collega op kantoor een impressie wilt krijgen.

Downloaden

Upload onderstaand RCS-bestand in je Relatics environment om de voorbeelden van dit artikel zelf te bekijken. In de ZIP kun je ook het XSLT-bestand vinden, zodat je direct in jouw eigen workspace aan de slag kunt.

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).

Relatics Portret-127 (Small)

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