1. Geowerkstatt Hamburg Avatar Geowerkstatt Hamburg
  2. Master Portal
  3. Masterportal
  4. Issues

Style-Definition für Vektor-Layer (WFS) - svg-Icons in Karte und Legende

Issue #1052 closed
Moritz Plachta created an issue

In der style.json werden die Styles für Vektor-Layer definiert.

Im Masterportal können WFS-Dienste genutzt und über die style.json können die Styles für Vektor-Punkt-Geometrien definiert werden. Für die Darstellung der Vektor-Punkt-Geometrien ist es möglich, svg-Icons zu nutzen. Dies wird in der style.json über den "imageName" definiert.

Zudem kann in der config.js ein WFS-Image-Path (wfsImgPath) definiert werden.

‌

Die folgende Konfiguration nutzen wir in Remscheid für die Masterportal-Version 2.30.0:

Auszug aus der config.js:

wfsImgPath: "https://geoportal.remscheid.de/geodaten/icons/",

Auszug aus der style.json:

{
    "conditions": {
        "properties": {
            "kat_2": "8a"
        }
    },
    "style": {
        "type": "icon",
        "legendValue": "Rathäuser",
        "imageName": "svg/poi/Rathaus.svg",
        "imageScale": "0.5",
        "imageWidth": 50,
        "imageHeight": 50
    }
}

Zum einen werden die svg-Icons in der Karte angezeigt und zum anderen in der Legende des Masterportals.

‌

Diese Konfiguration funktioniert in der Masterportal-Version 2.34.1 nicht mehr vollständig:
Es werden nicht alle svg-Icons in der Legende angezeigt.
In der Karte werden anscheinend keine svg-Icons dargestellt.

‌

Hat sich die Konfiguration hinsichtlich der Styles für Vektor-Layer / WFS-Dienste geändert oder liegt hier ein Bug vor?

Viele Grüße aus Remscheid

