Einrichtung des Digitizers

Das Element kann nur in der Sidepane eingebettet werden.

../../../../_images/digitizer_configuration.png
  • Title: Titel des Elements. Dieser wird in der Layouts Liste angezeigt und ermöglicht, mehrere Elemente voneinander zu unterscheiden.

  • Target: Zielelement (Titel(ID)) der Karte.

  • Schemes: YAML-Definition für das Element “digitizer”

Der Digitizer benötigt einen Zugriff auf die Datenbank, in der die zu editierenden Tabellen liegen. Sie müssen dazu einen Datenbankzugriff konfigurieren. Mehr zu diesem Thema finden Sie unter Konfiguration der Datenbank.

Die Definition des Digitizers wird in einer YAML-Syntax durchgeführt. Hier definieren Sie die Datenbankverbindung, die editierbaren Felder, das Formular für die Anzeige und andere Verhaltensweisen. Bei fehlerhaften Angaben zur Datenbank, Feldern und Formularfehler erscheinen Fehlermeldungen. Über den normalen Aufruf und app.php kommt eine allgemeine Fehlermeldung. Falls Sie den genauen Fehler reproduzieren möchten, sollten Sie die Seite über app_dev.php aufrufen. Hier tauchen ausführliche Fehlermeldungen zum Fehlerverhalten auf.

YAML-Definition für das Element digitizer in der Textarea unter schemes

In dem folgenden YAML-Block ist die beispielhafte Definition für drei Erfassungsoberflächen enthalten. Kopieren Sie den folgenden Block in Ihr Digitizer-Element, um die Erfassung von Punkten, Linien und Polygonen zu testen. Vorher müssen Sie die Datenbankverbindung und die drei Demo-Tabellen anlegen. Die SQL-Befehle für das Anlegen der Tabellen finden Sie weiter unten. Der Funktionsumfang der eingebauten Features und weitere Funktionen werden nach diesem Beispielaufbau genauer erläutert.

poi:
    label: point digitizing
    inlineSearch: true
    featureType:
        connection: search_db
        table: poi
        uniqueId: gid
        geomType: point
        geomField: geom
        srid: 4326
    openFormAfterEdit: true
    zoomScaleDenominator: 500
    allowEditData: true
    allowDelete: true
    allowDigitize: true
    useContextMenu: true
    toolset:
        - type: drawPoint
        - type: moveFeature
    popup:
        title: point test suite
        width: 500px
    searchType: currentExtent
    tableFields:
        gid: {label: Nr. , width: 20%}
        name: {label: Name , width: 80%}
    styles:
        default:
            strokeWidth: 2
            strokeColor: '#0e6a9e'
            fillColor: '#1289CD'
            fillOpacity: 1
            fillWidth: 2
            pointRadius: 10
        select:
            strokeWidth: 3
            strokeColor: '#0e6a9e'
            fillOpacity: 0.7
            pointRadius: 10
    formItems:
       - type: tabs
         children:
           - type: form
             title: Basic information
             css: {padding: 10px}
             children:
                 - type: label
                   title: Welcome to the digitize demo. Try the new Mapbender feature!
                 - type: input
                   title: Name
                   mandatory: true
                   name: name
                   mandatoryText: Please give a name to the poi.
                   infoText: "Help: Please give a name to the new object."
                 - type: input
                   title: Title
                   mandatory: false
                   name: title
                   mandatoryText: Please give a title to the poi.
                 - type: textArea
                   name: abstract
                   title: Abstract
                   placeholder: 'please edit this field'
                 - type: select
                   title: Type
                   name: type
                   options: {A: A, B: B, C: C, D: D, E: E}
                 - type: breakLine
           - type: form
             title: Personal information
             css: {padding: 10px}
             children:
                 - type: label
                   title: Please give us some information about yourself.
                 - type: fieldSet
                   children:
                       - type: input
                         title: Firstname
                         name: firstname
                         css: {width: 30%}
                       - type: input
                         title: Lastname
                         name: lastname
                         css: {width: 30%}
                       - type: input
                         title: E-Mail
                         name: email
                         css: {width: 40%}
                 - type: select
                   multiple: false
                   title: Interests
                   name: interests
                   options: {maps: maps, reading: reading, swimming: swimming, dancing: dancing, beer: beer, flowers: flowers}
                 - type: date
                   title: favorite Date
                   name: date_favorite
                   mandatory: true
                   css: {width: 25%}
                 - type: breakLine
                 - type: breakLine
                 - type: checkbox
                   name: public
                   value: true
                   title: public (this new object is public)
line:
    label: line digitizing
    inlineSearch: true
    featureType:
        connection: search_db
        table: lines
        uniqueId: gid
        geomType: line
        geomField: geom
        srid: 4326
    openFormAfterEdit: true
    allowDelete: true
    useContextMenu: true
    toolset:
        - type: drawLine
        - type: modifyFeature
        - type: moveFeature
    popup:
        title: line test suite
        width: 500px
    searchType: currentExtent
    tableFields:
        gid: {label: Nr. , width: 20%}
        name: {label: Name , width: 80%}
    styles:
        default:
            strokeWidth: 2
            strokeColor: '#0e6a9e'
            fillColor: '#1289CD'
            fillOpacity: 1
            fillWidth: 2
            pointRadius: 10
        select:
            strokeWidth: 3
            strokeColor: '#0e6a9e'
            fillOpacity: 0.7
            pointRadius: 10
    formItems:
       - type: form
         title: Basic information
         css: {padding: 10px}
         children:
             - type: label
               title: Welcome to the digitize demo. Try the new Mapbender feature!
             - type: input
               title: Name
               name: name
               mandatory: true
               mandatoryText: Please give a name to the new object.
               infoText: "Help: Please give a name to the new object."
             - type: select
               title: Type
               name: type
               options: {A: A, B: B, C: C, D: D, E: E}
