1 files changed, 51 insertions, 0 deletions
diff --git a/app/components/Map.js b/app/components/Map.js
new file mode 100644
index 0000000000..337d5c812b
--- /dev/null
+++ b/app/components/Map.js
@@ -0,0 +1,51 @@
+// @flow
+
+import React, { Component } from 'react';
+import ReactMapboxGl, { Marker } from 'react-mapbox-gl';
+import { mapbox as mapboxConfig } from '../config';
+import cheapRuler from 'cheap-ruler';
+
+import type { Coordinate2d } from '../types';
+
+const ReactMap = ReactMapboxGl({
+  accessToken: mapboxConfig.accessToken,
+  attributionControl: false,
+  interactive: false,
+});
+
+export default class Map extends Component {
+  props: {
+    animate: boolean,
+    location: Coordinate2d,
+    altitude: number,
+    markerImagePath: string,
+  }
+
+  render() {
+
+    const mapBounds = this.calculateMapBounds(this.props.location, this.props.altitude);
+
+    const mapBoundsOptions = { offset: [0, -113], animate: this.props.animate };
+
+    return <ReactMap style={ mapboxConfig.styleURL }
+      containerStyle={{ height: '100%' }}
+      fitBounds={ mapBounds }
+      fitBoundsOptions={ mapBoundsOptions }>
+
+      <Marker coordinates={ this.convertToMapCoordinate(this.props.location) } offset={ [0, -10] }>
+        <img src={ this.props.markerImagePath } />
+      </Marker>
+    </ReactMap>;
+  }
+
+  calculateMapBounds(center: Coordinate2d, altitude: number): [Coordinate2d, Coordinate2d] {
+    const bounds = cheapRuler(center[0], 'meters').bufferPoint(center, altitude);
+    // convert [lat,lng] bounds to [lng,lat]
+    return [ [bounds[1], bounds[0]], [bounds[3], bounds[2]] ];
+  }
+
+  convertToMapCoordinate(pos: Coordinate2d): Coordinate2d {
+    // convert [lat,lng] bounds to [lng,lat]
+    return [pos[1], pos[0]];
+  }
+}