[12/24] Lokationsstile

con4gis Tipps, Tricks und Türchen 12 von 24

An den Türchen-Tagen vor Weihnachten öffnen wir für Euch immer am späten Nachmittag ein neues Tor in das con4gis Universum. Heute zeigen wir Euch wie Ihr Lokationsstile in Eure Karte einbindet.

Um Eure POIs auf der Karte darzustellen benötigt ihr Lokationsstile, die Qualität reicht hier vom einfachen Punkt bist zur automatisch skalierten Vektorgrafik. Ein paar dieser Möglichkeiten und die richtige Einstellung wollen wir Euch heute zeigen.

Die sechs einfachen Symbole Punkt, Quadrat, Stern, X, Kreuz oder Dreieck, die du als Lokationsstile darstellen kannst, lassen sich ähnlich im Backend einstellen. Ihr könnt die Darstellung dieser Symbole ganz einfach verändern Breite, Farbe und Deckkraft der Linie lassen sich über einzelne Felder anpassen. Des Weiteren lassen sich Farbe der Füllung, Deckkraft der Füllung und der Radius des Symbols anpassen. Die Farbauswahl funktioniert über einen Colorpicker, ihr könnt aber auch Euren Farbcode als Hexadezimal-Code (RRGGBB) eintragen.

Spannender wird es bei Pixel und Vektorgrafiken, also Darstellung als "Eigenes Icon - Pixel" oder "Eigenes Icon - Vektor".

Darstellung als eigenes Icon - Pixel

Wählt für Euer Icon, die zu Deiner Karte passende Größe aus. Für Pixel-Icons solltet Ihr immer die original Größe nehmen und die Skalierung auf 100% stellen. Somit vermeidet Ihr ein verpixeltes Icon. Icons unter 100 Pixel Höhe und Breite eignen sich meist perfekt für Eure Karte. Unter dem Punkt „Positionsversatz des Icons“ könnt Ihr Euer Icon auf der Karte an die gewünschte Position versetzten. Bei „0“ befindet sich die linke obere Ecke des Icons an der Stelle, wo das dargestellte Kartenstrukturelement in der Karte liegt. Mit entsprechenden Angaben in den positiven/negativen Bereich lässt sich das Icon z.B. auf die Lokation zentrieren. Unser Icon aus der obenliegenden Karte hat zum Beispiel eine Breite von 64px und eine Höhe von 74px, damit die Spitze vom Marker auch auf dem gewählten Punkt sitzt müssen wir beim Positionsversatz in der Breite also die Hälfte abziehen um es schonmal mittig zu positionieren sprich "-32px". Da die Spitze das Markers sich am unteren Rand des Icons befindet ziehen wir die volle Höhe ab, also "-74px". Jetzt ist unser Icon perfekt auf den gewählten Punkt in der Karte ausgerichtet.

Ihr habt die Möglichkeit das Icon mit dem Zoom zu skalieren, setzt einfach die Checkbox "Icon bei Zoom neu skalieren". Im Feld "Initiale Zoomstufe"legt Ihr fest bei welcher Zoomstufe das Icon die von euch angegebene Größe haben soll. Anschließend wählt Ihr den Skalierungsfaktor also um welchen Wert sich das Icon pro Zoomstufe mitskalieren soll. Die angegebenen Werte reichen von "0.1 - 1" und entsprechen Prozentwerten. Ihr habt zusätzlich noch die Möglichkeit eine minimale und eine maximale Zoomstufe festzulegen, hier bietet es sich jedoch an die Standardwerte zu übernehmen. Die Neuskalierung des Icons beim Zoom ist für verschieden große Icons immer unterschiedlich und Ihr solltet Euch etwas Zeit nehmen um sie perfekt einzustellen und ein Gefühl für die Skalierung zu bekommen.

Darstellung als eigenes Icon - Vektor

Hier habt Ihr die Möglichkeit ein Vektor-Icon als SVG-Datei einzubinden. Da SVG-Datei grundsätzlich keine feste Größe hinterlegt haben müssen wir die Checkbox "SVG-Attribut ergänzen" setzen. Diese Einstellung ist speziell für den Browser Firefox, da dieser unsere Größenangaben nicht berücksichtigt.
Auch bei einem Vektor Icon müsst ihr eine Größe angeben, hier solltet ihr die Originalmaße der Datei eintragen. Wichtig ist das das Verhältnis von Länge und Breite stimmt, damit das Bild nicht verzerrt wird. Wenn die Originalmaße sehr groß sind, könnt Ihr die Größe erneut über die Skalierung anpassen. Der "Positionsversatz" funktioniert genau so wie bei den Pixel-Icons und auch bei unterschiedlicher Skalierung wird der Positionsversatz passend und automatisch mit umgerechnet.

Einstellungen für Label

Mit dem Label habt Ihr die Möglichkeit Euren POIs eine Beschriftung zuzuordnen. Das Label für die Lokation, ist ebenfalls in Art, Farbe, Größe und weiteren Parametern anpassbar. Auch die Position der Beschriftung kannst Du beeinflussen. Wichtig: Das hier von Dir vorgegebene Label überschreibt die Einstellung am Kartenstrukturelement!

Auch die Schrift des Labels kann individuell angepasst werden, hier habt Ihr verschiedene Einstellungsmöglichkeiten zum Beispiel Schriftart, Schriftfarbe, Schriftgröße, Deckkraft der Farbe und Schriftgewicht. Falls die Schrift auf Eurer Karte schlecht lesbar ist, könnt Ihr zusätzlich einen Schriftrand einstellen.

Einstellungen für Popups

Wichtig: Hier vorgenommenen Eingaben überschreiben Einstellungen am Kartenstrukturelement!

Im Abschnitt „Zoomstufen“ könnt Ihr erfassen:

• auf welche Zoomstufe bei Mausklick gezoomt werden soll (funktioniert nur, wenn Ihr keine Direktverlinkung angegeben habt).
• ab welcher Zoomstufe die Elemente des Karteneintrags angezeigt werden sollen (0= keine Einschränkung).
• bis zu welcher Zoomstufe die Elemente angezeigt werden sollen (0=keine Einschränkung).

Wichtig: Jede manuelle Eingabe in diesem Abschnitt überschreibt die entsprechende Einstellung am Kartenstrukturelement!

Um die Lokationsstile deiner Lokation zu zuordnen, geht Ihr in die Kartenstruktur und bearbeitet das Strukturelement welchem Ihr den neuen Lokationsstile zuordnen wollt. Im Dropdownmenü Lokationsstile könnt Ihr Eure neu erstellten Lokationstile nun auswählen. Jetzt nur noch abspeichern und sie erscheinen direkt auf Eurer Karte im Frontend.

Viel Spaß mit Euren neuen Lokationsstilen!