polygon:
    label: polygon digitizing
    inlineSearch: true
    featureType:
        connection: search_db
        table: polygons
        uniqueId: gid
        geomType: polygon
        geomField: geom
        srid: 4326
    openFormAfterEdit: true
    allowDelete: false
    useContextMenu: true
    toolset:
        - type: drawPolygon
        - type: drawRectangle
        - type: drawDonut
        - type: drawEllipse
        - type: drawCircle
        - type: modifyFeature
        - type: moveFeature
    popup:
        title: polygon test suite
        width: 500px
    searchType: currentExtent
    tableFields:
        gid: {label: Nr. , width: 20%}
        name: {label: Name , width: 80%}
    styles:
        default:
            strokeWidth: 2
            strokeColor: '#0e6a9e'
            fillColor: '#1289CD'
            fillOpacity: 1
            fillWidth: 2
            pointRadius: 10
        select:
            strokeWidth: 3
            strokeColor: '#0e6a9e'
            fillOpacity: 0.7
            pointRadius: 10
    formItems:
       - type: form
         title: Basic information
         css: {padding: 10px}
         children:
             - type: label
               title: Welcome to the digitize demo. Try the new Mapbender feature!
             - type: input
               title: Name
               mandatory: true
               name: name
               mandatoryText: Please give a name to the new object.
               infoText: "Help: Please give a name to the new object."
             - type: select
               title: Type
               name: type
               options: {A: A, B: B, C: C, D: D, E: E}

SQL für die Demo-Tabellen

Die folgenden SQL-Befehle müssen in Ihrer Datenbank ausgeführt werden. Sie legen drei Demo-Tabellen an, damit mit der oben gezeigte YAML-Definition die einzelnen Funktionen getestet werden können. Die PostGIS Extension muss aktiviert sein.

create table public.poi (
    gid serial PRIMARY KEY,
    name varchar,
    type varchar,
    abstract varchar,
    public boolean,
    date_favorite date,
    title varchar,
    firstname varchar,
    lastname varchar,
    email varchar,
    interests varchar,
    user_name varchar,
    group_name varchar,
    modification_date date,
    my_type varchar,
    file_reference varchar,
    x float,
    y float,
    city varchar,
    geom geometry(point,4326)
);
create table public.lines (
    gid serial PRIMARY KEY,
    name varchar,
    type varchar,
    abstract varchar,
    public boolean,
    date_favorite date,
    title varchar,
    firstname varchar,
    lastname varchar,
    email varchar,
    interests varchar,
    length float,
    category varchar,
    user_name varchar,
    group_name varchar,
    modification_date date,
    my_type varchar,
    file_reference varchar,
    x float,
    y float,
    city varchar,
    geom geometry(linestring,4326)
);
create table public.polygons (
    gid serial PRIMARY KEY,
    name varchar,
    type varchar,
    abstract varchar,
    public boolean,
    date_favorite date,
    title varchar,
    firstname varchar,
    lastname varchar,
    email varchar,
    interests varchar,
    area float,
    category varchar,
    user_name varchar,
    group_name varchar,
    modification_date date,
    my_type varchar,
    file_reference varchar,
    x float,
    y float,
    city varchar,
    geom geometry(polygon,4326)
);

Konfiguration

Im Folgenden werden die einzelnen Bestandteile des Digitizers erklärt, die die Grundstruktur ausmachen und die in dem Formular eingebettet werden können.

Basisdefinition

Eine Basisdefinition, hier am Beispiel der poi, sieht folgendermaßen aus:

poi:
    label: point digitizing
    minScale: 5000
    featureType:
        connection: search_db
        table: poi
        uniqueId: gid
        geomType: point
        geomField: geom
        srid: 4326
        filter: interests = 'maps'
    openFormAfterEdit: true
    zoomScaleDenominator: 500
    allowEditData: true
    allowDelete: true
    allowDigitize: true
    [...]
    popup:
        [...]

Die möglichen Optionen sind:

  • label: Beschriftung mit dem Namen der Erfassungsoberfläche

  • minScale: Minimaler Maßstab, ab dem die Features in der Karte angezeigt werden (z.B. minscale: 5000 = Anzeige ab einem Maßstab über 1:5000, beim rauszoomen)

  • featureType: Verbindung zur Datenbank

    • connection: Name der Datenbank-Verbindung aus der parameters/config.yml

    • table: Name der Tabelle, in der das FeatureType gespeichert wird

    • uniqueId: Name der Spalte mit dem eindeutigen Identifier, default bei keiner Angabe ist [id]

    • geomType: Geometrietyp

    • geomField: Attributspalte, in der die Geometrie liegt.

    • srid: Koordinatensystem im EPSG-Code

    • filter: Datenfilter über Werte in einer definierten Spalte, z.B. filter: interests = ‘maps’

  • openFormAfterEdit: Nach der Erfassung einer Geometrie öffnet sich das Erfassungsformular. [true/false] Standard ist true.

  • zoomScaleDenominator: Zoomstufen, die für das Zoomen auf das Objekt gewählt wird.Standardwert ist 100

  • allowEditData: Daten dürfen editiert und gespeichert werden [true/false]. Es erscheint immer eine Speichern Schaltfläche.

  • allowDigitize: Daten dürfen gespeichert werden. [true/false]

  • allowDelete: Daten dürfen gelöscht werden. [true/false]. Es erscheint eine Löschen Schaltfläche.

  • allowDigitize: Daten dürfen verändert und neu erstellt werden. [true/false]. Es erscheint immer die Digitalisierungs-Schaltflächen (neuer Punkt, verschieben, etc.). Das Speichern ist jedoch nicht möglich.

  • useContextMenu: Anzeige des Kontextmenü eines Features durch Rechtsklick auf der Karte. [true/false]

  • allowCancelButton: Zeigt die Abbrechen Schaltfläche. [true/false]. Siehe Speichern, Löschen, Abbrechen.

  • allowDeleteByCancelNewGeometry: Wenn auf true gestellt: Beim Neuanlegen eines Features verhält sich der Abbrechen Knopf wie der Löschen Knopf: Das Feature wird aus der Karte und der Tabelle entfernt. Dies gilt nicht bei dem Ändern eines vorhandenen Features. [true/false]

  • displayOnInactive: Der aktuellen FeatureType wird weiterhin auf der Karte angezeigt, auch wenn der Digitizer in der Sidepane (Accordion, Tabs) nicht mehr aktiviert ist. [true/false]. Die Option ist, wenn angeschaltet, ein wenig tricky, da auch die einzelnen Digitizer Events noch aktiviert sind, für erfahrene Anwendern aber durchaus hilfreich.

  • allowLocate: Navigation zu einem Feature hin über die Bedienung mit der Tabs-Taste, sinvoll für die Bedienung ohne Maus. [true/false]. Es erscheint eine extra “ZoomTo” Schaltfläche zu jeden Feature.

    ../../../../_images/allowlocate.png
  • allowChangeVisibility: Ändern der Sichtbarkeit von einem Treffer in der Karte (sichtbar/nicht sichtbar). [true/false]. Es wird ein Auge-Symbol zu jedem Feature eingeblendet, mit dem dieses explizit aus- und wieder eingeblendet werden kann.

    ../../../../_images/allowchangevisibility.png
  • showVisibilityNavigation: Ändern der Sichtbarkeit von allen Treffern in der Karte (sichtbar/nicht sichtbar). [true/false]

    ../../../../_images/showvisibilitynavigation.png

