Merge pull request #872 from sharetribe/click-static-map-to-dynamic

Click static map to dynamic
sharetribe · Jul 20, 2018 · e619ea2 · e619ea2
2 parents fbdc110 + 4a9b03f
commit e619ea2
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,10 @@ way to update this template, but currently, we follow a pattern:
 
 ---
 
+## v1.2.2
+* [change] Change static map to dynamic map when clicked.
+  [#871](https://github.com/sharetribe/flex-template-web/pull/871)
+
 ## v1.2.1
 * [fix] Lazy load map only if the map is near current viewport.
   [#871](https://github.com/sharetribe/flex-template-web/pull/871)

diff --git a/src/components/Map/DynamicMap.js b/src/components/Map/DynamicMap.js
@@ -10,17 +10,21 @@ import config from '../../config';
 const DynamicMap = withGoogleMap(props => {
   const { center, zoom, address, coordinatesConfig } = props;
 
-  const { markerURI, anchorX, anchorY, width, height } = coordinatesConfig.customMarker;
-  const markerIcon = {
-    url: markerURI,
+  const { markerURI, anchorX, anchorY, width, height } = coordinatesConfig.customMarker || {};
+  const markerIcon = coordinatesConfig.customMarker
+    ? {
+        icon: {
+          url: markerURI,
 
-    // The origin for this image is (0, 0).
-    origin: new window.google.maps.Point(0, 0),
-    size: new window.google.maps.Size(width, height),
-    anchor: new window.google.maps.Point(anchorX, anchorY),
-  };
+          // The origin for this image is (0, 0).
+          origin: new window.google.maps.Point(0, 0),
+          size: new window.google.maps.Size(width, height),
+          anchor: new window.google.maps.Point(anchorX, anchorY),
+        },
+      }
+    : {};
 
-  const marker = <Marker position={center} icon={markerIcon} title={address} />;
+  const marker = <Marker position={center} {...markerIcon} title={address} />;
 
   const circleProps = {
     options: coordinatesConfig.circleOptions,

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
@@ -535,6 +535,9 @@
   max-width: 640px;
   max-height: 640px;
   background-color: #eee;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
 
   @media (--viewportMedium) {
     height: 75vh;

diff --git a/src/containers/ListingPage/SectionMapMaybe.js b/src/containers/ListingPage/SectionMapMaybe.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { string } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
@@ -9,31 +9,43 @@ import config from '../../config';
 
 import css from './ListingPage.css';
 
-const SectionMapMaybe = props => {
-  const { className, rootClassName, geolocation, publicData, listingId } = props;
-
-  if (!geolocation) {
-    return null;
+class SectionMapMaybe extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isStatic: true };
   }
 
-  const address = publicData.location ? publicData.location.address : '';
-  const classes = classNames(rootClassName || css.sectionMap, className);
+  render() {
+    const { className, rootClassName, geolocation, publicData, listingId } = this.props;
+
+    if (!geolocation) {
+      return null;
+    }
+
+    const address = publicData.location ? publicData.location.address : '';
+    const classes = classNames(rootClassName || css.sectionMap, className);
 
-  const mapProps = config.coordinates.fuzzy
-    ? { obfuscatedCenter: obfuscatedCoordinates(geolocation, listingId ? listingId.uuid : null) }
-    : { address, center: geolocation };
+    const mapProps = config.coordinates.fuzzy
+      ? { obfuscatedCenter: obfuscatedCoordinates(geolocation, listingId ? listingId.uuid : null) }
+      : { address, center: geolocation };
 
-  return (
-    <div className={classes}>
-      <h2 className={css.locationTitle}>
-        <FormattedMessage id="ListingPage.locationTitle" />
-      </h2>
-      <div className={css.map}>
-        <Map {...mapProps} useStaticMap />
+    return (
+      <div className={classes}>
+        <h2 className={css.locationTitle}>
+          <FormattedMessage id="ListingPage.locationTitle" />
+        </h2>
+        <button
+          className={css.map}
+          onClick={() => {
+            this.setState({ isStatic: false });
+          }}
+        >
+          <Map {...mapProps} useStaticMap={this.state.isStatic} />
+        </button>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 SectionMapMaybe.defaultProps = {
   rootClassName: null,