From f2758843bf7638e8ed9ee19bd6f4091eaf113038 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Wed, 20 Feb 2019 11:36:09 +0700
Subject: [PATCH] marcercluster tooltips

---
 src/styles/map.less      | 17 +++++++++++++++++
 src/utils/clusterIcon.js |  5 +++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/styles/map.less b/src/styles/map.less
index a033225..0a53d55 100644
--- a/src/styles/map.less
+++ b/src/styles/map.less
@@ -126,8 +126,25 @@
   font-size: 13px;
   transform: translate(-12px, -12px);
   transition: box-shadow 250ms;
+  position: relative;
+  outline: none;
 
   &:hover {
     box-shadow: fade(@cluster_small, 70%) 0 0 0 7px;
   }
+
+  span {
+    outline: none;
+    position: absolute;
+    right: -7px;
+    bottom: 11px;
+    background: @cluster_small;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    font-size: 11px;
+  }
 }
diff --git a/src/utils/clusterIcon.js b/src/utils/clusterIcon.js
index 2224df4..7d45b89 100644
--- a/src/utils/clusterIcon.js
+++ b/src/utils/clusterIcon.js
@@ -1,8 +1,9 @@
 import { divIcon } from 'leaflet';
 
-export const clusterIcon = () => divIcon({
+export const clusterIcon = cluster => divIcon({
   html: `
-    <div class="custom-marker-cluster">          
+    <div class="custom-marker-cluster">
+      <span>${cluster.getChildCount()}</span>          
       <svg width="24" height="24" viewBox="-2 -2 36 36">            
         <circle cx="10" cy="20" fill="white" r="4" />
         <circle cx="22" cy="20" fill="white" r="4" />