add custom marker for clusters

relates #30
fac-14 · Oct 16, 2018 · 5eb88ea · 5eb88ea
1 parent 46f1f2b
commit 5eb88ea
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 24 deletions.
diff --git a/src/components/Map.css b/src/components/Map.css
@@ -1,8 +1,5 @@
 /* style text for map icons */
 .price-icon {
-  font-family: 'Avenir', 'Helvetica', 'Arial', sans-serif;
-  text-align: center;
-  font-weight: bold;
   border-radius: 50%;
   box-shadow: none;
   border: none;

diff --git a/src/components/Map.js b/src/components/Map.js
@@ -30,26 +30,27 @@ const MarkerWithPopup = ({
   address,
   price_sqft,
   use_class,
+  clickFunction,
 }: Props) => (
   <Marker position={JSON.parse(geolocation)} icon={iconSelect(use_class)}>
     <Popup>
       <ul>
-        <li>{name}</li>
-        <li>{postcode}</li>
         <li>{address}</li>
-        <li>{price_sqft}</li>
+        <li>{postcode}</li>
+        <li>£{price_sqft} /sqft</li>
         <li>{use_class}</li>
+        <li onClick={() => console.log('clicked')}>See More</li>
       </ul>
     </Popup>
     <Tooltip
-      offset={[-24, -23]}
-      className="price-icon"
+      offset={[-20, -20]}
+      className="price-icon avenir tc w3"
       direction="center"
       opacity={1}
       permanent
     >
-      <div>£{price_sqft}</div>
-      <div>/sqft</div>
+      <div className="f6 b">£{price_sqft}</div>
+      <div className="f7 ml1">/sqft</div>
     </Tooltip>
   </Marker>
 );
@@ -61,6 +62,14 @@ const Markers = ({ markers }: { markers: Array<MarkerData> }) => {
   return <React.Fragment>{items}</React.Fragment>;
 };
 
+const createClusterCustomIcon = function(cluster) {
+  return L.divIcon({
+    html: `<span>${cluster.getChildCount()}</span>`,
+    className: 'f6 link dim br-pill w2 h2 pt2 dib white bg-dark-pink tc b',
+    iconSize: L.point(40, 40, true),
+  });
+};
+
 export default props => {
   return (
     <Map
@@ -74,7 +83,10 @@ export default props => {
         attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <MarkerClusterGroup>
+      <MarkerClusterGroup
+        iconCreateFunction={createClusterCustomIcon}
+        spiderLegPolyLineOptions={{ opacity: 0 }}
+      >
         <Markers markers={props.markers} />
       </MarkerClusterGroup>
     </Map>

diff --git a/src/components/MarkerIcon.js b/src/components/MarkerIcon.js
@@ -1,25 +1,24 @@
-import React from "react";
+import React from 'react';
 
 export default ({ useClass }) => {
-
   const useClassColor = {
-    "A1": "#ff80cc",
-    "A3": "#9eebcf",
-    "B1": "#96ccff",
-    "B2": "#fbf1a9",
-    "B8": "#ffb700",
-    "D1": "#a463f2",
-    "D2": "#ff6300",
-    "Other": "#fff"
-  }
+    A1: '#ff80cc',
+    A3: '#9eebcf',
+    B1: '#96ccff',
+    B2: '#fbf1a9',
+    B8: '#ffb700',
+    D1: '#a463f2',
+    D2: '#ff6300',
+    Other: '#fff',
+  };
 
   return (
     <svg
       width="70px"
       height="70px"
       viewBox="0 0 42 42"
       className="donut"
-      aria-labelledby="beers-title beers-desc"
+      aria-labelledby="location label"
       role="img"
     >
       <circle
@@ -41,4 +40,4 @@ export default ({ useClass }) => {
       />
     </svg>
   );
-}
+};