Casus 3: Feature informatie opmaken met geavanceerde TWIG

In deze casus maken we een themakaart in Onemap met geavanceerde TWIG feature informatie. We voegen in de themakaart WMS en WFS kaartlagen toe en passen daarop voorbeelden van geavanceerde TWIG feature informatie toe. De voorbeelden die we bekijken zijn:

1. Toon de verborgen velden van een WMS service

2. Gebruik enkele van de gevonden velden als feature informatie

3. Velden alleen tonen als ze gevuld zijn

4. Als een veld niet gevuld is een standaard waarde tonen

5. Het attribuut en de waarde verbergen als het veld leeg is

6. Foto’s uit een foto array weergeven in de feature informatie

7. Datum presentatie

8. Hyperlink

Deze opdracht beschrijft het aanmaken van een nieuwe themakaart, je kan het ook in een reeds bestaande themakaart toevoegen. Begin dan bij kaartlagen toevoegen. 

Begin met het aanmaken van een nieuwe themakaart. 

Vul de gevraagde belangrijke informatie in.

Titel	TWIG feature informatie
Projectie	28992
Kaartextent & startextent

Sla de kaart op als de basis instellingen naar wens zijn. Het gaat in deze opdracht meer om de feature informatie configuratie te begrijpen dan om het maken van een complete themakaart. 

Configureer eerst de widgets, zijbalken, werkbalk, knoppen en kaartlagen. Als laatste configureren we de feature informatie op de toegevoegde kaartlagen en bekijken we de resultaten als we deze objecten in de Onemap viewer raadplegen. 

Widgets:

Zijbalken:

Kaartlagen: 

Eerst voegen we een basis/achtergrond kaartlaag en knoppen toe. 

Voeg de basis kaartlaag “BRT standaard” toe.

Zet de kaartlaag in de map “Achtergrond”.

Open het “Werkbalken” menu van de kaart.

Voeg de standaard ”Basis toolbar” toe.

Open de kaart, die zal er ongeveer zo uit zien:

Voeg de kaartlaag “Enkelbestemming” toe.
Dit is een PDOK WMS, waarvan geen WFS beschikbaar is. 

Begin met de WMS service aan te maken en voeg daar een kaartlaag uit toe. 

We gaan nu een WMS kaartservice en kaartlaag “Enkelbestemming” toevoegen aan deze themakaart. 

Maak eerst een kaartservice aan:

Maak een kaartlaag aan op deze webservice:

Service	PDOK Ruimtelijkeplannen (WMS)
Laagnaam	Enkelbestemming
Titel	Enkelbestemming
WFS	nvt
Feature informatie (TWIG)	Voorbeeld 1: Toon de verborgen velden van een WMS service.  Deze service toont geen veld informatie, de WFS is niet beschikbaar. We kunnen nu geen template in laten vullen en geen velden kiezen uit een drop down box.   We gebruiken dan deze TWIG code om alle velden te tonen: {% for key,value in _context %} <div><strong> {{  key  }} </strong> :  {{  value  }} </div> {% endfor %}

Configureer voor deze kaartlaag “Enkelbestemming” nog de volgende zaken: 

Stijl.

Legenda.

Voeg de kaartlaag toe aan de kaart.

Open de themakaart en bekijk het resultaat van de feature informatie configuratie, dat ziet er ongeveer zo uit:

Voorbeeld 2: Gebruik enkele van de gevonden velden als feature informatie.

We zien nu dat er wel velden beschikbaar zijn, deze kunnen we nu individueel configureren. Een voorbeeld is de volgende TWIG code waarin we specifieker aangeven wat we wel en niet willen zien:

De feature informatie is nu compacter, in twee stappen hebben we nu de mogelijke velden opgezocht en de gewenste velden daaruit opgenomen in de feature informatie. 

Let op:
Door het kiezen van de style, hebben we het tonen van de legenda ook mogelijk gemaakt. Deze PDOK service bevat een style waaraan de legenda gekoppeld is. Kies je de style niet toont de legenda ook niet. De styles werken dus nauw samen met de legenda afbeeldingen. Probeer het maar eens, zonder style keuze kan je geen legenda tonen uit de service!

Voorbeeld 3: Velden alleen tonen als ze gevuld zijn

