Leaflet: „Sprechende“ Marker aus mehreren Bildern zusammensetzen?

[JürgenB]

Hallo Linuchs,

https://www.j-berkemeier.de/GPXViewer/Beispiel9.html

Die roten Icons mit der Zahl in der Mitte sind mit dem gezeigten Code erstellt.

Ich verwende die Methode L.divIcon, um die Icons zu erstellen. Dabei wird eigentlich nur ein HTML-Element frei auf der Karte positioniert.

	var html = "<div style='background-image:url("+url+");background-repeat: no-repeat;width:"+w+";height:"+h+"'><div>"+label+"</div></div>";
	var thisicon = L.divIcon({className:"JBcluster-icon", html: html, iconAnchor: [icon.icon.anchor.x, icon.icon.anchor.y] });

erstellt das Icon. Die URL und weitere Parameter wie Offset und Größe hole ich aus einer Datenstruktur.

Ich nehme als Grundelement ein div mit Hintergrundbild, und als Inhalt den Text.

	marker[0] = L.marker(coord, {icon: thisicon, title: title, zIndexOffset: 500 } ); 

erzeugt dann das Icon, das sich wie ein "normales" Icon verhält.

Gruß
Jürgen