Page Comparison

Inleiding

In deze handleiding maken we stap voor stap een kaart aan waarmee in

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:

Table of Contents

style	none

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

voor meldingen

Begin met het aanmaken van een nieuwe kaart.

Log in op de omgeving https://wgp5-acceptatieworkshop.webgispublisherwebgis.nl/, met de credentials die zijn worden 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.

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

Screenshot 2024-05-06 at 14.39.39.png

Onder het tabje Feature-info on-click, vink de checkbox featureinfo aan, en selecteer de tab ‘broncode’

Kopieer de onderstaande template code:

Code Block

  {# 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>&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>

Info

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.

Image Removed

Image Added

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.

Screenshot 2024-05-06 at 15.02.09.png

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:

Code Block

{
    "title": "App meldingen",
    "type": "object",
    "required": [
        "username",
        "type_melding"
    ],
    "properties": {
        "username": {
            "type": "string",
            "title": "Gebruiker",
            "default": null "{{ _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:

Code Block

{
    "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.

Info

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"

Info

In het onderdeel UISchema staan de instellingen voor de gebruikers interface.

Het veld username bevat als default waarde {{ _params.username }}, dit zorgt ervoor dat bij nieuwe invoer automatisch de ingelogde gebruikersnaam wordt ingevuld.

Info

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.

Image Added

Aanpassen styling

Voeg een SLD style toe om de meldingen in de app te stylen op basis van melding_type.

Kopieer hiervoor onderstaande style en plak deze in de Ga hiervoor bij de kaartlaag configuratie naar Weergave > Stijl , kies als Stijltype ‘SLD-bestand’ en plak de onderstaande SLD-code in het code venster.

Code Block

<?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<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>14<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>16<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>14<Size>20.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' makenOpen 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:

Image Added

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

Voeg de server https://wgp5-acceptatie.webgispublisher workshop.webgis.nl toe aan de serverlijst.

Image Removed

Image Added

Image Removed

Open de kaart en probeer een nieuwe melding te maken

Image Added

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):

Image Added

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

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

Info
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:

Image Added

Wanneer het dashboard is opgeslagen, kun je het aan de viewer toevoegen via de ‘Zijbalken’ instellingen van je kaarteigenschappen.

Versions Compared

Old Version 3

New Version Current

Key

Inleiding

Inleiding

Aanmaken nieuwe kaart

Kaart

voor meldingen

Toevoegen kaartlaag meldingen

Aanpassen featureinfo

Toevoegen edit formulier

Aanpassen styling

Installeren Onemap App

Extra: Aanmaken navigatie tool m.b.v. extensie functionaliteit

Extra: Aanmaken grafiek