Leaflet: „Sprechende“ Marker aus mehreren Bildern zusammensetzen?

[Rolf B]

Hallo Linuchs,

das einzige, was mir einfiele, wäre eine Overlaytechnik. Dafür hast Du einen roten oder blauen Basismarker, und legst nach Bedarf Symbole für Audio, Video oder Sternchen mit transparentem Hintergrund darüber. Das können GIF oder PNG mit transparentem Hintergrund sein, oder SVGs (für IE11 Unterstützung müssen die SVGs passend gebaut sein).

D.h. entweder hast Du bei 500 Vereinen 500 Marker, aber 12 verschiedene Icons für die Marker und weitere Verdopplungen, wenn noch was dazu kommt. Oder Du hast nur 5 Icons (rot, blau, audio-Overlay, video-Overlay, corona-Overlay), von denen Du pro Verein 1-3 Stück zeigst. Das kann man so lösen, dass Du an dem HTML Element mit dem Marker darin Klassen setzt, und im CSS je nach gesetzten Klassen das background-image zurechtstapelst. Oder mit ::after und ::before Zusatzebenen hinzufügst. Wenn es nur audio/video und corona ist, kommt man mit ::before und ::after gerade so hin 😀:

Allerdings: die Zugänglichkeit dieser Konstruktion - oder generell der Marker-Konstruktion - müsste man noch genauer betrachten. Entweder durch visuell versteckten Text im div oder durch geeignete aria-Attribute.

<div class="marker red audio corona" style="top:...; left: ..."></div>

.marker {
   position: absolute;
   width: ..., height: ...;
}
.marker.red {
   background-image: red-icon.png;
}
.marker.blue {
   background-image: red-icon.png;
}
.marker.audio::before {
   position:absolute; 
   background-image: audio-icon.png;
   z-index: 1;
}
.marker.video::before {
   position:absolute; 
   background-image: audio-icon.png;
   z-index: 1;
}
.marker.infos::after {
   position:absolute; 
   background-image: infos-icon.png;
   z-index: 2;
}

Also - viele Icons oder Stapeltechnik, für eins von beiden musst Du Dich wohl entscheiden. Wie setzt Du die Marker? Per JS am Client? Oder erzeugst Du das HTML dafür am Server mit PHP? Wenn es PHP ist, würde ich bei vielen unterschiedlichen Icons bleiben, auf diese Weise transferierst Du deutlich weniger HTML. Wenn es JS ist, dann würde ich sagen: es ist netzwerktechnisch egal, du sparst Dir nur die Arbeit, viele Iconvarianten zu pflegen.

Rolf