Deze pagina beschrijft hoe je een template voor de aanklikinformatie (on-click feature-info) samenstelt in een HTML-editor. De template kan HTML-elementen, veldvariabelen en script bevatten. Met hulpvariabele NVHelper kun je de notatie van getallen en datums configureren.

De pagina behandelt de volgende onderwerpen:

HTML-editor

Onder aan pagina Configureren feature-info bevindt zich een HTML-editor voor het configureren van een 'template' voor de feature-info van een kaartlaag. Deze editor verschijnt wanneer je de aanklikinformatie (on-click feature-info) hebt ingeschakeld (selectievakje Inschakelen Feature-info on-click).

Standaard gebruik je de editor op tabblad WYSIWYG als eenvoudige teksteditor, waarbij je de knoppen op de werkbalk erboven gebruikt voor de opmaak van de tekst. De groene knoppen onder VELDEN gebruik je om de informatievelden van de feature-info als variabelen in de template in te voegen. Nadat je de template hebt samengesteld, sla je hem op door bovenin op Opslaan te klikken (de knop onder de tekst Configureren feature-info).

Door op tabblad Broncode te klikken schakel je over op de codeweergave van de editor. In de codeweergave  stel je een template van de feature-info samen door direct HTML-code in te voeren of te wijzigen en in de code de waarden van featureinfo-velden op te nemen. De opmaak van de tekst voeg je toe door HTML-markupelementen te gebruiken. De knoppen boven het tekstveld voor de opmaak van de tekst zijn in de codeweergave niet beschikbaar. In de volgende afbeelding zie je een voorbeeld van de codeweergave:

De waarde van een featureinfo-veld wordt door een variabele gerepresenteerd. Deze variabele heeft de volgende syntax:

$<VELD> 

waarbij <VELD> de naam van het veld is. Je kunt de variabele voor een bepaald veld in de tekst van de template invoegen door bij Velden op de naam van het veld te klikken.

...

Werkwijze samenstellen template

Op de volgende manier kun je een template voor de aanklikinformatie (onclick-featureinfo) van een kaartlaag samenstellen:

1. Klik op pagina Kaartlagen beheren achter een kaartlaag op de link Feature-info.

   Panel
   borderStyle none
   De pagina Configureren feature-info verschijnt met boven aan de pagina de naam van de kaartlaag.

   
   

2. Indien deze laag een WMS-laag is, selecteer dan bij Feature-info type de aanduiding voor dataformaat 'GML'  of 'JSON'.

   Panel
   borderStyle none
   Wanneer dit dataformaat nog niet geselecteerd was, verschijnt na het selecteren ervan onder aan de pagina het tekstcanvas waarin je de template van de aanklikinformatie kunt samenstellen.

   
   

3. Indien deze laag een WFS-laag is, vink dan het selectievakje Inschakelen Feature-info on-click aan.

   Panel
   borderStyle none
   Wanneer dit vakje nog niet geselecteerd was, verschijnt na het selecteren ervan het tekstcanvas onder aan de pagina.

   
   

4. Schrijf in het tekstcanvas de tekst van de template en voeg de variabelen voor de informatievelden aan de template toe door op de groene knoppen onder VELDEN te drukken.
   
   

5. Klik boven aan de pagina op Opslaan (de knop onder de tekst Configureren feature-info). 

   Panel
   borderStyle none
   De pagina Configureren feature-info verdwijnt en je keert terug naar de pagina Kaartlagen beheren.

   
   

Templatetaal Velocity

De taal (template engine) waarmee WGP de (web) template voor de feature-info definieert heet Velocity. Zie voor meer informatie hierover de volgende webpagina:

https://velocity.apache.org/engine/1.5/user-guide.html

In deze templatetaal kun je voorwaardelijk bepaalde feature-info laten weergeven. De volgende if-elseif-else constructie vormt daarvan een voorbeeld:

#set($i = $INDEX)
## Vertaal index naar een beschrijvende tekst.
#if($i == "1.0")
  #set($text = "akker")
#elseif($i == "2.0")
  #set($text = "grasland")
#elseif($i == "3.0")
  #set($text = "bos")
#elseif($i == "4.0")
  #set($text = "heide")
#else
  #set($text = "onbekend")
#end

