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 waarde 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'
} %}

{% set colors = {
  1: 'red',
  2: 'darkgreen',
  3: '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>

Noot: dit werkt ook voor tekstvelden. Gebruik quotes rond de keys als de veldwaarde een spatie of andere niet-alfanumerieke karakters bevat.