Experimentell:

  • allowCustomerStyle: Erlauben benutzerspezifischer Styles für Elemente in der Karte. [true/false]. Dieses Feature ist noch experimentell: Zu jedem Feature können über ein Symbol die einzelnen Styles verändert werden.

../../../../_images/showvisibilitynavigation.png

Es erscheint ein Style-Manager, mit dem man die einzelnen Features anpassen kann.

../../../../_images/stylemanager.png

Definition Popup

In Zusammenhang mit der Digitalisierung können für die Erfassung von dazugehörigen Sachdaten komplexe Formulare generiert werden.

Folgende Optionen stehen für den Aufbau von Formularen zur Verfügung:

  • Definition von mehreren Datenquellen und Geometrieformaten für die Erfassung. Die verschiedenen Quellen werden über eine Auswahlbox angeboten.

  • Als Datenquelle wird eine Datenbank-Tabelle angesprochen. Es ist möglich, eine Auswahl der Daten über einen Filter heranzuziehen.

  • Textfelder

  • Textblöcke (mehrzeilige Textfelder)

  • Selectboxen, Multiselectboxen (Füllen der Auswahlbox über eine feste Definition von Werten in der YAML-Definition oder über ein Select auf eine Tabelle)

  • Checkboxen und Radiobuttons

  • Datumsauswahl

  • Dateiupload und Bildanzeige

  • Definition von Reitern

  • Definition von Trennlinien (breakLine)

  • Definition von beschreibenden Texten zur Information

  • Definition von Hilfetexten

  • Pflichtfelder, Definition von regulären Ausdrücken für die Formatvorgabe bestimmter Feldinhalte

  • Möglichkeit, in Formulare eingegebene Inhalte per Buttonklick in die Zwischenablage zu kopieren

  • Karten-Refresh nach Speichern

../../../../_images/digitizer_with_tabs.png
popup:                                                          # Definition des Formularfensters als PopUp-Fenster. Weitere experimentelle Anpassungsmöglichkeiten unter http://api.jqueryui.com/dialog/
    title: POI                                                  # Definition des Titels vom Formularfensters
    height: 400                                                 # Höhe des Formularfensters
    width: 500                                                  # Breite des Formularfensters

    #modal: true                                                # Alles außer dem Formularfensters wird ausgegraut und die Position und Größe des Fensters ist für die Dauer der Datenaufnahme fixiert
    #position: {at: "left+20px",  my: "left top-460px"}         # Positionierung des Formularfensters im Browserbereich

Definition der Objekttabelle

Der Digitizer stellt eine Objekttabelle bereit. Über diese kann auf die Objekte gezoomt werden und das Bearbeitungsformular kann geöffnet werden. Die Objekttabelle ist sortierbar. Die Breite der einzelnen Spalten kann optional in Prozent oder Pixeln angegeben werden.

  • tableFields: Definition der Spalten für die Objekttabelle.
    • Definition einer Spalte: [Tabellenspalte]: {label: [Beschriftung], width: [css-Angabe z.B. Angabe der Breite]} # Definition einer Spalte

  • searchType: Suchbereich in der Karte, Anzeige aller Objekttreffer in der Tabelle oder nur aller Objekttreffer in dem derzeitigen Kartenausschnitt [all / currentExtent], default currentExtent

  • showExtendSearchSwitch: Anzeige der searchType Selectbox zur Suche im Kartenausschnitt aktivieren oder deaktivieren [true/false]

  • view: Einstellungen zu der Objekttabelle
    • Detaillierte Informationen zu möglichen Angaben unter https://datatables.net/reference/option/

    • type: Templatename [table]

    • settings: Einstellungen zum Funktionsumfang der Objekttabelle (neu hinzugefügt, noch nicht vollst. dokumentiert!)

searchType: currentExtent
showExtendSearchSwitch: true
tableFields:
    gid: {label: Nr. , width: 20%}
    name: {label: Name , width: 80%}
view:
    type: table
    settings:
        info: true
        processing: false
        ordering: true
        paging: true
        selectable: false
        autoWidth: false
        order: [[1, "asc"]]          # Spalte 1 | 2 vorsortieren

Dateireiter (type tabs)

Die Formularelemente können in verschiedenen Reitern dargestellt werden. Dazu dient das formItem type “tabs”.

formItems:
   - type: tabs                      # Type tabs erzeugt Reiter im Erfassungsformular
     children:                       # Die Reiter werden als Unterobjekte (children) vom Type form definiert.
       - type: form
         title: Basic information    # Titel des Reiters
         css: {padding: 10px}
         children:                   # Durch mehrere Unterobjekte in Gruppen können Angaben im Formular nebeneinander angeordnet werden.
             - type: label
               title: Welcome to the digitize demo. Try the new Mapbender3 feature!
               ...

Bei jedem Eingabefeld können unabhängig vom Typ Verhaltensparameter per Event und Stylingangaben per CSS vergeben werden. Damit kann man beispielsweise wichtige Felder hervorheben oder auch ein Attributfeld in Abhängigkeit zu einem anderen Feld füllen.

Verhaltensparameter:

  • load, focus, blur

  • input, change, paste

  • click, dblclick, contextmenu

  • keydown, keypress, keyup

  • dragstart, ondrag, dragover, drop

  • mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup

  • touchstart, touchmove, touchend, touchcancel

