Inleiding
In deze handleiding maken we stap voor stap een kaart aan waarmee in het veld meldingen kunnen worden gemaak m.b.v. de Onemap App.
De volgende onderdelen worden hieronder beschreven:
Aanmaken nieuwe kaart
Toevoegen nieuwe kaartlaag meldingen
Aanpassen feature info
Toevoegen edit formulier
Aanpassen styling
Installeren en testen in de Onemap App
Extra: Maken van navigatie-tool m.b.v. extensie functionaliteit
Extra: Aanmaken grafiek
Kaart
Begin met het aanmaken van een nieuwe kaart.
Log in op de omgeving https://wgp5-acceptatie.webgispublisher.nl, met de credentials die zijn verstrekt:
TODO, iedereen een eigen inlogaccount geven
Voor het gemak hebben we een template kaart klaarstaan, met daarin al een aantal ondergronden, tools en werkbalken gedefinieerd.:
Kaart: Meldingen App - Template
Open deze kaart, en sla deze kaart op onder een unieke, eigen naam die je makkelijk kunt herkennen.
Sluit de Melding App - Template kaart en open de zojuist opgeslagen kaart. Dit gaat niet vanzelf bij ‘Opslaan als’
Toevoegen kaartlaag meldingen
In de workshop omgeving is een kaartservice geconfigureerd:
Workshop Demo WFS
Maak een nieuwe kaartlaag aan uit deze service op basis van de service kaartlaag ‘meldingen_app’.
Geef de kaartlaag een unieke, eigen naam.
Publiceer de kaartlaag, en voeg deze toe aan de kaart. Zorg dat hij boven de ondergronden groep staat.
Aanpassen featureinfo
De kaartlaag met meldingen bevat verschillende velden, onder andere een veld waar foto’s in opgenomen kunnen worden. Wanneer een foto of bestand wordt geüpload wordt deze als volgt in het veld opgeslagen:
1000017039.jpg|https://demo.webgis.nl/featurefile/18f39a5e-a641-5f48-6d32-5053d8da33ea./1000017039.jpg
oftewel:
bestandsnaam|link_naar_bestand
Meerdere foto’s in 1 veld worden gescheiden door een ';'
Dus:
bestandsnaam1|link_naar_bestand1;bestandsnaam2|link_naar_bestand2;
etc…
Om deze foto’s in de feature-info te kunnen tonen, is op dit moment nog wat programmeerwerk in het twig-template van de feature-info instellingen nodig.
Ga naar de instellingen van de zo juist toegevoegde meldingen kaartlaag, en klik op Weergave > Feature-info.
Onder het tabje Feature-info on-click, vink de checkbox featureinfo aan, en selecteer de tab ‘broncode’
Kopieer de onderstaande template code:
{# Het veld foto bevat de foto-url's. #}
{% 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 style="margin-bottom: 0.2rem"><strong>Gemeld door: </strong>{{ username }}</p>
<p style="margin-bottom: 0.2rem"><strong>Datum: </strong>{% if datum %}{{ datum | date('d-m-Y') }}{% else %}Onbekend{% endif %}</p>
<p style="margin-bottom: 0.2rem"><strong>Omschrijving: </strong>{{ omschrijving }}</p>
<p style="margin-bottom: 0.2rem"><strong>Type melding: </strong>{{ type_melding }}</p>
<p style="margin-bottom: 0.2rem"><strong>Subtype melding: </strong>{{ subtype_melding }}</p>
<p style="margin-bottom: 0.2rem"><strong>Afhandelen door: </strong>{{ afhandelen_door }}</p>
<p style="margin-bottom: 0.2rem"><strong>Afgehandeld: </strong>{% if afgehandeld %} Ja {% else %} Nee {% endif %}</p>
<p> </p>
{# Hieronder staat de div waar de foto's mee getoond worden. #}
<h3>foto's</h3>
<div style="width:{{container_width}};display:flex;flex-wrap:wrap;">
{% for foto_url in foto_arr if foto_url %}
{% set link = foto_url|split('|') %}
<a target="_blank" href="{{link.1}}" style="margin:0.3rem;min-width:46%;height:{{thumb_height}};background-image:url({{link.1}});background-size:cover;background-position:center"></a>
{% endfor %}
</div>
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“
]
Vervolgens wordt er onderaan het template ‘gelooped’ over de waardes in foto_arr, en worden deze vervolgens weer gesplit in een variabele link met een bestandsnaam (link.0) en bestandslink (link.1) onderdeel.
Test de featureinfo in de kaart om te zien of deze werkt.
Toevoegen edit formulier
Hieronder gaan we een edit-formulier toevoegen met onder andere de volgende functionaliteit:
Domeinlijsten met melding_type en daarmee samenhangende melding_subtypes.
Toevoegen van 1 of meerdere foto’s m.b.v. de camera functie van de app, of uit de fotogalerij
Ga naar de instellingen van je meldingen kaartlaag, en kies Algemeen > rechten.
Zorg dat de rechten van de kaartlaag goed staan, Publiek en bewerkbaar voor de twee groepen, gebruikers en beheerders.
Ga naar de instellingen van je meldingen kaartlaag, en klik op Algemeen > Formulier.
Verzin een titel voor het formulier.
Vink vervolgens de optie ‘Geavanceerd’ aan. In de geavanceerde weergave hebben we wat meer mogelijkheden om verschillende widgets te configureren voor verschillende veldtypen. Ook kunnen we geavanceerde formulier-eigenschappen zoals afhankelijkheden tussen velden configureren.
In het eerste invoerveld, de configuratie van het ‘json-schema’, vul de volgende code in:
{
"title": "App meldingen",
"type": "object",
"required": [
"username",
"type_melding"
],
"properties": {
"username": {
"type": "string",
"title": "Gebruiker",
"default": "{{ _params.username }}"
},
"datum": {
"type": "string",
"format": "date"
},
"type_melding": {
"type": "string",
"title": "Type melding",
"enum": [
"Vrije melding",
"Schade",
"Gevaarlijke situatie"
],
"default": "Vrije melding"
},
"afgehandeld": {
"type": "boolean",
"default": false
},
"foto": {
"type": "string",
"title": "Foto",
"default": null
}
},
"dependencies": {
"type_melding": {
"oneOf": [
{
"properties": {
"type_melding": {
"enum": [
"Vrije melding"
]
},
"omschrijving": {
"type": "string",
"title": "Omschrijving"
}
}
},
{
"properties": {
"type_melding": {
"enum": [
"Schade"
]
},
"subtype_melding": {
"type": "string",
"title": "Schadetype",
"enum": [
"Graverij door dieren",
"Graverij door mensen",
"Sinkhole",
"Beschadigde brug",
"Wegdek beschadigd",
"Erosie",
"Vandalisme",
"Stormschade",
"Overig"
]
},
"omschrijving": {
"type": "string",
"title": "Omschrijving Schade"
}
},
"required": [
"omschrijving",
"subtype_melding"
]
},
{
"properties": {
"type_melding": {
"enum": [
"Gevaarlijke situatie"
]
},
"subtype_melding": {
"type": "string",
"title": "Soort situatie",
"enum": [
"Stoplicht kapot",
"Boom omgevallen",
"Glas op de weg",
"Olielek",
"Gaslek",
"Wateroverlast",
"Beschadigde verkeersborden",
"Overig"
]
},
"omschrijving": {
"type": "string",
"title": "Omschrijving gevaar"
}
},
"required": [
"omschrijving",
"subtype_melding"
]
}
]
}
}
}
En kopieer in het tekstveld onder het kopje 'UISchema Single-select' de onderstaande code:
{
"ui:order": [
"username",
"datum",
"tijd",
"type_melding",
"subtype_melding",
"omschrijving",
"foto",
"afgehandeld"
],
"datum": {
"ui:widget": "date",
"ui:options": {
"yearsRange": [
1980,
2030
]
}
},
"foto": {
"ui:widget": "cameraWidget",
"ui:options": {
"title": "foto's"
}
},
"afgehandeld": {
"ui:widget": "checkbox"
},
"omschrijving": {
"ui:widget": "textarea"
}
}
Sla het formulier op en publiceer de kaartlaag.
Uitleg:
In het formulierschema zijn een aantal velden opgenomen:
usernamedatumtype_meldingafgehandeldfoto
maar ook het veld
subtype_melding
Het veld type_melding bevat een keuzelijstje met 3 opties:
"Vrije melding",
"Schade",
"Gevaarlijke situatie"
De instellingen en weergave van het veld subtype_melding zijn afhankelijk van de ingevoerde waarde bij het veld type_melding.
Als er bijvoorbeeld “schade” is gekozen als type melding, verschijnen er de volgende sub-types:
"Graverij door dieren",
"Graverij door mensen",
"Sinkhole",
"Beschadigde brug",
"Wegdek beschadigd",
"Erosie",
"Vandalisme",
"Stormschade",
"Overig"
Het veld username bevat als default waarde {{ _params.username }}, dit zorgt ervoor dat bij nieuwe invoer automatisch de ingelogde gebruikersnaam wordt ingevuld.
In het onderdeel UISchema staan de instellingen voor de gebruikers interface.
Bovenaan staat de volgorde van de invoervelden in het formulier (ui:order)
Voor verschillende velden worden zogenaamde ‘widgets’ gebruikt die de vormgeving van het formulier bepalen:
"ui:widget": "date"
Dit zorgt voor een datumpicker in het formulier."ui:widget": "textarea"
Hiermee wordt een tekstinvoerveld groter weergegeven, als invoervak voor meerdere regels"ui:widget": "cameraWidget"
Dit is een veld dat in de Onemap App 2 knoppen toont, 1 voor het maken van een foto met de camera, en 1 voor het kiezen van één of meerdere foto’s uit de fotogalerij.
Test in de viewer of het formulier getoond wordt.
Aanpassen styling
Voeg een SLD style toe om de meldingen in de app te stylen op basis van melding_type.
Ga hiervoor bij de kaartlaag configuratie naar Weergave > Stijl , kies als Stijltype ‘SLD-bestand’ en plak de onderstaande SLD-code in het code venster.
<?xml version="1.0" encoding="utf-8"?>
<StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd">
<!--Generated by GeoCat Bridge for QGIS 4.4 (based on bridgestyle 0.1)-->
<NamedLayer>
<Name>meldingen_app</Name>
<UserStyle>
<Title>meldingen_app</Title>
<FeatureTypeStyle>
<Rule>
<Name>Gevaarlijke situatie</Name>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>type_melding</ogc:PropertyName>
<ogc:Literal>Gevaarlijke situatie</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>triangle</WellKnownName>
<Fill>
<CssParameter name="fill">#ff2332</CssParameter>
<CssParameter name="fill-opacity">1.0</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#FFFFFF</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
<CssParameter name="stroke-opacity">1.0</CssParameter>
</Stroke>
</Mark>
<Opacity>1.0</Opacity>
<Size>16.0</Size>
<Rotation>0.0</Rotation>
</Graphic>
</PointSymbolizer>
</Rule>
<Rule>
<Name>Schade</Name>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>type_melding</ogc:PropertyName>
<ogc:Literal>Schade</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#f7801e</CssParameter>
<CssParameter name="fill-opacity">1.0</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#FFFFFF</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
<CssParameter name="stroke-opacity">1.0</CssParameter>
</Stroke>
</Mark>
<Opacity>1.0</Opacity>
<Size>14.0</Size>
<Rotation>0.0</Rotation>
</Graphic>
</PointSymbolizer>
</Rule>
<Rule>
<Name>Vrije melding</Name>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>type_melding</ogc:PropertyName>
<ogc:Literal>Vrije melding</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>triangle</WellKnownName>
<Fill>
<CssParameter name="fill">#54b04a</CssParameter>
<CssParameter name="fill-opacity">1.0</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#FFFFFF</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
<CssParameter name="stroke-opacity">1.0</CssParameter>
</Stroke>
</Mark>
<Opacity>1.0</Opacity>
<Size>16.0</Size>
<Rotation>0.0</Rotation>
</Graphic>
</PointSymbolizer>
</Rule>
<Rule>
<Name/>
<ElseFilter/>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#cbcbcb</CssParameter>
<CssParameter name="fill-opacity">1.0</CssParameter>
</Fill>
<Stroke>
<CssParameter name="stroke">#FFFFFF</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
<CssParameter name="stroke-opacity">1.0</CssParameter>
</Stroke>
</Mark>
<Opacity>1.0</Opacity>
<Size>14.0</Size>
<Rotation>0.0</Rotation>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
Test de stijl in de viewer.
Installeren Onemap App
Op dit moment staat de Onemap App als beta-test in de Android Playstore.
Open de onderstaande link op je android device om de app te installeren:
https://play.google.com/apps/testing/com.nieuwland.onemap
of scan de onderstaande qr code:
Open de app, voer je credentials in en open ‘Manage servers’ vanuit het menu:
Voeg de server wgp5-acceptatie.webgispublisher.nl toe aan de serverlijst.
Login met je credentials van de acceptatie omgeving en zoek de je kaart in de lijst met beschikbare kaarten.
Extra: Aanmaken navigatie tool m.b.v. extensie functionaliteit
Er zijn twee knoppen toegevoegd in Onemap beheer: 'Open extensie' en 'Open extensie bij klik op de kaart'. Met deze knoppen is het mogelijk om een zelf op te geven url in een nieuw venster te openen vanuit de kaart.
Voor de navigatietool die we gaan maken gebruiken we de optie ‘Open extensie bij klik op de kaart’.
Ga naar de werkbalk instellingen van je kaart, en voeg een nieuwe knop toe aan de ‘App tools’ werkbalk (klik op het '+' knopje op de App tools balk):
Selecteer de tool 'Open extensie bij klik op de kaart' en vul onderstaande parameters in:
Titel: Navigeer
URL: https://www.google.com/maps/dir/?api=1&destination={{click_lat}},{{click_lon}}&travelmode=driving
Marker icon: navigation
Of kies zelf een icoon uit in de material icons library van google op:
https://fonts.google.com/icons )Beschrijving: Navigeer naar click locatie
Uitleg:
De knop 'Open extensie bij klik op de kaart' opent een url, maar wacht eerst totdat de gebruiker op de kaart klikt. Vervolgens zijn de klik-coördinaten beschikbaar om in de url in te vullen met twig-parameters.
De beschikbare twig parameters die we hier gebruiken zijn:
{{ click_lon }} en {{ click_lat }} : Longitude en latitude van kaartklik in CRS:84.
De beschikbare parameters zijn:
| X-coördinaat van kaartklik in kaartprojectie. |
| Y-coördinaat van kaartklik in kaartprojectie. |
| Longitude van kaartklik in CRS:84. |
| Latitude van kaartklik in CRS:84. |
| Zie handleiding 'Runtime kaartparameters' voor details. |
Extra: Aanmaken grafiek
Het is in de nieuwe versie van Onemap mogelijk om éen of meerdere grafieken aan te maken op basis van de data uit een WFS bron.
Ga hiervoor naar de kaartinstellingen van de Meldingen laag, en kies voor Weergave > Dashboards.
Voeg een nieuw dashboard toe met de onderstaande instellingen:
Wanneer het dashboard is opgeslagen, kun je het aan de viewer toevoegen via de ‘Zijbalken’ instellingen van je kaarteigenschappen.