Onemap App Workshop

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:

1 Inleiding
2 Inloggen en samen werken
3 Aanmaken nieuwe kaart voor meldingen
4 Toevoegen kaartlaag meldingen
5 Aanpassen styling
6 Aanpassen featureinfo
7 Toevoegen edit formulier
8 Installeren Onemap App
9 Extra: Aanmaken navigatie tool m.b.v. extensie functionaliteit
10 Extra: Aanmaken grafiek

Inloggen en samen werken

We werken in een omgeving. Jullie krijgen allemaal een workshop account. Zodat iedereen zelf kaarten kan maken. In het begin van de workshop worden jullie gekoppeld de onderstaande gebruikers.

Gebruikers voor de workshop omgeving:

workshop_OM_1

workshop_OM_2

workshop_OM_3

workshop_OM_4

workshop_OM_5

workshop_OM_6

workshop_OM_7

workshop_OM_8

Het wachtwoord is voor iedereen: Opleiding1234

Tijdens de workshop maak je kaarten, kaartlagen en configuraties aan. Omdat iedereen in dezelfde omgeving dezelfde opdrachten uitvoert is het handig als je bij het aanmaken van deze onderdelen je eigen naam toevoegt. Bijvoorbeeld, een nieuwe kaartlaag: Meldingen App - Thomas

Aanmaken nieuwe kaart voor meldingen

Begin met het aanmaken van een nieuwe kaart.

Log in op de omgeving https://workshop.webgis.nl, met de credentials die worden verstrekt.
Als je bent ingelogd blijf je op het portaal, en zie je afhankelijk van rechten dezelfde of meer themakaarten.

Ga vanuit het portaal naar de beheeromgeving, dit doe je door op het tandwiel icoon te klikken (rechts bovenin het portaal). De beheer omgeving opent met het overzicht van alle kaarten in het portaal.

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.

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.

Bij het aanmaken van een kaartlaag kan je direct deze kaartlaag in een kaart zetten. Dat doe je met de knop onderaan het kaartlagen configuratie venster:

Open de kaart & zorg dat hij boven de ondergronden groep staat.

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>20.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>20.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>20.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>20.0</Size>
              <Rotation>0.0</Rotation>
            </Graphic>
          </PointSymbolizer>
        </Rule>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

Test de stijl in de viewer.

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. We maken een array. #}
{% set foto_arr = foto|split(';') %}

{# Elke foto wordt afzonderlijk getoond. Pas breedte aan indien nodig. 306px past goed bij standaard feature info in zijbalk. #}
{% set container_width = '306px' %}

{# De grootte van de foto. 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>&nbsp;</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.

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

Uitleg:

In het formulierschema zijn een aantal velden opgenomen:

username
datum
type_melding
afgehandeld
foto

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.
Je kunt dit testen door een nieuw punt te tekenen. Je kan ook een bestaand punt openen en vanuit de feature informatie op het potlood icoontje (bewerken) te klikken.

Het veld van het type CameraWidget wordt niet getoond in de viewer, deze werkt alleen in de App.

Installeren Onemap App

De Onemap App is te vinden in Apple’s Appstore en Android Playstore.

Android:

https://play.google.com/store/apps/details?id=com.nieuwland.onemap&pcampaignid=web_share

iOS:

https://apps.apple.com/nl/app/onemap-app/id6504482804 of scan de onderstaande qr code:

Open de app, voer je credentials in en open ‘Manage servers’ vanuit het menu:

Voeg de server workshop.webgis.nl toe aan de serverlijst. Je hoeft geen https:// voor de url te typen, dat voegt de app ook zelf toe.

Login met je credentials van de acceptatie omgeving en zoek je eigen 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:
Material Symbols and Icons - Google Fonts )
Beschrijving: Navigeer naar click locatie

Screenshot 2024-05-30 at 14.58.47-20240530-125853.png

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 in de extensie tool zijn:

`{{click_x}}`	X-coördinaat van kaartklik in kaartprojectie.
`{{click_y}}`	Y-coördinaat van kaartklik in kaartprojectie.
`{{click_lon}}`	Longitude van kaartklik in CRS:84.
`{{click_lat}}`	Latitude van kaartklik in CRS:84.
`{{_params}}`	Zie handleiding 'Runtime kaartparameters' voor details.

Extra: Aanmaken grafiek

Het is nu mogelijk om bij een (wfs-)kaartlaag een of meerdere dashboards aan te maken. Een dashboard bevat een grafische weergave van de data van een kaartlaag, gecategoriseerd op een zelf aan te geven kolom. Zo is het bijvoorbeeld mogelijk om in een meldingenlaag in een oogopslag te zien wat de verdeling is van type meldingen op de kaart.

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.