Comments (21)

  3. mbgvhh

    Unsere Vermutung ist ein Bug infolge des kürzlich durchgeführten Refactorings des Vectorstylings. Wir schauen uns das an!

  5. Tobias Schneider

    Wir haben dasselbe Problem seit Version 2.34 aufwärts beobachtet, also dass generell keine Punkt-Features mehr in der Legende dynamisch dargestellt werden - ohne i.was an der Konfig geändert zu haben…

    Dieser Bug ist auch in der aktuellen Version 2.35.0 noch vorhanden.

  6. Sven Junker-Beyel

    @Tobias Schneider Könntest du ein Beispielportal hochladen, in dem man diesen Fehler nachvollziehen kann?

    ‌

  9. Moritz Plachta reporter

    Mit unserer oben genannten Konfiguration haben wir in Remscheid die Masterportal-Version 2.36.1 getestet.
    Es werden keine svg-Icons in der Karte und in der Legende angezeigt.

    Wird ein Vektor-Layer (WFS) im Themen-Baum aktiviert, können über die Entwicklerwerkzeuge im Web-Browser die Anforderungs-URLs der svg-Icons eingesehen werden.
    In der Masterportal-Version 2.36.1 sind die Anforderungs-URLs nicht korrekt.

    Zum Beispiel wird versucht, über die folgende URL ein svg-Icon anzufordern (nicht korrekt):
    https://geoportal.remscheid.de/masterportal/portale/geo_explorer_test_v2_36_1/svg/poi/Rathaus.svg

    Korrekt müsste die URL wie folgt lauten:
    https://geoportal.remscheid.de/geodaten/icons/svg/poi/Rathaus.svg

    Mit unserer oben genannten Konfiguration hatten die Anforderungen der svg-Icons für die Karte in der Masterportal-Version 2.30.0 noch funktioniert.

    Beim Aufruf der Legende konnten wir in der Masterportal-Version 2.36.1 über die Entwicklerwerkzeuge im Web-Browser keine weiteren Anforderungen der svg-Icons erkennen.

    In der Masterportal-Version 2.30.0 sind beim Aufruf der Legende die Anforderungs-URLs der svg-Icons in den Entwicklerwerkzeugen im Web-Browser zu sehen und korrekt.
    Demnach werden die svg-Icons auch in der Legende dargestellt.

  11. Sven Junker-Beyel

    ich kann den fehler nicht nachstellen, wenn ich in der style.json eine svg einbinden.

    Ich habe das Portal angehangen, mit dem ich teste. Vielleicht können Sie Ihre Konfigfuration damit abgleichen und mir die Unterschiede mitteilen. Zu dem Layer “Rathhäuser” habe ich keinen Eintrag in der services.json gefunden, daher habe ich den Layer “Städtische Ämter” zum Testen verwendet und als Bild die “Rathaus.svg“ geladen.

    Eventuell müsste sonst der wfsImgPath in der config.js angepasst werden?

    Style.json:

      {
    "styleId": "201",
    "rules": [
      {
        "conditions": {
          "properties": {
            "ID_SYMBOL": 3
          }
        },
        "style": {
          "legendValue": "Städtische Ämter",
          "type": "icon",
          "imageName": "Rathaus.svg",
          "imageScale": "0.5",
          "imageWidth": 50,
          "imageHeight": 50,
          "clusterType": "icon",
          "clusterImageName": "Rathaus.svg",
          "clusterImageScale": "0.5",
          "clusterTextType": "counter",
          "clusterTextScale": "1.5",
          "clusterTextOffsetX": "0",
          "clusterTextOffsetY": "0",
          "clusterTextFillColor": [
            0,
            0,
            0,
            1
          ],
          "clusterTextStrokeColor": [
            255,
            255,
            255,
            1
          ]
        }
      }
    ]
  },

    ‌

    config.json

     {
              "id": "201",
              "name": "Städtische Ämter",
              "mouseHoverField": "NAME",
              "styleId": "201",
              "clusterDistance": 50,
              "visibility": true
            }

    ‌

    config.js

    wfsImgPath: "./resources/img/",

  12. Moritz Plachta reporter

    Unterschiede in der Konfiguration

    ‌

    Ich habe die Konfiguration des Test-Portals Nürnberg mit unserem Portal in Remscheid abgeglichen.

    ‌

    Es gibt die folgenden Unterschiede in der style.json und config.js:

    ‌

    Test-Portal Nürnberg - style.json:

    "style": {
          "legendValue": "Städtische Ämter",
          "type": "icon",
          "imageName": "Rathaus.svg",
          ...
          }

    ‌

    produktives Portal Remscheid (Version 2.30.0) und erstes Test-Portal Remscheid (Version 2.38.0) - style.json:

    "style": {
          "type": "icon",
          "legendValue": "Rathäuser",
          "imageName": "svg/poi/Rathaus.svg",
          ...
          }

    ‌

    In Remscheid haben wir also beim "imageName" noch einen Teil der Verzeichnis-Struktur mit angegeben, da wir nicht alle svg-Icons in einem Verzeichnis gespeichert haben, sondern nach Themen sortiert die svg-Icons in mehrere Verzeichnisse abgelegt haben.

    In diesem Beispiel liegen alle svg-Icons zum Thema "points of interest" im Ordner "poi".

    ‌

    Dementsprechend haben wir in Remscheid in der config.js die folgende Konfiguration:

    produktives Portal Remscheid (Version 2.30.0) und erstes Test-Portal Remscheid (Version 2.38.0) - config.js:

    wfsImgPath: "https://geoportal.remscheid.de/geodaten/icons/",

    ‌

    Wird der angegebene wfsImgPath aus der config.js mit dem imageName aus der style.json zusammengesetzt, ergibt sich die komplette Adresse, unter der das svg-Icon abrufbar ist:

    wfsImgPath + imageName = https://geoportal.remscheid.de/geodaten/icons/svg/poi/Rathaus.svg

    Diese Konfiguration hatte bei uns in Remscheid bis einschließlich der Masterportal-Version 2.30.0 funktioniert.

    Das zurzeit bei uns produktive Masterportal (Version 2.30.0) mit unserer oben genannten Konfiguration ist mit einem Beispiel-Aufruf der "points of interest" (svg-Icons) hier erreichbar:
    produktives Portal Remscheid Masterportal-Version 2.30.0:
    https://geoportal.remscheid.de/masterportal/portale/geo_explorer/?Map/layerIds=5,183&visibility=true,true&transparency=0,0&Map/center=[373199.28869118553,5671671.41829631]&Map/zoomLevel=10

    ‌

    Dieselbe Konfiguration funktioniert in der aktuellen Masterportal-Version 2.38.0 nicht mehr.

    Das Masterportal in der Version 2.38.0 versucht, das svg-Icon Rathaus.svg über die folgende URL anzufordern:
    https://geoportal.remscheid.de/masterportal/portale/geo_explorer_test_v2_38_0/svg/poi/Rathaus.svg
    Diese URL ist jedoch nicht korrekt.
    Wie oben bereits beschrieben müsste die URL korrekt wie folgt lauten:
    https://geoportal.remscheid.de/geodaten/icons/svg/poi/Rathaus.svg

    ‌

    Ein Test-Masterportal in der Version 2.38.0 mit unserer oben genannten Konfiguration ist mit einem Beispiel-Aufruf der "points of interest" (svg-Icons) hier erreichbar:

    Erstes Test-Portal Remscheid Masterportal-Version 2.38.0:
    https://geoportal.remscheid.de/masterportal/portale/geo_explorer_test_v2_38_0/?Map/layerIds=5,183&visibility=true,true&transparency=0,0&Map/center=[373224.17083324114,5671645.836203798]&Map/zoomLevel=10

    Hier erscheinen die svg-Icons in der Karte und auch in der Legende nicht.

    ‌

    ‌

    Test einer anderen Konfiguration (Ergebnis: svg-Icons werden in der Legende nicht angezeigt)

    ‌

    Wir haben eine andere Konfiguration getestet:

    ‌

    Zweites Test-Portal Remscheid (Version 2.38.0) - style.json:

    "style": {
          "type": "icon",
          "legendValue": "Rathäuser",
          "imageName": "https://geoportal.remscheid.de/geodaten/icons/svg/poi/Rathaus.svg",
          ...
          }

    ‌

    Zweites Test-Portal Remscheid (Version 2.38.0) - config.js

    // wfsImgPath: "https://geoportal.remscheid.de/geodaten/icons/",

    ‌

    Wir haben also in der config.js den wfsImgPath auskommentiert und die komplette svg-Adresse in die style.json eingefügt.

    Dieses bewirkt, dass in der Masterportal-Version 2.38.0 die svg-Icons in der Karte angzeigt werden, aber die svg-Icons nicht in der Legende erscheinen.

    ‌

    Das zweite Test-Masterportal in der Version 2.38.0 mit der anderen Konfiguration ist mit einem Beispiel-Aufruf der "points of interest" (svg-Icons) hier erreichbar:
    Zweites Test-Portal Remscheid Masterportal-Version 2.38.0:
    https://geoportal.remscheid.de/masterportal/portale/geo_explorer_test_v2_38_0_config02/?Map/layerIds=5,183&visibility=true,true&transparency=0,0&Map/center=[373224.17083324114,5671645.836203798]&Map/zoomLevel=10

    ‌

    ‌

    Weitere Beobachtung: Mehrfaches ein- und ausblenden ("blinken") der svg-Icons in der Karte des Masterportals bei einer hohen Anzahl an svg-Icons

    ‌

    Außerdem ist uns aufgefallen, dass in der Masterportal-Version 2.38.0 (und auch in früheren Versionen) anscheinend bei relativ vielen svg-Icons in der Karten-Ansicht die svg-Icons mehrfach vom Masterportal angefordert bzw. geladen werden. Hieraus resultiert ein mehrfaches ein- und ausblenden ("blinken") der svg-Icons in der Karte des Masterportals.

    Dieses Verhalten kann bei der Nutzung des Web-Browsers Microsoft Edge beobachtet werden. Beim Mozilla Firefox konnten wir dies nicht feststellen.

    ‌

    Beim Aufruf des Masterportals in der Version 2.38.0 über den folgenden Link per Microsoft Edge konnten wir ein mehrfaches ein- und ausblenden ("blinken") der svg-Icons in der Karte erkennen:
    Zweites Test-Portal Remscheid Masterportal-Version 2.38.0:
    https://geoportal.remscheid.de/masterportal/portale/geo_explorer_test_v2_38_0_config02/?Map/layerIds=5,183&visibility=true,true&transparency=0,0&Map/center=[375185.2209941126,5672246.167624807]&Map/zoomLevel=5

    ‌

    Wenn die svg-Icons im Microsoft Edge mehrfach ein- und ausgeblendet werden, kann mit der linken Maustaste in die Karte geklickt werden und das "Blinken" hört auf.

  13. Inka Dudek

    Hallo Herr Plachta,

    ich habe ihren vorigen Kommentar zusammengefasst:

    1.)

    • wfsImgPath: "https://geoportal.remscheid.de/geodaten/icons/"
    • style.json: "imageName": "svg/poi/Rathaus.svg" - imageName enthält backslashes
      --> ab Version 2.30.0: icon wird nicht gefunden, keine svg-Icons in der Karte und in der Legende

    2.)

    3.)
    Mehrfaches ein- und ausblenden ("blinken") der svg-Icons in der Karte des Masterportals bei einer hohen Anzahl an svg-Icons
    Version 2.38.0, Edge, bei mir auch im Chrome
    https://geoportal.remscheid.de/masterportal/portale/geo_explorer_test_v2_38_0_config02/?Map/layerIds=5,183&visibility=true,true&transparency=0,0&Map/center=[375185.2209941126,5672246.167624807]&Map/zoomLevel=5

    ‌

    Ist das so richtig?

    ‌

    1.) und 2.) kann ich nachvollziehen, aber 3.) kann ich nicht nachstellen. Ich sehe das Blinken, wenn ich die von Ihnen genannte Url aufrufe, habe aber keine Konfiguratrion bei der es lokal bei mir auftritt. Das kann ich nur bearbeiten, wenn sie mir eine vollständige Konfiguration an dieses Issue hängen, die auch bei mir läuft.

    ‌

    Viele Grüße

    Inka Dudek

  14. Moritz Plachta reporter

    Hallo Frau Dudek,

    ich habe die Zusammenfassung ein bisschen modifiziert und neue Erkenntnisse zur Masterportal-Version 2.39.0 ergänzt:

    ‌

    1.)

    --> bis einschließlich Version 2.30.0 hat diese Konfiguration funktioniert

    --> in Version 2.38.0: icon wird nicht gefunden, keine svg-Icons in der Karte und in der Legende

    --> in Version 2.39.0: die svg-Icons in der Karte sind da, aber die svg-Icons in der Legende nicht

    ‌

    2.)

    --> Version 2.38.0 und 2.39.0: die svg-Icons in der Karte sind da, aber die svg-Icons in der Legende nicht

    ‌

    3.)

    Mehrfaches ein- und ausblenden ("blinken") der svg-Icons in der Karte des Masterportals bei einer hohen Anzahl an svg-Icons
    Version 2.38.0 und 2.39.0, Edge, bei Ihnen auch im Chrome
    https://geoportal.remscheid.de/masterportal/portale/geo_explorer_test_v2_38_0_config02/?Map/layerIds=5,183&visibility=true,true&transparency=0,0&Map/center=[375185.2209941126,5672246.167624807]&Map/zoomLevel=5

    ‌

    Ich habe Ihnen zwei vollständige Test-Portale (Masterportal-Version 2.38.0 und 2.39.0) an dieses Issue angehängt, bei denen das Blinken zu sehen ist. Diese beiden Portale müssten auch bei Ihnen laufen.

    ‌

    Vielen Dank und viele Grüße

    Moritz Plachta

  19. Inka Dudek

    Die Probleme mit den svg-Icons und das Blinken der Features sind gefixt und in der Version 2.40.0, die am 06.12.2023 released wird, behoben.

  20. Moritz Plachta reporter

    Unser Test mit den Masterportal-Versionen 2.40.0 sowie 2.40.1 ist erfolgreich.

    Beste Grüße und vielen, vielen Dank aus Remscheid!

  22. Log in to comment
Assignee
Type
bug
Priority
minor
Status
closed
Version
2.34.1
Votes
0
Watchers
5