Twig templates

Gebruik van Twig voor feature info

De templates in Onemap zijn in de opmaaktaal Twig geschreven. Dit is een PHP taal waar ook een Javascript port van is gemaakt. https://twig.symfony.com/doc/3.x/templates.html

De viewer gebruikt de javascriptversie van Twig, genaamd TwigJS (of twig.js). De javascriptversie probeert zo compatibel mogelijk te zijn met de PHP-versie, maar het kan zijn dat niet alle mogelijkheden uit de PHP-Twig-documentatie ook in de viewer werken. Hier kom je pas achter als je het probeert.

Voorbeelden feature info

Bepalen welke velden aanwezig zijn in een kaartlaag

Het komt soms voor dat de velden van een WMS-kaartlaag niet bekend zijn in Onemap. Dit komt doordat er geen WFS-tegenhanger van de kaartlaag bekend is in Onemap, of dat het om een rasterbestand (o.a. AHN) gaat. Het ophalen van feature info werkt wel gewoon, maar je moet dan de veldnamen kennen om ze te kunnen gebruiken in twig.

Gebruik deze Twig template om alle velden van een aangeklikte feature op te sommen.

{% for key,value in _context %}
<div><strong> {{  key  }} </strong> :  {{  value  }} </div>
{% endfor %}

Splitsen van strings

Een use case voor splitsen van strings is bijvoorbeeld een lijst met url’s die is opgeslagen bij een object. Als dit een string is met meerdere url’s die met puntkomma gescheiden zijn, wil je deze eigenlijk als losse links weergeven in feature info. Gebruik hiervoor een split filter.

{% set urls_array = urlstring | split(';') %}
{% for url in urls_array %}
<p>Link: <a href="{{url}}" target="_blank">Linktekst</a></p>
{% endfor %}

Lookup tables

Als een veld een numerieke of stringwaarde bevat met een betekenis, wil je in deze in feature info vertalen naar een voor de gebruiker begrijpelijke tekst. Een handige manier om dit te doen is door javascript objects te definiëren waar de keys de waardes zijn en de values de vertalingen.

Zie hieronder een voorbeeld waarbij de waarde van een veld 'type' wordt vertaald naar een label dat ook een type-afhankelijke kleur krijgt.

{% set labels = {
  1: 'Een',
  2: 'Twee',
  3: 'Veel'
} %}

{# Gebruik enkele quotes als de keys string zijn #}
{% set colors = {
  '#FF0000': 'red',
  '#008800': 'darkgreen',
  '#0000FF': 'blue'
} %}

{# Gebruik ?? om defaults op te geven als het attribuut leeg is #}
{% set typeLabel = labels[type] ?? '?' %}
{% set typeColor = colors[type] ?? '#ccc' %}

<h3>Type</h3>
<p style="color:{{typeColor}};">{{typeLabel}}</p>

Datum opmaken

Het is mogeljik om een datum volgens een opgegeven format op te maken.

{{ datumveld | date('d-m-Y') }} {# opgemaakt als (dag-maand-jaar(4 cijfers) #}

Zie voor opmaakopties hier: https://arigato.docs.bonify.io/article/281-formatting-dates-in-twig

Noot: de opties hierboven zijn voor de php-versie van twig. Het kan zijn dat sommige opties (met name localization) niet werken in de viewer.

Alleen gevulde velden opmaken

Het voorbeeld hierboven heeft een mogelijk onverwacht nadeel. Als een datumveld leeg is, wordt die opgemaakt als de huidige datum. Als je lege datumvelden leeg wil laten, kan je dit als volgt doen:

{% if datumveld %}{{ datumveld | date('d-m-Y') }}{% else %}Onbekend{% endif %}

Een kortere manier om dit te doen is met de ?: operators.

{{ datumveld ? (datumveld | date('d-m-Y')) : 'Onbekend' }}

Of om het veld gewoon leeg te laten als het niet is gevuld:

{{ datumveld ? (datumveld | date('d-m-Y')) }}