diff --git a/de/elements/editing/digitizer.rst b/de/elements/editing/digitizer.rst index 8b4ad04fc..7786ddfad 100644 --- a/de/elements/editing/digitizer.rst +++ b/de/elements/editing/digitizer.rst @@ -3,19 +3,21 @@ Digitizer ========= -Der Digitizer erlaubt das Erstellen und Bearbeiten von Punkten, Linien und Flächen in der Karte. Im Unterschied zum Sketch-Element werden die Geometrien hierbei in einer Tabelle in einer Datenbank hinterlegt. Bisher unterstützt Mapbender PostgreSQL als Datenquelle. SpatiaLite und Oracle sind experimentell verfügbar. Die Entwicklung wurde so durchgeführt, dass die Erfassung auch auf andere Datenquellen wie z.B. OGC WFS erweitert werden kann. +Der Digitizer erlaubt das Erstellen und Bearbeiten von Punkten, Linien und Flächen in der Karte. Im Unterschied zum :ref:`Sketch-Element` werden die Geometrien in einer Tabelle in einer Datenbank hinterlegt. +Bisher unterstützt Mapbender vollumfänglich PostgreSQL als Datenquelle. SpatiaLite und Oracle sind experimentell verfügbar. +Der Digitizer wurde so entwickelt, dass die Datenerfassung auch auf andere Datenquellen, z. B. OGC WFS, erweitert werden kann. -Um das Digitizer-Element nutzen zu können, muss eine YAML-Definition aufgebaut werden: +Um das Digitizer-Element nutzen zu können, muss es zunächst konfiguriert werden. .. toctree:: - :maxdepth: 1 + :maxdepth: 2 digitizer/digitizer_configuration.rst -Mehr Informationen zur Nutzung des Digitizers sind hier zu finden: +Im Anschluss an die Konfiguration können verschiedene Digitizer-Funktionen genutzt werden. .. toctree:: - :maxdepth: 1 + :maxdepth: 2 digitizer/digitizer_functionality.rst diff --git a/de/elements/editing/digitizer/digitizer_configuration.rst b/de/elements/editing/digitizer/digitizer_configuration.rst index d603d45b9..e0459af8b 100644 --- a/de/elements/editing/digitizer/digitizer_configuration.rst +++ b/de/elements/editing/digitizer/digitizer_configuration.rst @@ -3,36 +3,135 @@ Einrichtung des Digitizers ========================== -Das Element kann nur in der Sidepane eingebettet werden. +Der Digitizer kann nur in der Sidepane eingebettet werden. Es ist jedoch möglich, dieser mehrere Digitizer-Instanzen hinzuzufügen. +Der Digitizer wird im Backend eingerichtet. Dabei muss eine YAML-Definition in dem zugehörigen Formularfenster gespeichert werden. +Mit dieser konfigurieren Sie die Datenbankverbindung, editierbare Felder, Anzeigeformulare und andere Verhaltensweisen. .. image:: ../../../../figures/digitizer_configuration.png - :scale: 80 + :width: 100% + +* **Title:** Titel des Elements. Dieser ermöglicht, mehrere Element-Instanzen voneinander zu unterscheiden. +* **Schemes:** Konfigurierbare YAML-Definition. + +Zusätzlich benötigt der Digitizer einen Zugriff auf die Datenbank, in der die zu editierenden Tabellen liegen. +Deshalb muss ein Datenbankzugriff konfiguriert werden. Lesen Sie mehr dazu unter :ref:`yaml_de`. + +.. warning:: Verknüpfen Sie **keine** Digitizer-Verbindung für Geodaten mit Ihrer Mapbender "default"-Datenbank. Diese enthält bereits Doctrine-Entitäten, sodass bei einer Kombination Fehler bei der Ausführung von Doctrine-Schema-Updates zu erwarten sind. + +.. hint:: Bei fehlerhaften Angaben zur Datenbank, zu Feldern und bei Formularfehlern erscheinen Fehlermeldungen. Bei Produktivumgebungen erscheint eine allgemeine Fehlermeldung. Falls Sie die detaillierte Fehlermeldung sehen möchten, sollten Sie die Anwendung als Entwicklungsumgebung aufrufen. Weitergehende Informationen dazu finden sich unter :ref:`de/quickstart:Starten von Mapbender als Produktivumgebung`. + +Diese Seite umfasst mehrere Kapitel: + +1. :ref:`de/elements/editing/digitizer/digitizer_configuration:SQL für die Demo-Tabellen` legt mit beispielhaften SQL-Befehlen eine Datenbankverbindung und drei Demo-Tabellen für den Digitizer an. +2. :ref:`de/elements/editing/digitizer/digitizer_configuration:YAML-Definition` gibt ein Beispiel für eine Standard-YAML-Konfiguration des Digitizer-Elements. +3. :ref:`de/elements/editing/digitizer/digitizer_configuration:konfiguration` erläutert den Funktionsumfang der im YAML-Block eingebauten Features (und weitere Funktionen). + +SQL für die Demo-Tabellen +------------------------- + +Die folgenden SQL-Befehle müssen in Ihrer Geodaten-Datenbank ausgeführt werden. Sie legen drei Demo-Tabellen an, die mit der :ref:`de/elements/editing/digitizer/digitizer_configuration:YAML-Definition` verknüpft werden können. + +.. note:: Zusätzlich muss die `PostGIS-Extension `_ in der Datenbank aktiviert werden. -* **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 :ref:`yaml_de`. +.. code-block:: postgres -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. + 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, + category varchar, + user_name varchar, + group_name varchar, + modification_date date, + my_type varchar, + file_reference varchar, + x float, + y float, + city varchar, + style text, + geom geometry(point,4326) + ); + +.. code-block:: postgres + + 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, + style text, + geom geometry(linestring,4326) + ); + +.. code-block:: postgres -.. hint:: Bei fehlerhaften Angaben zur Datenbank, Feldern und Formularfehlern erscheinen Fehlermeldungen. Bei Produktivumgebungen erscheint eine allgemeine Fehlermeldung. Falls Sie die detaillierte Fehlermeldung sehen möchten, sollten Sie die Anwendung als Entwicklungsumgebung aufrufen. Weitergehende Informationen unter :ref:`de/quickstart:Starten von Mapbender als Produktivumgebung`. + 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, + style text, + geom geometry(polygon,4326) + ); -YAML-Definition für das Element digitizer in der Textarea unter schemes ------------------------------------------------------------------------ +YAML-Definition +--------------- -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. +Im folgenden YAML-Block sind Definitionen für drei Erfassungsoberflächen enthalten. +Kopieren Sie ihn und fügen ihn vollständig unter **schemes** im Backend des Digitizer-Elements ein, um ein Digitizer-Element für Punkte, Linien und Polygone zu konfigurieren. .. code-block:: yaml poi: label: point digitizing - inlineSearch: true + minScale: 5000 + maxScale: 20000 + maxResults: 500 featureType: connection: search_db table: poi @@ -40,12 +139,27 @@ Der Funktionsumfang der eingebauten Features und weitere Funktionen werden nach geomType: point geomField: geom srid: 4326 - openFormAfterEdit: true - zoomScaleDenominator: 500 - allowEditData: true - allowDelete: true - allowDigitize: true - useContextMenu: true + allowEditData: true # Allow attribute editing (default true) + allowDelete: true # Allow user to remove features from the database (default true) + allowDigitize: true # Allow geometry creation and editing (default true) + roles: #Show this schema only to users with (at least one of) these roles + - root + - ROLE_GROUP_EDITING + displayPermanent: true # Keep features visible on map even after switching to a different schema + displayOnInactive: true # Keep features visible on map even after deactivating Digitizer + continueDrawingAfterSave: # Keep drawing tool active after creating and saving a new feature (~fast batch mode feature creation) + printable: false + allowChangeVisibility: true + inlineSearch: true + searchType: currentExtent + pageLength: 5 # Limits the number of rows per page (default 16) + tableFields: + gid: + label: Nr. + width: 20% + name: + label: Name + width: 80% toolset: - type: drawPoint - type: moveFeature @@ -69,6 +183,15 @@ Der Funktionsumfang der eingebauten Features und weitere Funktionen werden nach strokeColor: '#0e6a9e' fillOpacity: 0.7 pointRadius: 10 + unsaved: + strokeWidth: 3 + strokeColor: "#f0f0f0" + fillColor: "#ffffff" + fillOpacity: 0.5 + pointRadius: 6 + label: 'Please save' + fontColor: red + fontSize: 18 formItems: - type: tabs children: @@ -125,8 +248,8 @@ Der Funktionsumfang der eingebauten Features und weitere Funktionen werden nach options: {maps: maps, reading: reading, swimming: swimming, dancing: dancing, beer: beer, flowers: flowers} - type: date title: favorite Date - name: date_favorite - mandatory: true + name: date_favorite + mandatory: true css: {width: 25%} - type: breakLine - type: breakLine @@ -146,7 +269,6 @@ Der Funktionsumfang der eingebauten Features und weitere Funktionen werden nach srid: 4326 openFormAfterEdit: true allowDelete: true - useContextMenu: true toolset: - type: drawLine - type: modifyFeature @@ -248,107 +370,24 @@ Der Funktionsumfang der eingebauten Features und weitere Funktionen werden nach 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. - - -.. code-block:: postgres - - 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) - ); - -.. code-block:: postgres - - 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) - ); - -.. code-block:: postgres - - 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. +Nachfolgend werden alle Bestandteile des Digitizer-Elements, die in den YAML-Block eingebettet werden können, vorgestellt. + Basisdefinition --------------- -Eine Basisdefinition, hier am Beispiel der poi, sieht folgendermaßen aus: +Eine Basisdefinition für eine Erfassungsoberfläche, hier am Beispiel der *poi*, sieht folgendermaßen aus: .. code-block:: yaml poi: label: point digitizing minScale: 5000 + maxScale: 20000 + maxResults: 500 featureType: connection: search_db table: poi @@ -357,6 +396,12 @@ Eine Basisdefinition, hier am Beispiel der poi, sieht folgendermaßen aus: geomField: geom srid: 4326 filter: interests = 'maps' + userColumn: user_name + styleField: style + # file upload location - customization per column on featureType (or dataStore) level + files: + - field: file_reference + path: /data/demo/mapbender_upload_lines/ openFormAfterEdit: true zoomScaleDenominator: 500 allowEditData: true @@ -366,476 +411,621 @@ Eine Basisdefinition, hier am Beispiel der poi, sieht folgendermaßen aus: 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/doctrine.yaml - * table: Name der Tabelle, in der das FeatureType gespeichert wird - * uniqueId: Name der Spalte mit dem eindeutigen Identifier (Standard bei Leerwert: [id]) - * geomType: Geometrietyp +* **label:** Beschriftung mit dem Namen der Erfassungsoberfläche. +* **minScale:** Minimaler Maßstab, ab dem die Features in der Karte angezeigt werden. +* **maxScale:** Maximaler Maßstab, bis zu dem die Features in der Karte angezeigt werden. +* **featureType:** Verbindung zur Datenbank. + * connection: Name der Datenbank-Verbindung (`parameters/doctrine.yaml`). + * table: Name der Tabelle, in der das FeatureType gespeichert wird. + * uniqueId: Name der Spalte mit dem eindeutigen Identifier (Standard bei Leerwert: [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 (Standard: true). -* **zoomScaleDenominator:** Zoomstufen, die für das Zoomen auf das Objekt gewählt wird (Standard: 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 <#speichern-loschen-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. + * srid: Koordinatensystem im EPSG-Code. + * filter: Datenfilter über Werte in einer definierten Spalte (z.B. filter: interests = 'maps'). +* **allowChangeVisibility:** Ändern der Sichtbarkeit von einem Treffer in der Karte (sichtbar/nicht sichtbar) [true/false]. Falls aktiv, wird ein Auge-Symbol zu jedem Feature eingeblendet, mit dem dieses explizit aus- und wieder eingeblendet werden kann. +* **allowCreate:** Es dürfen neue Features erstellt werden (Standard true). +* **allowDelete:** Daten dürfen gelöscht werden (Standard true). 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äche (neuer Punkt, Verschieben, etc.). Das Speichern ist jedoch nicht möglich. +* **allowEditData:** Daten dürfen editiert und gespeichert werden [true/false]. Es erscheint immer eine **Speichern**-Schaltfläche. +* **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, etwas herausfordernd, da auch die einzelnen Digitizer Events noch aktiviert sind. Kann je nach Szenario dennoch hilfreich sein. +* **allowCustomStyle:** Objekte können individuell gestylt werden (Standard: false). Jedes Objekt kann einen eigenen Stil erhalten. Diese Option benötigt die Definition des Parameters ``styleField`` im featureType-Bereich. + + .. image:: ../../../../figures/digitizer/stylemanager.png + :width: 100% + +* **allowRefresh:** Button zum Neuladen der Daten (für Tabellen, die gleichzeitig von unterschiedlichen Anwendenden bearbeitet werden) (Standard: false). +* **continueDrawingAfterSave:** Das Zeichnen-Werkzeug bleibt auch nach dem Erzeugen und Speichern von Objekten aktiv. +* **displayPermanent:** FeatureTypes werden dauerhaft angezeigt, auch wenn im Digitizer in ein anderes Schema gewechselt wird. (Standard: false) +* **displayOnInactive:** Features bleiben sichtbar, auch wenn der Digitizer nicht aktiv ist (Standard: false). +* **pageLength:** Limitert die Anzahl der Zeilen pro Seite (Standard: 16). +* **refreshLayersAfterFeatureSave:** Liste der Mapbender-Layerinstanz-IDs/Namen (siehe :ref:`de/backend/applications/layerset:Layerset-Instanzen`), die neu geladen werden, wenn ein Element erstellt, aktualisiert oder gelöscht wird (Standard: none). + +.. code-block:: yaml + + refreshLayersAfterFeatureSave: + - mapbender_users # or WMS InstanceID - .. image:: ../../../../figures/digitizer/allowlocate.png - :scale: 80 +* **roles:** Liste der Rollen. Zeigen Sie dieses Schema nur Benutzern an, die (mindestens eine) der folgenden Rollen haben. -* **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. +.. code-block:: yaml - .. image:: ../../../../figures/digitizer/allowchangevisibility.png - :scale: 80 + roles: # Dieses Schema nur Benutzern mit (mindestens einer) der folgenden Rollen zeigen + - root + - ROLE_GROUP_EDITING -* **showVisibilityNavigation:** Ändern der Sichtbarkeit von allen Treffern in der Karte (sichtbar/nicht sichtbar). [true/false] +Kombinationsschema +------------------ - .. image:: ../../../../figures/digitizer/showvisibilitynavigation.png - :scale: 80 +Wenn ein Schema eine Kombinationseinstellung (``combine``) definiert, wird es als Kombinationsschema behandelt. Daten aus mehreren anderen Schemata werden dann gemeinsam angezeigt. Die Einträge in der Kombinationsliste müssen die Namen der zu kombinierenden Teilschemata sein. +* Ein Schema mit Angabe von ``combine`` erlaubt nur einen reduzierten Satz anderer Einstellungen. +* Es kann Rollen definieren, um den Benutzerzugriff auf die gesamte Kombination zu beschränken. +* Es kann eine Tabelle definieren, um explizit die Tabellenformatierung von Daten anzugeben, die allen referenzierten Teilschemata gemeinsam sind. +* Ein Schema, auf das eine Kombinationsliste verweist, darf selbst keine Kombination definieren. +.. code-block:: yaml + schemes: + combine_schemes_together: + label: combine schemes (hier poi und line) + searchType: currentExtent + combine: + - poi + - line + roles: # Dieses Schema nur Benutzern mit (mindestens einer) der folgenden Rollen zeigen + - root + - ROLE_GROUP_EDITING + + +Benutzerspezifische Daten +------------------------- +Die in jedem Schema angezeigten Daten können für verschiedene Benutzer unterschiedlich sein. -.. * **displayPermanent:** FeatureTypes werden dauerhaft angezeigt. (Standard: false) +Jedes Schema kann definieren: +* **filterUser** Daten für jeden Benutzer getrennt halten (Standard: false). Erfordert die Definition einer ``userColumn`` in featureType. +* **trackUser** Speichert den erstellenden/ändernden Benutzer (Standard: false). Kann ohne tatsächliche Filterung der Auswahl durchgeführt werden. Benötigt die Definition einer ``userColumn`` in featureType. -Experimentell: +Wenn eine der beiden Optionen auf true gesetzt wird, muss zusätzlich ``userColumn`` (string) in der dataStore/featureType-Definition definiert werden. Diese muss eine Tabellenspalte von ausreichender Länge benennen, um den Benutzernamen zu speichern. -* **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. +.. hint:: Es ist zu beachten, dass bei ``filterUser: true`` *trackUser* impliziert ist und dessen Konfiguration ignoriert wird. - .. image:: ../../../../figures/digitizer/showvisibilitynavigation.png - :scale: 80 - Es erscheint ein Style-Manager zur Anpassung einzelner Features. +.. code-block:: yaml - .. image:: ../../../../figures/digitizer/stylemanager.png - :scale: 80 + poi: + label: 'point digitizing' + filterUser: true + trackUser: true + featureType: + connection: geodata_db + table: poi + uniqueId: gid + geomType: point + geomField: geom + srid: 4326 + userColumn: user_name -Definition Popup ----------------- +Definition der verfügbaren Werkzeugsätze (Toolset Type) +------------------------------------------------------- -In Zusammenhang mit der Digitalisierung können für die Erfassung von dazugehörigen Sachdaten komplexe Formulare generiert werden. +Jedes Schema kann eine Werkzeugsatz-Einstellung definieren, um die bei der Geometrieerstellung verfügbaren Arten der Zeichenwerkzeuge zu konfigurieren. Dabei sollte es sich um eine Liste von Zeichenketten handeln, oder um ``NULL`` für die automatische Konfiguration (NULL ist der Standardwert). -Folgende Optionen stehen für den Aufbau von Formularen zur Verfügung: +Werkzeugsatz-Typen +^^^^^^^^^^^^^^^^^^ -* 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 +* **drawPoint:** Punkt zeichnen. +* **drawLine:** Zeichnen einer Linie. +* **drawPolygon:** Polygon zeichnen. +* **drawRectangle:** Rechteck zeichnen. +* **drawCircle:** Kreis zeichnen. +* **drawEllipse:** Ellipse zeichnen. +* **drawDonut:** Zeichnet einen Donut (Enklave). +* **modifyFeature:** Verschiebt Eckpunkte einer Geometrie. +* **moveFeature:** Geometrie verschieben. -.. image:: ../../../../figures/digitizer_with_tabs.png - :scale: 80 +YAML-Definition der Werkzeugsatz-Typen +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. code-block:: yaml - 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 + polygon: + [...] + toolset: + - type: drawPolygon + - type: drawRectangle + - type: drawDonut + - #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 +Einige Beispielkonfigurationen: +* Wenn ``toolset`` eine leere Liste ist, werden keine Geometrieerstellungswerkzeuge angeboten. +* Wenn ``toolset`` NULL oder nicht gesetzt ist und der verknüpfte Featuretyp seinen ``geomType`` deklariert, reduziert Digitizer die Auswahl auf die kompatiblen Werkzeuge (z.B. keine Linienzeichnung für Datensätze, die nur Punkte oder Polygone enthalten). +* Wenn weder ein Werkzeugsatz noch der ``GeomType`` definiert sind, werden alle unterstützten Werkzeuge angeboten. +* Wenn die Änderung von Features erlaubt ist (über ``allowDigitize``/``allowEdit``), werden auch Werkzeuge für die Änderung von Eckpunkten und das Kopieren von Features angeboten. +* Wenn ``allowCreate: false`` gesetzt ist, werden keine Erstellungswerkzeuge aus der Werkzeugsatz-Einstellung angeboten. ``drawDonut`` (inhärent ein Modifikations-, kein Erstellungswerkzeug) kann dennoch angeboten werden, wenn die Bearbeitung erlaubt ist. 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. +Der Digitizer stellt eine Objekttabelle bereit. Über diese kann auf Objekte gezoomt und das Bearbeitungsformular 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]} -* **searchType:** Suchbereich in der Karte, Anzeige aller Objekttreffer in der Tabelle oder nur aller Objekttreffer in dem derzeitigen Kartenausschnitt [all / currentExtent] (Standard: currentExtent). -* **showExtendSearchSwitch:** Anzeige der searchType Selectbox zur Suche im Kartenausschnitt aktivieren oder deaktivieren [true/false] -* **view:** Einstellungen zu der Objekttabelle - * **type**: Templatename [table] - * **settings**: Einstellungen zum Funktionsumfang der Objekttabelle *(neu hinzugefügt, noch nicht vollst. dokumentiert!)* + * Definition einer Spalte: ``[Tabellenspalte]: {label: [Beschriftung], width: [css-Angabe, z.B. Angabe der Breite]}``. +* **searchType:** Suchbereich in der Karte, Anzeige aller Objekttreffer in der Tabelle oder nur aller Objekttreffer in dem derzeitigen Kartenausschnitt [all/currentExtent] (Standard: currentExtent). +* **inlineSearch:** Erlaubt das Suchen in der Tabelle (Standard: true). +* **paging:** De-/Aktivieren des Pagings (Ansicht über mehrere Seiten, Standard: true). +* **pageLength:** Definiert Trefferanzahl pro Seite bei Aktivierung des Pagings (Standard: 16). -Detaillierte Informationen zu möglichen Angaben finden Sie unter https://datatables.net/reference/option/ +Detaillierte Informationen zu möglichen Angaben finden Sie `hier `_. .. code-block:: yaml + poi: + [] searchType: currentExtent - showExtendSearchSwitch: true + paging: true + pageLength: 10 + inlineSearch: 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 + gid: + label: Nr. + width: 20% + name: + label: Name + width: 80% -Dateireiter (type tabs) ------------------------ +Suche in den Tabellen (inline Search) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -Die Formularelemente können in verschiedenen Reitern dargestellt werden. Dazu dient das formItem type "tabs". +Über die Suche können Begriffe in der Tabelle gesucht werden. +Die aktivierte Suchleiste erscheint über der Tabelle. Nach der Eingabe eines Suchbegriffs werden alle Spalten der Tabelle durchsucht und die Ergebnisse angezeigt. .. code-block:: yaml - 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! - ... + poi: + ... + inlineSearch: true # Suche in den Tabellenspalten (Standard: true) + ... -Bei jedem Eingabefeld können unabhängig vom Typ Verhaltensparameter per Event und Stylingangaben per CSS vergeben werden. Damit können beispielsweise wichtige Felder hervorgehoben oder auch ein Attributfeld in Abhängigkeit zu einem anderen Feld gefüllt werden. -Verhaltensparameter: +Konfiguration von Formularen +---------------------------- -* 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 +In Zusammenhang mit der Digitalisierung können für die Erfassung von dazugehörigen Sachdaten komplexe Formulare generiert werden. Jede Schema-Konfiguration enthält unter dem Parameter ``formItems`` eine Liste von (teilweise verschachtelten) Objekten, über die der Inhalt und die Struktur des Formulars definiert wird. -.. code-block:: yaml +.. hint:: Beachten Sie, dass dieses Formular auch zur Anzeige verwendet wird, falls das Editieren deativiert wurde. - 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"); +.. image:: ../../../../figures/digitizer.png + :width: 100% +Folgende Optionen stehen für den Aufbau von Formularen zur Verfügung: -Textfelder (type input) ------------------------ +* Textfelder (type: input). +* Text (type: label oder type: text). +* Textblöcke (type: textArea). +* HTML-Definition (type: html). + +* Checkboxen (type: checkbox). +* Selectboxen, Multiselectboxen (Füllen der Auswahlbox über eine feste Definition von Werten in der YAML-Definition oder über ein Select auf eine Tabelle) (type: select). +* Radiobuttons (type: radioGroup). + +* Datumsauswahl (type: date). +* Farbauswahl (type: colorPicker). + +* Dateiupload (type: file). +* Bildanzeige (type: image). + +* Definition von Reitern (type: tabs). +* Definition von Trennlinien (type: breakLine). + + +Formularfelder +^^^^^^^^^^^^^^ + +Es gibt eine Vielzahl an Formularfeldern, die über den ``type`` definiert werden. Alle Felder teilen die gleichen Konfigurations-Optionen: + + +.. list-table:: + :widths: 20 20 40 10 + :header-rows: 1 + + * - name + - type + - description + - default + * - type + - string + - Typ des Formularfelds (siehe unten) + - -none- + * - name + - string + - Tabellenspalte, auf die sich das Feld bezieht + - -none- + * - value + - string + - Initialer Wert, nur bei neu erstellten Objekten + - -none- + * - title + - string + - Beschriftung + - -none- + * - attr + - object + - Anwenden von HTML-Attributen + - -none- + * - infoText + - string + - Erklärender Text als Tooltio neben der Beschriftung + - -none- + * - css + - object + - Anwenden von CSS-Regeln zur Formular-Gruppe(Container um Beschriftung und input-Feld) + - -none- + * - cssClass + - string + - Fügt CSS zum class-Attribut der Formular-Gruppe hinzu (Container um Beschriftung- und input-Feld) + - -none- -.. code-block:: yaml - - 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) (Standard: 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) +.. image:: ../../../../figures/digitizer_with_tabs.png + :scale: 80 -Auswahlboxen (selectbox oder multiselect [type select]) -------------------------------------------------------- +Textfelder (type: input) +^^^^^^^^^^^^^^^^^^^^^^^^ -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. +Eingabeformulare können über ``type: input`` erzeugt werden. + + +.. code-block:: yaml -**(1) select - ein Eintrag kann ausgewählt werden** + - type: input # element type definition + title: Title for the field # Definition of a labeling (optional, if not defined no labeling is set) + name: column_name # Reference to table column + copyClipboard: false # Offer a button that copies entered information to the clipboard (default: false) (optional) + #mandatory: true # Specifies a mandatory field (optional), please use required instead + infoText: "Info: Please emter Information." # Offer a button that that provides Intormation on mouse-over (optional) + mandatoryText: You have to provide information. # Define text that is shown on save if no content is provided for a mandatory field (optional) + required: true + cssClass: 'input-css' # css class to use as style for the input field (optional). + value: 'default Text' # Define a default value (optional) + css: # CSS definition (optional) + color: green + attr: + placeholder: 'please edit this field' # placeholder appears in the field as information when field is empty (optional) + + +* **title:** Definition einer Beschriftung (optional - wenn nicht definiert, wird keine Beschriftung gesetzt). +* **name:** Verweis auf Tabellenspalte (erforderlich). +* **copyClipboard:** Bietet eine Schaltfläche an, die eingegebene Informationen in die Zwischenablage kopiert (optional, Standard: false). +* **infoText:** Bietet eine Schaltfläche an, die beim Überfahren mit der Maus Informationen liefert (optional). +* **mandatoryText:** Definieren Sie einen Text, der beim Speichern angezeigt wird, wenn kein Inhalt für ein Pflichtfeld angegeben wurde (optional). +* **value:** Definieren Sie einen Standardwert (optional). +* **css:** CSS-Definition (optional). +* **cssClass:** Wird zum class-Attribut der Formulargruppe (Container um Label und Input) hinzugefügt. + +Attribute (attr) +* **placeholder:** Platzhalter erscheint im Feld als Information (optional). +* **required:** Gibt ein Pflichtfeld an (optional, Standard: false). + + +Anpassungen über attr-Objektdefinitionen +"""""""""""""""""""""""""""""""""""""""" + +Einige gängige Anpassungen für input-Felder können einfach über das attr-Objekt erfolgen. Beispielsweise kann ``type: input`` auf die Eingabe von Zahlen limitiert werden, indem dessen HTML-Type-Attribut überschrieben wird. Beispielsweise können Felder via attr auch als Pflichtfeld oder als *readonly* definiert werden. .. code-block:: yaml - - 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). (Standard: false) - options: # Definition der Optionen (key: value) - 1: pub - 2: bar - 3: pool - 4: garden - 5: playground + formItems: + - type: input + name: strictly_formatted_column + title: Strict input pattern demo + required: true + attr: + pattern: '\w{2}\d{3,}' + placeholder: Two letters followed by at least three digits + - type: input + name: numeric_column + title: Numbers only + required: true + attr: + type: number + min: 10 + max: 200 + step: 10 + - type: textArea + name: text_column + title: Very large text area + attr: + rows: 10 -**(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. +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. .. code-block:: yaml - - - 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 finden sich unter: https://github.com/mapbender/mapbender-digitizer + - 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%} -.. image:: ../../../../figures/digitizer/digi_multiselecttool.png - :scale: 80 +Texte (type: text) +^^^^^^^^^^^^^^^^^^ -Das SQL (wenn maps und reading abgespeichert wurden): +Im Formular können Texte definiert werden. Hierbei kann auf Felder der Datenquelle zugegriffen werden; dazu wird JavaScript verwendet. -.. code-block:: postgres +.. code-block:: yaml - gisdb=> select interests from poi where gid=3; - interests - -------------- - maps,reading - (1 row) + - 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 + text: data.gid + ': ' + data.name + # Text Definition in JavaScript + # data - Die Angabe data ermöglicht den Zugriff auf alle Datenfaelder -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). +Texte/Label (type: label) +^^^^^^^^^^^^^^^^^^^^^^^^^ .. code-block:: yaml - - - 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: false) - options: # Definition der Optionen (key: value) - a: a - b: b - c: c + - type: label # Erstellt einen nicht bearbeitbaren Text imFormularfenster. + text: 'Please give information about the poi.' # Definition eines nicht bearbeitbaren Textes. + css: + color: red -**Füllen der Auswahlboxen über eine SQL Abfrage** +Textbereiche (type: textArea) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -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. +Ähnlich zum Textfeld über type input (siehe oben) können hier Textbereiche erzeugt werden, die bei type textArea mehrere Zeilen umfassen können. .. code-block:: yaml - - 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 + - type: textArea # Typ textArea erzeugt einen Textbereich + rows: 4 # Anzahl der Zeilen für den Textbereich. + title: Beschreibung # Beschriftung (optional) + name: abstract # Tabellenspalte + +* **rows**: Anzahl der Zeilen für den Textbereich. +Typ HTML (type: html) +^^^^^^^^^^^^^^^^^^^^^ -Texte/Label (type label) ------------------------- +``Type: html`` erlaubt es, HTML zu definieren (z.B. Buttons oder Links). + +.. image:: ../../../../figures/digitizer/digitizer_html.png + :scale: 80 .. code-block:: yaml - - type: label # Typ Label schreibt einen nicht bearbeitbaren Text in das Formularfenster. - title: 'Please give information about the poi.' # Definition eines nicht bearbeitbaren Textes. + - type: html # define html + html: 'Read more at the Mapbender-Webseite
' -Texte (type text) ------------------ -Im Formular können Texte definiert werden. Hierbei kann auf Felder der Datenquelle zugegriffen werden, dazu wird JavaScript verwendet. +Checkboxen (type: checkbox) +^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +``Type: checkbox`` erzeugt eine An/Aus-Checkbox. .. code-block:: yaml - - 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 + - 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 # Initialer Wert für neue Objekte (true/false, Standard: true) -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. +Auswahlboxen - Selectbox oder Multiselect (type: select) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -.. code-block:: yaml +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. - - 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) +(1) select - Ein Eintrag kann ausgewählt werden +""""""""""""""""""""""""""""""""""""""""""""""" +.. code-block:: yaml -Trennlinien (type breakLine) ----------------------------- + - type: select # Typ-Definition + title: select a type # Beschriftung (optional) + name: type # Tabellenspalte + select2: true # Aktivierung der Volltextsuche (Hinweis für multi: true - die Voltextsuche ist standardmäßig aktiv) + maximumSelectionLength: 2 # Definition der maximalen Anzahl der möglichen Selectionen (benötigt select2: true) + copyClipboard: false # Definition eines Buttons der die ausgewählten Werte in den Zwischenspeicher kopiert (optional) [true/false] (Standard: false). + infoText: 'Help: Please choose a type.' + attr: + multiple: false # Definition der Mehrfachauswahl (Standard: false). + options: # Definition der Optionen (key, value) + '': 'Please select a type...' + 'A': 'Type A' + 'B': 'Type B' + 'C': 'Type C' + 'D': 'Type D' .. code-block:: yaml - - type: breakLine # fügt eine einfache Trennlinie ein + options: + - label: 'Please select a type...' + value: '' + - label: 'Type A' + value: 'A' + - label: 'Type B' + value: 'B' + - label: 'Type C' + value: 'C' + - label: 'Type D' + value: 'D' -Checkboxen (type checkbox) --------------------------- +Wenn Sie ``useValuesAsKeys: true`` definieren, müssen Sie sich nur auf die Werte beziehen. Die Werte werden dann auch als Schlüssel verwendet. Bitte beachten Sie, dass ohne den Parameter oder mit ``useValuesAsKeys: false`` eine Zahl verwendet wird. .. code-block:: yaml - - 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. (Standard: false) + useValuesAsKeys: true + options: + - A + - B + - C + - D +* **select2:** Aktiviert die Volltextsuche für die Selectbox (bitte beachten Sie, dass bei Multiselectboxen (``multi: true``) die Volltextsuche standardmäßig aktiviert ist). +* **multi:** Definieren Sie eine Single- oder Multiselectbox (Standard: false). +* **value:** Definition des Standardwertes. +* Optionen mit **label:** und **value:** Definition der Optionen (label, value). +* **useValuesAsKeys:** Die Werte werden auch als Schlüssel verwendet. Andernfalls handelt es sich um eine Zahl, die für jede Option zugewiesen wird (Standard: 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. +(2) multiselect - mehrere Einträge können ausgewählt werden +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" -.. 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. +Eine Multiselect-Box wird durch das attribute ``multiple: true`` aktiviert. Damit können mehrere Einträge ausgewählt werden. Die Verwendung und ihre Anforderungen an die Datenbanktabellenspalte können variieren. +Generell können Sie bei dem obigen Beispiel über ``multiple: true`` auf multiselects umschalten. Die Datenbankfelder sind nach wie vor ein variierendes Zeichen. Die Werte werden kommasepariert in der Tabellenspalte gespeichert. .. code-block:: yaml - - type: [Angabe zum Feldtyp] # jedes Feld kann zum Pflichtfeld gemacht werden + - type: select + title: Interests + name: type + maximumSelectionLength: 2 # maximum number of possible selections + attr: + multiple: true + options: + - label: 'Please select a type...' + value: '' + - label: 'Type A' + value: 'A' + - label: 'Type B' + value: 'B' + - label: 'Type C' + value: 'C' + - label: 'Type D' + value: 'D' + attr: + disabled: disabled + value: A,C # use comma-separated values for default multi-select value + + +.. tip:: Die Mehrfachauswahl bietet einen einfacheren Mechanismus zur Auswahl eines Eintrags, der auch eine Suche in der Dropdown-Liste ermöglicht. Die Navigation durch die Liste ist über die Tastatur möglich. + Mögliche Einträge werden während des Tippens hervorgehoben. Ein bereits ausgewählter Eintrag kann durch Anklicken des kleinen "x"-Symbols entfernt werden. Ein Eintrag kann auch als deaktiviert markiert 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! +.. image:: ../../../../figures/digitizer/digi_multiselecttool.png + :scale: 80 -Datumsauswahl (type date) -------------------------- +* **maximumSelectionLength**: maximale Anzahl der möglichen Auswahlen (optionaler Parameter): -.. image:: ../../../../figures/digitizer_datepicker.png +.. image:: ../../../../figures/digitizer/digi_multiselect_maximumselectionlength.png :scale: 80 + +Optionen für die Selectbox über SQL +""""""""""""""""""""""""""""""""""" + +Mit einer SQL-Anfrage können die Werte der Selectbox direkt aus einer Datenbanktabelle geholt werden. + .. code-block:: yaml - - type: date # Textfeld, das eine Datumsauswahl bereitstellt - title: favorite Date # Beschriftung (optional) - name: date_favorite # Referenz zu Tabellenspalt - mandatory: true # Pflichtfeld + - type: select # Typ-Definition + title: Choose a type # Beschrfitung (optional) + name: type # Reference zur Tabellenspalte + connection: connectionName # Definition der Datenbank-Verbindung + sql: 'SELECT DISTINCT type_name as label, type_id as value FROM types order by value;' # get the options fro the selectbox + options: + - label: 'Please select a type...' + value: '' -Hilfetexten zu den Eingabefeldern (Attribut infoText) ------------------------------------------------------ +Radio-Buttons (type: radioGroup) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -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. +Erzeugt Radio-Buttons. .. code-block:: yaml - - type: [Angabe zum Feldtyp] # jedes Feld kann einen Infotext nutzen + - type: radioGroup # Typ radioGroup erzeugt Radio-Buttons. Wenn sie aktiviert ist, wird der angegebene Wert in die Tabellenspalte geschrieben. + title: Radiobuttons - Treffen Sie eine Auswahl # Beschriftung (optional) + name: test1 # Tabellenspalte + options: # Definition der Optionen + - label: Option 1 + value: v1 + - label: Option 2 + value: v2 + value: v2 # Definition von Vorgabewerten. Hier wird die Option v2 für neue Objekte vorausgewählt. - infoText: In dieses Feld dürfen nur Zahlen eingegeben werden # Hinweistext, der angezeigt wird über i-Symbol. +Datumsauswahl (type: date) +^^^^^^^^^^^^^^^^^^^^^^^^^^ -Gruppierungen (type: fieldSet) ------------------------------- +``Type: date`` erstellt ein Eingabefeld, in das Sie ein Datum eingeben können, entweder mit einem Textfeld, das die Eingabe überprüft, oder einer speziellen Schnittstelle zur Datumsauswahl. +Es erzeugt das Standard-SQL-Datum-String-Format "YYYY-MM-DD". -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. +.. image:: ../../../../figures/digitizer_datepicker.png + :scale: 80 .. code-block:: yaml - - 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%} + - type: date # Textfeld, das eine Datumsauswahl bereitstellt + title: favorite Date # Beschriftung (optional) + name: date_favorite # Referenz zur Tabellenspalte + attr: + min: '2020-01-01' # Legt das kleinste auswählbare Datum fest. + max: '2030-01-01' # Legt das größte auswählbare Datum fest. -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. +* **min**: Legt das kleinste auswählbare Datum fest. Wenn es auf null gesetzt ist, gibt es kein Minimum (optional). +* **max**: Legt das maximal auswählbare Datum fest. Wenn es auf null gesetzt ist, gibt es kein Maximum (optional). -.. image:: ../../../../figures/digitizer_coordinates.png - :scale: 80 -.. code-block:: yaml +Farbauswahl (type: colorPicker) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +Die Farbauswahl erstellt ein Eingabefeld, in das Sie einen Farbwert (in HEX-Form, z. B. #ff00ff) eingeben oder diesen über eine Farbauswahl auswählen können. - - 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)']] +.. image:: ../../../../figures/digitizer/digitizer_colorpicker.png + :scale: 80 -Die verfügbaren Parameter sind: +.. code-block:: yaml -* **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 + - type: colorPicker # Farbauswahl + title: 'Fill color' # Beschriftung (optional) + name: fill_color # Tabellenspalte + value: 'ff00ff' # Vordefinition eines Farbwertes -Dateiupload (type file) ------------------------ +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 @@ -846,47 +1036,40 @@ auf. Das Verzeichnis ist: -* ``/web/uploads/featureTypes/[tabellenname]/[spaltenname]/[dateiname].png`` +* `/web/uploads/featureTypes/[tabellenname]/[spaltenname]/[dateiname].png` Die in der Datenbank verlinkte URL ist: * ``http://localhost/mapbender/uploads/featureTypes/[tabellenname]/[spaltenname]/[dateiname].png`` - - .. code-block:: yaml - - 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. + - type: file # Typ file für das Hochladen von Dateien + title: Datei-Upload # Beschriftung (optional) + text: Laden Sie ein Bild. # Informationstext zum Feld (optional) + name: file_reference # Angabe der Datenbankspalte, in die der Speicher-Pfad geschrieben wird + attr: + 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. -Für die Ansicht von hochgeladenen Bildern kann die Bildanzeige dazugenommen werden. +Für die Ansicht von hochgeladenen Bildern kann die Bildanzeige via ``type: image`` verwendet werden. -Bildanzeige (type image) ------------------------- +Bildanzeige (type: image) +^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: ../../../../figures/digitizer_image.png :scale: 80 -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. +Für die Ansicht eines Bildes im Formular kann die Bildanzeige genutzt werden. Diese werden über die Angabe einer URL in einem Datenbankfeld oder einer URL über den src-Parameter dargestellt. +Bilder, die durch das Element Dateiupload in einer Tabellenspalte vermerkt sind, können somit auch direkt eingebunden und 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. -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. +* **src**: Url-Pfad oder Dateipfad (kann ein relativer Pfad sein). +* **name**: Url-Pfad oder Dateipfad, wird aus der Tabellenspalte übernommen (darf 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. .. code-block:: yaml @@ -895,182 +1078,129 @@ Das Bild lässt sich durch die Angabe von den beiden Parametern src und name ang 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. +.. warning:: **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. +Bitte beachten Sie, dass ein alternativer Hochladeort im Abschnitt ``featureType`` definiert werden kann. -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. +Dateireiter (type: tabs) +^^^^^^^^^^^^^^^^^^^^^^^^ -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: +Die Formularelemente können über ``type: tabs`` in verschiedenen Reitern dargestellt werden. .. code-block:: yaml - polygon: - [...] - toolset: - - type: drawPolygon - - type: drawRectangle - - type: drawDonut - - type: removeSelected - - -Suche in den Tabellen (inline Search) -------------------------------------- - -Über die Suche können Begriffe in der Tabelle gesucht werden. -Die aktivierte Sucheleiste erscheint über der Tabelle und nach der Eingabe eines Suchbegriffs werden alle Spalten dieser Tabelle durchsucht und deren Ergebnisse angezeigt. + formItems: + - type: tabs + children: + - title: '1. Basic information' # erster Reiter, Titel des Reiters + css: {padding: 10px} + children: + # Erster Reiter, Formulardefnition + - type: label + title: Welcome to the digitize demo. Try the new Mapbender feature! + ... + - title: '2. More information' # zweiter Reiter, Titel des Reiters + children: + # Zweiter Reiter, Formulardefinition + - type: label + title: Welcome to the digitize demo. Try the new Mapbender feature! + ... + + +Trennlinien (type: breakLine) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +Fügt ein einzelnes HTML
-Element ein. Unterstützt das Hinzufügen von HTML-Attributen über das attr-Objekt und eine benutzerdefinierte cssClass. .. code-block:: yaml - poi: - ... - inlineSearch: true # Suche in den Tabellenspalten (Standard: true) - ... + - type: breakLine # fügt eine einfache Trennlinie ein -Kontextmenü ------------ - -Über das Kontextmenü kann ein Objekt auf der Karte näher betrachtet werden. -Nach der Aktivierung lässt sich über den rechten Mausklick auf ein Objekt ein Kontextmenü öffnen. - -.. image:: ../../../../figures/digitizer_contextmenu.png - :scale: 80 +Erweiterte Formularfunktionen +----------------------------- -Elemente des Kontextmenüs: +* Definition von Popups +* Definition von Hilfetexten +* Definition von Pflichtfeldern +* Definition von regulären Ausdrücken für die Formatvorgabe bestimmter Feldinhalte +* Möglichkeit der Feature-Duplikation +* Event-Definitionen +* Styling +* Karten-Refresh nach Speichern. -* **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 <#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. +Definition Popup +^^^^^^^^^^^^^^^^ +Die folgenden Optionen können für ein Popup definiert werden: .. code-block:: yaml - 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. - - -.. image:: ../../../../figures/digitizer_clustering.png - :scale: 80 + popup: + title: POI # Definition des Formularfenster-Titels + height: 400 # Höhe des Formularfensters + width: 500 # Breite des Formularfensters + #width: 50vw # Breite auf Hälfte des Browserfensters -Definition der Clusterelemente: -* **scale:** Zoomstufe. -* **distance:** Distanz zwischen einzelne Features in Metern, die zusammengefügt werden. -* **disable:** Schaltet Clustering für die Zoomstufe ab. +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. .. code-block:: yaml - 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. + - 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. -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 :ref:`backend_de` mit dem Digitizer-Element bearbeitet wird, kann nur die Angabe per Instance-ID erfolgen. - - -.. image:: ../../../../figures/digitizer/layerinstance_id.png - :scale: 80 +Pflichtfelder +------------- +Das Objekt kann nicht gespeichert werden, wenn Pflichtangaben fehlen. Im Falle einer fehlenden Eingabe in einem Pflichtfeld wird das Feld mit einem roten Rahmen markiert und ein Text (mandatoryText) angezeigt, falls definiert. .. code-block:: yaml - poi: - [...] - allowEditData: true - refreshLayersAfterFeatureSave: # bei keiner Angabe in diesem Bereich erfolgt kein Karten-Refresh nach Speichern - - 17 - - 18 - - osm # Namensangabe nur bei Anwendungen unter applications/ möglich - [...] - -**Anmerkungen**: Karten-Refresh nach dem Speichern ist ab Version 1.2 möglich. Mehr Informationen unter: https://github.com/mapbender/mapbender-digitizer - + - type: [Angabe zum Feldtyp] # Jeder Feldtyp kann ein Pflichtfeld sein + attr: + placeholder: 'Das Feld ist ein Pflichtfeld....' # Der Text wird im Feld angezeigt und verschwindet bei der Eingabe. + # Der Text wird nicht gespeichert. + pattern: /^\w+$/gi # Sie können einen regulären Ausdruck definieren, um den Inhalt eines Feldes zu prüfen. + # Lesen Sie mehr https://wiki.selfhtml.org/wiki/JavaScript/Objekte/RegExp + # pattern: /^[0-9]+$/ # Prüft, ob die Eingabe eine Zahl ist. + required: true # true/required/false, Standard: false. + mandatoryText: Please choose a type! # Text, der angezeigt wird, bei fehlender oder falscher Eingabe im Pflichtfeld. + mandatory: /^\w+$/gi # Sie können einen regulären Ausdruck definieren, um den Inhalt eines Feldes zu prüfen. 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. +Bereits erfasste Objekte können dupliziert werden. Dies geht über einen **Duplizieren**-Button innerhalb des Erfassungsfensters eines selektierten vorhandenen Features, über das Kontextmenü oder über die Treffertabelle. +Damit das neue Objekt in der Karte besser erkannt werden kann, ist 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. +Der Button kann außerdem in Abhängigkeit von einem bestimmten Attributwert aktiviert werden. Dies bedeutet, dass ausschließlich bei entsprchenden Attributwerten (z.B. date > 0) die Duplizieren-Funktion erscheint. -* **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 +* **copy:** Duplizieren-Funktion einbinden. +* **enabled:** Duplizieren aktivieren (Standard: false). +* **data**: Angabe von Standardwerten für Attributfelder. +* **style**: Styling des kopierten Objekts (mehr dazu s.u. unter dem Bereich Darstellung). +* **on**: Events beim Duplizieren. .. code-block:: yaml poi: [...] - copy: # bei keiner Angabe in diesem Bereich können keine Objekte dupliziert werden - enable: true + copy: + enable: true # Aktivierung der Möglichkeit, Objekte zu duplizieren (Standard: false) data: date: 2017 - rules: - - feature.attributes.id > 10 style: label: "Dupliziertes Objekt" fillColor: "#ff0000" @@ -1082,28 +1212,33 @@ Der Duplizieren-Button kann in Abhängigkeit von einem bestimmten Attribut-Wert 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. +Es gibt mehrere Events, die zu einem Feature zugeordnet werden können, um Attribute vor oder nach einer Aktion zu manipulieren. -* **onBeforeSave**: Event vor dem Speichern von neuen/veränderten Informationen -* **onAfterSave**: Event nach dem Speichern von neuen/veränderten Informationen +* **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 +* **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 +* **onBeforeSearch**: Event vor dem Suchen im SearchField des Digitizers. +* **onAfterSearch**: Event nach dem Suchen im SearchField des Digitizers. -* **onBeforeRemove**: Event vor dem Löschen von Daten -* **onAfterRemove**: Event nach dem Löschen von Daten +* **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. +Im Unterschied zu den Save-Events arbeiten die Update-Events nur bei einer Aktualisierung der Daten, aber 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. +.. note:: 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. + +Es folgen einige Anwendungsbeispiele: + +Einfügen mehrerer Parameter in einem Event +"""""""""""""""""""""""""""""""""""""""""" + +Falls mehrere Parameter in einem Event gesetzt werden sollen, können diese durch ein Semikolon getrennt hintereinander aufgelistet werden, z.B. .. code-block:: yaml @@ -1111,7 +1246,8 @@ Im folgenden einige Anwendungsbeispiele. Falls mehrere Parameter in einem Event onBeforeSave: $feature->setAttribute('interests', 'maps'); $feature->setAttribute('name', 'test'); -**Speichern von festen Sachdaten in zusätzlichen Attributspalte:** +Speichern von festen Sachdaten in zusätzlichen Attributspalten +"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" Das folgende Beispiel zeigt, wie Daten beim Speichern in eine zusätzliche Attributspalte geschrieben werden 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. @@ -1120,9 +1256,11 @@ Das folgende Beispiel zeigt, wie Daten beim Speichern in eine zusätzliche Attri 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 werden können. Hier geschieht das mit der Spalte "group" und der Füllung mit den jeweiligen Gruppenrollen des Benutzers (userRoles) +Speichern von Gruppenrollen in zusätzlichen Attributspalten +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" + +Das folgende Beispiel zeigt, wie Mapbender-Benutzerdaten beim Speichern in eine zusätzliche Attributspalte geschrieben werden können. Hier geschieht das mit der Spalte "group" und der Füllung mit den jeweiligen Gruppenrollen des Benutzers (userRoles). .. code-block:: yaml @@ -1130,13 +1268,13 @@ Das folgende Beispiel zeigt, wie Mapbender-Benutzerdaten beim Speichern in eine onBeforeSave: $feature->setAttribute('group', implode(',', $userRoles)); -**Speichern von Sachdaten in zusätzlichen Attributspalten:** +Speichern von Sachdaten in zusätzlichen Attributspalten +""""""""""""""""""""""""""""""""""""""""""""""""""""""" -Das folgende Beispiel zeigt, wie Daten beim Speichern in eine zusätzliche Attributspalte geschrieben werden können. Hier geschieht das mit den Spalten "geom" und "geom2". Beim Speichern sollen die Daten von geom in das Feld geom2 geschrieben werden. +Das folgende Beispiel zeigt, wie Daten beim Speichern in eine zusätzliche Attributspalte geschrieben werden 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. -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 auf sie nicht als Feature zugegriffen werden, sondern nur über das jeweilige "Item", eine interne Digitizer Speicherstruktur. Diese "Items" orientieren sich am Formular und den dort angegebenen Attributen. +Da zum Zeitpunkt des Editierens die Geometrie noch nicht persistent in der Datenbank ist, kann auf sie nicht als Feature zugegriffen werden, sondern nur über das jeweilige "Item", was eine interne Digitizer-Speicherstruktur ist. Die Items orientieren sich am Formular und den dort angegebenen Attributen. .. code-block:: yaml @@ -1147,53 +1285,34 @@ Da zum Zeitpunkt des Editierens die Geometrie noch nicht persistent in der Daten Bei dem Event wird der Wert des Feldes "geom2" mit dem Wert des Feldes "geom" überschrieben. -**Speichern unterschiedlicher Geometrietypen:** +Speichern unterschiedlicher Geometrietypen +"""""""""""""""""""""""""""""""""""""""""" -Dieses Szenario ist zu einem konsturierten Beispiel erweiterbar, 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. +Dieses Szenario ist zu einem konstruierten Beispiel erweiterbar, 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. .. code-block:: postgres events: onBeforeInsert: | - $sql = "SELECT + $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, muss über das "Item" auf die Geometrie (geomline) zugegriffen werden. 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. - -.. code-block:: yaml - - 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?"; - +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, muss über das "Item" auf die Geometrie (geomline) zugegriffen werden. 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. 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 +* **default**: Definiert die normale Darstellung der Objekte auf der Karte. +* **select**: Darstellung der ausgewählten Objekte beim Klick-Ereignis. +* **unsaved**: Darstellung der nicht gespeicherten Objekte. + .. code-block:: yaml @@ -1201,45 +1320,145 @@ Darstellung (Styles) ... styles: default: - graphic: true strokeWidth: 5 - strokeColor: "transparent" + strokeColor: "#ff00ff" fillColor: '#c0c0c0' - fillOpacity: 1 - fillWidth: 2 - # label: ${name} ${type} - # labelOutlineColor: '#eeeeee' + fillOpacity: 0.5 pointRadius: 10 select: strokeWidth: 1 strokeColor: "#0e6a9e" fillOpacity: 0.7 fillColor: "#0e6a9e" - label: ${name} ${type} pointRadius: 10 - selected: + label: ${name} ${type} + fontColor: black + fontSize: 12 + fontFamily: 'Arial, Courier New, monospace' + fontWeight: bold + labelOutlineColor: white + labelOutlineWidth: 1 + labelYOffset: -18 + labelXOffset: -18 + unsaved: strokeWidth: 4 strokeColor: "#648296" fillOpacity: 1 - fillColor: "#eeeeee" - label: ${name} ${type} + fillColor: "#eeeeee" + label: 'Bitte speichern' 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] + +* **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}". +* **fontColor:** "#0000ff" #'${fontcolor}' Schriftfarbe. +* **fontSize:** Schriftgröße in Pixeln. +* **fontFamily:** Schriftart. +* **fontWeight:** Schriftdicke (Standard: normal). +* **labelOutlineColor:** Farbe der Umrandung der Beschriftung [Farbwert/transparent]. +* **labelOutlineWidth:** Breite der Umrandung der Beschriftung. +* **labelYOffset:** Beschriftungsversatz x (Standard: 0). +* **labelXOffset:** Beschriftungsversatz y (Standard: 0). + + +Es ist möglich, auf Grafiken zu verweisen: + +.. code-block:: yaml + + default: + graphic: true + externalGraphic: 'https://schulung.foss.academy/symbols/${symbol}.png' + graphicWidth: 30 + graphicHeight: 30 + + +* **graphic:** [true/false]. +* **externalGraphic:** Definition eines Links zu einer externen Grafik. In der Definition können Variablen verwendet werden. +* **graphicWidth/graphicHeight:** Definition der Breite und der Höhe in Pixeln. + + +CSS-Verhalten und Styling-Felder +"""""""""""""""""""""""""""""""" + +Jedem Eingabefeld können, unabhängig vom Typ, CSS-Verhaltens- und Stylinginformationen zugewiesen werden. Dies kann z.B. genutzt werden, um wichtige Felder hervorzuheben oder ein Attributfeld beim Bearbeiten eines anderen Feldes zu 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 + +.. code-block:: yaml + + 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 lastnameField = form.find("[name='lastname']"); + lastnameField.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(".data-manager-edit-data"); + var yearField = form.find("[name='year']"); + var value = inputField.val() + var year = value && value.match(/^\d{4}/)[0] || null; + yearField.val(year); + yearField.css("background-color","#ffc0c0"); + + +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 :ref:`map_de`-Element neu geladen. Damit werden Änderungen in WMS-Diensten direkt in der Karte sichtbar. Dieses Event wird nur gestartet, wenn **Speichern** aus dem Attributdialog verwendet wird. + +Ein Layer kann über den Namen oder die Instanz-ID angegeben werden: + +.. code-block:: yaml + + poi: + [...] + refreshLayersAfterFeatureSave: # bei keiner Angabe in diesem Bereich erfolgt kein Karten-Refresh nach Speichern + - 17 + - 18 + - osm # Namensangabe nur bei Anwendungen unter applications/ möglich + [...] + YAML-Definition für das Element "digitizer" in der Sidepane in der mapbender.yaml ================================================================================= -Diese Vorlage kann genutzt werden, um das Element in einer YAML-Anwendung einzubinden. +Im Workshop-Bundle finden Sie ein Beispiel für eine YAML-Definition. .. code-block:: yaml @@ -1251,4 +1470,3 @@ Diese Vorlage kann genutzt werden, um das Element in einer YAML-Anwendung einzub schemes: ... - diff --git a/de/elements/editing/digitizer/digitizer_functionality.rst b/de/elements/editing/digitizer/digitizer_functionality.rst index 87e22279f..c75ee4c53 100644 --- a/de/elements/editing/digitizer/digitizer_functionality.rst +++ b/de/elements/editing/digitizer/digitizer_functionality.rst @@ -1,17 +1,18 @@ .. _digitizer_functionality_de: Funktionen des Digitizers -************************* +========================= -Der Digitizer ermöglicht das Editieren von FeatureTypes. Diese basieren auf Punkt-, Linien- oder Polygongeometrien und ihren Sachdaten. Letztere werden in dem Formular des Digitizers angezeigt. Das Editieren der Geometrien geschieht über die Karte. Der Digitizer ermöglicht eine Vielzahl von Funktionen zur Erstellung und Bearbeitung von Geometrien: +Der Digitizer ermöglicht die Erstellung und Bearbeitung von Features. Die Features basieren auf Punkt-, Linien-, oder Polygongeometrien und ihren Sachdaten. Die Geometrien können über die Karte editiert werden. Die Sachdaten werden im Digitizer-Formular angezeigt. Insgesamt ermöglicht der Digitizer eine Vielzahl von Funktionen zur Erstellung und Bearbeitung von Geometrien: -* Erstellen von Punkten, Linien und Polygonen (Quadrate, Rechtecke, Kreise und Ellipsen) -* Verschieben von Geometrieobjekten -* Einfügen von Stützpunkten (bei Linien und Polygonen) -* Erfassung von Polygonen mit Enklaven +* Erstellen von Punkten, Linien und Polygonen (Rechtecke, Kreise und Ellipsen), +* Verschieben von Geoobjekten, +* Einfügen von Stützpunkten (bei Linien und Polygonen), +* Erfassung von Polygonen mit Enklaven, +* Snappen an Stützpunkten von angezeigten Objekten. -.. image:: ../../../../figures/de/Digitizer_geometries.png - :width: 75% +.. image:: ../../../../figures/Digitizer_geometries.png + :width: 100% Die folgenden Abschnitte stellen die Arbeit mit Digitizer gemäß der Standardkonfiguration genauer vor. @@ -20,48 +21,72 @@ Geometrien erstellen In der Standardkonfiguration kann der Nutzer über ein Dropdown-Menü zwischen drei verschiedenen Geometrietypen wählen: Punkt, Linie und Polygon. -**Punkte** +Punkte +^^^^^^ -Durch einen Klick auf den Button *"Punkt erstellen"* wird die Funktion aktiviert/deaktiviert. +Durch einen Klick auf den Button **Punkt erstellen** wird die Funktion aktiviert/deaktiviert. -.. image:: ../../../../figures/de/Digitizer_create_points.png - :scale: 80 +.. image:: ../../../../figures/Digitizer_create_points.png + :scale: 100 -**Linien** +Linien +^^^^^^ -Durch einen Klick auf den Button *"Linie erstellen"* wird die Funktion aktiviert/deaktiviert. +Durch einen Klick auf den Button **Linie erstellen** wird die Funktion aktiviert/deaktiviert. -.. image:: ../../../../figures/de/Digitizer_create_lines.png - :scale: 80 +.. image:: ../../../../figures/Digitizer_create_lines.png + :scale: 100 -**Polygone** +Polygone +^^^^^^^^ -Es können unterschiedliche Arten von Polygonen erstellt werden. Dies ist über eine Aktivierung des jeweiligen Buttons für Flächen, Rechtecke, Enklaven, Ellipsen oder Kreise möglich. +Es können unterschiedliche Arten von Polygonen erstellt werden. Dies ist über eine Aktivierung des jeweiligen Buttons für **Flächen**, **Rechtecke**, **Enklaven**, **Ellipsen** oder **Kreise** möglich. -.. image:: ../../../../figures/de/Digitizer_create_polygons.png - :scale: 80 +.. image:: ../../../../figures/Digitizer_create_polygons.png + :scale: 100 -Mithilfe der Maus kann nun die zuvor ausgewählte Geometrieart in der Karte erstellt werden. Anschließend öffnet sich ein Pop-up Fenster, welches das vordefinierte Sachdatenformular gemäß der Yaml-Konfiguration ausgibt und die Erfassung dieser zulässt. +Mithilfe der Maus kann nun die zuvor ausgewählte Geometrieart in der Karte erstellt werden. Anschließend öffnet sich ein Pop-up-Fenster, welches das vordefinierte Sachdatenformular gemäß der Yaml-Konfiguration ausgibt und die Erfassung dieser zulässt. Geometrien bearbeiten, speichern oder löschen --------------------------------------------- -Die Speicherung der Geometrien erfolgt in der jeweils definierten Datenbanktabelle. -Die Objekte werden in der Karte angezeigt und darüber -hinaus im Digitizer-Element in Form einer Tabelle aufgelistet. -Dies erleichtert die Verwaltung der Geometrien. -In der Tabelle können beliebige Spalten ausgegeben werden. Im Beispiel werden die Nummer (ID wird automatisch erzeugt) sowie Name jedes Objekts angezeigt. Es besteht die Möglichkeit, die Sortierung der Spalten zu ändern sowie die Tabelle zu durchsuchen. +Die Speicherung der Geometrien erfolgt in der jeweils definierten Datenbanktabelle. Die Objekte werden in der Karte angezeigt und darüber hinaus im Digitizer-Element in Form einer Tabelle aufgelistet. Dies erleichtert die Verwaltung der Geometrien. -In der Auflistung können nur Objekte des aktuellen Kartenausschnitts angezeigt werden **1**. Weiterhin besteht die Option, alle Objekte auszublenden **2** oder einzublenden **3**. Änderungen können für alle Objekte gespeichert werden **4**. Eine Bearbeitung wäre z.B. die Verschiebung von Objekten **5**. Nach Aktivierung dieses Buttons können Geometrien mithilfe der Maus verändert werden. +In der Tabelle können beliebige Spalten ausgegeben werden. Im Beispiel werden die Nummer (ID wird automatisch erzeugt) sowie der Name jedes Objekts angezeigt. Es ist möglich, die Sortierung der Spalten zu ändern und die Tabelle zu durchsuchen. -Es besteht weiterhin die Möglichkeit, nur einzelne Objekte auszublenden **6** sowie deren Modifikationen individuell abzuspeichern **8**. Veränderungen der Sachdaten sind ebenfalls möglich **7**. Zuletzt kann jedes Objekt gelöscht werden **9**. +Die Grundfunktionen in der Digitizer-Tabelle sind (von links nach rechts und von oben nach unten): -.. image:: ../../../../figures/de/Digitizer_edit.png - :scale: 80 +* Mit der Checkbox **Nur Objekte des aktuellen Kartenausschnitts anzeigen** können Sie diee Tabelle so filtern, dass nur Geometrien aus dem aktuellen Kartenausschnitt angezeigt werden. +* Es ist möglich, alle Features **neu zu laden**. +* Es ist ebenfalls möglich, alle Objekte auf der Karte **auszublenden** oder **einzublenden**. +* Sie können Änderungen für mehrere Objekte **Speichern**. +* Eine Schaltfläche zum **Zeichnen** von Geometrien (siehe oben). +* Ein Button, um Objekte zu **Bearbeiten**. +* Sie können Geometrien auch mit der Maus **Verschieben**. + +.. image:: ../../../../figures/Digitizer_editing.png + :scale: 100 + +Neben jedem Tabelleneintrag befinden sich außerdem Bearbeitungsfunktionen für einzelne Objekte. Diese Funktionen sind für alle Geometrietypen gleich. Folgende Funktionen stehen (von links nach rechts) zur Verfügung: -Die zuvor beschriebenen Funktionen sind identisch bei allen Geometrien. Es gibt außerdem noch die Option, Linien und Polygone zu modifizieren. Mit dieser Funktion können Stützpunkte eingefügt oder Eckpunkte verschoben werden. Durch Klick auf den Button *"Bearbeiten"* wird die Funktion aktiviert. Um ein Objekt nun zu modifizieren, muss dieses nun individuell durch einen Klick ausgewählt werden. +* Objekte **duplizieren**, +* **Stil bearbeiten**, +* Objekt **ausblenden** (und wieder **einblenden**), +* **Sachdaten ändern**, +* Bearbeitete Geometrien **Speichern**, +* Geometrien **Löschen**. -.. image:: ../../../../figures/de/Digitizer_edit_lines_polygons.png +Es gibt außerdem noch die Option, Linien und Polygone zu modifizieren. Mit dieser Funktion können **Stützpunkte** eingefügt oder **Eckpunkte** verschoben werden. Durch Klick auf **Bearbeiten** wird die Funktion aktiviert. Um ein Objekt zu modifizieren, muss es durch einen Klick ausgewählt werden. + +.. image:: ../../../../figures/Digitizer_move.png :scale: 80 + +Kontextmenü +----------- + +Für jede Funktion ist standardmäßig ein Kontextmenü verfügbar. Sie können das Kontextmenü über den rechten Mausklick auf ein Objekt öffnen. + +.. image:: ../../../../figures/digitizer_contextmenu.png + :scale: 80 diff --git a/en/elements/editing/digitizer.rst b/en/elements/editing/digitizer.rst index 9942c9fc7..b3d995cde 100644 --- a/en/elements/editing/digitizer.rst +++ b/en/elements/editing/digitizer.rst @@ -3,19 +3,21 @@ Digitizer ========== -The digitizer element allows the creation and editing of points, lines and areas on a map. In contrast to sketch, this element saves geometries in a table in a database. Currently Mapbender supports PostgreSQL. SpatiaLite and Oracle are available experimentally. Development was carried out in a way that digitizer can be extended to include other data sources such as OGC WFS as well. +The digitizer element enables the creation and editing of points, lines and areas on a map. In contrast to the :ref:`sketch element`, this element stores geometries in a database table. +Currently Mapbender supports PostgreSQL by default. SpatiaLite and Oracle are available experimentally. +Development was carried out in a way that digitizer can be extended to include other data sources (such as OGC WFS) as well. -In order to use the digitizer, one has to define a specific yaml-definition: +To use the digitizer, you need to configure it first. .. toctree:: - :maxdepth: 1 + :maxdepth: 2 digitizer/digitizer_configuration.rst - -More information about the functionality of the digitizer can be found here: + +Once you've configured the digitizer, you can start using the element's functions. .. toctree:: - :maxdepth: 1 + :maxdepth: 2 - digitizer/digitizer_functionality.rst + digitizer/digitizer_functionality.rst \ No newline at end of file diff --git a/en/elements/editing/digitizer/digitizer_configuration.rst b/en/elements/editing/digitizer/digitizer_configuration.rst index 9fd1619fd..a34678b93 100644 --- a/en/elements/editing/digitizer/digitizer_configuration.rst +++ b/en/elements/editing/digitizer/digitizer_configuration.rst @@ -3,46 +3,141 @@ Setting up of Digitizer ======================= -You can only use the element in the sidepane. +In an application, the Digitizer element can only be embedded into the sidepane. However, it is possible to add multiple instances. +The element itself is set up in the backend. For this, a YAML definition has to be adjusted accordingly. +The definition is used to configure the database connection, editable fields, display forms and other behaviours of the digitizer. .. image:: ../../../../figures/digitizer_configuration.png - :scale: 80 + :width: 100% + +* **Title:** Title of the element. Allows the implementation of several instances. +* **Schemes:** YAML definition of the element. +In addition to this, Digitizer needs access to a database with editable tables. +You have to define a new database configuration to be able to connect with the geo database. Read more about this under :ref:`yaml`. -* **Title:** Title of the element. This is displayed in the layouts list and allows you to define several elements. -* **Target:** (ID) of the map. -* **Schemes:** YAML-Definition of the element Digitizer +.. warning:: Do **not** place spatial data into the "default" Mapbender database containing your Doctrine entities. You will encounter errors running Doctrine schema updates. + +.. hint:: If errors occur in the database, fields or form, various error messages will appear. The productive environment will only give a general error message. If you want to see the exact error message, you should use the development environment. Find more under :ref:`en/installation/installation_configuration:Production and Development environment and Caching`. -The Ditigitzer needs access to a database where the editable tables are. You have to define a new database configuration to be able to connect with the geo database. -Read more about this under :ref:`yaml`. +This page is divided into several chapters: -The definition of the Digitizer is done in YAML syntax in the textarea configuration at schemes. Here you define the database connection, the editable table, the form to display the table, the attribute form and other behavior. +1. :ref:`en/elements/editing/digitizer/digitizer_configuration:SQL for the demo tables` uses SQL commands to create a database connection and three demo tables for the digitizer. +2. :ref:`en/elements/editing/digitizer/digitizer_configuration:YAML definition` gives a YAML configuration example for a fully configured Digitizer instance. +3. :ref:`en/elements/editing/digitizer/digitizer_configuration:configuration` explains the functional scope of the features built into the YAML block (and more Digitizer functions). -.. hint:: If errors occur in the database, fields or form, various error messages will appear. Here, the productive environment will only give a general error message. If you want to see the exact error, you should call the page as development environment. Find more under en/quickstart:Start Mapbender in a productive environment. +SQL for the demo tables +----------------------- -* **debug:** Display error messages, e.g. syntax error in SQL [experimental] +The following SQL statements must be executed in your geodata database to create the three table for the demo. With them you can test the Digitizer functionality using the :ref:`en/elements/editing/digitizer/digitizer_configuration:YAML definition`. -.. code-block:: yaml +.. note:: The `PostGIS extension `_ must be configured in the database. - poi: - [...] - debug: true - [...] + +.. code-block:: postgres + + CREATE TABLE public.poi ( + gid serial PRIMARY KEY, + name varchar, + type varchar, + abstract varchar, + public boolean, + date_favorite date, + year int, + title varchar, + firstname varchar, + lastname varchar, + email varchar, + interests varchar, + category varchar, + user_name varchar, + group_name varchar, + modification_date date, + my_type varchar, + file_reference varchar, + x float, + y float, + city varchar, + style text, + fill_color varchar, + geom geometry(point,4326) + ); + +.. code-block:: postgres + + CREATE TABLE public.lines ( + gid serial PRIMARY KEY, + name varchar, + type varchar, + abstract varchar, + public boolean, + date_favorite date, + year int, + 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, + style text, + fill_color varchar, + geom geometry(linestring,4326) + ); + +.. code-block:: postgres + + CREATE TABLE public.polygons ( + gid serial PRIMARY KEY, + name varchar, + type varchar, + abstract varchar, + public boolean, + date_favorite date, + year int, + 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, + style text, + fill_color varchar, + geom geometry(polygon,4326) + ); -YAML-Definition for the element Digitizer in the textarea schemes ------------------------------------------------------------------ +YAML definition +--------------- -In the following YAML block, the example definition for three Digitizer forms is included. Copy the following block into your Digitizer element to test the capture of points, lines, and polygons. -You must first create the database connection and the three demo tables. The SQL commands for creating the tables can be found below. -The functionality of the built-in features and additional functions are explained in more detail in this example. +The following YAML block contains definitions for three Digitizer forms. +Copy and paste it in its entirety under **schemes** in the backend mask of the element to configure a Digitizer element for points, lines and polygons. .. code-block:: yaml poi: label: point digitizing - inlineSearch: true + minScale: 5000 + maxScale: 20000 + maxResults: 500 featureType: connection: search_db table: poi @@ -50,12 +145,27 @@ The functionality of the built-in features and additional functions are explaine geomType: point geomField: geom srid: 4326 - openFormAfterEdit: true - zoomScaleDenominator: 500 - allowEditData: true - allowDelete: true - allowDigitize: true - useContextMenu: true + allowEditData: true # Allow attribute editing (default: true) + allowDelete: true # Allow user to remove features from the database (default: true) + allowDigitize: true # Allow geometry creation and editing (default: true) + roles: #Show this schema only to users with (at least one of) these roles + - root + - ROLE_GROUP_EDITING + displayPermanent: true # Keep features visible on map even after switching to a different schema + displayOnInactive: true # Keep features visible on map even after deactivating Digitizer + continueDrawingAfterSave: # Keep drawing tool active after creating and saving a new feature (~fast batch mode feature creation) + printable: false + allowChangeVisibility: true + inlineSearch: true + searchType: currentExtent + pageLength: 5 # Limits the number of rows per page (default 16) + tableFields: + gid: + label: Nr. + width: 20% + name: + label: Name + width: 80% toolset: - type: drawPoint - type: moveFeature @@ -79,6 +189,15 @@ The functionality of the built-in features and additional functions are explaine strokeColor: '#0e6a9e' fillOpacity: 0.7 pointRadius: 10 + unsaved: + strokeWidth: 3 + strokeColor: "#f0f0f0" + fillColor: "#ffffff" + fillOpacity: 0.5 + pointRadius: 6 + label: 'Please save' + fontColor: red + fontSize: 18 formItems: - type: tabs children: @@ -135,8 +254,8 @@ The functionality of the built-in features and additional functions are explaine options: {maps: maps, reading: reading, swimming: swimming, dancing: dancing, beer: beer, flowers: flowers} - type: date title: favorite Date - name: date_favorite - mandatory: true + name: date_favorite + mandatory: true css: {width: 25%} - type: breakLine - type: breakLine @@ -156,7 +275,6 @@ The functionality of the built-in features and additional functions are explaine srid: 4326 openFormAfterEdit: true allowDelete: true - useContextMenu: true toolset: - type: drawLine - type: modifyFeature @@ -258,603 +376,706 @@ The functionality of the built-in features and additional functions are explaine options: {A: A, B: B, C: C, D: D, E: E} -SQL for the demo tables ------------------------ +Configuration +============= -The following SQL commands must be executed in your database. You create three demo tables so that the individual functions can be tested using the YAML definition shown above. +The following chapter explains the individual components of the element that can be included into the YAML configuration, offering the base structure that is used in the Digitizer. -.. code-block:: postgres - 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) - ); +Basic definition +---------------- -.. code-block:: postgres +A basic definition for a Digitizer capturing instance (in this example for *poi*) may look like the following YAML snippet. - 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) - ); +.. code-block:: yaml -.. code-block:: postgres + poi: + label: 'point digitizing' + minScale: 1000 + maxScale: 5000 + maxResults: 500 + zoomBuffer: 100 + filterUser: false + trackUser: false + featureType: + connection: geodata_db + table: poi + uniqueId: gid + geomType: point + geomField: geom + srid: 4326 + filter: null + styleField: style + userColumn: user_name + allowCustomStyle: true + allowChangeVisibility: true + allowCreate: true + allowDelete: true + allowDigitize: true + allowEditData: true + allowRefresh: true + continueDrawingAfterSave: true + displayPermanent: true + displayOnInactive: true + refreshLayersAfterFeatureSave: + - wms_point_layer + inlineSearch: true + searchType: currentExtent + pageLength: 5 + printable: true + toolset: + - + type: drawPoint + - + type: moveFeature + popup: + title: 'point test suite' + width: 500px + styles: + select: + strokeWidth: 3 + strokeColor: '#00ffff' + fillColor: '#FF00ff' + fillOpacity: 0.5 + pointRadius: 20 + label: '${name}' + tableFields: + gid: + label: Nr. + width: 20% + name: + label: Name + width: 80% + formItems: + - + type: label + title: 'Welcome to the digitize demo. Try the new Mapbender feature!' + - + type: input + title: Name + name: name + copyClipboard: true + infoText: 'Info: Please give a name to the new object.' + mandatoryText: 'Mandatory Field: Please give a name to the poi.' + required: true + css: + color: green + attr: + placeholder: 'Please give a name to the poi.' + - + type: input + title: Title + required: false + name: title - 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) - ); - -Configuration -============= +The possible options are: + +* **label:** Label of the Digitizer instance. +* **minScale:** Minimum scale denominator for visualizing features. +* **maxScale:** Maximum scale denominator for visualizing features. +* **featureType:** Connection to the database. + * connection: Name of the database connection (see `packages/doctrine.yaml`). + * table: Name of the feature table. + * uniqueId: Column name of the unique identifier (Default if empty: [id]). + * geomType: Geometry type - point, line, polygon, or multipolygon. + * geomField: Name of the geometry column. + * srid: Coordinate reference system of the geometry column as EPSG code (e.g. 4326). + * filter: Data filters for values in a defined column (e.g. filter: interests = 'maps'). + * userColumn: Stores the user name on save (see filterUser/trackUser). + * styleField: Column to store the style for a feature. +* **allowChangeVisibility:** Offer buttons to toggle feature visibility (default: true). +* **allowCreate:** Allow feature creation (default: true). +* **allowDelete:** Allow data deletion (default: true). +* **allowDigitize:** Allow geometry creation and editing (if false, no Digitizer buttons will appear (new Point, move, etc.). Attribute editing may still be allowed via allowEdit (default: true). +* **allowEditData:** Allow attribute editing (default: true). +* **displayOnInactive:** The current FeatureType will still be displayed on the map, although Digitizer is deactivated in the sidepane (Accordion, Tabs) [true/false]. If switched to true, this option is a bit intricate, due to the still activated Digitizer events. For experienced users, it will be helpful in some scenarios. +* **allowCustomStyle:** Allow user-specific styles for features in the map (default: false). For each feature you can set unique styles. If not set, the default style is used. Needs ``styleField`` definition in featureType section. -The following chapters explain the individual components of the Digitizer that build up the base-structure and which can be used in the formular. + .. image:: ../../../../figures/digitizer/stylemanager.png + :width: 100% + +* **allowRefresh:** Offer a button to refresh data (for tables frequently modified by several users) (default: false). +* **continueDrawingAfterSave:** Keep the drawing tool active after creating and saving a new feature. +* **displayPermanent:** Keep features visible on the map, even after switching to a different schema (default: false). +* **displayOnInactive:** Keep features visible on map, even after deactivating Digitizer (default: false). +* **pageLength:** Limits the number of rows per page (default: 16). +* **refreshLayersAfterFeatureSave:** List of Mapbender source instance IDs/names (see :ref:`en/backend/applications/layerset:layerset-instances`) that will reload after any item is created, updated or deleted (default: none). + +.. code-block:: yaml + refreshLayersAfterFeatureSave: + - mapbender_users # or WMS InstanceID -Feature basic definition ------------------------- -A basic definition, here for the poi-example, may look like the following snippet: +* **roles:** List of roles. Show this schema only to users with (at least one of) these roles. .. code-block:: yaml - 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: - [...] + roles: #Show this schema only to users with (at least one of) these roles + - root + - ROLE_GROUP_EDITING -The possible options are: -* **label:** Label of the Digitizer popup -* **minScale:** Minimum scale, where the features should be displayed in the map (e.g. minscale: 5000 = show from a scale 'over' 1:5000, when zooming out). -* **featureType:** Connection to the database - * connection: Name of the database-connection from the parameters/doctrine.yaml - * table: Table-name in which the FeatureTypes are stored - * uniqueId: Column-name with the unique identifier - * geomType: Geometry-type - * geomField: Column-name in which the geometry is stored - * srid: Coordinate-system in EPSG-code - * filter: Data filters for values ​​in a defined column, e.g. filter: interests = 'maps' -* **openFormAfterEdit:** After creating a geometry the form popup is opened automatically to insert the attribute data (default: true) -* **zoomScaleDenominator:** Zoom-scales to use for zooming to a feature. -* **allowEditData:** Allow or disable functions to edit or remove data. [true/false]. The Save button is always visible. -* **allowDigitize:** Allow to save data [true/false]. -* **allowDelete:** Allow to delete data [true/false]. The Delete button is always visible. -* **allowDigitize:** Allow to create new features [true/false]. if false, no Digitizer buttons will occur (new Point, move, etc.). -* **useContextMenu:** Show the context-menu of a feature. [true/false] -* **allowCancelButton:** Show the Cancel button [true/false]. See `Save, Delete, Cancel <#save-delete-cancel>`_. -* **allowDeleteByCancelNewGeometry:** If true: When you create a new feature, the Cancel button will behave like the Delete button: The feature is removed from the map and the table. This is not the case if you edit an existing feature. [true/false] -* **displayOnInactive:** The current FeatureType will still be displayed on the map, although the Digitizer is deactivated in the Sidepane (Accordion, Tabs) [true/false]. If switched to true, this option is a bit tricky, due to the still activated Digitizer events but will be helpful for experienced users. -* **allowLocate:** Navigation to a feature via the tabs-keyboard-button, simple for operation without mouse. [True / false]. An extra "zoomTo" Button is displayed for each feature. - - .. image:: ../../../../figures/digitizer/allowlocate.png - :scale: 80 +Combination schema +------------------ - -* **allowChangeVisibility:** Allow to change the visibility of one feature in the map (visible / invisible). [true/false]. An Eye Symbol is displayed, which allows to hide or display each feature indiviudally. +If a schema defines a combine setting (``combine``), it is treated as a combination schema. Data from multiple other schemas is then displayed together. The entries in the combine list must be the names of the sub-schemas to be combined. - .. image:: ../../../../figures/digitizer/allowchangevisibility.png - :scale: 80 +* A schema with ``combine`` only allows a reduced set of other settings. +* It may define roles to limit user access to the whole combination. +* It may define table to explicitly specify table formatting of data common to all referenced sub-schemas. +* A schema referenced by a combine list may not itself define combine. - -* **showVisibilityNavigation:** Allow to change the visibility of all features in the map (visible / invisible). [true/false] - - .. image:: ../../../../figures/digitizer/showvisibilitynavigation.png - :scale: 80 +.. code-block:: yaml -.. * **displayPermanent:** FeatureTypes are displayed permanently (with explicit, active or select) [true/false] + schemes: + combine_schemes_together: + label: combine schemes (in this case poi and line) + searchType: currentExtent + combine: + - poi + - line + roles: # Show this schema only to users with (at least one of) these roles + - root + - ROLE_GROUP_EDITING + + +User specific data +------------------ +Data shown in each schema can be separate for different users. -Experimental: +Each schema may define: -* **allowCustomerStyle:** Allow user-specific styles for features in the map [true/false]. This feature is experimental: For each feature you can set unique styles. +* **filterUser** Keep data separate for each user (default: false). Needs definition of userColumn in featureType. +* **trackUser** Store the creating / modiying user (default: false). Can be done without actually filtering selection. Needs definition of userColumn in featureType. - .. image:: ../../../../figures/digitizer/showvisibilitynavigation.png - :scale: 80 +Setting either of these to true additionally requires ``userColumn`` (string) to be defined in the dataStore/featureType definition. This must name a table column of sufficient length to store the user name. - A style-manager is used to let you set the unique styles. +.. hint:: Note that with ``filterUser: true``, *trackUser* is implied and its setting, if present, is ignored. - .. image:: ../../../../figures/digitizer/stylemanager.png - :scale: 80 +.. code-block:: yaml + poi: + label: 'point digitizing' + filterUser: true + trackUser: true + featureType: + connection: geodata_db + table: poi + uniqueId: gid + geomType: point + geomField: geom + srid: 4326 + userColumn: user_name -Definition of the popup ------------------------ +Definition of the available toolsets (Toolset Type) +--------------------------------------------------- -In connection with the digitization, very complex forms can be generated for the acquisition of data. - +Each schema may define a toolset setting to configure the types of drawing tools available during geometry creation. This should be a list of strings, or ``null`` for auto-configuration (which is the default). -.. image:: ../../../../figures/digitizer.png - :scale: 80 -The following option for the construction of the forms are available: - -* Define more than one feature type for digitization. You can switch from one feature type to another with a select box. -* It is possible to define a filter to only query a subset of your database table. -* Textfields -* Selectboxes, Multiselectboxes -* Checkboxes and Radiobuttons -* Textareas -* Datepicker -* File upload and Image Display -* Definition of tabs -* Definition breakLines -* Definition of Text -* Mandatory fields, regular expressions to validate the field input -* Definition of help texts -* Refresh after save -* Possibility to copy entered information from a form into the clipboard via a button +Toolset types +^^^^^^^^^^^^^ +* **drawPoint** - Draw a point. +* **drawLine** - Draw a line. +* **drawPolygon** - Draw a polygon. +* **drawRectangle** - Draw a rectangle. +* **drawCircle** - Draw a circle. +* **drawEllipse** - Draw an ellipse. +* **drawDonut** - Draw a donut (enclave). +* **modifyFeature** - Move the vertices of a geometry. +* **moveFeature** - Move the whole geometry. -.. image:: ../../../../figures/digitizer_with_tabs.png - :scale: 80 +YAML definition of toolset types +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. code-block:: yaml - popup: # Define the form as a popup. Further experimental adaptations here: http://api.jqueryui.com/dialog/ - title: POI # Definition of the popup title - height: 400 # height of the popup - width: 500 # width of the popup + polygon: + [...] + toolset: + - type: drawPolygon + - type: drawRectangle + - type: drawDonut - #modal: true # Everything except the form window is grayed out and the position and size of the window is fixed for the duration of the data collection. - #position: {at: "left+20px", my: "left top-460px"} # Position of the popup in the browser area +Some example configurations: + +* If ``toolset`` is set as an empty list, no geometry creation tools will be offered. +* If ``toolset`` is null or not set, and the connected feature type declares its geomType, Digitizer will reduce the selection of tools to to those compatible with the ``geomType`` (e.g., no line drawing for datasets containing only points or polygons). +* If neither ``toolset`` nor the ``geomType`` are defined, all supported tools are offered. +* If feature modification is allowed (via ``allowDigitize``/``allowEdit``), vertex modification and feature translation tools will also be offered. +* If ``allowCreate: false``, no creation tools from the toolset setting will be offered. ``drawDonut`` (inherently a modification, not creation tool) may still be offered, if editing is allowed. Definition of the feature table ------------------------------- -The Digitizer provides an object table. It can be used to navigate to features (zoom on the objects) and open the editing form. The object table can be sorted. +The Digitizer provides an feature table in the sidepane. It can be used to navigate to features and open their editing form. The table can be filtered and sorted. The width of the individual columns can optionally be specified in percent or pixels. -* **tableFields:** define the columns for the feature table. - * definition of a colum: [table column]: {label: [label text], width: [css-definition, like width]} -* **searchType:** search extent in the map, display of all features in the result table or only features displayed in the current extent [all / currentExtent] (default: currentExtent). -* **showExtendSearchSwitch:** Activate or deactivate the display of the searchType selectbox for searching in the curret extent [true/false] -* **view:** Settings for the object result table - * **type**: Templatename [table] - * **settings**: Settings for the functions of the result table *(Newly added, not fully documented!)* +* **tableFields:** Define the columns for the feature table. (default - display primary key only). + * definition of a column: ``[table column]: {label: [label text], width: [css-definition, like width]}``. +* **searchType:** Initial state of a checkbox for limiting feature loading to current visible map portion. [all/currentExtent] (default: currentExtent). +* **inlineSearch:** Allows to search in the table (default: true). +* **paging:** De/activate paging, showing several pages in the feature table (default: true). +* **pageLength:** Define the length of a page when paging is activated (default: 16). -You can find more detailed information on possible configurations under https://datatables.net/reference/option/. +You can find more detailed information on possible configurations `here `_. .. code-block:: yaml + poi: + [] searchType: currentExtent - showExtendSearchSwitch: true + pageLength: 10 + inlineSearch: 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"]] # 1 | 2 presort columns - - -Tabs (type tabs) ----------------- + gid: + label: Nr. + width: 20% + name: + label: Name + width: 80% -Form elements can be placed unto different Tabs. The formItem type "tabs" is used for this. -.. code-block:: yaml +Search in the tables (inline Search) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - formItems: - - type: tabs # Type tabs creates tabs in the popup - children: # The tabs are defined as sub-objects (children) of the form. - - type: form - title: Basic information # title of the tabs - css: {padding: 10px} - children: # Multiple subobjects in groups can be used to arrange data in the form next to each other - - type: label - title: Welcome to the digitize demo. Try the new Mapbender feature! - ... +You can use the inline search to search for an element in the table. +The activated search bar will be displayed above the table. After entering a search request, it shows all the search results for the records of the table. -For each input field the CSS-behavior and styling information can be assigned, regardless of the type. This can be used, for example, to highlight important fields or to fill an attribute field when editing another field. +.. code-block:: yaml -parameters: + poi: + ... + inlineSearch: true # true: allows the search in the table (default: true). + ... -* 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 -.. code-block:: yaml +Configuring forms +----------------- - 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: Date - css: {width: 30%} - # Highlight the year if you edit the date-field and autom. insert the year from the date - 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"); +Very complex forms can be defined to collect attributes for your features. Each schema configuration contains a list of (potentially nested) objects under ``formItems``, defining the contents and structure of the form shown when an item is created or edited. +.. hint:: Note that this form will also be used purely as a detail display vehicle even if editing is disabled. -Text fields (type input) ------------------------- +.. image:: ../../../../figures/digitizer.png + :width: 100% + +The following options for the configuration of the forms are available as type: + +* Textfields (type: input). +* Text (type: label or type: text). +* Textareas (type: textArea). +* Definition of html (type: html). + +* Checkboxes (type: checkbox). +* Selectboxes, Multiselectboxes (type: select). +* Radiobuttons (type: radioGroup). + +* Datepicker (type: date). +* Color picker (type: colorPicker). + +* File upload (type: file). +* Image Display (type: image). + +* Definition of tabs (type: tabs). +* Break line (type: breakLines). + + +Form fields +^^^^^^^^^^^ + +Form input fields come in a multitude of different types, controlled by the ``type`` value. All inputs share a common set of configuration options: + + +.. list-table:: + :widths: 20 20 40 10 + :header-rows: 1 + + * - name + - type + - description + - default + * - type + - string + - Type of form input field (see below) + - -none- + * - name + - string + - Table column mapped to the input + - -none- + * - value + - string + - Initial field value on newly created items + - -none- + * - title + - string + - Label text for form input field + - -none- + * - attr + - object + - Mapping of HTML attributes to add to the input + - -none- + * - infoText + - string + - Explanatory text placed in a tooltip next to the label + - -none- + * - css + - object + - Mapping of CSS rules to add to the form group (container around label and input) + - -none- + * - cssClass + - string + - Added to the class attribute of the form group (container around label and input) + - -none- -.. code-block:: yaml - - type: input # element type definition - title: Title for the field # labeling (optional) - name: column_name # reference to table column (optional) - copyClipboard: false # true/false. if true, specify a button that copies entered information to the clipboard (default: false) (optional) - mandatory: true # specify mandatory field (optional) - mandatoryText: You have to provide information. # text occurs if the column is empty on save - cssClass: 'input-css' # css class to use as style for the input field (optional) - value: 'default Text' # define a default value (optional) - placeholder: 'please edit this field' # placeholder appears in the field as information (optional) +.. image:: ../../../../figures/digitizer_with_tabs.png + :scale: 80 -Selectbox (selectbox or multiselect [type select]) --------------------------------------------------- +Text fields (type: input) +^^^^^^^^^^^^^^^^^^^^^^^^^ -By defining a selectbox, predefined values can be used in the form. -You can choose between a selectbox with a selectable entry (type select) or a multiselectbox with several selectable entries (type multiselect). +Text fields are produced via the ``type: input`` flag. +.. code-block:: yaml -**(1) select - one selectable entry** + - type: input # element type definition + title: Title for the field # Definition of a labeling (optional, if not defined no labeling is set) + name: column_name # Reference to table column + copyClipboard: false # Offer a button that copies entered information to the clipboard (default: false) (optional) + #mandatory: true # Specifies a mandatory field (optional), please use required instead + infoText: "Info: Please emter Information." # Offer a button that that provides Intormation on mouse-over (optional) + mandatoryText: You have to provide information. # Define text that is shown on save if no content is provided for a mandatory field (optional) + required: true + cssClass: 'input-css' # css class to use as style for the input field (optional). + value: 'default Text' # Define a default value (optional) + css: # CSS definition (optional) + color: green + attr: + placeholder: 'please edit this field' # placeholder appears in the field as information when field is empty (optional) + + +* **title:** Definition of a labeling (optional - if not defined, no labeling is set). +* **name:** Reference to table column (required). +* **copyClipboard:** Offer a button that copies entered information to the clipboard (optional, default: false). +* **infoText:** Offer a button that provides information on mouseover (optional). +* **mandatoryText:** Define a text that is shown on save if no content is provided for a mandatory field (optional). +* **value:** Define a default value (optional). +* **css:** CSS definition (optional). +* **cssClass:** Added to the class attribute of the form group (container around label and input). + +Attributes (attr) +* **placeholder:** placeholder appears in the field as information (optional) +* **required:** Specifies a mandatory field (optional, default: false) + + +Customization by attr object definitions +"""""""""""""""""""""""""""""""""""""""" + +Many common customizations for inputs can be performed purely with the attr object. E.g. ``type: input`` can be restricted to allow numbers only by overriding its HTML type attribute; all inputs can be made *required* or *readonly*. .. code-block:: yaml - - type: select # element type definition - title: select a type # labeling (optional) - name: my_type # reference to table column (optional) - copyClipboard: false # specify button that copies chosen values to the clipboard (optional). [true/false] (default: false). - multiple: false # define a multiselect (default: false) - options: # definition of the options (key, value) - 1: pub - 2: bar - 3: pool - 4: garden - 5: playground + formItems: + - type: input + name: strictly_formatted_column + title: Strict input pattern demo + required: true + attr: + pattern: '\w{2}\d{3,}' + placeholder: Two letters followed by at least three digits + - type: input + name: numeric_column + title: Numbers only + required: true + attr: + type: number + min: 10 + max: 200 + step: 10 + - type: textArea + name: text_column + title: Very large text area + attr: + rows: 10 -**(2) multiselect - several selectable entries** - -The Multiselect-Box is activated by the attribute "multiple: true". You can choose multiple entries in the selectbox. The usage and their requirements of the database may vary. In general with the example above, you can switch the "interests" in the POIs to multiselects. The database fields is still a character varying. +Element groups (type: fieldSet) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +Elements can be grouped together in one row to provide logical connections or to save space. To define a group, you have to set ``type: fieldSet`` and afterwards define the children which shall be grouped. +For every children you can define a css parameter, for example a width to control the space for each element. .. code-block:: yaml - - - type: select - multiple: true - title: Interests - name: interests - copyClipboard: false - options: - maps: maps - reading: reading - swimming: swimming - dancing: dancing - beer: beer - flowers: flowers - -**Notes:** From Digitizer version 1.2 and up, the multiple selection provides an easier mechanism to choose an entry, which also allows a search in the drop-down-list. The navigation through the list is possible via keyboard. Possible entries are highlighted during typing. An already chosen entry can be removed by clicking the small "x" symbol. -Check up-to-date information about digitizer versions: https://github.com/mapbender/mapbender-digitizer - -.. image:: ../../../../figures/digitizer/digi_multiselecttool.png - :scale: 80 - - -The SQL (if maps and reading were chosen): - -.. code-block:: postgres + - type: fieldSet # Grouping of fields, regardless of field type + children: # Define the group elements by 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% - gisdb=> select interests from poi where gid=3; - interests - -------------- - maps,reading - (1 row) -The keywords are saved in the database (for example: "dancing: Tanzen" and "flowers: Blumen" stores "dancing,flowers"). It is possible to copy several values to the clipboard with CopyClipboard: true. +Text/Label (type: label) +^^^^^^^^^^^^^^^^^^^^^^^^ +With ``type: label`` you can write a non-editable text to the form window. .. code-block:: yaml - - type: select # element type definition - title: select some types # labeling (optional) - name: my_type # reference to table column (optional) - copyClipboard: true # Button which copies chosen values to the clipboard (optional) - multiple: true # define a multiselect (default: false) - options: - a: a # definition of the options (key, value) - b: b - c: c + - type: label # label writes a non-editable text to the form window. + text: 'Please give information about the poi.' # define a text + css: + color: red -**Get the options for the selectbox via SQL** +Textareas (type: textArea) +^^^^^^^^^^^^^^^^^^^^^^^^^^ -With a SQL request, the values of the selectbox can be directly pulled from the database. In this case, the key value mapping is not possible and only the indices of the entries can be stored. +Similar to the text field via ``type: input``, text areas can be created that can contain several lines using ``type: textArea``. .. code-block:: yaml - - type: select # element type definition - title: select some types # labeling (optional) - name: my_type # reference to table column - connection: connectionName # Define a connection selectbox via SQL - sql: 'SELECT DISTINCT key, value FROM tableName order by value' # get the options of the + - type: textArea # Typ textArea creates a text area + rows: 4 # Number of rows for the text area + title: Description # Label (optional) + name: abstract # table column +* **rows**: Number of rows for the text area. -Text/Label (type label) ------------------------ +Write HTML (type: html) +^^^^^^^^^^^^^^^^^^^^^^^ + +``Type: html`` allows you to define html (e.g., button or links). + +.. image:: ../../../../figures/digitizer/digitizer_html.png + :scale: 80 .. code-block:: yaml - - type: label # element type definition, label writes a non-editable text to the form window. - text: 'Please give information about the poi.' # define a text + - type: html # allows to define html + html: '

