Page tree
Skip to end of metadata
Go to start of metadata

Das Kartenwidget (mapWidget) dient der Visualisierung von geographischen Daten..

Damit können z.B. Maschinenzustände oder Warenbestände an verschiedenen Standorten visualisiert werden.Hierfür werden die Daten aus der per DataID definierten Query bezogen und als Koordinaten interpretiert, die ZWINGEND die Attribute long und lat (für longitude und latitude) enthalten müssen. Für jedes Element dieses Datensatzes wird ein Marker auf der Karte erstellt. Optional werden die Marker über das tag <color> im tag <markeroptions> eingefärbt. Des weiteren wird optional ein Popup eingebunden, welches sich bei einem Klick auf den Marker öffnet. Im tag <popup> können Titel und Label definiert werden. Das tag <field> referenziert auf eine Spalte aus der DataID. Die möglichen Typen im Element <type> richten sich nach den Spaltentypen (siehe: Spalten-Typen). 

Beispiel: Popup zu einem Standort mit den Attributen popupTitle und popupBody

Über ein Einzelselektions-Widget auf der linken Seite werden Maschinen mit dem Status "damaged" angezeigt


Beispiel: Visualisierung verschiedener Standorte und Status



Datenstruktur:

AttributeType

Mandatory?

longfloatmadatory
latfloat

madatory


Beispiel:



image2019-6-12_14-38-1.png Beispiel für ein Map Widget

<xml>
  <widget name="MapDemo_map">

    <widgettype>mapWidget</widgettype>

    <caption>
      <show>true</show>
      <label>Map-Widget</label>
    </caption>

    <triggerParams>
        <optional>
            <list>status</list>
        </optional>
    </triggerParams>


    <dataID>qy_MapDemo_map</dataID>

    <loadOnInit>true</loadOnInit>

    <mapOptions>

      <markerOptions>
      
      <!-- popup default definitions-->
        <popup>
          <title>Name</title>
          <body>
            <list>
              <label>Verantwortlicher</label>
              <field>User</field>
              <type>user</type>
            </list>
            <list>
              <label>Zustand</label>
              <field>Status</field>
            </list>
            <list>
              <label>letzte Änderung</label>
              <field>ChangedAt</field>
              <type>genDate</type>
              <format>short</format>
            </list>
          </body>
        </popup>

        <color>red</color>

        <!-- popup definitions for different conditions-->

        <conditions>
          <list>
            <value>
              <list>ok</list>
            </value>
            <field>Status</field>
            <color>green</color>

            <popup>
              <title>Name</title>
            </popup>

          </list>
          <list>
            <value>
              <list>unavailable</list>
            </value>
            <field>Status</field>
            <color>yellow</color>
          </list>
        </conditions>

      </markerOptions>

      <!-- enables or disables the fly-to-marker animation  -->
      <fitMarkers>true</fitMarkers>
      
    </mapOptions>

  </widget>
  
</xml>

Standard Einstellungen für Popups:

Innerhalb des <MarkerOptions> Elements können Standard-Einstellungen für Marker und Popup's vorgenommen werden.

<popup> Element

Hier kann das Popup gestaltet werden, dass beim Klicken auf einen Marker erscheint.

<color> Element

Hier wird die Farbe des Markers definiert.

<conditions>

Hier können die Farbe eines Markers und die Gestaltung des Popup's für unterschiedliche Zustände festgelegt werden.

Die unter <conditions> eingetragenen Definitionen für Marker und Popup's für einen Zustand werden anstelle der Standard-Einstellungen angewendet.

Beispiel für die Definition der Darstellung unterschiedlicher Zustände:

        <conditions>
          <list>
            <value>
              <list>ok</list>
            </value>
            <field>Status</field>
            <color>green</color>

            <popup>
              <title>Name</title>
            </popup>

          </list>
          <list>
            <value>
              <list>unavailable</list>
            </value>
            <field>Status</field>
            <color>yellow</color>
          </list>
        </conditions>

image2019-6-12_14-38-1.png Beispiel: Map Widget Data-ID

<xml>
    <data name="qy_MapDemo_map" roles="System_Admin, AdHoc_Full_Issue">
        <!-- Setting the dataID -->
        <friendlyName>qy_MapDemo_map</friendlyName>
        <!-- StoredProcedure/QueryBuilder -->
        <type>QueryBuilder</type>
        <!-- Use filter on this query -->
        <filter>false</filter>
        <!-- Optional Path: Database Scheme Table -->
        <path/>
        <!-- Data-Query built with the QueryBilder (also see "QueryBuilder" in the Content Developer Guide) -->
        <query>
            <![CDATA[
                <QueryBuilder>
                    <select>
                        <table>YUNA-DataDB</table>
                        <table>data</table>
                        <table>mapData</table>
                        <fields>
                            <field>
                                    <name>Longitude</name>
                                    <as>long</as>
                            </field>
                            <field>
                                    <name>Latitude</name>
                                    <as>lat</as>
                            </field>
                            <field>
                                    <name>Status</name>
                            </field>
                            <field>
                                    <name>ChangedAt</name>
                            </field>
                            <field>
                                    <name>Name</name>
                            </field>
                            <field>
                                    <name>User</name>
                            </field>
                        </fields>
                        <where>
                            <like>
                                <field>
                                    <ID>status</ID>
                                    <name>Status</name>
                                </field>
                            </like>
                        </where>
                        <orderby/>
                        <limit>0</limit>
                        <limitoffset>0</limitoffset>
                    </select>
                </QueryBuilder>
            ]]>
        </query>
        <meta>
            <fields>
                <field>
                    <name>User</name>
                    <type>
                        <name>User</name>
                    </type>
                </field>
                <field>
                    <name>ChangedAt</name>
                    <type>
                        <name>ZonedTimestamp</name>
                        <params>
                            <param>
                                <name>timezone</name>
                                <value>UTC</value>
                            </param>
                            <param>
                                <name>absolute</name>
                                <value>true</value>
                            </param>
                        </params>
                    </type>
                </field>
            </fields>
        </meta>
    </data>
</xml>


Kachelserver konfigurieren (Beispiel)

Der Kachelserver lässt sich sowohl global in der PortalDB als auch lokal in der Widget-Definition konfigurieren.

Globale Konfiguration in der PortalDB

Die Konfiguration kann im Config Store in der PortalDB vorgenommen werden.

KeyValueBei installation auf einer Subdomain
map.tileLayer.urlhttps://Kachelserveradresse/{z}/{x}/{y}.pnghttps://{s}.Kachelserveradresse/{z}/{x}/{y}.png

Weiterführende Informationen zur Konfiguration erfahren Sie unter: https://leafletjs.com/reference-1.5.0.html


Kachelserveradresse

Kachelserveradresse entspricht der Adresse Ihres Kachelservers

Lokale Konfiguration in der Widget-Definition

In der Widget Definition kann im tag <tileLayer> innerhalb des tags <mapOptions> der Kachelserver konfiguriert werden.

Beispiel:

<mapOptions>
	<tileLayer>https://{s}.Kachelserveradresse/{z}/{x}/{y}.png</tileLayer>
</mapOptions>
  • No labels