1 files changed, 45 insertions, 23 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index abbf7785a9..83caaa0299 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -4,6 +4,7 @@ import moment from 'moment';
 import React, { Component } from 'react';
 import { Layout, Container, Header } from './Layout';
 import { BackendError } from '../lib/backend';
+import Map from './Map';
 
 import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
 import ChevronRightSVG from '../assets/images/icon-chevron.svg';
@@ -29,16 +30,11 @@ export type ConnectProps = {
 export default class Connect extends Component {
   props: ConnectProps;
   state = {
-    isFirstPass: true,
     showCopyIPMessage: false
   };
 
   _copyTimer: ?number;
 
-  componentDidMount() {
-    this.setState({ isFirstPass: false });
-  }
-
   componentWillUnmount() {
     if(this._copyTimer) {
       clearTimeout(this._copyTimer);
@@ -46,7 +42,6 @@ export default class Connect extends Component {
     }
 
     this.setState({
-      isFirstPass: true,
       showCopyIPMessage: false
     });
   }
@@ -130,7 +125,49 @@ export default class Connect extends Component {
     }
   }
 
-  renderMap(): React.Element<*> {
+  _getMapProps() {
+    const { longitude, latitude, status } = this.props.connection;
+    const defaultProps = {
+      width: 320,
+      height: 429,
+      markerImagePath: status === 'connected' ?
+        './assets/images/location-marker-secure.svg' :
+        './assets/images/location-marker-unsecure.svg'
+    };
+
+    // when the user location is known
+    if(typeof(longitude) === 'number' && typeof(latitude) === 'number') {
+      return {
+        ...defaultProps,
+
+        center: [longitude, latitude],
+
+        // do not show the marker when connecting
+        showMarker: status !== 'connecting',
+
+        // zoom in when connected
+        zoomLevel: status === 'connected' ? 40 : 20,
+
+        // a magic offset to align marker with spinner
+        offset: [0, 123],
+      };
+    } else {
+      return {
+        ...defaultProps,
+
+        center: [0, 0],
+        showMarker: false,
+
+        // show the world when user location is not known
+        zoomLevel: 1,
+
+        // remove the offset since the marker is hidden
+        offset: [0, 0],
+      };
+    }
+  }
+
+  renderMap() {
     let [ isConnecting, isConnected, isDisconnected ] = [false, false, false];
     switch(this.props.connection.status) {
     case 'connecting': isConnecting = true; break;
@@ -138,25 +175,10 @@ export default class Connect extends Component {
     case 'disconnected': isDisconnected = true; break;
     }
 
-    // We decided to not include the map in the first beta release to customers
-    // but it MUST be included in the following releases. Therefore we choose
-    // to just comment it out
-    const map = undefined;
-    /*
-    const altitude = (isConnecting ? 300 : 100) * 1000;
-    const { location } = this.props.connection;
-    const map = <Map animate={ !this.state.isFirstPass }
-        location={ location || [0, 0] }
-        altitude= { altitude }
-        markerImagePath= { isConnected
-          ? './assets/images/location-marker-secure.svg'
-          : './assets/images/location-marker-unsecure.svg' } />
-    */
-
     return (
       <div className="connect">
         <div className="connect__map">
-          { map }
+          <Map { ...this._getMapProps() } />
         </div>
         <div className="connect__container">