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. 

...

Titel	TWIG feature informatie - [NAAM]
Projectie	28992
Kaartextent & startextent	Image Modified

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. 

...

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. 

Begin met Gebruik de WMS service aan te maken “PDOK Ruimtelijkeplannen (WMS)” en voeg daar een kaartlaag uit toe. 

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

Maak eerst een kaartservice aanGebruik deze kaartservice:

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

Service	PDOK Ruimtelijkeplannen (WMS)
Laagnaam	Enkelbestemming
Titel	Enkelbestemming - [NAAM]
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.   Image Modified We gebruiken dan deze TWIG code om alle velden te tonen: {% for key,value in _context %} <div><strong> {{  key  }} </strong> :  {{  value  }} </div> {% endfor %}

Image Added

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

Stijl.

...

Legenda.

...

Voeg de kaartlaag toe aan de kaart.Image RemovedImage Removed

...

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. 

Image Modified

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

Image Modified

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:

...

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

Image Modified

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:

...

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

{% endif %} 

Image Modified

Voeg de kaartlaag “Dummy container foto” toe.
Begin met 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. 

Maak eerst een Gebruik de kaartservice aan:

...

Image Added

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:

Image Modified

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.

...

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

Code Block {# 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 }}

Image Modified 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]]]

...

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. 

Image Removed

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.
Begin met Gebruik de WMS service “PDOK BAG Terugmeldingen (WMS)“ en voeg daar een kaartlaag uit toe. 

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

Maak eerst een Gebruik deze kaartservice aan:

...

Image RemovedImage Added

Voeg de kaartlaag toe aan de kaart.

Image RemovedImage RemovedImage Added

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

...

Voorbeeld 7: Datum presentatieDeze datum notatie is erg exact en uitgebreid aangeboden. Wij zien liever een compactere weergave.
Dat kan met de volgende TWIG code voorbeelden. 

...

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. 

Image ModifiedImage ModifiedImage Modified

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. 

Maak eerst een kaartservice Gebruik deze aartservice aan:

...

...

...

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

...

Voeg de kaartlaag toe aan de kaart.

Image RemovedImage RemovedImage Added

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

...

Voorbeeld

...

9: Hyperlink

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

...

Image Modified

Probeer de link maar uit in de Onemap themakaart. 

...