Read more at the Mapbender-Website!
Enjoy Mapbender.

' -Text (type text) ----------------- -Texts can be defined as a label in the form. In this case, fields of the data source can be accessed by using JavaScript. +Checkboxes (type: checkbox) +^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +``Type: checkbox`` creates an on/off checkbox. .. code-block:: yaml - - type: text # Type text for generating dynamic texts from the database - title: Name # Label (optional) - name: name # Name of the field (optional) - css: {width: 80%} # CSS definition (optional) - text: data.gid + ': ' + data.name - # Text definition in JavaScript - # data - data is the object, that gives access to all fields. - # z.B.: data.id + ':' + data.name + - type: checkbox # Type checkbox creates a checkbox. When activated, the specified value is written to the database. + title: Is this true? # Label (optional) + name: public # table column + value: true # Initial field value on newly created items (true/false, default: false) -Textareas (type textarea) -------------------------- +Selectbox or multiselect (type: select) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -Similar to the text field via type input (see above), text areas can be created that can contain several lines using type textArea. +By defining a selectbox, predefined values can be used in the form. +You can choose between a selectbox with a selectable entry (``type: select``) or a multiselectbox with several selectable entries (``type: multiselect``). -.. code-block:: yaml - - type: textArea # Typ textArea creates a text area - rows: 4 # Number of rows for the text area that appears when the form is opened. Field can be expanded by mouse in the form. - name: beschreibung # table column - title: Bestandsaufnahme Bemerkung # Label (optional) +(1) select - one selectable entry +""""""""""""""""""""""""""""""""" +.. code-block:: yaml -Breaklines (type breakLine) ---------------------------- + - type: select # element type definition + title: select a type # labeling (optional) + name: type # reference to table column + select2: true # Activates full text search for the selectbox (please note for multi: true full text search is activated by default) + maximumSelectionLength: 2 # define the maximum number of possible selections (needs select2: true) + copyClipboard: false # specify button that copies chosen values to the clipboard (optional). [true/false] (default: false). + infoText: 'Help: Please choose a type.' + attr: + multiple: false # define a multiselect (default: false) + options: # definition of the options (key, value) + '': 'Please select a type...' + 'A': 'Type A' + 'B': 'Type B' + 'C': 'Type C' + 'D': 'Type D' .. code-block:: yaml - - type: breakLine # element type definition, will draw a line + options: + - label: 'Please select a type...' + value: '' + - label: 'Type A' + value: 'A' + - label: 'Type B' + value: 'B' + - label: 'Type C' + value: 'C' + - label: 'Type D' + value: 'D' -Checkboxes (type checkbox) --------------------------- +If you define ``useValuesAsKeys: true``, you only have to refer to the values. The values will be used as keys too. Please be aware that without the parameter or with ``useValuesAsKeys: false``, a number will be used. .. code-block:: yaml - - type: checkbox # Type checkbox creates a checkbox. When activated, the specified value (here 'TRUE') is written to the database. - title: Is this true? # Label (optional) - name: public # table column - value: true # parameter when activating the checkbox is stored in DB (here 'TRUE'). - checked: false # [true/false] behaviour of the checkbox (default: false). Defines whether checkbox is pre-selected (checked) on load - + useValuesAsKeys: true + options: + - A + - B + - C + - D -Mandatory fields ----------------- +* **select2:** Activates full text search for the selectbox (please note for multiselectboxes, full text search is activated by default). +* **multi:** Define a singleselectbox or multiselectbox (default: false). +* **value:** Definition of the default value. +* **options with label and value:** Definition of the options (label, value). +* **useValuesAsKeys:** The values will be used as keys too. Else it will be a number that will be assigned for each option (default: false). -The notes for a mandatory field appear above the used fields. In the case of a missing entry in a defined mandatory field, this will be marked in red and (if defined) a speech bubble will appear. The object can not be saved if mandatory data is missing. -.. note:: When using multiple tabs in the form, the creator may set an entry incorrectly on a non-visible tab in a mandatory field, so the saving process does not work. No error message appears outside the form. The applicant has to check the information in the form (label: red border/speech bubble with reference) before it can be stored correctly. +(2) multiselect - several selectable entries +"""""""""""""""""""""""""""""""""""""""""""" +The multiselectbox is activated by the attribute ``multiple: true``. You can choose multiple entries in the selectbox. +The usage and their requirements of the database table column may vary. In general with the example above, you can switch via ``multiple: true`` to multiselects. The database fields is still a character varying. +The values are saved comma separated in the table column. + .. code-block:: yaml - - type: [Angabe zum Feldtyp] # Each field can be made mandatory - - mandatory: true # true - field has to be set. Else you can't save the object. Regular expressions are possible too - see below. - mandatorytitle: Mandatory info! # Text that appears in the field when the field is not filled or filled with an invalid value. - mandatoryText: Please choose a type! # Text that is displayed in a speech bubble above the field when the field is not filled when it is saved or invalid. - mandatory: /^\w+$/gi # You can define a regular expression to check the input for a field. You can check e.g. for email or numbers. Read more http://wiki.selfhtml.org/wiki/JavaScript/Objekte/RegExp + - type: select + title: Interests + name: type + maximumSelectionLength: 2 # maximum number of possible selections + attr: + multiple: true + options: + - label: 'Please select a type...' + value: '' + - label: 'Type A' + value: 'A' + - label: 'Type B' + value: 'B' + - label: 'Type C' + value: 'C' + - label: 'Type D' + value: 'D' + attr: + disabled: disabled + value: A,C # use comma-separated values for default multi-select value + + +.. tip:: The multiple selection provides an easier mechanism to choose an entry, which also allows a search in the dropdown list. The navigation through the list is possible via keyboard. + +Possible entries are highlighted during typing. An already chosen entry can be removed by clicking the small "x" symbol. An entry can also be marked as disabled. - # Check if input is a number - mandatory: /^[0-9]+$/ - mandatoryText: Only numbers are valid for this field! +.. image:: ../../../../figures/digitizer/digi_multiselecttool.png + :scale: 80 +* **maximumSelectionLength**: maximum number of possible selections (optional parameter) +.. image:: ../../../../figures/digitizer/digi_multiselect_maximumselectionlength.png + :scale: 80 -Date-picker (type date) ------------------------ +Get options for the selectbox via SQL +""""""""""""""""""""""""""""""""""""" -.. image:: ../../../../figures/digitizer_datepicker.png - :scale: 80 +With a SQL request, the values of the selectbox can be directly taken from a database table. .. code-block:: yaml - - type: date # click in the textfield opens a datepicker - title: favorite Date # Label (optional) - name: date_favorite # data table + - type: select # element type definition + title: Choose a type # labeling (optional) + name: type # reference to table column + connection: connectionName # Define the database connection + sql: 'SELECT DISTINCT type_name as label, type_id as value FROM types order by value;' # get the options fro the selectbox + options: + - label: 'Please select a type...' + value: '' -Helptexts to the form-elements (attribute infotext) ---------------------------------------------------- +Radio buttons (type: radioGroup) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -The infotext can appear over every field, regardless of whether this is a mandatory field or not. If a infotext is specified, an info button appears above the field. Clicking on this button opens the information text. +Type radioGroup creates radio buttons. .. code-block:: yaml - - type: [type name] # every field, regardless of whether this is a mandatory field or not + - type: radioGroup # Type radioGroup creates radio buttons. When activated, the specified value is written to the table column. + title: Radiobuttons - Choose one # Label (optional) + name: test1 # table column + options: # define the options + - label: Option 1 + value: v1 + - label: Option 2 + value: v2 + value: v2 # Pre-select option v2 by default for new items - infoText: Please note - only numbers are valid for this field. # Notice which will be displayed by i-symbol +Date picker (type: date) +^^^^^^^^^^^^^^^^^^^^^^^^ +Type date creates an input field that allows you to enter a date, either with a textbox that validates the input or a special date picker interface. +It produces standard SQL date string format "YYYY-MM-DD". -Element groups (type: fieldSet) -------------------------------- +.. image:: ../../../../figures/digitizer_datepicker.png + :scale: 80 -Elements can be grouped together in one row to provide logical connections or save space. To define a group you have to set type fieldSet and afterwards define the children which shall be grouped. +.. code-block:: yaml -For each children you can define a width to control the pace for each element. + - type: date # text field that provides a date picker + title: favorite Date # Label (optional) + name: date_favorite # table column + attr: + min: '2020-01-01' # set the minimum selectable date + max: '2030-01-01' # set the maximum selectable date -.. code-block:: yaml - - type: fieldSet # Grouping of fields, regardless of field type - children: # Define the group elements by children - - type: input - title: Firstname - name: firstname - css: {width: 30%} # Specifies the width of the group element. Together, the elements should be 100%. - - type: input - title: Lastname - name: lastname - css: {width: 30%} - - type: input - title: E-Mail - name: email - css: {width: 40%} +* **min**: Set the minimum selectable date. When set to null, there is no minimum. Optional attribute. +* **max**: Set the maximum selectable date. When set to null, there is no maximum. Optional attribute. -Coordinate Fields (type coordinates) ------------------------------------- +Color picker (type: colorPicker) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -For visual verification, manual entry or manual editing of point coordinates, the *coordinates* element can be used. +Type colorPicker creates an input fields that allows you to enter a color value (in HEX form for example #ff00ff) or via a color picker interface. -.. image:: ../../../../figures/digitizer_coordinates.png +.. image:: ../../../../figures/digitizer/digitizer_colorpicker.png :scale: 80 .. code-block:: yaml - - - 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)']] - -The possible special properties are: - -* **title_epsg**: the caption for the field to select the EPSG code of the coordinates -* **title_longitude**: the title of the longitude field -* **title_latitude**: the title of the latitude field -* **coordinatesFieldsOrder**: a list of strings, describing the order in which the three input elements occur -* **epsgCodes**: a list of tuples, each describing an EPSG code to select and its corresponding label in the form - - -File upload (type file) ------------------------ -The file upload can be used to link files to a database column in the form. To do this, the uploaded files are stored in Mapbender and the path is noted in the column. + - type: colorPicker # click in the color area at the right side of the text field opens a color picker + title: 'Fill color' # Label (optional) + name: fill_color # table column + value: 'ff00ff' # predefine the value of the color picker + + +File upload (type: file) +^^^^^^^^^^^^^^^^^^^^^^^^ -The storage path and the name of the stored files can not yet be changed. The file upload always saves to the same directory and is built up from the parameters: +The file upload can be used to link files to a database column in the form. To do this, the uploaded files are stored in Mapbender and the path is noted in the column. +The storage path and the name of the stored files cannot yet be changed. The file upload always saves to the same directory and is built up from the parameters: * tablename * columnname @@ -862,7 +1083,7 @@ The storage path and the name of the stored files can not yet be changed. The fi The filesystem path is: -* ``/web/uploads/featureTypes/[tablename]/[columnname]/[filename].png`` +* `/web/uploads/featureTypes/[tablename]/[columnname]/[filename].png` The linked URL stored in the database column is: @@ -870,214 +1091,171 @@ The linked URL stored in the database column is: .. code-block:: yaml - - type: file # Typ file for the upload of files - title: Dateiupload # Label (optional) - text: Laden Sie ein Bild hoch. # Informationtext (optional) - name: file_reference # table column for the storage path - - - # Experimental parameters: - #accept: image/* # Pre-selection of elements in the image format (window for file upload opens with restriction filter) - # Other file-formats can be still uploaded - + - type: file # Typ file for the upload of files + title: File upload # Label (optional) + text: Please select a file # Text on button (optional) + name: file_reference # table column to store the file name + attr: + accept: image/* # Pre-selection of elements in the image format (window for file upload opens with restriction filter) + # Important: Other file-formats can be still uploaded -**Notes:** At this time, a "thumbnail" directory is created, which includes a smaller version of an image file. In future development this will be changed. -A possibility to show the uploaded images is the image-element. +It is possible to show the uploaded images via ``type: image``. -Images (type image) -------------------- +Images (type: image) +^^^^^^^^^^^^^^^^^^^^ .. image:: ../../../../figures/digitizer_image.png :scale: 80 -The image-element can be used to view a picture in the form. You can display images by specifying a URL in a database field or URL using the src parameter. +Type image can be used to display images. You can display images by specifying a URL in a database field or a URL using the src parameter. +Images, which are marked by the element file in a table column, can also directly be integrated and displayed. +For that, the image can be specified by specifying the two parameters src and name. -Images, which are marked by the element file in a table column, can thus also directly be integrated and displayed. - -The image can be specified by specifying the two parameters src and name. - -* **src**: Url-path or file path (can be a relative path) -* **name**: Url-path or file path from the table column (can't be a relative path) +* **src**: URL path or file path (can be a relative path). +* **name**: URL path or file path from the table column (can't be a relative path). * definition of name and src together: The content of the database column from name is taken. If the column is empty, the src is used. .. code-block:: yaml - type: image # Feature type field name image. name: file_reference # Reference to the database column. If defined, the path or URL in the field can be used and replaces "src" option - src: "../bundles/mapbendercore/image/logo_mb3.png" # Specify a path or URL to an image. If the path is relative use relative: true. + src: "../bundles/mapbendercore/image/logo_mb3.png" # Specify a path or URL to a placeholder image. If the path is relative use relative: true. relative: true # Optional. If true, the "src" path is determined from the "/web" directory (default: false). enlargeImage: true # Image is enlarged to original size/maximum resolution by clicking on the preview image. It is not scaled to screen size. - - # Experimental information about styling imageCss: width: 100% # Image CSS Style: Scales the preview image in the form, different from the original size in percent. -**Caution**: If only name and not name and src are specified, the wrong image appears from the previous data entry, if the column is empty. - -Dynamic paths (eg "bundles/mapbendercore/image/[nr].png" or 'bundles/mapbendercore/image/' + data.image_reference) can not be specified. +.. warning:: If only name and not name and src are specified, the wrong image appears from the previous data entry, if the column is empty. +Dynamic paths (e.g. `bundles/mapbendercore/image/[nr].png` or `bundles/mapbendercore/image/' + data.image_reference`) cannot be specified. One way to work around this is to create a trigger that will merge the path and contents of a table field into the database column. +Please note that an alternative upload location can be defined in the ``featureType`` section (see featureType). +.. code-block:: yaml + + featureType: + [] + # file upload location - customization per column on featureType (or dataStore) level + files: + - field: file_reference + path: /data/demo/mapbender_upload_lines/ -Definition of the available toolsets (Toolset Type) ---------------------------------------------------- - -Toolset types: -* **drawPoint** - Draw point -* **drawLine** - Draw a line -* **drawPolygon** - Draw polygon -* **drawRectangle** - Draw rectangle -* **drawCircle** - Draw circle -* **drawEllipse** - Draw ellipse -* **drawDonut** - Draw a Donut (enclave) -* **modifyFeature** - Move vertices of a geometry -* **moveFeature** - Move geometry -* **selectFeature** - Geometry de-/select (experimental). There is no interaction with the table yet and the available workflows are limited to the Delete operation. -* **removeSelected** - delete selected geometry (experimental). Deletes all objects selected in the map. -* **removeAll** - Caution: remove all geometries from the table +Tabs (type: tabs) +^^^^^^^^^^^^^^^^^ -YAML-Definition of toolset types +Complex form dialogs can be organized into multiple tabs by inserting an object with ``type: tabs`` into the formItems list, and assigning it to one or more tab specifications, which consist of a title (text displayed on the tab) and its children (contents of the tab). .. code-block:: yaml - polygon: - [...] - toolset: - - type: drawPolygon - - type: drawRectangle - - type: drawDonut - - type: removeSelected - - -Search in the tables (inline Search) ------------------------------------- - -You can use the inline search to search for an element in the table. -The activated element displays a search bar above the table. It shows all the search results for records of the table. + formItems: + - type: tabs + children: + - title: '1. Basic information' # first tab, text displayed on the tab + css: {padding: 10px} + children: + # First tab form item specifications + - type: label + title: Welcome to the digitize demo. Try the new Mapbender feature! + ... + - title: '2. More information' # second tab, text displayed on the tab + children: + # Second form item specifications + - type: label + title: Welcome to the digitize demo. Try the new Mapbender feature! + ... + + +Breaklines (type: breakLine) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + +Inserts a single HTML
element. Supports adding free-form HTML attributes via attr object and custom cssClass. .. code-block:: yaml - poi: - ... - inlineSearch: true # true: allows the search in the table (default: true). - ... + - type: breakLine # element type definition, will draw a line -Context Menu ------------- - -Using the context menu, an object on the map can be considered in more detail. -After the activation you can open a context menu via the right mouse click on an object or cluster. +Advanced features +----------------- -.. image:: ../../../../figures/digitizer_contextmenu.png - :scale: 80 +* Popups. +* Help texts. +* Mandatory fields. +* Regular expressions to validate the field input. +* Possibility to copy entered information from a form into the clipboard via a button. +* Possibility to duplicate features. +* Definition of events. +* Design and Styles. +* Refresh after save. -Items of the Context Menu: -* **Zoom to:** Zoom to the map extent of the object -* **Edit features:** Edit the features of the object. Opens the Digitizer dialog. -* **Remove:** Remove the selected object. +Definition of a popup +^^^^^^^^^^^^^^^^^^^^^ -If the corresponding `basic definition <#feature-basic-definition>`_ (allowEditData, allowDelete) not defined, then they are also not available in the Context Menu. In the above example the delete function is not available for the polygons. +You can define the following options for a popup: .. code-block:: yaml - poi: - ... - useContextMenu: true - ... - - - -Clustering (experimental) -------------------------- - -By clustering the objects can be combined on the map. -Depending on the defined distance and zoom level different numbers of objects can be clustered. - -Due to the complexity of the Clustering, future versions may have changes in functionality and syntax, so we define that still as experimental. Dependencies are to the display of features in the current extent/all areas and the different geometry types. - -.. image:: ../../../../figures/digitizer_clustering.png - :scale: 80 + popup: + title: POI # Definition of the popup title + height: 400 # height of the popup, if not defined it will adapt to the content + width: 500 # width of the popup + #width: 50vw # half screen width -Definition of the cluster element: -* **scale:** Zoom level. -* **distance:** distance between features in m to activate the clustering. -* **disable:** zoom level to disable the clustering. +Help text for form elements (attribute infoText) +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +If infoText is specified, an i-button appears above the field. Hovering over this button opens the information text. .. code-block:: yaml - poi: - ... - clustering: - - - scale: 10000 # Zoom level - distance: 60 # distance between features to cluster - - - scale: 2500 - distance: 40 - - - scale: 1000 - distance: 20 - - - scale: 500 - distance: 1 - disable: true # disable clustering at defined zoomlevel - ... - -Map-Refresh after save ----------------------- + - type: [type name] + infoText: 'Info: Please note - only numbers are valid for this field.' # Notice which will be displayed by i-symbol -After saving an object, the refresh can be activated using the *refreshLayersAfterFeatureSave* option. This parameter is used to reload the defined layer instances in the map-element. This makes changes regarded to WMS services directly visible in the map. This event is thrown only if the "Save" button of the attribute dialog is pressed. -If the YAML application is used in the /application folder, it can be specified by a unique name or by the instance-ID. If the applications are edited using the graphical user interface in the :ref:`backend` with the digitizer-element, it can be specified by the instance-ID. - -.. image:: ../../../../figures/digitizer/layerinstance_id.png - :scale: 80 +Mandatory fields +^^^^^^^^^^^^^^^^ +The object cannot be saved if mandatory data is missing. In the case of a missing entry in a required field, the field will be marked with a red border and a text (mandatoryText) will be displayed if defined. .. code-block:: yaml - poi: - [...] - allowEditData: true - refreshLayersAfterFeatureSave: # If no entry is made in this area no map refresh is carried out after saving - - 17 - - 18 - - osm # specify by unique name only with applications in applications/ - [...] + - type: [Angabe zum Feldtyp] # Every field type can be mandatory + attr: + placeholder: 'This field is mandatory....' # Text will show up in the field and will disappear when you edit the field. + # The text will not be saved. + pattern: /^\w+$/gi # You can define a regular expression to check the input for a field. + # Read more http://wiki.selfhtml.org/wiki/JavaScript/Objekte/RegExp + # pattern: /^[0-9]+$/ # Check if input is a number + required: true # true/required / false default is false + mandatoryText: Please choose a type! # Text displayed in case of a missing or invalid entry in a required field + mandatory: /^\w+$/gi # You can define a regular expression to check the input for a field. -**Notes:** Map-Refresh after save is available from Digitizer version 1.2. Check up-to-date information about digitizer versions: https://github.com/mapbender/mapbender-digitizer Duplicate features ------------------- - -Already captured objects can be duplicated. This is done via a duplicate-button within the popup of the current selected already existing feature, via the context menu and the hit table. -In order for the new object to be recognized better in the map, a color highlighting can be defined here. +^^^^^^^^^^^^^^^^^^ -The Duplicate button can be activated depending on a specific attribute value. This means that only when the corresponding attribute has a specific value (date> 0) the duplicate function works. +If you add ``copy`` to your configuration, you enable the possibility to duplicate feature. This can then be done via a **Duplicate** button within the attribute form of a feature or via a button in the result table. +* **copy:** Add copy section to enable duplicate feature. +* **enabled:** Activate duplicate feature (default: false). * **data**: Define default values for attributes. -* **rules**: Rule based duplicating (only if the filter/rule is active the object can be duplicated). -* **style**: Styling of the duplicated feature (more at Design and Styles) -* **on**: Events while duplicating process +* **style**: Styling of the duplicated feature (more at Design and Styles). +* **on**: Events while duplicating process. .. code-block:: yaml poi: [...] - copy: # If no specification is made in this area you can't duplicate objects - enable: true + copy: + enable: true # activate duplicate feature (default: false) data: date: 2017 - rules: - - feature.attributes.id > 10 style: label: "Dupliziertes Objekt" fillColor: "#ff0000" @@ -1089,34 +1267,35 @@ The Duplicate button can be activated depending on a specific attribute value. T error: console.error(feature) Events ------- +^^^^^^ Different events exist that can be associated to a feature to manipulate attributes before or after an action. -* **onBeforeSave**: Event before the storage of a new/modified information -* **onAfterSave**: Event after the storage of a new/modified information +* **onBeforeSave**: Event before the storage of a new/modified information. +* **onAfterSave**: Event after the storage of a new/modified information. -* **onBeforeUpdate**: Event before the update of a modified information -* **onAfterUpdate**: Event after the update of a modified information +* **onBeforeUpdate**: Event before the update of a modified information. +* **onAfterUpdate**: Event after the update of a modified information. -* **onBeforeSearch**: Event before the search in the SearchField of the Digitizer -* **onAfterSearch**: Event after the search in the SearchField of the Digitizer +* **onBeforeSearch**: Event before the search in the SearchField of the Digitizer. +* **onAfterSearch**: Event after the search in the SearchField of the Digitizer. -* **onBeforeRemove**: Event before deleting data -* **onAfterRemove**: Event after deleting data - -In difference to the save-events, the update-events work only on an update of the data, not on creation. - -**Note:** The events are still in development and should be used with caution. The correct matching of the events and their dependencies are not yet finished and may be changed in future versions. +* **onBeforeRemove**: Event before deleting data. +* **onAfterRemove**: Event after deleting data. -The following sections show some examples. If you want to set several parameters in an event, these can be listed in sequence, separated by a semicolon, e.g. +In difference to the save events, the update events work only on an update of the data, not on creation. +The following sections show some examples. If you want to set several parameters in an event, these can be listed in sequence, separated by a semicolon, e.g.: .. code-block:: yaml events: onBeforeSave: $feature->setAttribute('interests', 'maps'); $feature->setAttribute('name', 'test'); -**Storage of predefined attibute data in an additional attribute-columns:** + +Usage examples of this are: + +Storage of predefined attibute data in an additional attribute columns +"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" The following example shows how data can be written to an additional attribute column. This is done with the column "interests" and the fixed value "maps". When saving, the fixed value is stored in the table and you can use it via a filter for the selected display. @@ -1125,23 +1304,24 @@ The following example shows how data can be written to an additional attribute c events: onBeforeSave: $feature->setAttribute('interests', 'maps'); -**Storage of group roles in an additional attribute-columns:** -The following example shows how mapbender user data can be written to an additional attribute column. Here, this is done with the column "group" and the storage with the group roles of the user (userRoles). +Storage of group roles in an additional attribute columns +""""""""""""""""""""""""""""""""""""""""""""""""""""""""" + +The following example shows how Mapbender user and group information can be saved via $user and $userRoles. .. code-block:: yaml events: - onBeforeSave: $feature->setAttribute('group', implode(',', $userRoles)); + onBeforeSave: $feature->setAttribute('user_name', $user ); $feature->setAttribute('group', implode(',', $userRoles)); -**Storage of attibute data in an additional attribute-columns:** +Storage of attibute data in an additional attribute columns +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" This example shows how data can be stored in an additional attribute-column after saving. In this case it is done with two geometry-columns "geom" and "geom2". When saving, the data of "geom" should be saved in the field "geom2". - -Depending on the use case, the onBeforeInsert or the onBeforeUpdate event can be used. - -At the time of the saving-process the new geometry doesn't yet persist in the database. Therefore it cannot be accessed as a feature but only via the corresponding "item", an internal Digitizer structure. This "item" is based on the formular and the defined attribute fields. +Depending on the use case, the ``onBeforeInsert`` or the ``onBeforeUpdate`` event can be used. +At the time of the saving process, the new geometry doesn't yet persist in the database. Therefore, it cannot be accessed as a feature but only via the corresponding "item", an internal Digitizer structure. This "item" is based on the YAML block and the defined attribute fields. .. code-block:: yaml @@ -1153,12 +1333,13 @@ At the time of the saving-process the new geometry doesn't yet persist in the da In this event the value of "geom2" is overwritten with the value of "geom". -**Storage of different geometry-types:** +Storage of different geometry types +""""""""""""""""""""""""""""""""""" The above scenario can be extended to a slightly constructed example in which simultaneously different geometry types shall be saved. With the help of PostGIS, lines are interpolated to points. The Digitizer can use an event to fire the according SQL statement. .. code-block:: postgres - + events: onBeforeInsert: | $sql = "SELECT @@ -1168,39 +1349,17 @@ The above scenario can be extended to a slightly constructed example in which si $result = $stmnt->fetchAll(); $item['geompoi'] = $result[0]['geom']; -The onBeforeInsert event is used here. The pipe symbol "|" after the event signals a following multiline statement. This blog contains PHP code, which calls SQL-statement. The SQL-statement calls the ST_Line_Interpolate_Point function of PostGIS and commits the digitized line. Because this line is not yet persisted in the database, you have to access it with the "item" (geomline). The next lines build up the SQL-statement and delivers it to the SQL-connection defined in the featuretype. The last line writes the resulting point (geompoi) into the point-geometry-field. - -Buttons -------- - -Further buttons can be defined for the popup forms. The events (by clicking on the buttons) can be freely defined with JavaScript. Thus, for example, mailto data can be generated for the integration of a mail. - -.. code-block:: yaml - - poi: - ... - popup: - title: polygon test suite - width: 500p - # resizible: true - buttons: - - text: message to editor - click: | - var body = encodeURI("Sehr geehrter Herr/Frau xx,"+"\nLink:"+location.href); - location.href = "mailto:firstname.lastname@mail.com?subject=New edit in webgis&body=Mail to editor for further edits."; - - text: message to controller - click: | - location.href = "mailto:firstname.lastname@mail.com&subject=webgis&body=really?"; +The ``onBeforeInsert`` event is used here. The pipe symbol "|" after the event signals a following multiline statement. This blog contains PHP code, which calls SQL-statement. The SQL-statement calls the ST_Line_Interpolate_Point function of PostGIS and commits the digitized line. Because this line is not yet persisted in the database, you have to access it with the "item" (geomline). The next lines build up the SQL-statement and delivers it to the SQL-connection defined in the featuretype. The last line writes the resulting point (geompoi) into the point-geometry-field. Design and Styles ------------------ +^^^^^^^^^^^^^^^^^ -By specifying a style the way the objects are displayed on the map can be defined. +By specifying a style, the way the objects are displayed on the map can be defined. -* **default**: defines the normal display of the objects on the map -* **select**: defines the appearance of the objects while mouseover -* **selected**: defines the appearance of the objects after click event +* **default**: Defines the normal display of the objects on the map. +* **select**: Defines the appearance of the objects after click event. +* **unsaved**: Defines the appearance of the not saved objects. .. code-block:: yaml @@ -1209,45 +1368,145 @@ By specifying a style the way the objects are displayed on the map can be define ... styles: default: - graphic: true strokeWidth: 5 - strokeColor: "transparent" + strokeColor: "#ff00ff" fillColor: '#c0c0c0' - fillOpacity: 1 - fillWidth: 2 - # label: ${name} ${type} - # labelOutlineColor: '#eeeeee' + fillOpacity: 0.5 pointRadius: 10 select: strokeWidth: 1 strokeColor: "#0e6a9e" fillOpacity: 0.7 fillColor: "#0e6a9e" - label: ${name} ${type} pointRadius: 10 - selected: + label: ${name} ${type} + fontColor: black + fontSize: 12 + fontFamily: 'Arial, Courier New, monospace' + fontWeight: bold + labelOutlineColor: white + labelOutlineWidth: 1 + labelYOffset: -18 + labelXOffset: -18 + unsaved: strokeWidth: 4 strokeColor: "#648296" fillOpacity: 1 fillColor: "#eeeeee" - label: ${name} ${type} + label: 'Please save' pointRadius: 10 - ... -* **strokeColor:** Color of the border line [color value/transparent] -* **strokeWidth:** Width of the border line [numeric] -* **strokeOpacity:** Transparency of the border line [0-1] -* **fillColor:** Color of the filling [color value/transparent] -* **fillWidth:** Width of the filling [numeric] -* **fillOpacity:** Transparency of the filling [0-1] -* **pointRadius:** Radius around the center [numeric] -* **label:** Labeling the object with fixed values ​​and / or DB fields, e.g. "ID ${nummmer}" -* **labelOutlineColor:** Color of the border from the label [color value/transparent] - -YAML-Definition for the element Digitizer in mapbender.yaml + +* **strokeColor:** Color of the border line [color value/transparent]. +* **strokeWidth:** Width of the border line [numeric]. +* **strokeOpacity:** Transparency of the border line [0-1]. +* **fillColor:** Color of the filling [color value/transparent]. +* **fillWidth:** Width of the filling [numeric]. +* **fillOpacity:** Transparency of the filling [0-1]. +* **pointRadius:** Radius around the center [numeric]. +* **label:** Label the object with fixed values and / or DB fields, e.g. "ID ${nummmer}" . +* **fontColor:** "#0000ff" #'${fontcolor}' . +* **fontSize:** Font size in pixel. +* **fontFamily:** Font family. +* **fontWeight:** Font weight (default: normal). +* **labelOutlineColor:** Color of the border from the label [color value/transparent]. +* **labelOutlineWidth:** Label outline width. +* **labelYOffset:** Label offset x (default: 0). +* **labelXOffset:** Label offset y (default: 0). + + +It is also possible to refer to a graphic: + +.. code-block:: yaml + + default: + graphic: true + externalGraphic: 'https://schulung.foss.academy/symbols/${symbol}.png' + graphicWidth: 30 + graphicHeight: 30 + + +* **graphic:** [true/false]. +* **externalGraphic:** Define a link to an external graphic. You can use variables in the definition. +* **graphicWidth/graphicHeight:** Define the width and height in pixel. + + +CSS behaviour and styling fields +"""""""""""""""""""""""""""""""" + +For each input field, the CSS behavior and styling information can be assigned, regardless of the type. This can be used, for example, to highlight important fields or to fill an attribute field when editing another field. + +parameters: + +* 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 + +.. code-block:: yaml + + 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 lastnameField = form.find("[name='lastname']"); + lastnameField.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: Date + css: {width: 30%} + # Highlight the year if you edit the date-field and autom. insert the year from the date + change: | + var inputField = el; + var form = inputField.closest(".data-manager-edit-data"); + var yearField = form.find("[name='year']"); + var value = inputField.val() + var year = value && value.match(/^\d{4}/)[0] || null; + yearField.val(year); + yearField.css("background-color","#ffc0c0"); + + +Map refresh after save +^^^^^^^^^^^^^^^^^^^^^^ + +After saving an object, the *refreshLayersAfterFeatureSave* option can force a reload of one or many WMS layers. +A layer can be specified by its name or by its Instance ID: + + +.. code-block:: yaml + + poi: + [...] + refreshLayersAfterFeatureSave: # If no entry is made in this area no map refresh is carried out after saving + - 17 + - 18 + - osm # specify by unique name only with applications in applications/ + [...] + + +YAML definition for the element Digitizer in mapbender.yaml =========================================================== -This template can be used to insert the element into a YAML application. +In the Workshop-Bundle you will find an example of a YAML definition. .. code-block:: yaml @@ -1259,4 +1518,4 @@ This template can be used to insert the element into a YAML application. schemes: ... - + diff --git a/en/elements/editing/digitizer/digitizer_functionality.rst b/en/elements/editing/digitizer/digitizer_functionality.rst index b115b111b..3ccfda6cd 100644 --- a/en/elements/editing/digitizer/digitizer_functionality.rst +++ b/en/elements/editing/digitizer/digitizer_functionality.rst @@ -1,45 +1,49 @@ .. _digitizer_functionality: Functionalities -*************** +=============== -Digitizer allows the editing of FeatureTypes. These are based on points, lines or polygon geometries and their attribute data. The attribute data is displayed in the configurable form of the Digitizer element. Geometries can be edited directly via the map. Digitizer offers complex editing functionalities: +Digitizer allows the creating and editing of features. These are based on points, lines or polygon geometries and their attribute data. Geometries can be edited directly via the map. The attribute data is displayed in the configurable form of the Digitizer element. All in all, Digitizer offers complex editing functionalities: -* Draw points, lines, polygons, rectangles, ellipses or circles -* Move objects -* Add vertices (to lines or polygons) -* Generate areas with enclaves +* Draw points, lines and polygons (rectangles, circles or ellipses), +* Move objects, +* Add vertices (to lines or polygons), +* Generate polygons with enclaves, +* Snap to vertices of other objects that are visible on the map. .. image:: ../../../../figures/Digitizer_geometries.png - :width: 75% + :width: 100% -The following sections explain the different functionalities of Digitizer in accordance with its default configuration. +The following sections explain the different functionalities of Digitizer. Draw geometries --------------- -When drawing geometries, one can choose between the geometry types "point", "line" or "polygon" via a dropdown menu. +When drawing geometries, one can choose between the geometry types "point", "line" or "polygon". When different configurations are defined you can choose oe via a dropdown menu. -**Points** +Points +^^^^^^ -A click on the button "draw point" activates/deactivates the option to draw points. +A click on the button **draw point** activates/deactivates the option to draw points. .. image:: ../../../../figures/Digitizer_create_points.png - :scale: 80 + :scale: 100 -**Lines** +Lines +^^^^^ -A click on the button "draw line" activates/deactivates the option to draw lines. +A click on the button **draw line** activates/deactivates the option to draw lines. .. image:: ../../../../figures/Digitizer_create_lines.png - :scale: 80 + :scale: 100 -**Polygons** +Polygons +^^^^^^^^ -Polygons, rectangles, enclaves, ellipses and circles can be drawn after activation of the corresponding button. +**Polygons**, **rectangles**, **enclaves**, **ellipses** and **circles** can be drawn after activation of the corresponding button. .. image:: ../../../../figures/Digitizer_create_polygons.png - :scale: 80 + :scale: 100 After activation, an object can be created through one or more clicks on the map. Afterwards, a pop-up window will appear, which requests attribute data in correspondence to its configured YAML-configuration. @@ -47,16 +51,44 @@ After activation, an object can be created through one or more clicks on the map Edit, save or delete geometries ------------------------------- -Objects are saved in the defined database table. The objects are displayed on the map and additionally as a table in the sidepane. This simplifies the administration of data. You can define which columns to list via the configuration. In this configuration the number (ID is automatically created after saving) and name of each object are displayed. It is possible to sort the columns or to search in the columns. +The objects that are displayed on the map are stored in the predefined database table. Additionally, they are listed as a table in the sidepane for easy administration. + +You can define which columns to list in the configuration. In the example below, the **number** (automatically created ID) and **name** of each object is displayed. It is possible to sort and search the columns. + +The basic functions in the digitizer table are (from left to right and from the top down): + +* With the checkbox **Select by current extent only**, you can filter to only show geometries in the table from the current map extent. +* It is possible to **Refresh** all features. +* It is also possible to **Hide** or **Show** all features on the map. +* You can **Save** modifications for multiple objects. +* A button to **Draw** geometries (see above). +* A button to **Edit** geometries. +* You can also **Move** geometries with the mouse. -The list can also only display geometries of the current extent **1**. It is possible to hide **2** or show **3** all objects via click on the corresponding buttons. Modifications can be saved for all objects **4**. A change would, for instance, be the movement **5** of an object. After the button has been activated, geometries can be moved on the map with the mouse. +.. image:: ../../../../figures/Digitizer_editing.png + :scale: 100 -Furthermore, individual objects can be hidden **6** and changes saved **8**. You can change the attribute data **7**. Every object can be deleted **9**. -.. image:: ../../../../figures/Digitizer_edit.png +Next to each table entry are editing functions for individual objects. Those functions are similar for all geometry types. From left to right, it is possible to: + +* **Duplicate** objects, +* **Edit** their style, +* **Hide** them (and **Show** them again), +* **Change** their attribute data, +* **Save** edited geometries, +* **Delete** geometries. + +Additionally, intermediate points (nodes) can be added to lines and the corners of areas modified. This is activated after clicking on **Edit**. In order to modify an object, it has to be selected beforehand. + +.. image:: ../../../../figures/Digitizer_move.png :scale: 80 -Previously described functions are identical for all geometries. Additionally, intermediate points can be added to lines and the corners of areas modified. This option is activated via click on the Button *"Edit"*. In order to modify an object, it has to be selected beforehand. -.. image:: ../../../../figures/Digitizer_edit_lines_polygons.png +Context Menu +------------ + +There is a context menu available for every feature by default. You can open it via a right mouse click on an object. + +.. image:: ../../../../figures/digitizer_contextmenu.png :scale: 80 + diff --git a/figures/Digitizer_create_lines.png b/figures/Digitizer_create_lines.png index 91b38f20e..7fc2d357a 100644 Binary files a/figures/Digitizer_create_lines.png and b/figures/Digitizer_create_lines.png differ diff --git a/figures/Digitizer_create_points.png b/figures/Digitizer_create_points.png index 23b06ce63..278c62d0e 100644 Binary files a/figures/Digitizer_create_points.png and b/figures/Digitizer_create_points.png differ diff --git a/figures/Digitizer_create_polygons.png b/figures/Digitizer_create_polygons.png index 734ad810e..d83282f36 100644 Binary files a/figures/Digitizer_create_polygons.png and b/figures/Digitizer_create_polygons.png differ diff --git a/figures/Digitizer_edit.png b/figures/Digitizer_edit.png index 4d2ba1dde..67f0b0921 100644 Binary files a/figures/Digitizer_edit.png and b/figures/Digitizer_edit.png differ diff --git a/figures/Digitizer_editing.png b/figures/Digitizer_editing.png new file mode 100644 index 000000000..ccda13cc4 Binary files /dev/null and b/figures/Digitizer_editing.png differ diff --git a/figures/Digitizer_geometries.png b/figures/Digitizer_geometries.png index d29608d0d..350704ef2 100644 Binary files a/figures/Digitizer_geometries.png and b/figures/Digitizer_geometries.png differ diff --git a/figures/Digitizer_move.png b/figures/Digitizer_move.png new file mode 100644 index 000000000..a6b23d811 Binary files /dev/null and b/figures/Digitizer_move.png differ diff --git a/figures/digitizer.png b/figures/digitizer.png index d06fcd5ce..437830095 100644 Binary files a/figures/digitizer.png and b/figures/digitizer.png differ diff --git a/figures/digitizer/allowchangevisibility.png b/figures/digitizer/allowchangevisibility.png index 7dd673312..673df4d10 100644 Binary files a/figures/digitizer/allowchangevisibility.png and b/figures/digitizer/allowchangevisibility.png differ diff --git a/figures/digitizer/allowlocate.png b/figures/digitizer/allowlocate.png deleted file mode 100644 index e806e003d..000000000 Binary files a/figures/digitizer/allowlocate.png and /dev/null differ diff --git a/figures/digitizer/digi_multiselect_maximumselectionlength.png b/figures/digitizer/digi_multiselect_maximumselectionlength.png new file mode 100644 index 000000000..65e6df2e6 Binary files /dev/null and b/figures/digitizer/digi_multiselect_maximumselectionlength.png differ diff --git a/figures/digitizer/digi_multiselecttool.png b/figures/digitizer/digi_multiselecttool.png index eafb1e1cb..c47aa7988 100644 Binary files a/figures/digitizer/digi_multiselecttool.png and b/figures/digitizer/digi_multiselecttool.png differ diff --git a/figures/digitizer/digitizer_colorpicker.png b/figures/digitizer/digitizer_colorpicker.png new file mode 100644 index 000000000..ec417e9d3 Binary files /dev/null and b/figures/digitizer/digitizer_colorpicker.png differ diff --git a/figures/digitizer/digitizer_html.png b/figures/digitizer/digitizer_html.png new file mode 100644 index 000000000..892293b50 Binary files /dev/null and b/figures/digitizer/digitizer_html.png differ diff --git a/figures/digitizer/layerinstance_id.png b/figures/digitizer/layerinstance_id.png deleted file mode 100644 index 5e6d0515e..000000000 Binary files a/figures/digitizer/layerinstance_id.png and /dev/null differ diff --git a/figures/digitizer/showvisibilitynavigation.png b/figures/digitizer/showvisibilitynavigation.png deleted file mode 100644 index 83330e6cb..000000000 Binary files a/figures/digitizer/showvisibilitynavigation.png and /dev/null differ diff --git a/figures/digitizer/stylemanager.png b/figures/digitizer/stylemanager.png index ba20124e8..a00cad92d 100644 Binary files a/figures/digitizer/stylemanager.png and b/figures/digitizer/stylemanager.png differ diff --git a/figures/digitizer_configuration.png b/figures/digitizer_configuration.png index 93c040e81..0d37a8184 100644 Binary files a/figures/digitizer_configuration.png and b/figures/digitizer_configuration.png differ diff --git a/figures/digitizer_contextmenu.png b/figures/digitizer_contextmenu.png index 7b400e8b5..e0063e8a9 100644 Binary files a/figures/digitizer_contextmenu.png and b/figures/digitizer_contextmenu.png differ diff --git a/figures/digitizer_datepicker.png b/figures/digitizer_datepicker.png index cc1eaae7a..63462960d 100644 Binary files a/figures/digitizer_datepicker.png and b/figures/digitizer_datepicker.png differ diff --git a/figures/digitizer_image.png b/figures/digitizer_image.png index 8fb482e7d..22a67e76a 100644 Binary files a/figures/digitizer_image.png and b/figures/digitizer_image.png differ diff --git a/figures/digitizer_with_tabs.png b/figures/digitizer_with_tabs.png index 956488642..d01f361c5 100644 Binary files a/figures/digitizer_with_tabs.png and b/figures/digitizer_with_tabs.png differ