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.
Opmerking
Voor velden met een onbepaalde waarde (waarde NULL) toont WGP in de feature-info de veldnaam, bijvoorbeeld $Link. Dat kun je voorkomen door achter $ een ! te zetten, bijv. $!Link.
Attentie!
Schakel na het invoegen van script-code op tabblad Broncode niet meer over op de WYSIWYG-editor, omdat deze alle script-code stukmaakt.
Als je bij de opmaak van een tabel 'cellpadding', 'border' of 'cellspacing' gebruikt en deze tabel opneemt in de HTML-template van de feature-info, kan bij het opvragen van feature-info het popup-informatievenster de aangeklikte feature bedekken.
Indien de velden van de laag in WGP advanced zijn geconfigureerd, kan het tekstlabel op de veld-knoppen afwijken van de naam van het veld in de kaartservice. De code van de feature-info template dient als variabele deze laatste naam te bevatten.
Werkwijze samenstellen template
Op de volgende manier kun je een template voor de aanklikinformatie (onclick-featureinfo) van een kaartlaag samenstellen:
Klik op pagina Kaartlagen beheren achter een kaartlaag op de link Feature-info.
De pagina Configureren feature-info verschijnt met boven aan de pagina de naam van de kaartlaag.
Indien deze laag een WMS-laag is, selecteer dan bij Feature-info type de aanduiding voor dataformaat 'GML' of 'JSON'.
- 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.
Indien deze laag een WFS-laag is, vink dan het selectievakje Inschakelen Feature-info on-click aan.
Wanneer dit vakje nog niet geselecteerd was, verschijnt na het selecteren ervan het tekstcanvas onder aan de pagina.
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.
Klik boven aan de pagina op Opslaan (de knop onder de tekst Configureren feature-info).
De pagina Configureren feature-info verdwijnt en je keert terug naar de pagina Kaartlagen beheren.
Templatetaal Velocity
ATTENTIE!
Je kunt alleen in de codeweergave van de HTML-editor velocity-code aan de template toevoegen. Schakel daarna niet over op de WYSIWYG-weergave. De WYSIWYG-editor zal dan namelijk de velocity-code stukmaken. Sla de template altijd in de codeweergave op.
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
Opmerking
WGP ondersteunt grotendeels Apache Velocity versie 1.5. Ondersteuning van de volledige functionaliteit is echter niet gegarandeerd.
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:
- Zorg dat de on-click feature-info van de betreffende laag is ingeschakeld.
- Type de tekst in de HTML-editor waarin je een hyperlink wilt plaatsen. Doe dit in de WYSIWYG-editor (tabblad WYSIWYG).
- Selecteer de tekst van de link, bijvoorbeeld in de zin '
Voor meer informatie klik hier', het woord 'hier'. - Klik op de knop Hyperlink invoegen/bewerken (op de werkbalk boven de HTML-editor).
Het venster Hyperlink invoegen verschijnt. 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
$KICHLINKof$URL.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.
Opmerking
Alle URLs beginnen met '
http://' of 'https://'. WGP gebruikt geen relatieve links (zoals in versies vóór WGP 4.3).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').- 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.
- Na publiceren van de kaart ziet de feature-info er in een viewer of een widget als volgt uit:
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.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').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.
$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.
Wanneer er voor het veld geen waarde is ingevuld, toont de aanklikinformatie de naam van de variabele. Zet voor de variabele $! om het weergeven van de naam van de variabele te onderdrukken, bijvoorbeeld $!NVHelper.