In het feature informatie venster zien we dat “Extern plan” (vaak) niet gevuld is. We kunnen dit attribuut expliciet niet tonen als het veld “Extern plan” leeg is:

{% if verwijzingnaarexternplan %}{{ verwijzingnaarexternplan  }}

{% endif %} 

Let op:

Dit lijkt overbodig omdat het veld ook leeg getoond wordt zonder deze toevoegen, echter bij datums is een niet gevuld datum de datum van vandaag. Dat is onjuist en dit stukje TWIG code zorgt er dan voor dat de datum niet getoond wordt. 

Voorbeeld 4: Als een veld niet gevuld is een standaard waarde tonen

We kunnen ook een standaard waarde “Onbekend” tonen als het veld “Extern plan” leeg is:

{% if verwijzingnaarexternplan %}{{ verwijzingnaarexternplan  }}

{% else %}Onbekend{% endif %} 

Een kortere manier om dit te doen is met de ? en : operator:

{{ verwijzingnaarexternplan ? (verwijzingnaarexternplan) : 'Onbekend' }} 

Voorbeeld 5: Het attribuut en de waarde verbergen als het veld leeg is

We kunnen ook het hele attribuut en het waarde veld verbergen als het niet gevuld is:

{% if verwijzingnaarexternplan %}

<p><strong> Extern plan: </strong>{{ verwijzingnaarexternplan }}</p>

{% endif %} 

Voeg de kaartlaag “Dummy container foto” toe.
Begin met de WMS service en voeg daar een kaartlaag uit toe. 

We gaan nu een WMS kaartservice en kaartlaag “Dummy container foto” toevoegen aan deze themakaart. 

Maak eerst een kaartservice aan:

Maak een kaartlaag aan op deze webservice:

Voeg de kaartlaag toe aan de kaart.

Configureer voor deze kaartlaag “Dummy container foto” nog de volgende zaken: 

Stijl. 

Legenda.

Voorbeeld 6: Foto’s uit een foto array weergeven in de feature informatie

Open de themakaart en bekijk het resultaat van de feature informatie configuratie, dat ziet er ongeveer zo uit:

foto:  container1.jpg|https://gemeenten.webgispublisher.nl/user/uploads/WGP5/container1.jpg;container2.jpg|https://gemeenten.webgispublisher.nl/user/uploads/WGP5/container2.jpg;  Je ziet dat het foto veld van deze kaartlaag gevuld is met tekst, deze tekst is niet alleen een hyperlink naar de foto. Het bevat ook de fotonaam. Op deze manier kan je in Onemap meerdere foto’s toevoegen aan een veld.

Uitleg! 

De waarde uit het attribuutveld ‘foto’ wordt eerst omgezet naar een array (variabele foto_arr) met daarin de afzonderlijk foto-strings:

foto_arr = [

“bestandsnaam|link_naar_bestand“;

“bestandsnaam|link_naar_bestand“

]

Voeg nu deze TWIG code toe voor het tonen van alle foto’s uit de array.

