From 76f66a814f3663812105a60a9371e3d273c8ae37 Mon Sep 17 00:00:00 2001
From: ppisljar <peter.pisljar@gmail.com>
Date: Tue, 8 Nov 2016 11:56:56 +0100
Subject: [PATCH] fixing top left position

---
 src/ui/public/vislib/styles/_tilemap.less             | 11 ++++++++++-
 .../vislib/visualizations/marker_types/base_marker.js |  9 +++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/ui/public/vislib/styles/_tilemap.less b/src/ui/public/vislib/styles/_tilemap.less
index a06897bed3cd1..ba6e21d618529 100644
--- a/src/ui/public/vislib/styles/_tilemap.less
+++ b/src/ui/public/vislib/styles/_tilemap.less
@@ -28,7 +28,6 @@
   font-weight: bold;
 }
 
-
 .tilemap-legend i {
   width: 10px;
   height: 10px;
@@ -42,6 +41,16 @@
   background: @tilemap-legend-i-bg;
 }
 
+/* top left needs some more styles */
+.leaflet-top.leaflet-left .tilemap-legend-wrapper {
+  position: absolute;
+  left: 50px;
+  white-space: nowrap;
+}
+
+.leaflet-top.leaflet-left .tilemap-legend-wrapper span {
+  padding-right: 20px;
+}
 
 /* leaflet Dom Util div for map legend */
 
diff --git a/src/ui/public/vislib/visualizations/marker_types/base_marker.js b/src/ui/public/vislib/visualizations/marker_types/base_marker.js
index fb1859d82d1d3..c7d7a031593b5 100644
--- a/src/ui/public/vislib/visualizations/marker_types/base_marker.js
+++ b/src/ui/public/vislib/visualizations/marker_types/base_marker.js
@@ -50,7 +50,9 @@ export default function MarkerFactory() {
       self._legend.onAdd = function () {
         // creates all the neccessary DOM elements for the control, adds listeners
         // on relevant map events, and returns the element containing the control
+        const $wrapper = $('<div>').addClass('tilemap-legend-wrapper');
         const $div = $('<div>').addClass('tilemap-legend');
+        $wrapper.append($div);
 
         const titleText = self.getLabel();
         const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
@@ -62,18 +64,21 @@ export default function MarkerFactory() {
           .map(self._valueFormatter)
           .join(' – ');
 
-          const label = $('<div>').text(labelText);
+          const label = $('<div>');
 
           const icon = $('<i>').css({
             background: color,
             'border-color': self.darkerColor(color)
           });
 
+          const text = $('<span>').text(labelText);
+
           label.append(icon);
+          label.append(text);
           $div.append(label);
         });
 
-        return $div.get(0);
+        return $wrapper.get(0);
       };
 
       self._legend.addTo(self.map);