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
Installeren en testen in de Onemap App
Aanpassen styling
…
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, niet 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": null
},
"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"
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.
TODO: Installatie link voor 'Open testing' maken
Open de app, voer credentials in (welke) en open ‘Manage servers’ vanuit het menu:
Voeg de server https://wgp5-acceptatie.webgispublisher.nl toe aan de serverlijst.
Open de kaart en probeer een nieuwe melding te maken.