formItems:
   - type: tabs
     children:
       - type: form
         [...]
             - type: input
               name: firstname
               title: Firstname
               css: {width: 30%}
               input: |
                    var inputField = el;
                    var form = inputField.closest(".modal-body");
                    var datenkennungField = form.find("[name='datenkennung']");
                    datenkennungField.val(inputField.val());
               focus: |
                    var inputField = el;
                    var form = inputField.closest(".modal-body");
                    form.css("background-color","#ffc0c0");
               blur: |
                    var inputField = el;
                    var form = inputField.closest(".modal-body");
                    form.css("background-color","transparent");
             - type: date
               name: date
               title: Datum
               css: {width: 30%}
               # Hervorhebung des Jahres bei Änderung des Datum-Feldes und autom. Füllen des Jahres aus dem Datum
               change: |
                    var inputField = el;
                    var form = inputField.closest(".modal-body");
                    var yearField = form.find("[name='year']");
                    var year = inputField.val().match(/\d+$/)[0];
                    yearField.val(year);
                    yearField.css("background-color","#ffc0c0");

Textfelder (type input)

- type: input                                        # Typ Textfeld
  title: Title for the field                         # Beschriftung mit dem Titel des Feldes (optional)
  name: column_name                                  # Referenz zur Tabellenspalte
  copyClipboard: false                               # Button, der eingetragene Inhalte in die Zwischenablage kopiert (optional). [true/false] Standard ist false.
  mandatory: true                                    # Angabe ob Pflichtfeld (optional). [true/false]
  mandatoryText: You have to provide information.    # Text, sofern Pflichtfeld nicht gefüllt wurde
  infoText: 'Bitte geben Sie einen Wert an'          # Definition eines Informationstextes (optional)
  cssClass: 'input-css'                              # css-Klasse, die für das Textfeld verwendet werden soll
  value: 'default Text'                              # Definition eines Standard-Wertes  (optional)
  placeholder: 'Bitte geben Sie ... ein'             # Platzhalter, der vor der Eingabe erscheint (optional)

Auswahlboxen (selectbox oder multiselect [type select])

Durch die Definition einer Auswahlbox können vordefinierte Werte im Formular genutzt werden. Hier wird in eine Auswahlbox mit einem wählbaren Eintrag (type select) und einer Auswahlbox mit mehreren auswählbaren Einträgen (type multiselect) unterschieden.

(1) select - ein Eintrag kann ausgewählt werden

- type: select                                       # Typ Auswahlbox
  title: select some types                           # Beschriftung mit dem Titel des Feldes (optional)
  name: my_type                                      # Referenz zur Tabellenspalte
  copyClipboard: false                               # Button, der den ausgewählten Wert in die Zwischenablage kopiert (optional).
  multiple: false                                    # Definition einer Mehrfachauswahl (multiselect). [true/false] Standard ist false.
  options:                                           # Definition der Optionen (key: value)
      1: pub
      2: bar
      3: pool
      4: garden
      5: playground

(2) multiselect - mehrere Einträge können ausgewählt werden

Multiselect-Box wird durch das attribute multiple: true aktiviert. Es können mehrere Einträge ausgewählt werden. Die Nutzung und die Voraussetzungen der Datenbank können variieren. Bei dem oben beschriebenen Beispiel können die Interessen in den POI als Multiobjekte abgespeichert werden. Das Datenbankfeld ist weiterhin ein character varying.

-
  type: select
  multiple: true
  title: Interests
  name: interests
  copyClipboard: false
  options:
    maps: maps
    reading: reading
    swimming: swimming
    dancing: dancing
    beer: beer
    flowers: flowers

Anmerkungen: Ab Digitizer 1.2 wird für die Mehrfachauswahl eine vereinfachte Auswahlmöglichkeit genutzt, die auch die Suche innerhalb der Drop-Down-Liste ermöglicht. Die Navigation durch die Liste ist mit der Tastatur möglich. Mögliche Einträge werden beim Eintippen hevorgehoben. Eine vorhandene Auswahl kann über das kleine “x” Symbol wieder deaktiviert werden. Aktuelle Informationen zur Digitizer-Version findet man unter: https://github.com/mapbender/mapbender-digitizer

../../../../_images/digi_multiselecttool.png

Das SQL (wenn maps und reading abgespeichert wurden):

gisdb=> select interests from poi where gid=3;
interests
--------------
maps,reading
(1 row)

Beim Abspeichern von Einträgen werden die Schlüsselwörter in der Datenbank abgelegt (Bsp.: “dancing: Tanzen” und “flowers: Blumen” speichert “dancing,flowers”). Das Kopieren mehrerer Werte in die Zwischenablage ist ebenfalls möglich (siehe konfiguriertes Beispiel).

- type: select                       # Typ Auswahlbox
  title: Wählen Sie einen Typ aus    # Beschriftung mit dem Titel des Feldes (optional)
  name: my_type                      # Referenz zur Tabellenspalte
  copyClipboard: true                # Button, der den ausgewählten Wert in die Zwischenablage kopiert (optional).
  multiple: true                     # Definition einer Mehrfachauswahl (multiselect), Standard ist false
  options:                           # Definition der Optionen (key: value)
    a: a
    b: b
    c: c

Füllen der Auswahlboxen über eine SQL Abfrage

Mit einer SQL-Abfrage können die Werte direkt aus der Datenbank gezogen werden. Dabei ist zu beachten, dass die key-value-Zuordnungen wegfallen und nur noch die Stützpunkte abgespeichert werden.

- type: select                       # Typ Auswahlbox
  title: select some types           # Beschriftung (optional)
  name: my_type                      # Referenz zu Tabellenspalte
  connection: connectionName         # Definition einer Datenbankverbindung (connection)
  sql: 'SELECT DISTINCT key, value FROM tableName order by value' # Definition SQL, Abfrage der Werte key und value

Texte/Label (type label)

- type: label                                     # Typ Label schreibt einen nicht bearbeitbaren Text in das Formularfenster.
  title: 'Please give information about the poi.' # Definition eines nicht bearbeitbaren Textes.

Texte (type text)

Im Formular können Texte definiert werden. Hierbei kann auf Felder der Datenquelle zugegriffen werden, dazu wird JavaScript verwendet.

