legend component setup >relates #7

src/components/App.js

@@ -18,6 +18,7 @@ const ModalOverlay = styled.div.attrs({
   className: "vh-100 w-100 fixed top-0 left-0 z-9999 o-70 bg-white"
 })``;
 
+
 class App extends Component {
   state = {
     markers: false,
@@ -150,8 +151,11 @@ class App extends Component {
               />
             )}
         </FullScreenContainer>
+
         {loaded && markers && !center && <ModalOverlay />}
         {loaded && markers && !center && modal}
+
+
       </React.Fragment>
     );
   }

src/components/Header.js

@@ -28,6 +28,8 @@ const HeaderLink = styled.a.attrs({
   className: 'f6 mr1',
 })``;
 
+
+
 export default props => (
   <MyHeader>
     <HeaderLink href="/">

src/components/Legend.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+
+
+const LegendUseclass = styled.h1.attrs({
+    className: "near-black vh-100 w-100 fixed top-0 left-0 z-max flex items-center justify-center"
+})``;
+
+export default props => (
+    <LegendUseclass>Hello</LegendUseclass>
+)

src/components/Map.js

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOMServer from "react-dom/server";
 import { Map, Marker, Popup, TileLayer, Tooltip } from "react-leaflet";
 import MarkerClusterGroup from "react-leaflet-markercluster";
+import MapLegend from "./Legend"
 import Icon from "./MarkerIcon";
 import L from "leaflet";
 import styled from "styled-components";
@@ -221,6 +222,7 @@ export default props => {
       >
         <Markers markers={props.markers} />
       </MarkerClusterGroup>
+      <MapLegend>Hello</MapLegend>
     </Map>
   );
 };