Add location to f2f clusters (#899)

* Add f2f location clusters

---------

Co-authored-by: Reckless_Satoshi <reckless.satoshi@protonmail.com>

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@christopherpickering/react-leaflet-markercluster": "^1.1.0",
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
         "@mui/base": "^5.0.0-beta.7",
@@ -1939,6 +1940,23 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@christopherpickering/react-leaflet-markercluster": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@christopherpickering/react-leaflet-markercluster/-/react-leaflet-markercluster-1.1.0.tgz",
+      "integrity": "sha512-69Q3c/Szq7vXNSq6wy+wi6Wj4yHHVxzAuJMiFMgTcoyuZO4EQj8a6qzOc/XdcuQbNX+gfFe2Me/C61bc6sjO4g==",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0",
+        "leaflet": "^1.9.3",
+        "leaflet.markercluster": "^1.5.3",
+        "postcss-flexbugs-fixes": "^5.0.2",
+        "react-leaflet": "^4.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.3",
+        "leaflet.markercluster": "^1.5.3",
+        "react-leaflet": "^4.0.0"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -10094,6 +10112,14 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
     },
+    "node_modules/leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "peerDependencies": {
+        "leaflet": "^1.3.1"
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -10326,6 +10352,24 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -13905,6 +13949,42 @@
         "node": ">=10.4.0"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-flexbugs-fixes": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
+      "peerDependencies": {
+        "postcss": "^8.1.4"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

frontend/package.json

@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@christopherpickering/react-leaflet-markercluster": "^1.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/base": "^5.0.0-beta.7",

frontend/src/components/Map/index.tsx

@@ -4,10 +4,11 @@ import { MapContainer, GeoJSON, useMapEvents, TileLayer, Tooltip, Marker } from
 import { useTheme, LinearProgress } from '@mui/material';
 import { UseAppStoreType, AppContext } from '../../contexts/AppContext';
 import { GeoJsonObject } from 'geojson';
-import { Icon, LeafletMouseEvent, Point } from 'leaflet';
+import { Icon, LeafletMouseEvent } from 'leaflet';
 import { PublicOrder } from '../../models';
 import OrderTooltip from '../Charts/helpers/OrderTooltip';
 import getWorldmapGeojson from '../../geo/Web';
+import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster';
 
 interface Props {
   orderType?: number;
@@ -91,14 +92,20 @@ const Map = ({
   };
 
   const getOrderMarkers = () => {
-    return orders.map((order) => {
+    if (orders.length < 1) return <></>;
-      if (!order.latitude || !order.longitude) return <></>;
+    return (
-      return RobotMarker(order.id, [order.latitude, order.longitude], order.type || 0, order);
+      <MarkerClusterGroup showCoverageOnHover={false} disableClusteringAtZoom={14}>
-    });
+        {orders.map((order) => {
+          if (!order.latitude || !order.longitude) return <></>;
+          return RobotMarker(order.id, [order.latitude, order.longitude], order.type || 0, order);
+        })}
+      </MarkerClusterGroup>
+    );
   };
 
   return (
     <MapContainer
+      maxZoom={15}
       center={center ?? [0, 0]}
       zoom={zoom ? zoom : 2}
       attributionControl={false}

frontend/static/css/leaflet.css

@@ -14,9 +14,11 @@
   left: 0;
   top: 0;
 }
+
 .leaflet-container {
   overflow: hidden;
 }
+
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
@@ -25,30 +27,36 @@
   user-select: none;
   -webkit-user-drag: none;
 }
+
 /* Prevents IE11 from highlighting tiles in blue */
 .leaflet-tile::selection {
   background: transparent;
 }
+
 /* Safari renders non-retina tile on retina better with this, but Chrome is worse */
 .leaflet-safari .leaflet-tile {
   image-rendering: -webkit-optimize-contrast;
 }
+
 /* hack that prevents hw layers "stretching" when loading new tiles */
 .leaflet-safari .leaflet-tile-container {
   width: 1600px;
   height: 1600px;
   -webkit-transform-origin: 0 0;
 }
+
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
   display: block;
 }
+
 /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
 /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
 .leaflet-container .leaflet-overlay-pane svg {
   max-width: none !important;
   max-height: none !important;
 }
+
 .leaflet-container .leaflet-marker-pane img,
 .leaflet-container .leaflet-shadow-pane img,
 .leaflet-container .leaflet-tile-pane img,
@@ -69,29 +77,36 @@
   -ms-touch-action: pan-x pan-y;
   touch-action: pan-x pan-y;
 }
