Marker cluster icon styling

getredash · Oct 28, 2019 · d38d4cc · d38d4cc
1 parent 5760102
commit d38d4cc
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/client/app/visualizations/map/initMap.js b/client/app/visualizations/map/initMap.js
@@ -1,4 +1,5 @@
-import { isFunction, each, map } from 'lodash';
+import { isFunction, each, map, maxBy, toString } from 'lodash';
+import chroma from 'chroma-js';
 import L from 'leaflet';
 import 'leaflet.markercluster';
 import 'leaflet/dist/leaflet.css';
@@ -41,7 +42,29 @@ const createHeatpointMarker = (lat, lon, color) => L.circleMarker(
   { fillColor: color, fillOpacity: 0.9, stroke: false },
 );
 
-const createDefaultMarker = (lat, lon) => L.marker([lat, lon]);
+L.MarkerClusterIcon = L.DivIcon.extend({
+  options: {
+    color: null,
+    className: 'marker-cluster',
+    iconSize: new L.Point(40, 40),
+  },
+  createIcon(...args) {
+    const color = chroma(this.options.color);
+    const textColor = maxBy(['#ffffff', '#000000'], c => chroma.contrast(color, c));
+    const borderColor = color.alpha(0.4).css();
+    const backgroundColor = color.alpha(0.8).css();
+
+    const icon = L.DivIcon.prototype.createIcon.call(this, ...args);
+    icon.innerHTML = `
+      <div style="background: ${backgroundColor}">
+        <span style="color: ${textColor}">${toString(this.options.html)}</span>
+      </div>
+    `;
+    icon.style.background = borderColor;
+    return icon;
+  },
+});
+L.markerClusterIcon = (...args) => new L.MarkerClusterIcon(...args);
 
 function createIconMarker(lat, lon, { iconShape, iconFont, foregroundColor, backgroundColor, borderColor }) {
   const icon = L.BeautifyIcon.icon({
@@ -59,28 +82,18 @@ function createIconMarker(lat, lon, { iconShape, iconFont, foregroundColor, back
   return L.marker([lat, lon], { icon });
 }
 
-function createMarkerClusterGroup(classify, color) {
-  const layerOptions = {};
-
-  if (classify) {
-    layerOptions.iconCreateFunction = (cluster) => {
-      const childCount = cluster.getChildCount();
-      const style = `color: white; background-color: ${color};`;
-      return L.divIcon({
-        html: `<div style="${style}"><span>${childCount}</span></div>`,
-        className: 'marker-cluster',
-        iconSize: new L.Point(40, 40),
-      });
-    };
-  }
-
-  return L.markerClusterGroup(layerOptions);
+function createMarkerClusterGroup(color) {
+  return L.markerClusterGroup({
+    iconCreateFunction(cluster) {
+      return L.markerClusterIcon({ color, html: cluster.getChildCount() });
+    },
+  });
 }
 
 function createMarkersLayer(options, { color, points }) {
   const { classify, clusterMarkers, customizeMarkers } = options;
 
-  const result = clusterMarkers ? createMarkerClusterGroup(classify, color) : L.layerGroup();
+  const result = clusterMarkers ? createMarkerClusterGroup(color) : L.layerGroup();
 
   // create markers
   each(points, ({ lat, lon, row }) => {
@@ -91,7 +104,7 @@ function createMarkersLayer(options, { color, points }) {
       if (customizeMarkers) {
         marker = createIconMarker(lat, lon, options);
       } else {
-        marker = createDefaultMarker(lat, lon);
+        marker = L.marker([lat, lon]);
       }
     }
 
@@ -100,7 +113,7 @@ function createMarkersLayer(options, { color, points }) {
         <li><strong>${lat}, ${lon}</strong>
         ${map(row, (v, k) => `<li>${k}: ${v}</li>`).join('')}
       </ul>
-  `);
+    `);
     result.addLayer(marker);
   });
 

diff --git a/client/app/visualizations/map/prepareData.js b/client/app/visualizations/map/prepareData.js
@@ -20,6 +20,12 @@ export default function prepareData(data, options) {
     if (points.length === 0) {
       return null;
     }
-    return extend({ name, color: colorScale(name), points }, options.groups[name]);
+
+    const result = extend({}, options.groups[name], { name, points });
+    if (isNil(result.color)) {
+      result.color = colorScale(name);
+    }
+
+    return result;
   }));
 }