{# Plaats onderstaand blokje met instellingen boven in de feature info #} {# Vervang veld fotos door het veld dat de foto-url's bevat. #} {% set foto_arr = foto|split(';') %} {# Pas breedte aan indien nodig. 306px past goed bij standaard feature info in zijbalk. #} {% set container_width = '306px' %} {# Pas ook dit aan naar smaak. #} {% set thumb_height = '100px' %} <p>Container_ID: {{ container_ }}</p> <p>Container_afvalfractie: {{ containe_6 }}</p> <p>Geinspecteerd: {{ containe_3 }}</p> <p>Status: {{ status }}</p> {# Plaats deze div op de plek waar de foto's getoond moeten worden. #} <div style="width:{{container_width}};display:flex;flex-wrap:wrap;">  {% for foto_string in foto_arr if foto_string %}   {% set foto_parts = foto_string|split('|') %}   {% set foto_url = foto_parts[1] %}   <a target="_blank" href="{{foto_url}}" style="margin:0.3rem;min-width:46%;height:{{thumb_height}};background-image:url({{foto_url}});background-size:cover;background-position:center"></a>   {% endfor %} </div> <p>[[[Details]]]</p> <p>Containertype_volume_m3: {{ containe_15 }}</p> <p>Containertype_gewicht_kg: {{ containe_16 }}</p> <p>Container_datum_creatie: {{ containe_7 }}</p> <p>Container_datum_plaatsing: {{ containe_8 }}</p> <p>[[[Locatie]]] Straat: {{ bag_adre_8 }}</p> <p>Nummer: {{ bag_adre_9 }}</p> <p>Postcode: {{ bag_adre12 }}</p>{{ status }}

Let op!  Ook zit er in deze feature informatie configuratie 2 zelf aangemaakte tabjes. Hier boven zie je Details en Locatie, waarin de feature informatie in onderverdeeld is. Deze tabjes kun je zelf definiëren met de volgende TWIG code: [[[Naam]]]

Het eerste stuk van de TWIG code maakt van het veld foto een array.

{# Vervang veld fotos door het veld dat de foto-url's bevat. #}

{% set foto_arr = foto|split(';') %}

{# Pas breedte aan indien nodig. 306px past goed bij standaard feature info in zijbalk. #}

{% set container_width = '306px' %}

{# Pas ook dit aan naar smaak. #}

{% set thumb_height = '100px' %}

Het tweede stuk van de TWIG code doorloopt de array en toont de foto’s 1 voor 1. 

{# Plaats deze div op de plek waar de foto's getoond moeten worden. #}

<div style="width:{{container_width}};display:flex;flex-wrap:wrap;">

 {% for foto_string in foto_arr if foto_string %}

  {% set foto_parts = foto_string|split('|') %}

  {% set foto_url = foto_parts[1] %}

  <a target="_blank" href="{{foto_url}}" style="margin:0.3rem;min-width:46%;height:{{thumb_height}};background-image:url({{foto_url}});background-size:cover;background-position:center"></a>

  {% endfor %}

</div>

Let op! Als je met de Onemap app features registreert en daarbij foto’s toevoegd zal de Onemap app deze volgens deze standaard opslaan. Dan is dit de manier om al deze foto’s te tonen in de feature informatie. 

Als je zelf een edit laag wil maken en een paar containers wil bewerken, dan kun je deze fotonamen gebruiken.

Voeg de kaartlaag “BAG Terugmeldingen” toe.
Begin met de WMS service en voeg daar een kaartlaag uit toe. 

We gaan nu een WMS kaartservice en kaartlaag “BAG Terugmeldingen” toevoegen aan deze themakaart. 

Maak eerst een kaartservice aan:

Maak een kaartlaag aan op deze webservice:

Voeg de kaartlaag toe aan de kaart.

Open de themakaart en bekijk het resultaat van de feature informatie configuratie, dat ziet er ongeveer zo uit:

Voorbeeld 7: Datum presentatie

Deze datum notatie is erg exact en uitgebreid aangeboden. Wij zien liever een compactere weergave.
Dat kan met de volgende TWIG code voorbeelden. 

dag-maand-jaar

{{ tijdstipStatuswijziging | date('d-m-Y') }}

dag-maand-jaar uren:minuten:seconden

{{ tijdstipStatuswijziging | date("d/m/Y H:i:s") }}

dag-maand-jaar uren:minuten:seconden AM/PM

{{ tijdstipStatuswijziging | date("m/d/Y g:i:sA") }}

Vervang in de feature informatie de tijdstipStatuswijziging variabele door een van de bovenstaande voorbeelden en bekijk het resultaat. Dat moet er dan ongeveer zo uit zien. 

Voeg de kaartlaag “Kamerverhuur” toe.
Begin met de WMS service en voeg daar een kaartlaag uit toe. 

We gaan nu een WMS kaartservice en kaartlaag “BAG Terugmeldingen” toevoegen aan deze themakaart. 

Maak eerst een kaartservice aan:

Maak een kaartlaag aan op deze webservice:

Configureer voor deze kaartlaag “Kamerverhuur” nog de volgende zaken: 

Stijl. 

Legenda.

Voeg de kaartlaag toe aan de kaart.

De kaart ziet er dan voor “Kamerverhuur” ongeveer zo uit. 

Voorbeeld 8: Hyperlink

We gaan een hyperlink maken met een waarde van een attribuut. Bij gebrek aan beter maken we van het attribuut woonplaats een link naar de site van de woonplaats. Bijvoorbeeld http://www.wageningen.nl  

Voeg daarvoor deze TWIG code in het voorbeeld. 

Probeer de link maar uit in de Onemap themakaart.