+
 .leaflet-container.leaflet-touch-drag {
   -ms-touch-action: pinch-zoom;
   /* Fallback for FF which doesn't support pinch-zoom */
   touch-action: none;
   touch-action: pinch-zoom;
 }
+
 .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
   -ms-touch-action: none;
   touch-action: none;
 }
+
 .leaflet-container {
   -webkit-tap-highlight-color: transparent;
 }
+
 .leaflet-container a {
   -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
 }
+
 .leaflet-tile {
   filter: inherit;
   visibility: hidden;
 }
+
 .leaflet-tile-loaded {
   visibility: inherit;
 }
+
 .leaflet-zoom-box {
   width: 0;
   height: 0;
@@ -99,6 +114,7 @@
   box-sizing: border-box;
   z-index: 800;
 }
+
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {
   -moz-user-select: none;
@@ -111,18 +127,23 @@
 .leaflet-tile-pane {
   z-index: 200;
 }
+
 .leaflet-overlay-pane {
   z-index: 400;
 }
+
 .leaflet-shadow-pane {
   z-index: 500;
 }
+
 .leaflet-marker-pane {
   z-index: 600;
 }
+
 .leaflet-tooltip-pane {
   z-index: 650;
 }
+
 .leaflet-popup-pane {
   z-index: 700;
 }
@@ -130,6 +151,7 @@
 .leaflet-map-pane canvas {
   z-index: 100;
 }
+
 .leaflet-map-pane svg {
   z-index: 200;
 }
@@ -138,6 +160,7 @@
   width: 1px;
   height: 1px;
 }