- type: text                     # Typ text zur Generierung von dynamischen Texten aus der Datenbank
  title:       Name              # Beschriftung (optional)
  name:        name              # Referenz zu Tabellenspalte, dessen Inhalt angezeigt werden soll
  css:         {width: 80%}      # CSS Definition (optional)
  text: data.gid + ': ' + data.name
  # Text Definition in JavaScript
  # data - Angabe, dass Datenbankfeld aus der Tabelle angesprochen wird.
  # z.B.: data.gid --> Anzeige der ID der Geometrie im Textfeld

Textbereiche (type textArea)

Ähnlich zum Textfeld über type input (siehe oben) können hier Textbereiche erzeugt werden, die bei type textArea mehrere Zeilen umfassen können.

- type: textArea                    # Typ textArea erzeugt einen Textbereich
  rows: 4                           # Anzahl der Zeilen für den Textbereich, die beim Öffnen des Formulars erscheinen. Feld kann per Maus im Formular größer gezogen werden.
  name: beschreibung                # Tabellenspalte
  title: Bestandsaufnahme Bemerkung # Beschriftung (optional)

Trennlinien (type breakLine)

- type: breakLine      # fügt eine einfache Trennlinie ein

Checkboxen (type checkbox)

- type:  checkbox        # Typ checkbox erzeugt eine Checkbox. Beim Aktivieren wird in die Datenbank der angegebene Value (hier 'TRUE') geschrieben.
  title: Is this true?   # Beschriftung (optional)
  name:  public          # Referenz zu Tabellenspalte
  value: true            # angegebener Parameter beim Aktivieren der Checkbox wird in DB gespeichert (hier 'TRUE').
  checked: false         # Definiert, ob die Checkbox vordefiniert angehakt sein soll (true oder false). Standard ist false

Pflichtfelder

Die Hinweise für ein Pflichtfeld erscheinen über dem jeweiligen Feldern. Bei einer fehlenden Angabe in einem definierten Pflichtfeld wird dieses rot umrandet und (wenn vorher definiert) erscheinen Hinweise. Das Objekt kann nicht gespeichert werden, wenn Pflichtangaben fehlen.

Note

Hinweis: Bei der Nutzung von mehreren Reitern in dem Formular kann es sein, dass der Erfasser bei einem Pflichtfeld auf einem nicht sichtbaren Reiter eine Angabe falsch setzt und das Abspeichern daher nicht funktioniert. Hier erscheint keine Fehlermeldung außerhalb des Formulars. Der Erfasser muss die Angaben in dem Formular überprüfen (Kennzeichen: rote Umrandung/Sprechblase mit Hinweis), bevor diese korrekt abgespeichert werden können.

- type:  [Angabe zum Feldtyp]              # jedes Feld kann zum Pflichtfeld gemacht werden

  mandatory: true                          # true - Das Feld muss gefüllt werden. Ansonsten kann der Datensatz nicht gespeichert werden. Bei der Definition sind auch reguläre Ausdrücke möglich.
  mandatorytitle: Pflichtfeld füllen!      # Text der im Feld angezeigt wird, wenn das Feld nicht gefüllt wird oder mit einem ungültigen Wert gefüllt wird.
  mandatoryText: Bitte eine Zahl eingeben! # Text der in einer Sprechblase über dem Feld angezeigt wird, wenn das Feld beim Speichern nicht gefüllt ist oder mit einem ungültigen Wert gefüllt ist.
  mandatory: /^\w+$/gi                     # Es können auch reguläre Ausdrücke angegeben werden, um die Eingabe zu überprüfen (z.B. Email oder numbers) Weitere Informationen unter: http://wiki.selfhtml.org/wiki/JavaScript/Objekte/RegExp

  # Prüfung, ob die Eingabe eine Zahl ist
  mandatory: /^[0-9]+$/
  mandatoryText: Bitte eine Zahl eingeben!

Datumsauswahl (type date)

../../../../_images/digitizer_datepicker.png
- type: date                                       # Textfeld, das eine Datumsauswahl bereitstellt
  title: favorite Date                             # Beschriftung (optional)
  name: date_favorite                              # Referenz zu Tabellenspalt
  mandatory: true                                  # Pflichtfeld

Hilfetexten zu den Eingabefeldern (Attribut infoText)

Anders als bei Hifetexten zu den Pflichtfeldern kann der Infotext über jedem Feld erscheinen, unabhängig davon, ob dieses ein Pflichtfeld ist oder nicht. Bei der Angabe infotext: [Text] erscheint ein Info-Button über dem jeweiligen Feld. Der Klick auf diesen Button öffnet den angegebenen Informationstext.

- type:  [Angabe zum Feldtyp]                                   # jedes Feld kann einen Infotext nutzen

  infoText: In dieses Feld dürfen nur Zahlen eingegeben werden  # Hinweistext, der angezeigt wird über i-Symbol.

Gruppierungen (type: fieldSet)

Elemente können in einer Zeile gruppiert werden, um logische Einheiten zu bilden oder um Platz zu sparen. Hierbei muss ein fieldSet definiert werden. Anschließend können die Elemente der Gruppe unter children angegeben werden. Für jedes Gruppenelement kann eine Breite über CSS angegeben werden, um die Aufteilung der Zeile für die angegebenen Elemente zu kontrollieren.

- type: fieldSet            # Gruppierung von Feldern, unabhängig vom Feldtyp
  children:                 # Angabe der Gruppenelemente unter children
      - type: input
        title: Vorname
        name: firstname
        css: {width: 30%}   # Angabe der Breite des Gruppenelements. Zusammen sollten die Elemente 100% ergeben.
      - type: input
        title: Nachname
        name: lastname
        css: {width: 30%}
      - type: input
        title: E-Mail
        name: email
        css: {width: 40%}

Koordinaten (type coordinates)

Um ein visuelles Feedback zu erhalten, Koordinaten manuell eingeben zu können oder diese manuell nachzubessern, kann für Punkt-Geometrien das coordinates Element eingebunden werden.

../../../../_images/digitizer_coordinates.png
- type: coordinates
  title_epsg: 'EPSG angeben'
  title_longitude: 'Longitude'
  title_latitude: 'Latitude'
  coordinatesFieldsOrder: ['epsg','x','y']
  title: ''
  css: {width: 100% }
  epsgCodes: [['EPSG:3857', 'EPSG:3857 (Pseudo Mercator)'], ['EPSG:4326', 'EPSG:4326 (WGS84)']]

