I'm trying to add a second centered label to a Leaflet map. This is what it currently looks like:
I made the labels I currently have using the response to this thread , and here's my code:
var marker1 = L.marker([25.777085, -80.193935], {icon: redIcon}).addTo(mymap);
var marker2 = L.marker([25.759461, -80.204921], {icon: redIcon}).addTo(mymap);
createLabel(marker1, "Label 1");
createLabel(marker2, "Label 2");
function createLabel(layer, text){
removeLabel(layer);
var icon = createStaticLabelIcon(text);
var testspan = document.createElement("span");
document.body.appendChild(testspan);
testspan.className = "textwidth";
testspan.style.fontSize = "10px";
testspan.innerHTML = text;
var width = testspan.clientWidth +11;
icon.options.iconAnchor = [width / 2, -4]; //That the label is centered
var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(mymap);
layer.appendedLabel = label;
document.body.removeChild(testspan);
}
function removeLabel(layer){
if(layer.appendedLabel){
mymap.removeLayer(layer.appendedLabel); //Remove label that connected with marker, else the label will not removed
}
}
function createStaticLabelIcon(labelText) {
return L.divIcon({
className: "leaflet-marker-label",
html: '<span class="leaflet-marker-iconlabel" style="background: #CB2B3E; color: #FFFFFF;";>'+labelText+'</span>',
text : labelText,
});
}
And here's the css:
.leaflet-marker-label {
width: auto !important;
height: auto !important;
}
.leaflet-marker-iconlabel {
background: #fff;
border-radius: 7px;
-moz-box-shadow: 0 3px 10px #888;
-webkit-box-shadow: 0 3px 14px #999;
box-shadow: 0 3px 10px #888;
display: block;
font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
padding: 4px 4px;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
white-space: nowrap;
}
.textwidth {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
Any help on how I can add a second label underneath the first, would be appreciated. Here's an example of what I want, though I don't know how to make it:
You need to change is the y anchor and disbale the removeLabel
function:
icon.options.iconAnchor = [width / 2, -24]; //That the label is centered
function createLabel(layer, text, count){
//removeLabel(layer);
var icon = createStaticLabelIcon(text);
var testspan = document.createElement("span");
document.body.appendChild(testspan);
testspan.className = "textwidth";
testspan.style.fontSize = "10px";
testspan.innerHTML = text;
var width = testspan.clientWidth +11;
var posY = 0;
if( count == 1){
posY = -4;
} else if( count == 2){
posY = -24;
}
icon.options.iconAnchor = [width / 2, posY]; //That the label is centered
var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(mymap);
layer.appendedLabel = label;
document.body.removeChild(testspan);
}
createLabel(marker1, "Label 1.1",1);
createLabel(marker1, "Label 1.2",2);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.