SearchMapGroupLabel for locations that have multiple listings stacked

src/components/SearchMapGroupLabel/SearchMapGroupLabel.css

@@ -0,0 +1,66 @@
+@import '../../marketplace.css';
+
+.root {
+
+  /* Size from content */
+  position: relative;
+  width: auto;
+  height: auto;
+  padding: 0;
+  border: 0;
+}
+
+.details {
+  /* Font */
+  @apply --marketplaceH4FontStyles;
+  font-weight: var(--fontWeightSemiBold);
+  margin-top: 0;
+  margin-bottom: 0;
+
+  /* Coloring */
+  border: 0;
+  padding: 6px 14px;
+  border-radius: 17px;
+  background-color: var(--marketplaceColor);
+  color: var(--matterColorLight);
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: var(--boxShadowPopup);
+  }
+
+  /* Overwrite dimensions from font styles */
+  @media (--viewportMedium) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.caretShadow {
+  /* Caret / arrow dimensions and position */
+  width: 6px;
+  height: 6px;
+  position: absolute;
+  bottom: -3px;
+  left: 50%;
+  margin-left: -3px;
+  transform: rotate(45deg);
+
+  /* Caret should have same box-shadow as label */
+  box-shadow: var(--boxShadowPopupLight);
+}
+
+.caret {
+
+  /* Caret / arrow dimensions and position */
+  width: 6px;
+  height: 6px;
+  position: absolute;
+  bottom: -3px;
+  left: 50%;
+  margin-left: -3px;
+  transform: rotate(45deg);
+
+  /* Caret should have same bg-color as label */
+  background-color: var(--marketplaceColor);
+}

src/components/SearchMapGroupLabel/SearchMapGroupLabel.js

@@ -0,0 +1,59 @@
+import React, { Component, PropTypes } from 'react';
+import { OverlayView } from 'react-google-maps';
+import classNames from 'classnames';
+import * as propTypes from '../../util/propTypes';
+import { ensureListing } from '../../util/data';
+
+import css from './SearchMapGroupLabel.css';
+
+// Center label so that caret is pointing to correct pixel.
+// (vertical positioning: height + arrow) */
+const getPixelPositionOffset = (width, height) => {
+  return { x: -1 * (width / 2), y: -1 * (height + 3) };
+};
+
+class SearchMapGroupLabel extends Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.listings.length > this.props.listings.length;
+  }
+
+  render() {
+    const { className, rootClassName, listings, onListingClicked } = this.props;
+    const firstListing = ensureListing(listings[0]);
+    const geolocation = firstListing.attributes.geolocation;
+
+    // Explicit type change to object literal for Google OverlayViews (geolocation is SDK type)
+    const latLngLiteral = { lat: geolocation.lat, lng: geolocation.lng };
+    const classes = classNames(rootClassName || css.root, className);
+
+    return (
+      <OverlayView
+        position={latLngLiteral}
+        mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
+        getPixelPositionOffset={getPixelPositionOffset}
+      >
+        <button className={classes} onClick={() => onListingClicked(listings)}>
+          <div className={css.caretShadow} />
+          <div className={css.details}>{listings.length}</div>
+          <div className={css.caret} />
+        </button>
+      </OverlayView>
+    );
+  }
+}
+
+SearchMapGroupLabel.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+const { arrayOf, func, string } = PropTypes;
+
+SearchMapGroupLabel.propTypes = {
+  className: string,
+  rootClassName: string,
+  listings: arrayOf(propTypes.listing).isRequired,
+  onListingClicked: func.isRequired,
+};
+
+export default SearchMapGroupLabel;

src/components/index.js

@@ -42,6 +42,7 @@ import RoutesProvider from './RoutesProvider/RoutesProvider';
 import SaleDetailsPanel from './SaleDetailsPanel/SaleDetailsPanel';
 import SearchIcon from './SearchIcon/SearchIcon';
 import SearchMap from './SearchMap/SearchMap';
+import SearchMapGroupLabel from './SearchMapGroupLabel/SearchMapGroupLabel';
 import SearchMapListingCard from './SearchMapListingCard/SearchMapListingCard';
 import SearchMapPriceLabel from './SearchMapPriceLabel/SearchMapPriceLabel';
 import SearchResultsPanel from './SearchResultsPanel/SearchResultsPanel';
@@ -104,6 +105,7 @@ export {
   SaleDetailsPanel,
   SearchIcon,
   SearchMap,
+  SearchMapGroupLabel,
   SearchMapListingCard,
   SearchMapPriceLabel,
   SearchResultsPanel,