Loading a URL with lat/lng/zoom specified does not work (#414)

client/src/components/J40Map.tsx

@@ -51,6 +51,7 @@ export interface IDetailViewInterface {
 };
 
 const J40Map = ({location}: IJ40Interface) => {
+  // Hash portion of URL is of the form #zoom/lat/lng
   const [zoom, lat, lng] = location.hash.slice(1).split('/');
   const [viewport, setViewport] = useState<ViewportProps>({
     latitude: lat && parseFloat(lat) || constants.DEFAULT_CENTER[0],

client/src/components/mapWrapper.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import J40Map from './J40Map';
+import MapLegend from '../components/mapLegend';
+
+interface IMapWrapperProps {
+  location: Location
+}
+
+const MapWrapper = ({location}: IMapWrapperProps) => {
+  return (
+    <section>
+      <h2>Explore the Tool</h2>
+      <J40Map location={location}/>
+      <MapLegend />
+    </section>
+  );
+};
+
+
+export default MapWrapper;

client/src/pages/cejst.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import Layout from '../components/layout';
-import J40Map from '../components/J40Map';
+import MapWrapper from '../components/mapWrapper';
 import HowYouCanHelp from '../components/HowYouCanHelp';
 import DownloadPacket from '../components/downloadPacket';
-import MapLegend from '../components/mapLegend';
 import * as styles from './cejst.module.scss';
 
 interface IMapPageProps {
@@ -52,9 +51,7 @@ const CEJSTPage = ({location}: IMapPageProps) => {
             <DownloadPacket />
           </div>
         </section>
-        <h2>Explore the Tool</h2>
+        <MapWrapper location={location} />
-        <J40Map location={location}/>
-        <MapLegend />
         <HowYouCanHelp />
       </main>
     </Layout>