Die verfügbaren Parameter sind:

  • title_epsg: die Beschriftung für das Feld zur Auswahl des Koordinatensystems der Koordinaten

  • title_longitude: die Beschriftung für das logitude Feld

  • title_latitude: die Beschriftung für das latitude Feld

  • coordinatesFieldsOrder: eine Liste aus Strings, die die Reihenfolge der drei Eingabefelder (Koordinatensystemauswahl, Longitude, Latitude) definiert

  • epsgCodes: eine Liste aus Tupeln, die jeweils einen EPSG Code und dessen Beschriftung im Formular definieren

Dateiupload (type file)

Über den Dateiupload können Dateien durch die Angabe in einer Datenbankspalte im Formular verknüpft werden. Dazu werden die hochgeladenen Dateien im Mapbender gespeichert und der Pfad in der Spalte vermerkt.

Der Speicherpfad und der Name der abgespeicherten Dateien kann bis jetzt nicht verändert werden. Der Dateiupload speichert immer in das gleiche Verzeichnis und baut sich aus den Parametern:

  • Tabellenname

  • Spaltenname

  • Dateiname

auf.

Das Verzeichnis ist:

  • <mapbender>/web/uploads/featureTypes/[tabellenname]/[spaltenname]/[dateiname].png

Die in der Datenbank verlinkte URL ist:

- type: file                        # Typ file für das Hochladen von Dateien
  title: Dateiupload                # Beschriftung (optional)
  text: Laden Sie ein Bild hoch.    # Informationstext zum Feld (optional)
  name: file_reference              # Angabe der Datenbankspalte, in die der Speicher-Pfad geschrieben wird


  # Experimentelle Parameter:
  #accept: image/*                  # Vorauswahl von Elementen im Image-Format (Fenster für Dateiupload öffnet sich mit Einschränkungsfilter)
                                    # Es können jedoch weiterhin auch andere Dateiformate hochgeladen werden.

Anmerkungen: Es wird momentan noch ein “thumbnail” Verzeichnis angelegt, dass eine kleinere Version der Bilder beinhaltet. Dieses wird in weiteren Entwicklungsphasen noch verändert.

Für die Ansicht von hochgeladenen Bildern kann die Bildanzeige dazugenommen werden.

Bildanzeige (type image)

../../../../_images/digitizer_image.png

Für die Ansicht eines Bildes im Formular kann das Bild-Element genutzt werden. Durch die Angabe einer URL in einem Datenbankfeld oder einer URL über den src-Parameter können Bilder angezeigt werden.

Bilder, die durch das Element Dateiupload in einer Tabellenspalte vermerkt sind können somit auch direkt eingebunden und angezeigt werden.

Das Bild lässt sich durch die Angabe von den beiden Parametern src und name angeben.

  • src: Url-Pfad oder Dateipfad (kann relativer Pfad sein)

  • name: Url-Pfad oder Dateipfad wird aus der Tabellenspalte übernommen (kann kein relativer Pfad sein)

  • Angabe von name und src zusammen: Der Inhalt der Datenbankspalte aus name wird genommen. Falls die Spalte leer ist wird die src-Angabe genutzt.

- type: image                                         # Type image für das Anzeigen von Bildern
  name: file_reference                                # Referenz zur Datenbankspalte. Wenn definiert, wird der Pfad oder die URL in dem Feld ermittelt und "src" Option ersetzt
  src: "../bundles/mapbendercore/image/logo_mb3.png"  # Angabe eines Pfades oder URL zu einem Bild. Falls der relative Pfad genutzt wird, muss relative: true stehen.
  enlargeImage: true                                  # Bild wird beim Klick auf das Vorschaubild auf Originalgröße/maximale Auflösung vergrößert. Es wird nicht auf die Bildschirmgröße skaliert.

  # Experimentelle Angaben zum Styling
  imageCss:
    width: 100%                                       # Image CSS Style: Skaliert das Vorschaubild in dem Formular, abweichend von der Originalgröße in Prozent.

Achtung: Wenn nur name und nicht name und src angegeben wird, erscheint bei leeren Spalteneinträgen ein Bild aus dem vorherigen Dateneintrag.

Dynamische Pfade (z.B. “bundles/mapbendercore/image/[nr].png” oder ‘bundles/mapbendercore/image/’ + data.image_reference) können nicht angegeben werden.

Eine Möglichkeit, das zu umgehen, wäre ein Trigger, der in die Datenbankspalte beim Insert den Pfad und den Inhalt eines Tabellenfeldes als Name zusammenführt.

Definition der zur Verfügung stehenden Werkzeuge (Toolset Type)

Jeder FeatureType kann unterschiedliche Toolsets freischalten, die dann in der Schaltflächenleiste des Digitizers sichtbar sind. In dem FeatureType “poi” wird mit dem “drawPoint” Toolset z.B. die Schaltfläche zum Erstellen eines neuen Punktes freigeschaltet, mit dem Toolset “modifyFeature” die Verschieben-Schaltfläche eingeblendet.

Werkzeugliste:

  • drawPoint - Punkt erstellen

  • drawLine - Line erstellen

  • drawPolygon - Polygone erstellen

  • drawRectangle - Rechteck erstellen

  • drawCircle - Circle erstellen

  • drawEllipse - Ellipse erstellen

  • drawDonut - Donut erstellen oder die bestehende Geometrien editieren

  • modifyFeature - einzelne Knotenpunkte bei Geometrien verschieben

  • moveFeature - Geometrien verschieben

  • selectFeature - Geometrien de-/selektieren (experimentell). Es findet noch keine Interaktion mit der Tabelle statt und die zur Verfügung stehenden Workflows beschränken sich auf das Löschen.

  • removeSelected - die selektierten Geometrien löschen (experimentell). Löscht alle in der Karte selektierten Objekte.

  • removeAll - Vorsicht: alle Geometrien aus der Tabelle löschen

Definition der für die Erfassung verwendeten Toolset Typen:

polygon:
    [...]
    toolset:
        - type: drawPolygon
        - type: drawRectangle
        - type: drawDonut
        - type: removeSelected

Kontextmenü

Über das Kontextmenü kann ein Objekt auf der Karte näher betrachtet werden. Nach der Aktivierung kann man über den rechten Mausklick auf einem Objekt ein Kontextmenü öffnen.

../../../../_images/digitizer_contextmenu.png

