legend with click event created >relates #7

src/components/App.js

@@ -26,6 +26,7 @@ class App extends Component {
     searchInput: "",
     center: false,
     showFormWarning: false,
+    legend: false,
     useClassColor: {
       A1: "#ff80cc",
       A3: "#9eebcf",
@@ -132,6 +133,11 @@ class App extends Component {
     setTimeout(() => this.setState({ loaded: true }), loadingTime);
   };
 
+  // toggle Legend
+  toggleLegend = () => {
+    this.setState({ legend: !this.state.legend })
+  }
+
   render() {
     const { loaded, markers, center } = this.state;
     const modal = (
@@ -148,6 +154,8 @@ class App extends Component {
                 markers={this.state.markers}
                 center={this.state.center || this.defaultLocation}
                 useColor={this.state.useClassColor}
+                toggleLegend={this.toggleLegend}
+                legend={this.state.legend}
               />
             )}
         </FullScreenContainer>

src/components/Legend.js

@@ -1,15 +1,44 @@
 import React from 'react';
 import styled from 'styled-components';
 
+const colors = ['A1:#ff80cc', 'A3:#9eebcf', 'B1:#96ccff', 'B2:#fbf1a9', 'B8:#ffb700', 'D1:#a463f2', 'D2:#ff6300', 'other:#fff']
+
+const createLegend = (open) => {
+    if (open) {
+        return colors.map(color =>
+            (
+                <Circle color={color.split(':')[1]}>
+                    <UseText>{color.split(':')[0]}</UseText>
+                </Circle>
+            )
+        )
+    } return (
+        <Circle color="#ff80cc">
+            <UseText>Key</UseText>
+        </Circle>
+    )
+}
 
 const LegendUseclass = styled.div.attrs({
-    className: "h3 w3 fixed left-1 bottom-1 z-max flex items-center justify-center br-100 bg-black-90"
+    className: "fixed left-1 bottom-1 z-max"
 })``;
 
-const UseclassText = styled.p.attrs({
-    className: "white-100 z-max fw3 flex center "
-})`color: white; font-size: 1rem;`;
+const Circle = styled.div.attrs({
+    className: "mt2 w2 h2 br-100 flex items-center justify-center "
+})`background:${props => props.color}`
+
+const UseText = styled.p.attrs({
+    className: "avenir black"
+})``
+
+const ClassListItems = styled.ul.attrs({
+    className: "pl4 list"
+})`display:${props => props.display}`
 
 export default props => (
-    <LegendUseclass> <UseclassText>A1</UseclassText> </LegendUseclass>
+    <LegendUseclass onClick={props.toggleLegend} >
+        <ClassListItems>
+            {createLegend(props.legend)}
+        </ClassListItems>
+    </LegendUseclass>
 )

src/components/Map.js

@@ -99,7 +99,6 @@ const MarkerWithPopup = ({
   landlord_tenants_act
 }: Props) => {
   const price = price_sqft.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
-  console.log(MarkerWithPopup)
   return (
     <Marker position={JSON.parse(geolocation)} icon={iconSelect(use_class)}>
       <Popup
@@ -189,8 +188,6 @@ const Markers = ({ markers }: { markers: Array<MarkerData> }) => {
   const items = markers.map(({ key, ...props }) => (
     <MarkerWithPopup key={key} {...props} />
   ));
-  console.log('markers', markers[0])
-  console.log('items', items)
   return <React.Fragment>{items}</React.Fragment>;
 };
 
@@ -222,7 +219,7 @@ export default props => {
       >
         <Markers markers={props.markers} />
       </MarkerClusterGroup>
-      <MapLegend />
+      <MapLegend toggleLegend={props.toggleLegend} legend={props.legend} />
     </Map>
   );
 };