+
 .lvml {
   behavior: url(#default#VML);
   display: inline-block;
@@ -149,43 +172,55 @@
 .leaflet-control {
   position: relative;
   z-index: 800;
-  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: visiblePainted;
+  /* IE 9-10 doesn't have auto */
   pointer-events: auto;
 }
+
 .leaflet-top,
 .leaflet-bottom {
   position: absolute;
   z-index: 1000;
   pointer-events: none;
 }
+
 .leaflet-top {
   top: 0;
 }
+
 .leaflet-right {
   right: 0;
 }
+
 .leaflet-bottom {
   bottom: 0;
 }
+
 .leaflet-left {
   left: 0;
 }
+
 .leaflet-control {
   float: left;
   clear: both;
 }
+
 .leaflet-right .leaflet-control {
   float: right;
 }
+
 .leaflet-top .leaflet-control {
   margin-top: 10px;
 }
+
 .leaflet-bottom .leaflet-control {
   margin-bottom: 10px;
 }
+
 .leaflet-left .leaflet-control {
   margin-left: 10px;
 }
+
 .leaflet-right .leaflet-control {
   margin-right: 10px;
 }
@@ -198,14 +233,17 @@
   -moz-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
+
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
   opacity: 1;
 }
+
 .leaflet-zoom-animated {
   -webkit-transform-origin: 0 0;
   -ms-transform-origin: 0 0;
   transform-origin: 0 0;
 }
+
 svg.leaflet-zoom-animated {
   will-change: transform;
 }
@@ -215,6 +253,7 @@ svg.leaflet-zoom-animated {
   -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
   transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
 }
+
 .leaflet-zoom-anim .leaflet-tile,
 .leaflet-pan-anim .leaflet-tile {
   -webkit-transition: none;
@@ -231,19 +270,23 @@ svg.leaflet-zoom-animated {
 .leaflet-interactive {
   cursor: pointer;
 }
+
 .leaflet-grab {
   cursor: -webkit-grab;
   cursor: -moz-grab;
   cursor: grab;
 }
+
 .leaflet-crosshair,
 .leaflet-crosshair .leaflet-interactive {
   cursor: crosshair;
 }
+
 .leaflet-popup-pane,
 .leaflet-control {
   cursor: auto;
 }
+
 .leaflet-dragging .leaflet-grab,
 .leaflet-dragging .leaflet-grab .leaflet-interactive,
 .leaflet-dragging .leaflet-marker-draggable {
@@ -266,7 +309,8 @@ svg.leaflet-zoom-animated {
 .leaflet-image-layer.leaflet-interactive,
 .leaflet-pane > svg path.leaflet-interactive,
 svg.leaflet-image-layer.leaflet-interactive path {
-  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+  pointer-events: visiblePainted;
+  /* IE 9-10 doesn't have auto */
   pointer-events: auto;
 }
 
@@ -276,9 +320,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background: #ddd;
   outline-offset: 1px;
 }
+
 .leaflet-container a {
   color: #0078a8;
 }
+
 .leaflet-zoom-box {
   border: 2px dotted #38f;
   background: rgba(255, 255, 255, 0.5);
@@ -298,6 +344,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
   border-radius: 4px;
 }
+
 .leaflet-bar a {
   background-color: #fff;
   border-bottom: 1px solid #ccc;
@@ -309,25 +356,30 @@ svg.leaflet-image-layer.leaflet-interactive path {
   text-decoration: none;
   color: black;
 }
+
 .leaflet-bar a,
 .leaflet-control-layers-toggle {
   background-position: 50% 50%;
   background-repeat: no-repeat;
   display: block;
 }
+
 .leaflet-bar a:hover,
 .leaflet-bar a:focus {
   background-color: #f4f4f4;
 }
+
 .leaflet-bar a:first-child {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
+
 .leaflet-bar a:last-child {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: none;
 }
+
 .leaflet-bar a.leaflet-disabled {
   cursor: default;
   background-color: #f4f4f4;
@@ -339,10 +391,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
   height: 30px;
   line-height: 30px;
 }
+
 .leaflet-touch .leaflet-bar a:first-child {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 }
+
 .leaflet-touch .leaflet-bar a:last-child {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
@@ -371,47 +425,57 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background: #fff;
   border-radius: 5px;
 }
+
 .leaflet-control-layers-toggle {
   background-image: url(images/layers.png);
   width: 36px;
   height: 36px;
 }
+
 .leaflet-retina .leaflet-control-layers-toggle {
   background-image: url(images/layers-2x.png);
   background-size: 26px 26px;
 }
+
 .leaflet-touch .leaflet-control-layers-toggle {
   width: 44px;
   height: 44px;
 }
+
 .leaflet-control-layers .leaflet-control-layers-list,
 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
   display: none;
 }
+
 .leaflet-control-layers-expanded .leaflet-control-layers-list {
   display: block;
   position: relative;
 }
+
 .leaflet-control-layers-expanded {
   padding: 6px 10px 6px 6px;
   color: #333;
   background: #fff;
 }
+
 .leaflet-control-layers-scrollbar {
   overflow-y: scroll;
   overflow-x: hidden;
   padding-right: 5px;
 }
+
 .leaflet-control-layers-selector {
   margin-top: 2px;
   position: relative;
   top: 1px;
 }
+
 .leaflet-control-layers label {
   display: block;
   font-size: 13px;
   font-size: 1.08333em;
 }
+
 .leaflet-control-layers-separator {
   height: 0;
   border-top: 1px solid #ddd;
@@ -431,31 +495,38 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background: rgba(255, 255, 255, 0.8);
   margin: 0;
 }
+
 .leaflet-control-attribution,
 .leaflet-control-scale-line {
   padding: 0 5px;
   color: #333;
   line-height: 1.4;
 }
+
 .leaflet-control-attribution a {
   text-decoration: none;
 }
+
 .leaflet-control-attribution a:hover,
 .leaflet-control-attribution a:focus {
   text-decoration: underline;
 }
+
 .leaflet-attribution-flag {
   display: inline !important;
   vertical-align: baseline !important;
   width: 1em;
   height: 0.6669em;
 }
+
 .leaflet-left .leaflet-control-scale {
   margin-left: 5px;
 }
+
 .leaflet-bottom .leaflet-control-scale {
   margin-bottom: 5px;
 }
+
 .leaflet-control-scale-line {
   border: 2px solid #777;
   border-top: none;
@@ -467,11 +538,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background: rgba(255, 255, 255, 0.8);
   text-shadow: 1px 1px #fff;
 }
+
 .leaflet-control-scale-line:not(:first-child) {
   border-top: 2px solid #777;
   border-bottom: none;
   margin-top: -2px;
 }
+
 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
   border-bottom: 2px solid #777;
 }
@@ -481,6 +554,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-touch .leaflet-bar {
   box-shadow: none;
 }
+
 .leaflet-touch .leaflet-control-layers,
 .leaflet-touch .leaflet-bar {
   border: 2px solid rgba(0, 0, 0, 0.2);
@@ -494,11 +568,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
   text-align: center;
   margin-bottom: 20px;
 }
+
 .leaflet-popup-content-wrapper {
   padding: 1px;
   text-align: left;
   border-radius: 12px;
 }
+
 .leaflet-popup-content {
   margin: 13px 24px 13px 20px;
   line-height: 1.3;
@@ -506,10 +582,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
   font-size: 1.08333em;
   min-height: 1px;
 }
+
 .leaflet-popup-content p {
   margin: 17px 0;
   margin: 1.3em 0;
 }
+
 .leaflet-popup-tip-container {
   width: 40px;
   height: 20px;
@@ -520,6 +598,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   overflow: hidden;
   pointer-events: none;
 }
+
 .leaflet-popup-tip {
   width: 17px;
   height: 17px;
@@ -533,12 +612,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
+
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
   background: white;
   color: #333;
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
 }
+
 .leaflet-container a.leaflet-popup-close-button {
   position: absolute;
   top: 0;
@@ -555,10 +636,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
   text-decoration: none;
   background: transparent;
 }
+
 .leaflet-container a.leaflet-popup-close-button:hover,
 .leaflet-container a.leaflet-popup-close-button:focus {
   color: #585858;
 }
+
 .leaflet-popup-scrolled {
   overflow: auto;
 }
@@ -566,6 +649,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-oldie .leaflet-popup-content-wrapper {
   -ms-zoom: 1;
 }
+
 .leaflet-oldie .leaflet-popup-tip {
   width: 24px;
   margin: 0 auto;
@@ -603,10 +687,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
   pointer-events: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
+
 .leaflet-tooltip.leaflet-interactive {
   cursor: pointer;
   pointer-events: auto;
 }
+
 .leaflet-tooltip-top:before,
 .leaflet-tooltip-bottom:before,
 .leaflet-tooltip-left:before,
@@ -623,41 +709,50 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-tooltip-bottom {
   margin-top: 6px;
 }
+
 .leaflet-tooltip-top {
   margin-top: -6px;
 }
+
 .leaflet-tooltip-bottom:before,
 .leaflet-tooltip-top:before {
   left: 50%;
   margin-left: -6px;
 }
+
 .leaflet-tooltip-top:before {
   bottom: 0;
   margin-bottom: -12px;
   border-top-color: #fff;
 }
+
 .leaflet-tooltip-bottom:before {
   top: 0;
   margin-top: -12px;
   margin-left: -6px;
   border-bottom-color: #fff;
 }
+
 .leaflet-tooltip-left {
   margin-left: -6px;
 }
+
 .leaflet-tooltip-right {
   margin-left: 6px;
 }
+
 .leaflet-tooltip-left:before,
 .leaflet-tooltip-right:before {
   top: 50%;
   margin-top: -6px;
 }
+
 .leaflet-tooltip-left:before {
   right: 0;
   margin-right: -12px;
   border-left-color: #fff;
 }
+
 .leaflet-tooltip-right:before {
   left: 0;
   margin-left: -12px;
@@ -673,3 +768,107 @@ svg.leaflet-image-layer.leaflet-interactive path {
     print-color-adjust: exact;
   }
 }
+
+/* react-leaflet-cluster https://unpkg.com/@christopherpickering/react-leaflet-markercluster@1.1.0/dist/styles.min.css */
+
+.marker-cluster-small {
+  background-color: rgba(181, 226, 140, 0.6);
+}
+
+.marker-cluster-small div {
+  background-color: rgba(110, 204, 57, 0.6);
+}
+
+.marker-cluster-medium {
+  background-color: rgba(241, 211, 87, 0.6);
+}
+
+.marker-cluster-medium div {
+  background-color: rgba(240, 194, 12, 0.6);
+}
+
+.marker-cluster-large {
+  background-color: rgba(253, 156, 115, 0.6);
+}
+
+.marker-cluster-large div {
+  background-color: rgba(241, 128, 23, 0.6);
+}
+
+.leaflet-oldie .marker-cluster-small {
+  background-color: rgb(181, 226, 140);
+}
+
+.leaflet-oldie .marker-cluster-small div {
+  background-color: rgb(110, 204, 57);
+}
+
+.leaflet-oldie .marker-cluster-medium {
+  background-color: rgb(241, 211, 87);
+}
+
+.leaflet-oldie .marker-cluster-medium div {
+  background-color: rgb(240, 194, 12);
+}
+
+.leaflet-oldie .marker-cluster-large {
+  background-color: rgb(253, 156, 115);
+}
+
+.leaflet-oldie .marker-cluster-large div {
+  background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+  background-clip: padding-box;
+  border-radius: 20px;
+}
+
+.marker-cluster div {
+  width: 30px;
+  height: 30px;
+  margin-left: 5px;
+  margin-top: 5px;
+  text-align: center;
+  border-radius: 15px;
+  font:
+    12px 'Helvetica Neue',
+    Arial,
+    Helvetica,
+    sans-serif;
+}
+
+.marker-cluster span {
+  line-height: 30px;
+}
+
+.leaflet-cluster-anim .leaflet-marker-icon,
+.leaflet-cluster-anim .leaflet-marker-shadow {
+  -webkit-transition:
+    -webkit-transform 0.3s ease-out,
+    opacity 0.3s ease-in;
+  -moz-transition:
+    -moz-transform 0.3s ease-out,
+    opacity 0.3s ease-in;
+  -o-transition:
+    -o-transform 0.3s ease-out,
+    opacity 0.3s ease-in;
+  transition:
+    transform 0.3s ease-out,
+    opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+  -webkit-transition:
+    -webkit-stroke-dashoffset 0.3s ease-out,
+    -webkit-stroke-opacity 0.3s ease-in;
+  -moz-transition:
+    -moz-stroke-dashoffset 0.3s ease-out,
+    -moz-stroke-opacity 0.3s ease-in;
+  -o-transition:
+    -o-stroke-dashoffset 0.3s ease-out,
+    -o-stroke-opacity 0.3s ease-in;
+  transition:
+    stroke-dashoffset 0.3s ease-out,
+    stroke-opacity 0.3s ease-in;
+}