@@ -186,6 +245,7 @@ class CityProfileCard extends Component {
}
}
+CityProfileCard.contextType = MapContext;
CityProfileCard.propTypes = {
classes: PropTypes.object.isRequired,
};
diff --git a/src/components/Map.js b/src/components/Map.js
new file mode 100644
index 0000000..9c69e97
--- /dev/null
+++ b/src/components/Map.js
@@ -0,0 +1,78 @@
+import React, { Component, createRef } from 'react';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import mapboxgl from 'mapbox-gl';
+
+import bbox from "@turf/bbox";
+import transformScale from "@turf/transform-scale";
+import bboxPolygon from "@turf/bbox-polygon";
+import {multiPoint} from "@turf/helpers";
+import square from "@turf/square";
+
+import {withStyles} from '@material-ui/core';
+
+const styles = () => ({
+ map: {
+ height: '400px',
+ width: '400px'
+ }
+});
+
+mapboxgl.accessToken = 'pk.eyJ1Ijoic3BhdGlhbGRldiIsImEiOiJjanpoYWFyZTkwaW4xM25vNWs2cWt6NWFqIn0.pjqihTlW7bHAp8bC8SaiNQ';
+class Map extends Component {
+
+ state = {
+ mapboxMapRef: createRef(),
+ map: null
+ };
+
+ constructor(props) {
+ super(props);
+ }
+
+ getLooseBounds = (bounds, scale) => {
+ return bbox(transformScale(bboxPolygon(square(bbox(multiPoint(bounds)))), scale));
+ };
+
+ componentDidMount = () => {
+ const { mapboxMapRef } = this.state;
+ const { style } = this.props;
+ const mapBounds = [[-116.3656827, 43.50939634], [-116.0941571, 43.69918141]];
+ const options = {
+ container: mapboxMapRef.current,
+ style,
+ bounds: mapBounds,
+ maxBounds: this.getLooseBounds(mapBounds, 1.25),
+ };
+ const map = new mapboxgl.Map(options);
+ this.setState({map});
+ };
+
+ componentDidUpdate = (prevProps, prevState) => {
+ const {maxBounds: prevMaxBounds, style: prevStyle } = prevProps;
+ const {maxBounds: currMaxBounds, style: currStyle } = this.props;
+ const {map} = this.state;
+ if (JSON.stringify(prevMaxBounds) !== JSON.stringify(currMaxBounds)) {
+ // Since we're re-using a map and div container, we need to re-size between loads to ensure that it gets the
+ // size of its new container.
+ map.resize();
+
+ // Before we can fly to a new location, we need to allow the camera to move
+ map.setMaxBounds(null);
+ map.fitBounds(currMaxBounds, {animate: false, padding: 10});
+ // Once we've moved, we can set the new panning bounds
+ map.setMaxBounds(this.getLooseBounds(currMaxBounds, 2));
+ }
+ if (prevStyle !== currStyle)
+ {
+ map.setStyle(currStyle);
+ }
+ };
+
+ render = () => {
+ const { classes } = this.props;
+ const { mapboxMapRef } = this.state;
+ return
;
+ };
+}
+
+export default withStyles(styles)(Map);
\ No newline at end of file
diff --git a/src/components/MapLegend.js b/src/components/MapLegend.js
index fc8433b..3f53a56 100644
--- a/src/components/MapLegend.js
+++ b/src/components/MapLegend.js
@@ -1,16 +1,22 @@
import React from 'react';
const MapLegend = () => {
- return (
-
-
Map Errors
-
-
Low
-
Medium
-
High
-
-
-
);
+ return
};
export default MapLegend;
\ No newline at end of file
diff --git a/src/components/Reparentable.js b/src/components/Reparentable.js
new file mode 100644
index 0000000..3893a89
--- /dev/null
+++ b/src/components/Reparentable.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+class Reparentable extends Component {
+ ref = React.createRef();
+
+ componentDidMount() {
+ const { el } = this.props;
+ if (this.ref.current) {
+ this.ref.current.appendChild(el);
+ }
+ }
+
+ render() {
+ return
;
+ }
+}
+
+export default Reparentable;
\ No newline at end of file
diff --git a/src/helpers/MapContext.js b/src/helpers/MapContext.js
new file mode 100644
index 0000000..6538218
--- /dev/null
+++ b/src/helpers/MapContext.js
@@ -0,0 +1,5 @@
+import {createContext} from 'react';
+
+const MapContext = createContext(null);
+
+export default MapContext;
\ No newline at end of file