leaflet.label

history.html

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <title>Neue und verschwundene Knoten</title>
     <style type="text/css">
+      .stroke-first {
+        paint-order: stroke;
+      }
+
       body {
         margin: 0;
         padding: 0;
@@ -246,11 +250,13 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:700,400">
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
+    <link rel="stylesheet" href="vendor/leaflet.label.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.27.1/es6-shim.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/0.6.3/chroma.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/3.0.2/tablesort.min.js"></script>
+    <script src="vendor/leaflet.label.js"></script>
     <script src="vendor/tablesort.numeric.js"></script>
     <script src="helper.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.min.js" data-main="lib/history"></script>

lib/map.js

@@ -7,7 +7,7 @@ define(function () {
        var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))
 
        m.on('click', gotoAnything.node(d, false))
-       m.bindPopup(d.nodeinfo.hostname)
+       m.bindLabel(d.nodeinfo.hostname)
 
        dict[d.nodeinfo.node_id] = m
 
@@ -27,7 +27,7 @@ define(function () {
 
        var line = L.polyline(d.latlngs, opts)
 
-       line.bindPopup(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname + "<br><strong>" + showDistance(d) + " / " + showTq(d) + "</strong>")
+       line.bindLabel(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname + "<br><strong>" + showDistance(d) + " / " + showTq(d) + "</strong>")
        line.on('click', gotoAnything.link(d, false))
 
        dict[linkId(d)] = line

vendor/leaflet.label.css

@@ -0,0 +1,54 @@
+.leaflet-label {
+	background: rgb(235, 235, 235);
+	background: rgba(235, 235, 235, 0.81);
+	background-clip: padding-box;
+	border-color: #777;
+	border-color: rgba(0,0,0,0.25);
+	border-radius: 4px;
+	border-style: solid;
+	border-width: 4px;
+	color: #111;
+	display: block;
+	font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	padding: 1px 6px;
+	position: absolute;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+	pointer-events: none;
+	white-space: nowrap;
+	z-index: 6;
+}
+
+.leaflet-label.leaflet-clickable {
+	cursor: pointer;
+	pointer-events: auto;
+}
+
+.leaflet-label:before,
+.leaflet-label:after {
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	content: none;
+	position: absolute;
+	top: 5px;
+}
+
+.leaflet-label:before {
+	border-right: 6px solid black;
+	border-right-color: inherit;
+	left: -10px;
+}
+
+.leaflet-label:after {
+	border-left: 6px solid black;
+	border-left-color: inherit;
+	right: -10px;
+}
+
+.leaflet-label-right:before,
+.leaflet-label-left:after {
+	content: "";
+}