JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<script src="//rawgit.com/gorshkov-leonid/Leaflet/master/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="//rawgit.com/gorshkov-leonid/Leaflet/master/dist/leaflet.css">
<script src="//leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
<link rel="stylesheet" href="//leaflet.github.io/Leaflet.label/leaflet.label.css">
<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>

CSS

.container {
    border: 0 rgba(0, 0, 0, 0);
    border-radius: 2px;
    padding: 2px 5px 2px 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    background-color: rgba(244, 248, 250, 0.85);
    white-space:'nowrap';
    font: bold 9px Tahoma, sans-serif;
}
.container-selected {
    border: 0 rgba(0, 0, 0, 0);
    border-radius: 2px;
    padding: 2px 5px 2px 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    background-color: rgba(0, 174, 239, 0.85);
    color: #ffffff;
    white-space:'nowrap';
    font: bold 9px Tahoma, sans-serif;
}
.asd {
}
}

JavaScript

function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

var map = new L.Map('map', {
    center: new L.LatLng(-37.76525, 175.2558),
    zoom: 15
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

var polygon = L.polygon([
    [-37.7599, 175.2515],
    [-37.7599, 175.2595],
    [-37.7653, 175.2595],
    [-37.7653, 175.2515],
    [-37.7599, 175.2515]
]);
polygon.addTo(map);
var text = 'CCL #1';
var x = -getTextWidth(text, 'bold 9px Tahoma, sans-serif') / 2 - 6; //6 is width of the triangle
var label = new L.Label({
    className: 'container',
    offset: [x, 0]
});
label.setContent(text);
label.setLatLng(polygon.getBounds().getCenter());
map.addLayer(label);

var marker = L.marker(new L.LatLng(-37.76825, 175.2555));
marker.addTo(map);
var markerText = 'CCL #2';
var x2 = -getTextWidth(markerText, 'bold 9px Tahoma, sans-serif') / 2 - 6; //6 is width of the triangle
var markerLabel = new L.Label({
    className: 'container-selected',
    offset: [x2, 2]
});
markerLabel.setContent(markerText);
markerLabel.setLatLng(marker.getLatLng());
map.addLayer(markerLabel);

var img = L.imageOverlay("http://leaflet.github.io/Leaflet.label/images/death.png", [
    [-37.7599, 175.2415],
    [-37.7579, 175.2435]
], {});
map.addLayer(img);