Inleiding

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. Default template

9. 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. 

Themakaart aanmaken

Begin met het aanmaken van een nieuwe themakaart. 

Vul de gevraagde belangrijke informatie in.

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. 

Themakaart basis instellingen

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”.

Werkbalken en knoppen

Open het “Werkbalken” menu van de kaart. Voeg de standaard ”Basis toolbar” toe.

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

TWIG feature informatie

Voorbeeld 1: Toon de verborgen velden van een WMS service. 

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

Gebruik de WMS service “PDOK Ruimtelijkeplannen (WMS)” en voeg daar een kaartlaag uit toe. 

Gebruik deze kaartservice:

Maak op basis van deze kaartservice een kaartlaag “Enkelbestemming” en voeg deze toe aan de themakaart.

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

Stijl.

Legenda.

Voeg de kaartlaag toe aan de kaart.

Bekijk het resultaat

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.
Gebruik de WMS service “Nieuwland Gemeenten Geoserver (WMS)” en voeg daar een kaartlaag uit toe. 

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

Gebruik de 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.

Bekijk het resultaat

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:

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.

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. Ze staan op dezelfde locatie

Voorbeeld 7: Datum presentatie

Voeg de kaartlaag “BAG Terugmeldingen” toe.
Gebruik de WMS service “PDOK BAG Terugmeldingen (WMS)“ en voeg daar een kaartlaag uit toe. 

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

Gebruik deze kaartservice:

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:

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. 

Voorbeeld 8: Gebruik de default template

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. 

Gebruik deze aartservice 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 9: Hyperlink

We gaan een hyperlink maken met een aarde 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.