Allgemein
Die Kartenansicht, ohne UI Elemente, wird als eigener Web Component bereitgestellt. Der HTML Tag Name lautet
<contwise-maps></contwise-maps>
JavaScript Tag für die Einbettung
<script defer="defer" src="https://phoenix.mapservices.eu/webcomponent.bundle.js?chachebust=12452&version=1"></script>
Demoseite mit Interaktionen via JavaScript
https://phoenix.mapservices.eu/webcomponent.htmlBeispieleinbettung
Anzeige aller Wanderungen (Kategorie ID 18304) auf Deutsch im Sommerkontext der Karte.<contwise-maps apikey="demo_achensee_28817gab" autozoom="true" categoryid="18304" class="contwise-maps" contextid="12" id="maps-webcomponent" language="de" style="width:100%;height:300px"></contwise-maps>
Attribute für die Komponente
el.setAttribute("name", "value") auf das DOM Element zur Laufzeit verändert werden.Alternativ können die Attribute auch als Properties in camel-case via JavaScript angepasst werden, z.B. el.view = [10, 48, 12]. Für alle Elemente, die zur Laufzeit verändert werden können, ist der Name der Property auch mitangegeben.
Für jene Inhalte aus Contwise Maps, die mittels categoryId, resourceIds und resourceForeignIds angegeben werden können, wird immer nur ein Element in der angegebenen Reihenfolge berücksichtigt. D.h.: Wird die categoryId und resourceIds angegeben, hat die categoryId Priorität.
| Name | Mögliche Werte | Beschreibung |
| apikey | Zur Laufzeit veränderbar: Nein | API Key für die Verwendung der Karte wird durch GS für jeden Partner vergeben. Pflichtfeld |
| language | de, en, fr, it, es, nl Zur Laufzeit veränderbar: Nein | Kürzel für die verwendete Sprache. Default ist language="de". |
| cooperativegestures | true / false Zur Laufzeit veränderbar: Nein | Deaktiviert das Scrollen mit dem Mausrad und das Verschieben mit einem Finger der eingebetteten Karte. Default ist cooperativegestures="true". |
| loaddefaultresources | none, mandator, all Zur Laufzeit veränderbar: Nein | Legt fest ob die standardmäßig angezeigten Karteninhalte geladen werden. Hier handelt es sich um die automatisch erscheinenden Marker ab Zoomstufe 13. Default ist loaddefaultresources="none" |
| autozoom Property: autoZoom | true / false Zur Laufzeit veränderbar: Ja | Wenn true, wird der Kartenausschnitt immer so gewählt, dass die dargestellten Inhalte alle sichtbar sind. Default ist autozoom="true". |
| view Property: view | Mit Beistrich getrennt zoom,lat,lng Werte. Zur Laufzeit veränderbar: Ja | Initiales Kartenzentrum, das gesetzt werden soll im Format view="12,47.001,11.882". Wird ggf. durch den Autozoom überschrieben. Das Property kann alternativ auch als JavaScript Array mit 3 Elementen für [zoom, lat, lng] angegeben werden. |
| contextid | Ganzzahl ID Zur Laufzeit veränderbar: Nein | Gibt an, welcher Kartenkontext geladen werden soll. Sollte kein Kartenkontext angegeben sein, wird der aktuell im Backend eingestellte Standardkontext geladen. Wichtig: Über den Kartenkontext können automatisch angezeigte und ausgeblendete Inhalte über das Backend konfiguriert werden. |
| categoryid Property: categoryId | Ganzzahl ID Zur Laufzeit veränderbar: Ja | Anzeige einer kompletten Kategorie inkl. aller Unterkategorien auf der Karte. |
| resourceids Property: resourceIds | Mit Beistrich getrennte Liste von ganzzahl IDs. Zur Laufzeit veränderbar: Ja | Liste von Inhalten, welche auf der Karte angezeigt werden sollen. In der Form resourceids="1,2,3" Das Property kann alternativ auch als JavaScript Array angegeben werden. |
| resourceforeignids Property: resourceForeignIds | Mit Beistrich getrennte Liste von String IDs. Zur Laufzeit veränderbar: Ja | Liste von Inhalten, welche auf der Karte angezeigt werden sollen. In der Form resourceforeignids="UUID-1,UUID-2,Fremdschlüssel-3" Das Property kann alternativ auch als JavaScript Array angegeben werden. |
| showsheet Property: showSheet | true / false Zur Laufzeit veränderbar: Nein Verfügbar ab 10.06.2024 | Ob UI Sheets angezeigt werden sollen oder nicht. Default ist showsheet="false". |
| showmaptopcontrols Property: showMapTopControls | true / false Zur Laufzeit veränderbar: Nein Verfügbar ab 10.06.2024 | Ob die Kartennavigations-Elemente Home, Menü, Kartenlayer und 3D angezeigt werden oder nicht. Default ist showmaptopcontrols="false" |
| showmapbottomcontrols Property: showMapBottomControls | true / false Zur Laufzeit veränderbar: Nein Verfügbar ab 10.06.2024 | Ob die Kartennavigations-Elemente Kompass, Maßstab, Verortung, Vergößerun und Verkleinern angezeigt werden oder nicht. Default ist showmapbottomcontrols="false" |
| cluster | true / false Zur Laufzeit veränderbar: Ja Verfügbar ab 10.06.2024 | Ob Inhalte die via WebComponent geladen wurden in einen Cluster zusammengefasst werden sollen oder nicht. Default ist cluster="true" |
Methoden für die Komponente
| Name | Mögliche Werte | Beschreibung |
| setZoom | Number | Setzt den aktuellen Zoomlevel der Karte auf den übergebenen Wert. |
| setCenter | Array [Lat, Lng] | Setzt das aktuelle Kartenzentrum auf die übergebene Position. |
Steuerung via JavaScript und Eventhandling
Auf die Komponente kann mittels JavaScript / DOM zugegriffen werden, um die Karte zu manipulieren und auf Events zu reagieren.JavaScript Beispiel für einige dynamsiche Anpassungen:
let el = null;
window.addEventListener("load", () => {
el = document.querySelector("#webcomponent");
el.addEventListener("map-element-onclick", (e) => {
console.log("Kartenelement click.", e)
e.stopPropagation();
})
el.addEventListener("map-element-onmouseover", (e) => {
console.log("Kartenelement mouseover.", e)
})
el.addEventListener("map-element-onmouseout", (e) => {
console.log("Kartenelement mouseout.", e)
})
el.addEventListener("map-update", (e) => {
console.log("Karte hat sich aktualisiert.", e)
})
el.addEventListener("list-on-click", (e) => {
console.log("Element in der Liste wurde angeklick.", e)
})
el.displayList = [{
id: 11221,
markers: [{
iconName: "poi",
position: [47.43988, 11.68608],
svgIconColor: "service",
svgIconMarkerShape: "poi"
}],
polylines: [{
positions: [
[47.43988, 11.68608],
[47.43400, 11.66978],
[47.42602, 11.64724],
[47.40307, 11.6167],
[47.38359, 11.60277]
],
opacity: 1,
color: "#007ebd",
weight: 10
}],
name: "Ein Tooltip für den POI"
}]
});
window.addEventListener("load", () => {
el = document.querySelector("#webcomponent");
el.addEventListener("map-element-onclick", (e) => {
console.log("Kartenelement click.", e)
e.stopPropagation();
})
el.addEventListener("map-element-onmouseover", (e) => {
console.log("Kartenelement mouseover.", e)
})
el.addEventListener("map-element-onmouseout", (e) => {
console.log("Kartenelement mouseout.", e)
})
el.addEventListener("map-update", (e) => {
console.log("Karte hat sich aktualisiert.", e)
})
el.addEventListener("list-on-click", (e) => {
console.log("Element in der Liste wurde angeklick.", e)
})
el.displayList = [{
id: 11221,
markers: [{
iconName: "poi",
position: [47.43988, 11.68608],
svgIconColor: "service",
svgIconMarkerShape: "poi"
}],
polylines: [{
positions: [
[47.43988, 11.68608],
[47.43400, 11.66978],
[47.42602, 11.64724],
[47.40307, 11.6167],
[47.38359, 11.60277]
],
opacity: 1,
color: "#007ebd",
weight: 10
}],
name: "Ein Tooltip für den POI"
}]
});
Beispieleinbettung mit Eventhandling
<contwise-maps apikey="demo_achensee_28817gab" autozoom="true" class="contwise-maps" contextid="12" language="de" resourceforeignids="c9981fbe-ba3a-4ac8-ae6c-7de136ea7b61"></contwise-maps>
Mouseover Status noch nicht gesetzt.
Ausgelöste Events
Mittels der Standard DOM Methode addEventListener können auf die Komponente Callbacks für das Event-Handling registriert werden. Über den Aufruf von stopPropagation() am Event-Objekt kann das Weiterverarbeiten des Events unterbunden werden, z.B. damit ausgewählte Marker nicht groß dargestellt werden.| Name | Parameter | Beschreibung |
| map-element-onclick | Ganzzahl event.detail.id und optional event.detail.foreignId | Wird beim Klick / Touch auf einen Marker ausgelöst. Im details Attribut des Events ist die id des Inhaltes angegeben. Sollte beim Element ein Fremdschlüssel hinterlegt sein, wird die foreignId auch übertragen. |
| map-element-onmouseover | Ganzzahl event.detail.id und optional event.detail.foreignId | Wird beim Darüberfahren mit der Maus auf einen Marker ausgelöst. Im details Attribut des Events ist die id des Inhaltes angegeben. Sollte beim Element ein Fremdschlüssel hinterlegt sein, wird die foreignId auch übertragen. |
| map-element-onmouseover | Ganzzahl event.detail.id und optional event.detail.foreignId | Wird beim Verlassen eines Markers mit der Maus ausgelöst. Im details Attribut des Events ist die id des Inhaltes angegeben. Sollte beim Element ein Fremdschlüssel hinterlegt sein, wird die foreignId auch übertragen. |
| map-update | Array von Objekten in event.detail.mapElements mit aktuell angezeigter id und foreignId | Dieser Event wird ausgelöst sobald die Karte neu gezeichnet wird. Dieser Event kann auch dazu verwendet werden um auf eine Änderung der angezeigten Inhalte auf der Karte zu reagieren. |
| list-element-onclick | Ganzzahl event.detail.id und optional event.detail.foreignId Verfügbar ab 10.06.2024 | Wird beim Klick / Touch auf einen eintrag in einem UI Listenelement ausgelöst. Kann nur ausgelöst werden, wenn showSheet="true" zur Anzeige des Maps UI gesetzt ist. Im details Attribut des Events ist die id des Inhaltes angegeben. Sollte beim Element ein Fremdschlüssel hinterlegt sein, wird die foreignId auch übertragen. |
Eigene Kartenelemente einzeichnen
Über das Property displayList können eigene Karteninhalte eingezeichnet werden. Die displayList kann nur mittels JavaScript gesetzt werden.Die displayList ist ein Array von Objekten, jedes Objekt besteht wieder aus mehreren Karteninhalten. Jede Änderung an der Property spiegelt sich sofort auf der Karte wider.
Elemente der displayList haben keinen Einfluss auf den autoZoom, der view (zoom, lat, lng) der Karte muss manuell angepasst werden.
Mögliche Eigenschaften für ein displayList Objekt
| Name | Mögliche Werte | Beschreibung |
| id | Ganzzahl ID | Eindeutige ID für dieses Element, relevant für Event-Handling. |
| name | String | Name der im Tooltip zum Marker angezeigt wird. |
| markers | Array von Objekten | Markerobjekte für diesen Inhalt. |
| polylines | Array von Objekten | Polylineobjekte für diesen Inhalt. |
Mögliche Eigenschaften für ein Marker Objekt
| Name | Mögliche Werte | Beschreibung |
| iconName | String: 3d, altitudeDown, altitudeLevel, altitudeUp, arrowLeft, arrowRight, attention, bed, bike, book, bookmark, car, card, checkboxSquare, checkmark, chevronDown, chevronUp, circle, clear, clock, close, control, creditCard, danger, destination, difficulty, download, event, exposition, externalLink, eye, factSheet, filter, globe, guidepost, icontime, info, length, like, link, location, magnifier, mail, nordic_classic, nordic_skating, person, phone, play, poi, print, publicTransport, questionMark, restaurant, routing, share, snowflake, star, stop, trash, user, volume, walk | Zahlreiche weitere stehen zur Verfügung und können einfach bei Bedarf ergänzt werden. |
| iconSize | String: small, middle, large | Größe des auf der Karte dargestellten Marker. |
| svgIconColor | String: service, poi, sommer, winter, transport, accomodation, status_red, status_orange, status_green | Theme Hintegrundfarbe für den Marker. Farbcode wird entsprechend dem CI gesetzt. |
| svgIconMarkerShape | String: poi, activity, transport, circle | Theme Form für den Marker. Wird entsprechend dem CI gesetzt. |
| position | Array mit zwei Fließkommazahlen | Koordinatenpaar als Array im [Lat,Lng] Format, z.B. [47.93, 11.22] |
Mögliche Eigenschaften für ein Polyline Objekt
| Name | Mögliche Werte | Beschreibung |
| color | Hexadezimal Farbcode | HTML Farbcode für Linie in der Form #RRGGBB, z.B. #007ebd |
| weight | Ganzzahl | Breite der Linie |
| opacity | Fließkommazahl zwischen 0 und 1. | Deckkraft der Linie |
| positions | Zweidimensionaler Array mit Koordinaten der Linie. | Liste von Koordinatenpaaren mit zwei Fließkommazahlen, im [[Lat,Lng], [Lat, Lng]] Format, z.B. [[47.41,11.23], [48.2,11.3]] |