Elemente des Kontextmenüs:

  • Heranzoomen: Auf den Kartenausschnitt des Objekts zoomen.

  • Bearbeiten: Informationen zu dem Objekt verändern. Klick öffnet die Digitalisieroberfläche.

  • Löschen: Löscht das ausgewählte Objekt.

Ist die korrespondierende Basisdefinition (allowEditData, allowDelete) nicht definiert, stehen diese auch im Kontextmenü nicht zur Verfügung. In dem oben stehenden Beispiel steht für die Polygone die Löschen-Funktion nicht zur Verfügung.

poi:
    ...
    useContextMenu: true
    ...

Clustering (experimentell)

Über das Clustering können die Objekte auf der Karte zusammengefasst werden. Abhängig von der definerten Distanz und Zoomstufe werden unterschiedlich viele Objekte zusammengeführt.

Durch die Komplexität des Clusterings können sich in zukünftigen Versionen noch Änderungen an der Funktion und der Syntax ergeben, so dass wir dieses Feature bislang als experimentell kennzeichnen. Abhängigkeiten existieren zu der Anzeige der Features für den aktuellen Ausschnitt/den gesamten Bereich und den unterschiedlichen Geometrietypen.

../../../../_images/digitizer_clustering.png

Definition der Clusterelemente:

  • scale: Zoomstufe.

  • distance: Distanz zwischen einzelne Features in Metern, die zusammengefügt werden.

  • disable: Schaltet Clustering für die Zoomstufe ab.

poi:
    [...]
    clustering:
        -
            scale: 10000        # Zoomstufe
            distance: 60        # Distanz zwischen einzelne Features in Metern, die zusammengefügt werden
        -
            scale: 2500
            distance: 40
        -
            scale: 1000
            distance: 20
        -
            scale: 500
            distance: 1
            disable: true       # Schaltet Clustering für die Zoomstufe ab
    [...]

Karten-Refresh nach Speichern

Nach dem Speichern eines Objekts kann ein Refresh der Karte über die Option refreshLayersAfterFeatureSave aktiviert werden. Über diesen Parameter werden die definierten Layer-Instanzen aus dem Map-Element neu geladen. Damit werden Änderungen in WMS-Diensten direkt in der Karte sichtbar. Dieses Event wird nur gestartet, wenn der Speichern Knopf aus dem Attributdialog verwendet wird.

Wenn YAML-Anwendungen unter /application genutzt werden, kann die Angabe per eindeutigen Name oder per Instance-ID erfolgen. Wenn die Anwendungen über die graphische Oberfläche im Backend mit dem Digitizer-Element bearbeitet wird, kann nur die Angabe per Instance-ID erfolgen.

../../../../_images/layerinstance_id.png
poi:
    [...]
     allowEditData: true
     refreshLayersAfterFeatureSave:  # bei keiner Angabe in diesem Bereich erfolgt kein Karten-Refresh nach Speichern
       - 17
       - 18
       - osm                         # Namensangabe nur bei Anwendungen unter app/config/application möglich
    [...]

Anmerkungen: Karten-Refresh nach dem Speichern ist ab Version 1.2 möglich. Aktuelle Informationen findet man unter: https://github.com/mapbender/mapbender-digitizer

Duplizieren von Objekten

Bereits erfasste Objekt können dupliziert werden. Dies geht über einen Duplizieren-Button innerhalb des Erfassungsfensters des aktuellen selektierten bereits vorhandenen Features, über das Context-Menu und die Treffertabelle. Damit das neue Objekt in der Karte besser erkannt werden kann ist hier eine farbliche Hervorhebung definierbar.

Der Duplizieren-Button kann in Abhängigkeit von einem bestimmten Attribut-Wert aktiviert werden. Dies bedeutet, dass nur wenn das entsprechende Attribut einen bestimmten Wert hat (date > 0), erscheint die Duplizieren-Funktion.

  • data: Angabe von Standardwerten für Attributfelder

  • rules: regelbasiertes Duplizieren (nur wenn die Regel zutrifft darf das Objekt dupliziert werden).

  • style: Styling des kopierten Objekts (mehr dazu s.u. unter dem Bereich Darstellung)

  • on: Events beim Duplizieren

poi:
    [...]
     copy: # bei keiner Angabe in diesem Bereich können keine Objekte dupliziert werden
       enable: true
       data:
         date: 2017
       rules:
         - feature.attributes.id > 10
       style:
         label: "Dupliziertes Objekt"
         fillColor: "#ff0000"
         fillOpacity: 1
         strokeWidth: 4
         strokeColor: "#660033"
       on:
         success: widget._openFeatureEditDialog(feature)
         error: console.error(feature)

Events

Es gibt mehrere Events, die zu einem Feature zugeordnet werden können, um Attribute vor oder nach der Aktion zu manipulieren.

  • onBeforeSave: Event vor dem Speichern von neuen/veränderten Informationen

  • onAfterSave: Event nach dem Speichern von neuen/veränderten Informationen

  • onBeforeUpdate: Event vor der Aktualisierung von veränderten Informationen

  • onAfterUpdate: Event nach der Aktualisierung von veränderten Informationen

  • onBeforeSearch: Event vor dem Suchen in SearchField des Digitizers

  • onAfterSearch: Event nach dem Suchen in SearchField des Digitizers

  • onBeforeRemove: Event vor dem Löschen von Daten

  • onAfterRemove: Event nach dem Löschen von Daten

Im Unterschied zu den Save-Events arbeiten die Update-Events nur bei einer Aktualisierung der Daten, nicht bei einer Erstellung.

Anmerkung: Die Events sind noch in der Entwicklung und sollten mit Voraussicht eingebunden werden. Die korrekte Abstimmung der Events aufeinander und ihre Abhängigkeiten sind noch nicht vollständig fertiggestellt und können sich in zukünftigen Versionen ändern.

Im folgenden einige Anwendungsbeispiele. Falls mehrere Parameter in einem Event gesetzt werden sollen können diese durch ein Simikolon getrennt hintereinander aufgelistet werden, z.B.

events:
  onBeforeSave: $feature->setAttribute('interests', 'maps'); $feature->setAttribute('name', 'test');

Speichern von festen Sachdaten in zusätzlichen Attributspalte:

