JürgenB: Leaflet: „Sprechende“ Marker aus mehreren Bildern zusammensetzen?

Beitrag lesen

problematische Seite

Hallo Linuchs,

kennst du L.divIcon? Mit folgendem Code ertstelle ich ein Icon mit Text (label) darüber, nur mal so als Anregung:

	Cluster_Icon = { icon:   { anchor: {x:16,y:16}, url: baseurl+"Icons/cluster.svg", 
											scaledSize: { width: 31, height: 31, widthUnit: "px", heightUnit: "px" },
											size: { width: 31, height: 31, widthUnit: "px", heightUnit: "px" } } };

icon = Cluster_Icon;

JB.Map.prototype.setClusterMarker = function(coord,icon,title,label) { 
	var url = icon.icon.url;
	var w = icon.icon.size.width + icon.icon.size.widthUnit;
	var h = icon.icon.size.height + icon.icon.size.heightUnit;
	var marker = [];
	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] });
	marker[0] = L.marker(coord, {icon: thisicon, title: title, zIndexOffset: 500 } ); 
	marker[0].addTo(this.map);
	return marker;
} // setClusterMarker
div.JBcluster-icon > div { display: flex; align-items: center; justify-content: center; font-weight: bold }

Gruß
Jürgen