第二个 label 为 leaflet map？

Question

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:

Answer 1

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);