Das folgende Beispiel zeigt, wie Daten beim Speichern in eine zusätzliche Attributspalte geschrieben werde können. Hier geschieht das mit der Spalte “interests” und dem festen Wert “maps”. Beim Speichern wird der feste Wert in die Tabelle gespeichert und kann z.B. über einen Filter für die selektierte Anzeige genutzt werden.

events:
  onBeforeSave: $feature->setAttribute('interests', 'maps');

Speichern von Gruppenrollen in zusätzlichen Attributspalte:

Das folgende Beispiel zeigt, wie Mapbender-Benutzerdaten beim Speichern in eine zusätzliche Attributspalte geschrieben werde können. Hier geschieht das mit der Spalte “group” und der Füllung mit den jeweiligen Gruppenrollen des Benutzers (userRoles)

events:
  onBeforeSave: $feature->setAttribute('group', implode(',', $userRoles));

Speichern von Sachdaten in zusätzlichen Attributspalten:

Das folgende Beispiel zeigt, wie Daten beim Speichern in eine zusätzliche Attributspalte geschrieben werde können. Hier geschieht das mit den Spalten “geom” und “geom2”. Beim Speichern sollen die Daten von geom in das Feld geom2 geschrieben werden.

Man kann das Event je nach Anwendungsfall bei onBeforeInsert oder onBeforeUpdate eintragen.

Da zum Zeitpunkt des Editierens die Geometrie noch nicht persistent in der Datenbank ist, kann man auf sie nicht als Feature zugreifen, sondern nur über das jeweilige “item”, eine interne Digitizer Speicherstruktur. Diese “item” orientieren sich am Formular und den dort angegebenen Attributen.

events:
  onBeforeInsert: $item['geom2'] = $item['geom'];
  onBeforeUpdate: $item['geom2'] = $item['geom'];

Bei dem Event wird der Wert des Feldes “geom2” mit dem Wert des Feldes “geom” überschrieben.

Speichern unterschiedlicher Geometrietypen:

Dieses Szenario kann man zu einem konsturierten Beispiel erweitern, in dem gleichzeitig unterschiedliche Geometrietypen geschrieben werden. Mithilfe von PostGIS können Linien in Punkte interpoliert werden. Im Digitizer kann ein Event genutzt werden, um das richtige SQL Statement abzuschicken.

events:
  onBeforeInsert: |
    $sql = "SELECT
    ST_Line_Interpolate_Point('".$item['geomline']."'::geometry, 1) as geom";
    $stmnt = $this->getConnection()->prepare($sql);
    $stmnt->execute();
    $result  = $stmnt->fetchAll();
    $item['geompoi'] = $result[0]['geom'];

Hier wird das onBeforeInsert-Event genommen. Der Längsstrich ‘|’ hinter dem Event zeigt einen mehrzeiligen Block an. Dieser Block besteht aus PHP-Code, der ein SQL-Statement weiterleitet. Das SQL Statement ruft die ST_Line_Interpolate_Point Funktion auf und übergibt die Geometrie der gezeichneten Linie. Da diese noch nicht persistent ist, greift man über das “item” auf die Geometrie (geomline). Die restlichen Zeilen bauen das SQL Statement zusammen und schicken es an die im FeatureType angegebene SQL-Connection. In der letzten Zeile wird der resultierende Punkt (geompoi) in die Punktgeometrie geschrieben.

Buttons

Für die Erfassungsformulare können weitere Buttons definiert werden. Die Events beim Klick auf den Button können frei per JavaScript definiert werden. Somit können beispielsweise mailto-Angaben für die Einbindung einer Mail generiert werden.

poi:
    ...
      popup:
          title: polygon test suite
          buttons:
            - text: Nachricht an Bearbeiter
              click: |
                var body = encodeURI("Sehr geehrter Herr/Frau xx,"+"\nLink:"+location.href);
                location.href = "mailto:vorname.nachname@mail.com?subject=Neue Bearbeitung im WebGIS&body=Mail an den Bearbeiter für die die weitere Bearbeitung.";
            - text: Nachricht an Kontrolle
              click: |
               location.href = "mailto:vorname.nachname@mail.com&subject=WebGIS&body=really?";

Darstellung (Styles)

Über die Angabe eines Styles kann definiert werden, wie die Objekte angezeigt werden.

  • default: Definiert die normale Darstellung der Objekte auf der Karte

  • select: Darstellung der ausgewählten Objekte beim Mouseover

  • selected: Darstellung der ausgewählten Objekte nach dem Klick Event

poi:
    ...
    styles:
        default:
            graphic: true
            strokeWidth: 5
            strokeColor: "transparent"
            fillColor:  '#c0c0c0'
            fillOpacity: 1
            fillWidth: 2
            # label: ${name} ${type}
            # labelOutlineColor: '#eeeeee'
            pointRadius: 10
        select:
            strokeWidth: 1
            strokeColor: "#0e6a9e"
            fillOpacity: 0.7
            fillColor: "#0e6a9e"
            label: ${name} ${type}
            pointRadius: 10
        selected:
            strokeWidth: 4
            strokeColor: "#648296"
            fillOpacity: 1
            fillColor: "#eeeeee"
            label: ${name} ${type}
            pointRadius: 10
    ...
  • strokeColor: Farbe der Umrandungslinie [Farbwert/transparent]

  • strokeWidth: Breite der Umrandungslinie [numeric]

  • strokeOpacity: Transparenz der Umrandungslinie [0-1]

  • fillColor: Farbe der Füllung [Farbwert/transparent]

  • fillWidth: Breite der Füllung [numeric]

  • fillOpacity: Transparenz der Füllung [0-1]

  • pointRadius: Radius um den Mittelpunkt [numeric]

  • label: Beschriftung des Objekts mit festen Werten und/oder DB-Feldern, z.B. “ID ${nummmer}”

  • labelOutlineColor: Farbe der Umrandung von der Beschriftung [Farbwert/transparent]

YAML-Definition für das Element “digitizer” in der Sidepane in der mapbender.yml

Dieser Codeabschnitt zeigt, wie das Digitizer Element in eine auf einer YAML-Datei basierende Anwendung eingebaut werden kann.

sidepane:
    digitizer:
        class: Mapbender\DigitizerBundle\Element\Digitizer
        title: Digitalisation
        target: map
        schemes:
            ...