<table>
<tr><td>Index:</td><td>$i</td></tr>
<tr><td>Tekst:</td><td>$text</td></tr>
</table>

In de template van de feature-info kun je in Velocity-code velden met elkaar of met een constante vergelijken. Het probleem daarbij is dat de veldwaarden, ook die van de numerieke velden, in de feature-info altijd als tekst worden geïnterpreteerd en dus altijd alfabetisch worden vergeleken. Met behulp van de functies van een hulpvariabele kun je echter tekst converteren naar een numerieke waarde. Zie onderdeel Converteren van tekst naar getallen in Velocity.

Invoeren van een hyperlink

Je kunt op de volgende manier in de template van de feature-info een hyperlink definiëren die verwijst naar een (variabele) URL:

1. Zorg dat de on-click feature-info van de betreffende laag is ingeschakeld.
   
   
2. Type de tekst in de HTML-editor waarin je een hyperlink wilt plaatsen. Doe dit in de WYSIWYG-editor (tabblad WYSIWYG).
   
   
3. Selecteer de tekst van de link, bijvoorbeeld in de zin 'Voor meer informatie klik hier', het woord 'hier'.
   
   
4. Klik op de knop Hyperlink invoegen/bewerken (op de werkbalk boven de HTML-editor).
   
   Image Modified
   
   Het venster Hyperlink invoegen verschijnt.
   
   

5. Vul in dit venster bij Url de hyperlink naar een bestand in, bijvoorbeeld een HTML-pagina. Je kunt voor de URL ook een variabele gebruiken, zoals $KICHLINK of $URL. 

   Panel
   borderStyle none
   Je kunt ook een verwijzing naar een bestand op de WGP-server opgeven door met de selectieknop rechts van het veld Url het venster Bestandsbeheer te openen, daar het bestand te selecteren en op de knop Invoegen te klikken. Zorg wel dat een webbrowser het formaat van het geselecteerde bestand ondersteunt. Info title Opmerking Alle URLs beginnen met 'http://' of 'https://'. WGP gebruikt geen relatieve links (zoals in versies vóór WGP 4.3).

   
   

6. 
   

   Geef bij Doel aan of de webbrowser het bestand moet openen in het huidige venster (waarde 'Geen') of in een nieuw venster (waarde 'Nieuw venster').
   
   

7. Klik Oké. In de editor wordt de linktekst als hyperlink weergegeven. Je kunt de link controleren, wijzigen of verwijderen door hem te selecteren en opnieuw op de knop Hyperlink invoegen/bewerken te klikken.
   
   
8. Na publiceren van de kaart ziet de feature-info er in een viewer of een widget als volgt uit:
   
   Image Modified
   

Fotoseries

Je kunt in het venster of paneel met de aanklikinformatie (feature-info on-click) een serie foto's opnemen. Hieronder zie je een voorbeeld:

Je kunt deze serie foto's in de HTML-template van de feature-info invoegen door een veldvariable voor de foto's binnen de stijlklasse 'uploadphotos' te plaatsen. Bijvoorbeeld:

<h1>$naam</h1>
<h2>Foto's</h2>
<div class="uploadphotos">$fotos</div>

De veldvariabele moet naar een tekstveld verwijzen dat de volledige URL-adressen van de foto's bevat, waarbij de verschillende adressen door een puntkomma zijn gescheiden. Bijvoorbeeld een tekstveld met de volgende waarde:

http://wgp.test.nl/user/uploads/fotos/foto1.png;http://wgp.test.nl/user/uploads/fotos/foto2.jpg;http://wgp.test.nl/user/uploads/fotos/foto3.gif

Omdat het tekstveld het hele URL-adres van de foto's moet bevatten, hoeven de foto's niet per se op de WGP-server te staan.

Weergave van getallen en datums

Je kunt in de template van de feature-info bepalen hoe je numerieke velden en datumvelden in de aanklikinformatie wilt weergeven. Dit doe je met de functies FormatNumber en FormatDate van hulpvariabele $NVHelper, waarbij de functie achter de variabele staat en de functie van de variabele door een punt gescheiden wordt. De argumenten van de functie staan er tussen haakjes achter en worden door een komma gescheiden. Sommige argumenten zijn optioneel. De algemene syntax is als volgt:

$NVHelper.<functienaam>(<arg1>, <arg2>, …)

• $NVHelper.FormatNumber(<numeriek veld>, <getalformaat#> |, <taal>|)
  • <getalformaat#>
    de getalnotatie met daarachter het aantal decimalen (#). Het getalformaat wordt door de volgende letters aangeduid:
    • 'N#'
      N staat voor een getal met een scheidingsteken voor de duizendtallen.
    • 'F#'
      F staat voor een getal zonder een scheidingsteken voor de duizendtallen.

    • 'E#'
      E staat voor de wetenschappelijke notatie van een getal.
      
      Ook andere formaten worden ondersteund. Zo kun je getalformaat '0000.00' gebruiken om het getal met voorloopnullen altijd zescijferig te maken en van twee decimalen te voorzien. Zie voor meer informatie over het getalformaat de Format specifier op pagina's Standard Numeric Format Strings en Custom Numeric Format Strings van de documentatie van .NET Framework.

      Note

      Als de te formatteren waarde geen getal is, zal de functie een foutmelding teruggeven. Indien een veld niet is ingevuld en dus de waarde NULL heeft, zal de functie ook de waarde NULL teruggeven. De functie behandelt ook een lege string of witruimte als waarde NULL, dat wil zeggen dat velden met een dergelijke waarde beschouwd worden als oningevuld. In de feature-info zal in dat geval geen waarde worden getoond of de naam van de variabele verschijnen.

      
      

• • <taal>(optioneel)
    de taal van de getalnotatie. De default taal, de taal die gebruikt wordt als dit argument ontbreekt, is Engels ('en').

    Info
    In het grootste deel van Europa is het decimaalteken een komma (lichtgroen in onderstaande afbeelding), in veel Angelsaksische landen is het een punt (blauw in onderstaande afbeelding; bron: fr.wikipedia.org). In veel Angelsaksische landen wordt een komma als scheidingsteken voor de duizendtallen gebruikt. In Nederland gebruiken we daarvoor een punt. Image Modified

    
    

    
    

    Expand
    title Voorbeelden van getalnotaties ...
    $NVHelper.FormatNumber($getal, 'N2') → '123,456.78' $NVHelper.FormatNumber($getal, 'F3', 'nl') → '123456,789' $NVHelper.FormatNumber('1032.1738', 'E4') → '1.0321E+003

    
    

    
    

• $NVHelper.FormatDate(<datumveld>, <datumformaat>|,<taal>|)
  • <datumformaat>:
    • 'd'
      de kortste datumnotatie, afhankelijk van het opgegeven land.
    • 'dd-MM-yy'
      aangepast datumformaat waarbij 'dd' staat voor het dagnummer, 'MM' voor het maandnummer en 'yy' voor de tweecijferige notatie van het jaar, met een liggend streepje als scheidingsteken.
    • 'dd MMMM yyyy'
      aangepast datumformaat waarbij 'dd' staat voor het dagnummer, 'MMMM' voor de volledige naam van de maand en 'yyyy' voor het viercijferige jaar, met een spatie als scheidingsteken.
    • 'F'
      de volledige datum met de uitgebreide notatie voor de tijd (in seconden).
    • 'f'
      de volledige datum met een verkorte notatie voor de tijd (zonder seconden).
      
      Ook andere formaten worden ondersteund. Zie voor meer informatie over het datumformaat de Format specifier op pagina's Standard Date and Time Format Strings en Custom Date and Time Format Strings van de documentatie van .NET Framework.

• • <taal> (optioneel):
    de taal van de datumnotatie. De default taal, de taal die gebruikt wordt als dit argument ontbreekt, is Engels ('en'). De taal bepaalt ook de volgorde van de dag, de maand en het jaar. Zo komt in de korte Engelse datumnotatie het maandnummer eerst. 

    Expand
    title Voorbeelden van datumnotaties ...
    $NVHelper.FormatDate($datum, 'd', 'nl') → '8-12-2015' $NVHelper.FormatDate($datum, 'F') → 'Monday, 16 May 2016 00:00:00' $NVHelper.FormatDate($datum, 'f', 'nl') → 'maandag 16 mei 2016 16:43' $NVHelper.FormatDate('05/08/2015', 'dd MMMM yyyy') → '08 May 2015'

    
    

...