From a6f889de46ac1841cbf0bd0cdb31779d5a819d28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Batuhan=20Berk=20Ba=C5=9Fo=C4=9Flu?=
 <batuhanbasoglu@mailbox.org>
Date: Tue, 30 Mar 2021 06:16:55 -0400
Subject: [PATCH 1/4] Reverted the file.

---
 src/App.js                |  21 +++++++-
 src/homePage/Homepage.css |  62 ----------------------
 src/homePage/Homepage.js  | 107 --------------------------------------
 3 files changed, 19 insertions(+), 171 deletions(-)
 delete mode 100644 src/homePage/Homepage.css
 delete mode 100644 src/homePage/Homepage.js

diff --git a/src/App.js b/src/App.js
index 010fc5b..7cc58df 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,28 @@
 import { Component } from "react";
-import Homepage from './homePage/Homepage'
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <Homepage/>
+        <header className="App-header">
+          <h1>Kene's Cribs</h1>
+          <p>Real Website loading.......</p>
+        </header>
+        <section>
+          <h1>hello everyone</h1>
+          <div class="alert alert-primary" role="alert">
+            A simple primary alert—check it out!
+          </div>
+          <div class="alert alert-primary" role="alert">
+            A simple primary alert—check it out!
+          </div>
+          <div class="alert alert-primary" role="alert">
+            A simple primary alert—check it out!
+          </div>
+          <div class="alert alert-primary" role="alert">
+            A simple primary alert—check it out!
+          </div>
+        </section>
       </div>
     );
   }
diff --git a/src/homePage/Homepage.css b/src/homePage/Homepage.css
deleted file mode 100644
index 2d082b7..0000000
--- a/src/homePage/Homepage.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.colored-section {
-    background-color: #ffe609;
-    color: #000000;
-    white-space: nowrap;
-}
-
-.white-section {
-    background-color: #ffffff;
-}
-
-#title .container-fluid {
-    padding: 4% 34% 6%;
-    text-align: left;
-    font-family: "Georgia";
-}
-
-.housesIntro{
-    padding: 4% 5%;
-}
-
-.contactIntro{
-    padding-left: 30%;
-    padding-right: 30%;
-    padding-bottom: 80px;
-}
-
-.carouselSection {
-    margin: 2% 8%;
-}
-
-.headerImg{
-    width: 2000px;
-    height: 600px;
-}
-
-.heading-1{
-    padding-left: 40%;
-    padding-top: 10%;
-    padding-bottom: 20px;
-}
-
-.formhelper{
-    padding-bottom: 15px;
-}
-
-.button-1 {
-    background-color: rgb(0, 0, 0);
-    border-color: transparent;
-    color: #ffffff;
-    font-size: 20px;
-}
-
-.button-1:hover {
-    background-color: rgb(92, 92, 92);
-    color: #ffffff;
-    border-color: transparent;
-}
-
-.buttonhelper {
-    padding-left: 45%;
-    padding-top: 15px;
-}
\ No newline at end of file
diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js
deleted file mode 100644
index f95a614..0000000
--- a/src/homePage/Homepage.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Component } from "react";
-import './Homepage.css';
-import house1 from '../images/house1.jpg';
-import house2 from '../images/house2.jpg';
-import house3 from '../images/house3.jpg';
-import Carousel from 'react-bootstrap/Carousel'
-
-class Homepage extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            firstname: '',
-            lastname: '',
-            email: '',
-            message: ''
-        }
-    }
-
-    render() {
-        return (
-            <div className="Homepage">
-                <section className="colored-section" id="title">
-                    <div className="container-fluid">
-                        <div className="row">
-                            <div className="col-12">
-                                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
-                                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                <section className="white-section" id="white-section">
-                    <div className="housesIntro">
-                        <Carousel>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house1}
-                                    alt="First House"
-                                />
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house2}
-                                    alt="Second House"
-                                />
-
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house3}
-                                    alt="Third House"
-                                />
-
-                            </Carousel.Item>
-                        </Carousel>
-                    </div>
-                </section>
-                <section class="colored-section" id="contact">
-                    <div className="container-fluid">
-                        <div className="contactIntro">
-                            <h2 className="heading-1">Contact Us</h2>
-                            <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
-                                <div className="formhelper row">
-                                    <div className="col-6">
-                                        <input type="text" className="form-control" placeholder="First Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
-                                    </div>
-                                    <div className="col-6">
-                                        <input type="text" className="form-control" placeholder="Last Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
-                                    </div>
-                                </div>
-                                <div className="form-group">
-                                    <input type="email" className="form-control" placeholder="Email Address" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
-                                </div>
-                                <div className="form-group">
-                                    <textarea className="form-control" placeholder="Message" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
-                                </div>
-                                <div className="buttonhelper">
-                                    <button type="submit" className="button-1">Submit</button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </section>
-            </div>
-        );
-    }
-
-    onNameChange(event) {
-        this.setState({ name: event.target.value })
-    }
-
-    onEmailChange(event) {
-        this.setState({ email: event.target.value })
-    }
-
-    onMessageChange(event) {
-        this.setState({ message: event.target.value })
-    }
-
-    handleSubmit(event) {
-    }
-}
-
-export default Homepage;

From f16659f78d36725c4e9202c41c2deb5cbf0e099a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Batuhan=20Berk=20Ba=C5=9Fo=C4=9Flu?=
 <batuhanbasoglu@mailbox.org>
Date: Tue, 30 Mar 2021 06:20:59 -0400
Subject: [PATCH 2/4] Re-added the files.

---
 src/App.js                |  21 +-------
 src/homePage/Homepage.css |  62 ++++++++++++++++++++++
 src/homePage/Homepage.js  | 107 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 171 insertions(+), 19 deletions(-)
 create mode 100644 src/homePage/Homepage.css
 create mode 100644 src/homePage/Homepage.js

diff --git a/src/App.js b/src/App.js
index 7cc58df..7d847ce 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,28 +1,11 @@
 import { Component } from "react";
+import Homepage from './homePage/Homepage';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <h1>Kene's Cribs</h1>
-          <p>Real Website loading.......</p>
-        </header>
-        <section>
-          <h1>hello everyone</h1>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-        </section>
+          <Homepage></Homepage>
       </div>
     );
   }
diff --git a/src/homePage/Homepage.css b/src/homePage/Homepage.css
new file mode 100644
index 0000000..2d082b7
--- /dev/null
+++ b/src/homePage/Homepage.css
@@ -0,0 +1,62 @@
+.colored-section {
+    background-color: #ffe609;
+    color: #000000;
+    white-space: nowrap;
+}
+
+.white-section {
+    background-color: #ffffff;
+}
+
+#title .container-fluid {
+    padding: 4% 34% 6%;
+    text-align: left;
+    font-family: "Georgia";
+}
+
+.housesIntro{
+    padding: 4% 5%;
+}
+
+.contactIntro{
+    padding-left: 30%;
+    padding-right: 30%;
+    padding-bottom: 80px;
+}
+
+.carouselSection {
+    margin: 2% 8%;
+}
+
+.headerImg{
+    width: 2000px;
+    height: 600px;
+}
+
+.heading-1{
+    padding-left: 40%;
+    padding-top: 10%;
+    padding-bottom: 20px;
+}
+
+.formhelper{
+    padding-bottom: 15px;
+}
+
+.button-1 {
+    background-color: rgb(0, 0, 0);
+    border-color: transparent;
+    color: #ffffff;
+    font-size: 20px;
+}
+
+.button-1:hover {
+    background-color: rgb(92, 92, 92);
+    color: #ffffff;
+    border-color: transparent;
+}
+
+.buttonhelper {
+    padding-left: 45%;
+    padding-top: 15px;
+}
\ No newline at end of file
diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js
new file mode 100644
index 0000000..f95a614
--- /dev/null
+++ b/src/homePage/Homepage.js
@@ -0,0 +1,107 @@
+import { Component } from "react";
+import './Homepage.css';
+import house1 from '../images/house1.jpg';
+import house2 from '../images/house2.jpg';
+import house3 from '../images/house3.jpg';
+import Carousel from 'react-bootstrap/Carousel'
+
+class Homepage extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            firstname: '',
+            lastname: '',
+            email: '',
+            message: ''
+        }
+    }
+
+    render() {
+        return (
+            <div className="Homepage">
+                <section className="colored-section" id="title">
+                    <div className="container-fluid">
+                        <div className="row">
+                            <div className="col-12">
+                                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
+                                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <section className="white-section" id="white-section">
+                    <div className="housesIntro">
+                        <Carousel>
+                            <Carousel.Item>
+                                <img
+                                    className="headerImg"
+                                    src={house1}
+                                    alt="First House"
+                                />
+                            </Carousel.Item>
+                            <Carousel.Item>
+                                <img
+                                    className="headerImg"
+                                    src={house2}
+                                    alt="Second House"
+                                />
+
+                            </Carousel.Item>
+                            <Carousel.Item>
+                                <img
+                                    className="headerImg"
+                                    src={house3}
+                                    alt="Third House"
+                                />
+
+                            </Carousel.Item>
+                        </Carousel>
+                    </div>
+                </section>
+                <section class="colored-section" id="contact">
+                    <div className="container-fluid">
+                        <div className="contactIntro">
+                            <h2 className="heading-1">Contact Us</h2>
+                            <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
+                                <div className="formhelper row">
+                                    <div className="col-6">
+                                        <input type="text" className="form-control" placeholder="First Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
+                                    </div>
+                                    <div className="col-6">
+                                        <input type="text" className="form-control" placeholder="Last Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
+                                    </div>
+                                </div>
+                                <div className="form-group">
+                                    <input type="email" className="form-control" placeholder="Email Address" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
+                                </div>
+                                <div className="form-group">
+                                    <textarea className="form-control" placeholder="Message" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
+                                </div>
+                                <div className="buttonhelper">
+                                    <button type="submit" className="button-1">Submit</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        );
+    }
+
+    onNameChange(event) {
+        this.setState({ name: event.target.value })
+    }
+
+    onEmailChange(event) {
+        this.setState({ email: event.target.value })
+    }
+
+    onMessageChange(event) {
+        this.setState({ message: event.target.value })
+    }
+
+    handleSubmit(event) {
+    }
+}
+
+export default Homepage;

From 3b76c49c2f4ba1d2c2d2a89a9f6a7821b7a9f3ee Mon Sep 17 00:00:00 2001
From: ruchi <ruchirawperera@gmail.com>
Date: Wed, 31 Mar 2021 01:17:00 -0400
Subject: [PATCH 3/4] added map,markers,popup

---
 package-lock.json                             | 149 ++++
 package.json                                  |   1 +
 public/home-solid.svg                         |   1 +
 public/home.svg                               |   1 +
 public/homes-2.svg                            |   1 +
 public/homes-3.svg                            |   1 +
 public/index.html                             |   2 +
 src/App.js                                    |  18 +-
 src/listings-page/ListingsPage.css            |   9 +
 src/listings-page/ListingsPage.js             | 191 +++++
 ...ings-page.test.js => ListingsPage.test.js} |   2 +-
 src/listings-page/data/house-listings.json    | 789 ++++++++++++++++++
 src/listings-page/data/property-data.json     |  83 ++
 src/listings-page/listings-page.css           |   0
 src/listings-page/listings-page.js            |   9 -
 src/listings-page/mapStyles.js                | 267 ++++++
 .../listing-page.css                          |   0
 .../listing-page.js                           |   0
 .../listing-page.test.js                      |   0
 19 files changed, 1501 insertions(+), 23 deletions(-)
 create mode 100644 public/home-solid.svg
 create mode 100644 public/home.svg
 create mode 100644 public/homes-2.svg
 create mode 100644 public/homes-3.svg
 create mode 100644 src/listings-page/ListingsPage.css
 create mode 100644 src/listings-page/ListingsPage.js
 rename src/listings-page/{listings-page.test.js => ListingsPage.test.js} (83%)
 create mode 100644 src/listings-page/data/house-listings.json
 create mode 100644 src/listings-page/data/property-data.json
 delete mode 100644 src/listings-page/listings-page.css
 delete mode 100644 src/listings-page/listings-page.js
 create mode 100644 src/listings-page/mapStyles.js
 rename src/listings-page/{listing-page => single-listing}/listing-page.css (100%)
 rename src/listings-page/{listing-page => single-listing}/listing-page.js (100%)
 rename src/listings-page/{listing-page => single-listing}/listing-page.test.js (100%)

diff --git a/package-lock.json b/package-lock.json
index b41fa80..e3394d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3979,6 +3979,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
     },
+    "can-use-dom": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
+      "integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4023,6 +4028,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -5478,6 +5488,24 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "requires": {
+        "iconv-lite": "^0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
+          "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -6619,6 +6647,35 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -7147,6 +7204,11 @@
         "slash": "^3.0.0"
       }
     },
+    "google-maps-infobox": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz",
+      "integrity": "sha512-hTuWmWZZSOxf5D/z7l3/hTF1grgRvLG53BEKMdjiKOG+FcK/kH7vqseUeyIU9Zj2ZIqKTOaro0nknxpAuRq4Vw=="
+    },
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -7345,6 +7407,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -8167,6 +8234,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -10104,6 +10180,16 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marker-clusterer-plus": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
+      "integrity": "sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc="
+    },
+    "markerwithlabel": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/markerwithlabel/-/markerwithlabel-2.0.2.tgz",
+      "integrity": "sha512-C/cbm1A0h/u54gwHk5ZJNdUU3V3+1BbCpRPMsMyFA7vF4yL+aB4rWpxACz29TpQ+cTg6/iQroExh0PMSRGtQFg=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10550,6 +10636,15 @@
         }
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -12767,6 +12862,34 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-google-maps": {
+      "version": "9.4.5",
+      "resolved": "https://registry.npmjs.org/react-google-maps/-/react-google-maps-9.4.5.tgz",
+      "integrity": "sha512-8z5nX9DxIcBCXuEiurmRT1VXVwnzx0C6+3Es6lxB2/OyY2SLax2/LcDu6Aldxnl3HegefTL7NJzGeaKAJ61pOA==",
+      "requires": {
+        "babel-runtime": "^6.11.6",
+        "can-use-dom": "^0.1.0",
+        "google-maps-infobox": "^2.0.0",
+        "invariant": "^2.2.1",
+        "lodash": "^4.16.2",
+        "marker-clusterer-plus": "^2.1.4",
+        "markerwithlabel": "^2.0.1",
+        "prop-types": "^15.5.8",
+        "recompose": "^0.26.0",
+        "scriptjs": "^2.5.8",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12972,6 +13095,17 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recompose": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
+      "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
+      "requires": {
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "symbol-observable": "^1.0.4"
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -13695,6 +13829,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "scriptjs": {
+      "version": "2.5.9",
+      "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
+      "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -14625,6 +14764,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -15091,6 +15235,11 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "ua-parser-js": {
+      "version": "0.7.26",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.26.tgz",
+      "integrity": "sha512-VwIvGlFNmpKbjzRt51jpbbFTrKIEgGHxIwA8Y69K1Bqc6bTIV7TaGGABOkghSFQWsLmcRB4drGvpfv9z2szqoQ=="
+    },
     "uglify-js": {
       "version": "3.13.2",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.2.tgz",
diff --git a/package.json b/package.json
index 5a6d592..133a40f 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "react-bootstrap": "^1.5.2",
     "react-bootstrap-carousel": "^4.1.1",
     "react-dom": "^17.0.2",
+    "react-google-maps": "^9.4.5",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"
   },
diff --git a/public/home-solid.svg b/public/home-solid.svg
new file mode 100644
index 0000000..5b996f1
--- /dev/null
+++ b/public/home-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#55b578" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>
\ No newline at end of file
diff --git a/public/home.svg b/public/home.svg
new file mode 100644
index 0000000..f82df04
--- /dev/null
+++ b/public/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" width="64px" height="64px"><path fill="#faefde" d="M55 33L31 13 7 33 7 57 55 57z"/><path fill="#efd8be" d="M31,13L7,33v1.7c0,1.1,0.9,2,2,2c0.5,0,0.9-0.2,1.3-0.5l20.1-16.7c0.4-0.3,0.9-0.3,1.3,0l20.1,16.7 c0.8,0.7,2.1,0.6,2.8-0.3c0.3-0.4,0.5-0.8,0.5-1.3V33L31,13z"/><path fill="#f9dd8f" d="M7 47H55V57H7z"/><path fill="#cda1a7" d="M31.6,13.5l25.7,21.1c0.4,0.3,1.1,0.3,1.4-0.1c0.1-0.2,0.2-0.4,0.2-0.6V31c0-0.6-0.3-1.2-0.7-1.5L32.3,8 c-0.7-0.6-1.8-0.6-2.5,0l-26,21.4C3.3,29.8,3,30.3,3,31v2.9c0,0.6,0.5,1,1,1c0.2,0,0.4-0.1,0.6-0.2l25.7-21.1 C30.7,13.2,31.3,13.2,31.6,13.5z"/><path fill="#8d6c9f" d="M16 50c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1 .6 0 1-.4 1-1v-2C17 50.4 16.6 50 16 50zM11 50c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1s1-.4 1-1v-2C12 50.4 11.6 50 11 50zM46 50c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1s1-.4 1-1v-2C47 50.4 46.6 50 46 50zM51 50c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1s1-.4 1-1v-2C52 50.4 51.6 50 51 50z"/><path fill="#bbdef9" d="M31 20A4 4 0 1 0 31 28A4 4 0 1 0 31 20Z"/><path fill="#8d6c9f" d="M31,19c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S33.8,19,31,19z M31,27.2c-1.8,0-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2 c1.8,0,3.2,1.4,3.2,3.2v0C34.2,25.8,32.8,27.2,31,27.2z"/><path fill="#ed7899" d="M25 37H37V57H25z"/><path fill="#8d6c9f" d="M33,45c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1s1-0.4,1-1v-2C34,45.4,33.6,45,33,45z"/><path fill="#8d6c9f" d="M56.7,35.4c0.9,0.7,2.1,0.6,2.8-0.3c0.3-0.4,0.5-0.8,0.5-1.3V31c0-0.9-0.4-1.8-1.1-2.3l-26-21.4 c-1.1-0.9-2.7-0.9-3.8,0L18,16.4v-3.3c0-0.6-0.4-1-1-1s-1,0.4-1,1v5l-2,1.6V9.1c0-0.6-0.4-1-1-1s-1,0.4-1,1v12c0,0.1,0,0.1,0,0.2 l-8.9,7.4C2.4,29.2,2,30.1,2,31v2.9c0,0.8,0.4,1.5,1.2,1.8c0.7,0.3,1.5,0.2,2.1-0.3L6,34.8V56H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h56 c0.6,0,1-0.4,1-1s-0.4-1-1-1h-3V34.8L56.7,35.4z M22,56h-2H8v-8h16v8H22z M26,56V38h10v18H26z M54,56H42h-2h-2v-8h16V56z M54,38v8 H38v-8c0-1.1-0.9-2-2-2H26c-1.1,0-2,0.9-2,2v8H8v-8v-4.8l23-18.9l23,18.9V38z M32.3,12.8c-0.7-0.6-1.8-0.6-2.5,0L4,33.9V31 c0-0.3,0.1-0.6,0.4-0.8l26-21.4c0.4-0.3,0.9-0.3,1.3,0l26,21.4c0.2,0.2,0.4,0.5,0.4,0.8v2.9L32.3,12.8z"/><path fill="#8d6c9f" d="M21 50c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1s1-.4 1-1v-2C22 50.4 21.6 50 21 50zM41 50c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1s1-.4 1-1v-2C42 50.4 41.6 50 41 50z"/></svg>
\ No newline at end of file
diff --git a/public/homes-2.svg b/public/homes-2.svg
new file mode 100644
index 0000000..20b0053
--- /dev/null
+++ b/public/homes-2.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 128 128" width="64px" height="64px">    <path d="M 70 18.074219 C 69.225 18.074219 68.450391 18.350391 67.900391 18.900391 L 14.099609 72.599609 C 12.899609 73.799609 12.899609 75.700781 14.099609 76.800781 L 22.599609 85.300781 C 23.199609 85.900781 23.899219 86.199219 24.699219 86.199219 C 25.499219 86.199219 26.300781 85.900781 26.800781 85.300781 L 70 42.199219 L 102 74.199219 L 102 114.5 C 99.1 115.5 96.899219 118 96.199219 121 L 84 121 L 84 80 C 84 78.3 82.7 77 81 77 L 59 77 C 57.3 77 56 78.3 56 80 L 56 121 L 38 121 L 38 94 C 38 92.3 36.7 91 35 91 C 33.3 91 32 92.3 32 94 L 32 101.40039 C 27.1 102.60039 23.300781 106.40078 22.300781 111.30078 C 17.400781 112.30078 13.500391 116.2 12.400391 121 L 4 121 C 2.3 121 1 122.3 1 124 C 1 125.7 2.3 127 4 127 L 99 127 C 100.7 127 102 125.7 102 124 L 102 123 C 102 121.3 103.3 120 105 120 C 106.7 120 108 121.3 108 123 L 108 124 C 108 125.7 109.3 127 111 127 L 114 127 C 115.7 127 117 125.7 117 124 C 117 122.3 115.7 121 114 121 L 113.80078 121 C 113.10078 118 110.9 115.5 108 114.5 L 108 80.199219 L 113.09961 85.300781 C 113.69961 85.900781 114.39922 86.199219 115.19922 86.199219 C 115.99922 86.199219 116.80078 85.900781 117.30078 85.300781 L 125.80078 76.800781 C 127.00078 75.600781 127.00078 73.699609 125.80078 72.599609 L 72.099609 18.900391 C 71.549609 18.350391 70.775 18.074219 70 18.074219 z M 70 25.300781 L 119.5 74.800781 L 115.30078 79 L 72.099609 35.900391 C 71.499609 35.300391 70.8 35 70 35 C 69.2 35 68.500391 35.300391 67.900391 35.900391 L 24.699219 79 L 20.5 74.800781 L 70 25.300781 z M 64 101 C 65.7 101 67 102.3 67 104 C 67 105.7 65.7 107 64 107 C 62.3 107 61 105.7 61 104 C 61 102.3 62.3 101 64 101 z M 32 107.69922 L 32 121 L 18.699219 121 C 19.799219 118.6 22.2 117 25 117 C 26.7 117 28 115.7 28 114 C 28 111.2 29.6 108.79922 32 107.69922 z M 124 121 A 3 3 0 0 0 121 124 A 3 3 0 0 0 124 127 A 3 3 0 0 0 127 124 A 3 3 0 0 0 124 121 z"/></svg>
\ No newline at end of file
diff --git a/public/homes-3.svg b/public/homes-3.svg
new file mode 100644
index 0000000..82a9ef8
--- /dev/null
+++ b/public/homes-3.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M 25 1.0507812 C 24.7825 1.0507812 24.565859 1.1197656 24.380859 1.2597656 L 1.3808594 19.210938 C 0.95085938 19.550938 0.8709375 20.179141 1.2109375 20.619141 C 1.5509375 21.049141 2.1791406 21.129062 2.6191406 20.789062 L 4 19.710938 L 4 46 C 4 46.55 4.45 47 5 47 L 19 47 L 19 29 L 31 29 L 31 47 L 45 47 C 45.55 47 46 46.55 46 46 L 46 19.710938 L 47.380859 20.789062 C 47.570859 20.929063 47.78 21 48 21 C 48.3 21 48.589063 20.869141 48.789062 20.619141 C 49.129063 20.179141 49.049141 19.550938 48.619141 19.210938 L 25.619141 1.2597656 C 25.434141 1.1197656 25.2175 1.0507812 25 1.0507812 z M 35 5 L 35 6.0507812 L 41 10.730469 L 41 5 L 35 5 z"/></svg>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index aa069f2..b4f9b91 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,6 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- fontawesome -->
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
     <title>React App</title>
   </head>
   <body>
diff --git a/src/App.js b/src/App.js
index 7cc58df..28bd195 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,6 @@
 import { Component } from "react";
+import ListingsPage from "./listings-page/ListingsPage";
+
 
 class App extends Component {
   render() {
@@ -9,19 +11,9 @@ class App extends Component {
           <p>Real Website loading.......</p>
         </header>
         <section>
-          <h1>hello everyone</h1>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
+        
+          <ListingsPage />
+
         </section>
       </div>
     );
diff --git a/src/listings-page/ListingsPage.css b/src/listings-page/ListingsPage.css
new file mode 100644
index 0000000..80ebdc9
--- /dev/null
+++ b/src/listings-page/ListingsPage.css
@@ -0,0 +1,9 @@
+.booking_button{
+    text-align: right; 
+}
+
+.popup_nums{
+    font-size: 40px;
+    font-weight:bolder;
+    padding-right: 5%;
+};
\ No newline at end of file
diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js
new file mode 100644
index 0000000..8b31b1a
--- /dev/null
+++ b/src/listings-page/ListingsPage.js
@@ -0,0 +1,191 @@
+import React, { useState, useEffect, Component } from "react";
+import {
+  GoogleMap, 
+  withScriptjs, 
+  withGoogleMap,
+  Marker,
+  InfoWindow
+ } from "react-google-maps";
+ import * as listingData from "./data/property-data.json";
+ import mapStyles from "./mapStyles";
+ import "./ListingsPage.css";
+
+function Map(){
+
+  const [selectedProperty, setSelectedProperty] = useState(null);
+
+
+
+  return (
+    <GoogleMap
+      defaultZoom={10}
+      defaultCenter={{lat: 45.4231, lng:-75.6931}}
+      //https://snazzymaps.com/explore
+      defaultOptions={{styles: mapStyles}}
+    >
+
+        {listingData.Properties.map(house => (
+
+          <Marker
+            key={house.LISTING_ID}
+            position={{ 
+              lat: house.coordinates[1],
+              lng: house.coordinates[0]
+            
+            }}      
+
+            onClick={() => {
+              setSelectedProperty(house)
+            }}      
+
+            icon={{
+              url:"homes-3.svg",
+              scaledSize: new window.google.maps.Size(50,50)
+            }}
+            
+
+            
+          />
+        
+        
+        
+        ))}
+
+
+        {selectedProperty && (
+          
+          <InfoWindow
+            position={{ 
+              lat: selectedProperty.coordinates[1],
+              lng: selectedProperty.coordinates[0]
+            
+            }} 
+            onCloseClick={() => {
+             setSelectedProperty(null);
+            }}
+          >
+            <div> 
+              <h2>{selectedProperty.ADDRESS}</h2>
+              <p> {selectedProperty.DESC}</p>
+              <div>
+                <div class="row">
+
+                  <div className="col-6">
+                  <i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span>
+                  <i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span>
+           
+
+
+                  </div>
+
+                  <div className="col-6 booking_button">
+                  <button>Show Listing</button>
+
+
+                  </div>
+
+                </div>
+                
+
+              </div>
+     
+              
+            </div>
+          </InfoWindow>
+
+        )}
+
+      
+
+
+
+    </GoogleMap>
+  
+   
+  );
+
+}
+
+const MapWrapped = withScriptjs(withGoogleMap(Map))
+
+
+class ListingsPage extends Component {
+  render() {
+    return (
+
+    <div className="listings">
+
+      <section class="colored-section2" id="cta">
+
+        <h2> Testing</h2>
+
+        <div class="row"> 
+
+    
+          <div class="col-12">
+          
+            <div class="dropdown">
+              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+                Dropdown button
+              </button>
+              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+                Dropdown button
+              </button>
+              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </div>
+
+          </div>
+
+        </div>
+
+       
+        <div class="row"> 
+
+          <div class="col-12">
+
+            <h2> Map here</h2>
+       
+            <div style={{ width: "100vm", height: "800px" }}>
+              <MapWrapped
+                googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
+                AIzaSyDD2ndQ18tRLgWUwGw18MHAgrfinSMWBYw`}
+                loadingElement={<div style={{ height: `100%` }} />}
+                containerElement={<div style={{ height: `100%` }} />}
+                mapElement={<div style={{ height: `100%` }} />}
+              />
+            </div>
+
+
+
+
+          </div>
+        
+        </div>
+
+     
+          
+
+      </section>
+
+    
+    </div>
+    
+
+
+    ); 
+  }
+}
+
+export default ListingsPage;
diff --git a/src/listings-page/listings-page.test.js b/src/listings-page/ListingsPage.test.js
similarity index 83%
rename from src/listings-page/listings-page.test.js
rename to src/listings-page/ListingsPage.test.js
index f43ce73..4f49e33 100644
--- a/src/listings-page/listings-page.test.js
+++ b/src/listings-page/ListingsPage.test.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { shallow } from "enzyme";
-import ListingsPage from "./listings-page";
+import ListingsPage from "./ListingsPage";
 
 describe("ListingsPage", () => {
   test("matches snapshot", () => {
diff --git a/src/listings-page/data/house-listings.json b/src/listings-page/data/house-listings.json
new file mode 100644
index 0000000..c38853d
--- /dev/null
+++ b/src/listings-page/data/house-listings.json
@@ -0,0 +1,789 @@
+{
+    "type": "FeatureCollection",
+    "crs": {
+      "type": "name",
+      "properties": {"name": "urn: ogc: def: crs: OGC: 1.3: CRS84"}
+    },
+    "features": [
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 960,
+          "FACILITYID": 28014,
+          "NAME": "Bearbrook Skateboard Park",
+          "NAME_FR": "Bearbrook skate park",
+          "ADDRESS": "8720 Russell Road",
+          "ADDRESS_FR": "8720, chemin Russell",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat asphalt surface, 5 components",
+          "DESCRIPT_1": "Flat asphalt surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.3372987731628, 45.383321536272049]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 1219,
+          "FACILITYID": 28001,
+          "NAME": "Bob MacQuarrie Skateboard Park (SK8 Extreme Park)",
+          "NAME_FR": "Bob-MacQuarrie Skate Park (SK8 Extreme Park)",
+          "ADDRESS": "1490 Youville Drive",
+          "ADDRESS_FR": "1490, promenade Youville",
+          "FACILITY_T": "other",
+          "FACILITY_1": "other",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Community: mid size facility to service population of 40,000 plus",
+          "FACILITY_F": "Community: medium-sized facility providing services to 40,000 residents or more.",
+          "DESCRIPTIO": "Flat asphalt surface, 10 components, City run learn to skateboard programs, City run skateboard camps in summer",
+          "DESCRIPT_1": "Flat asphalt surface, 10 modules, programs and summer skateboard camps managed by the City",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.546518086577947, 45.467134581917357]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 1157,
+          "FACILITYID": 28002,
+          "NAME": "Walter Baker Skateboard Park",
+          "NAME_FR": "Walter-Baker skate park",
+          "ADDRESS": "100 Charlie Rogers Place",
+          "ADDRESS_FR": "100, place Charlie Rogers",
+          "FACILITY_T": "bowl",
+          "FACILITY_1": "bowl",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Community: mid size facility to service population of 40,000 plus",
+          "FACILITY_F": "Community: medium-sized facility providing services to 40,000 residents or more.",
+          "DESCRIPTIO": "Concrete bowl, 7,000 sq ft",
+          "DESCRIPT_1": "Concrete bowl, 7,000 sq. Ft.",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.898610599532319, 45.295014379864874]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 9,
+          "FACILITYID": 28006,
+          "NAME": "Roving Skateboard Park Location",
+          "NAME_FR": "Location of an itinerant skate park",
+          "ADDRESS": "2785 8th Line Road",
+          "ADDRESS_FR": "2785, chemin 8th Line",
+          "FACILITY_T": "other",
+          "FACILITY_1": "other",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor - Mobile",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Metcalfe Community Center - Roving Skateboard Park Location",
+          "FACILITY_F": "Metcalfe Community Center - Itinerant skate park site",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.468561642270757, 45.23032561834377]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 1160,
+          "FACILITYID": 28007,
+          "NAME": "Roving Skateboard Park Location",
+          "NAME_FR": "Location of an itinerant skate park",
+          "ADDRESS": "10 Warner Colpitts Lane",
+          "ADDRESS_FR": "10, ruelle Warner Colpitts",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "yes / oui",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Indoor - Summer",
+          "MODIFIED_D": "2018/03/07",
+          "CREATED_DA": null,
+          "FACILITY": "Johnny Leroux Stittsville Community Arena - Roving Skateboard Park Location",
+          "FACILITY_F": "Stittsville Johnny-Leroux community arena - Itinerant skate park site",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.926651366520872, 45.260659774950561]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 1693,
+          "FACILITYID": 28016,
+          "NAME": "Legacy Skateboard Park",
+          "NAME_FR": "Skatepark Legacy",
+          "ADDRESS": "101 Centrepointe Drive",
+          "ADDRESS_FR": "101, promenade Centrepointe",
+          "FACILITY_T": "bowl",
+          "FACILITY_1": "bowl",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "District: larger facility to service population of 100,000 plus",
+          "FACILITY_F": "District: large facility providing services to 100,000 or more residents.",
+          "DESCRIPTIO": "Large concrete bowl, many street and vertical components, 17,000 sq ft",
+          "DESCRIPT_1": "Large concrete bowl, street modules and vertical modules, 17,000 ft2",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.760933332842754, 45.345566668964558]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 1717,
+          "FACILITYID": 28018,
+          "NAME": "Greenboro Skateboard Park",
+          "NAME_FR": "Greenboro skate park",
+          "ADDRESS": "3142 Conroy Road",
+          "ADDRESS_FR": "3142, chemin Conroy",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat asphalt surface, 5 components",
+          "DESCRIPT_1": "Flat asphalt surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.625996131485707, 45.375401587496128]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 137,
+          "FACILITYID": 28019,
+          "NAME": "Bridlewood Skateboard Park",
+          "NAME_FR": "Bridlewood skate park",
+          "ADDRESS": "65 Stonehaven Drive",
+          "ADDRESS_FR": "65 Stonehaven Drive",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat asphalt surface, 5 components",
+          "DESCRIPT_1": "Flat asphalt surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.857009812435976, 45.290758029776626]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 1133,
+          "FACILITYID": 28020,
+          "NAME": "Roving Skateboard Park Location",
+          "NAME_FR": "Location of an itinerant skate park",
+          "ADDRESS": "100 Clifford Campbell Street",
+          "ADDRESS_FR": "100, rue Clifford-Campbell",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Fitzroy Harbor Community Center - Roving Skateboard Park Location",
+          "FACILITY_F": "Fitzroy Harbor Community Center - Itinerant skate park site",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-76.206087708136721, 45.470459866077654]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 657,
+          "FACILITYID": 28000,
+          "NAME": "Roving Skateboard Park Location",
+          "NAME_FR": "Location of an itinerant skate park",
+          "ADDRESS": "110 Malvern Drive",
+          "ADDRESS_FR": "110, promenade Malvern",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Walter Baker Sports Center - Roving Skateboard Park Location",
+          "FACILITY_F": "Walter-Baker Sports Center - Itinerant skate park site",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.760235255689508, 45.280622216516925]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 653,
+          "FACILITYID": 28008,
+          "NAME": "Roving Skateboard Park Location",
+          "NAME_FR": "Location of an itinerant skate park",
+          "ADDRESS": "5660 Osgoode Main Street",
+          "ADDRESS_FR": "5660, rue Osgoode Main",
+          "FACILITY_T": "other",
+          "FACILITY_1": "other",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor - Mobile",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Osgoode Community Center - Roving Skateboard Park Location",
+          "FACILITY_F": "Osgoode Community Center - Itinerant skate park site",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.60118478829267, 45.147641950106689]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 812,
+          "FACILITYID": 35050,
+          "NAME": "Charlie Bowins Skateboard Park",
+          "NAME_FR": "Charlie-Bowins skate park",
+          "ADDRESS": "435 Bronson Avenue",
+          "ADDRESS_FR": "435, avenue Bronson",
+          "FACILITY_T": "bowl",
+          "FACILITY_1": "bowl",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor (Commemoratively named Charlie Bowins Skateboard Park on June 10, 2015)",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": "2015/05/20",
+          "FACILITY": "District: larger facility to service population of 100,000 plus",
+          "FACILITY_F": "District: large facility providing services to 100,000 or more residents.",
+          "DESCRIPTIO": "Flat concrete surface, 10 plus components (large half pipe), City run learn to skateboard programs, City run skateboard camps in summer",
+          "DESCRIPT_1": "Flat concrete surface, 10 or more modules (large halfpipe), summer skateboard programs and camps managed by the City",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.703622500360268, 45.408488357092367]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 2457,
+          "FACILITYID": 35637,
+          "NAME": "Diamond Jubilee Skateboard Park",
+          "NAME_FR": "Diamond Jubilee Skate Park",
+          "ADDRESS": "2810 Findlay Creek Drive",
+          "ADDRESS_FR": "2810 Findlay Creek Drive",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "yes / oui",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2017/07/11",
+          "CREATED_DA": "2016/06/22",
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat asphalt surface, 5 components",
+          "DESCRIPT_1": "Flat asphalt surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.609516309730921, 45.314086718258636]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 430,
+          "FACILITYID": 28005,
+          "NAME": "Blackburn Skateboard Park",
+          "NAME_FR": "Blackburn skate park",
+          "ADDRESS": "190 Glen Park Drive",
+          "ADDRESS_FR": "190 Glen Park Drive",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat asphalt surface, 5 components",
+          "DESCRIPT_1": "Flat asphalt surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.562796920677627, 45.429643413219814]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 989,
+          "FACILITYID": 28017,
+          "NAME": "Goulbourn Skateboard Park",
+          "NAME_FR": "Planchodrome Goulbourn",
+          "ADDRESS": "1500 Shea Road",
+          "ADDRESS_FR": "1500, chemin Shea",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat asphalt surface, 6 components",
+          "DESCRIPT_1": "Flat asphalt surface, 6 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.907108695123526, 45.26222860981953]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 1334,
+          "FACILITYID": 28011,
+          "NAME": "Constance Bay Skateboard Park",
+          "NAME_FR": "Constance Bay skate park",
+          "ADDRESS": "262 Len Purcell Drive",
+          "ADDRESS_FR": "262, Len-Purcell promenade",
+          "FACILITY_T": "other",
+          "FACILITY_1": "other",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat asphalt surface, 5 components",
+          "DESCRIPT_1": "Flat asphalt surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-76.09244957349965, 45.499050061534312]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 923,
+          "FACILITYID": 28013,
+          "NAME": "Roving Skateboard Park Location",
+          "NAME_FR": "Location of an itinerant skate park",
+          "ADDRESS": "334 River Road",
+          "ADDRESS_FR": "334, chemin River",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Eccolands Park - Roving Skateboard Park Location",
+          "FACILITY_F": "Parc Eccolands - Location of an itinerant skate park",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.695392300925718, 45.315355581248873]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 762,
+          "FACILITYID": 28004,
+          "NAME": "Trillium Park Skateboard Park",
+          "NAME_FR": "Park Trillium skate park",
+          "ADDRESS": "2030 Ogilvie Road",
+          "ADDRESS_FR": "2030, chemin Ogilvie",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat asphalt surface, 5 components",
+          "DESCRIPT_1": "Flat asphalt surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.601158413850058, 45.436441777242031]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 52,
+          "FACILITYID": 35120,
+          "NAME": "Lansdowne Skateboard Park",
+          "NAME_FR": "Lansdowne Skate Park",
+          "ADDRESS": "450 Queen Elizabeth Driveway",
+          "ADDRESS_FR": "450 Queen Elizabeth Drive",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "yes / oui",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2017/07/11",
+          "CREATED_DA": "2015/09/23",
+          "FACILITY": "A series of skateboard ramps ideally suited to beginners.",
+          "FACILITY_F": "A series of ramps suitable for beginners.",
+          "DESCRIPTIO": "Flat asphalt surface",
+          "DESCRIPT_1": "Flat asphalt surface",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.681193500335723, 45.400372622455215]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 2488,
+          "FACILITYID": 35815,
+          "NAME": "Greely Village Skateboard Park",
+          "NAME_FR": "Planchodrome Greely Village",
+          "ADDRESS": "7292 Parkway Road",
+          "ADDRESS_FR": "7292, chemin Parkway",
+          "FACILITY_T": "other",
+          "FACILITY_1": "other",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "yes / oui",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/01/04",
+          "CREATED_DA": "2017/04/28",
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat concrete surface, 5 components",
+          "DESCRIPT_1": "Flat concrete surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.553065849890629, 45.265433081236672]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 330,
+          "FACILITYID": 28003,
+          "NAME": "Manotick Skateboard Park",
+          "NAME_FR": "Planchodrome Manotick",
+          "ADDRESS": "5572 Doctor Leach Drive",
+          "ADDRESS_FR": "5572, Doctor-Leach promenade",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "yes / oui",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor - Joined with basketball",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Community: mid size facility to service population of 40,000 plus",
+          "FACILITY_F": "Community: medium-sized facility providing services to 40,000 residents or more.",
+          "DESCRIPTIO": "Flat asphalt surface, 8 components",
+          "DESCRIPT_1": "Flat asphalt surface, 8 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.686746214582783, 45.22266136322127]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 693,
+          "FACILITYID": 28010,
+          "NAME": "Roving Skateboard Park Location",
+          "NAME_FR": "Location of an itinerant skate park",
+          "ADDRESS": "1448 Meadow Drive",
+          "ADDRESS_FR": "1448 Meadow Drive",
+          "FACILITY_T": "other",
+          "FACILITY_1": "other",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor - Mobile",
+          "MODIFIED_D": "2018/01/18",
+          "CREATED_DA": null,
+          "FACILITY": "Andy Shields Park - Roving Skateboard Park Location",
+          "FACILITY_F": "Andy-Shields Park - Location of an itinerant skate park",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.556978502821494, 45.261353985880973]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 2544,
+          "FACILITYID": 35667,
+          "NAME": "Berrigan Skateboard Park",
+          "NAME_FR": "Planchodrome Berrigan",
+          "ADDRESS": "51 Berrigan Drive",
+          "ADDRESS_FR": "51, promenade Berrigan",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "no / non",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/02/27",
+          "CREATED_DA": "2016/06/27",
+          "FACILITY": "Community: mid size facility to service population of 40,000 plus",
+          "FACILITY_F": "Community: medium-sized facility providing services to 40,000 residents or more.",
+          "DESCRIPTIO": "Flat concrete surface, 10 plus components",
+          "DESCRIPT_1": "Flat concrete surface, 10 or more modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.747348794023239, 45.275696004260205]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 2599,
+          "FACILITYID": 49251,
+          "NAME": "Eugène Martineau Skateboard Park",
+          "NAME_FR": "Planchodrome Eugène-Martineau",
+          "ADDRESS": "710 Mikinak Road",
+          "ADDRESS_FR": "710, chemin Mikinak",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "yes / oui",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/11/29",
+          "CREATED_DA": "2018/11/29",
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.632030968141081, 45.450696284941976]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 2278,
+          "FACILITYID": 49211,
+          "NAME": "Vista Skateboard Park",
+          "NAME_FR": "Planchodrome Vista",
+          "ADDRESS": "720 Vistapark Drive",
+          "ADDRESS_FR": "720, Vistapark promenade",
+          "FACILITY_T": "flat",
+          "FACILITY_1": "flat",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "yes / oui",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2018/11/29",
+          "CREATED_DA": "2018/06/22",
+          "FACILITY": "Neighborhood: smaller size facility to service population of 10,000 or less",
+          "FACILITY_F": "Neighborhood: small facility providing services to 10,000 residents or less.",
+          "DESCRIPTIO": "Flat surface, 5 components",
+          "DESCRIPT_1": "Flat surface, 5 modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.471003922143311, 45.450391044010431]
+        }
+      },
+      {
+        "type": "Feature",
+        "properties": {
+          "PARK_ID": 2113,
+          "FACILITYID": 35299,
+          "NAME": "Innovation Skateboard Park",
+          "NAME_FR": "Planchomdrome Innovation",
+          "ADDRESS": "4101 Innovation Drive",
+          "ADDRESS_FR": "4101, promenade Innovation",
+          "FACILITY_T": "bowl",
+          "FACILITY_1": "bowl",
+          "ACCESSCTRL": "no / non",
+          "ACCESSIBLE": "yes / oui",
+          "OPEN": null,
+          "NOTES": "Outdoor",
+          "MODIFIED_D": "2017/07/11",
+          "CREATED_DA": "2016/02/08",
+          "FACILITY": "District: larger facility to service population of 100,000 plus",
+          "FACILITY_F": "District: large facility providing services to 100,000 or more residents.",
+          "DESCRIPTIO": "Large concrete bowl, 10 plus components, many street and vertical components",
+          "DESCRIPT_1": "Large concrete bowl, 10 or more modules, street modules and vertical modules",
+          "PICTURE_LI": null,
+          "PICTURE_DE": null,
+          "PICTURE__1": null
+        },
+        "geometry": {
+          "type": "Point",
+          "coordinates": [-75.931122879767898, 45.34125624499935]
+        }
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/src/listings-page/data/property-data.json b/src/listings-page/data/property-data.json
new file mode 100644
index 0000000..d6451e9
--- /dev/null
+++ b/src/listings-page/data/property-data.json
@@ -0,0 +1,83 @@
+{
+    "Properties": [
+
+
+        {
+            "LISTING_ID": 1,
+            "ADDRESS": "8720 Russell Road",
+            "PRICE": "$500000",
+            "IMAGES":[
+
+            ],
+            "AVAILABLE_AGENTS":[
+
+            ],
+            "DESC":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.",
+
+            "FOR_SALE": true,
+            "coordinates": [-75.3372987731628, 45.383321536272049]
+
+        },
+
+
+        {
+
+            "LISTING_ID": 2,
+            "ADDRESS": "1490 Youville Drive",
+            "PRICE": "$500000",
+            "IMAGES":[
+
+            ],
+            "AVAILABLE_AGENTS":[
+
+            ],
+            "DESC":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.",
+            "FOR_SALE": true,
+            "coordinates": [-75.546518086577947, 45.467134581917357]
+            
+
+
+
+        },
+
+        {
+
+            "LISTING_ID": 3,
+            "ADDRESS": "100 Charlie Rogers Place",
+            "PRICE": "$500000",
+            "IMAGES":[
+
+            ],
+            "AVAILABLE_AGENTS":[
+
+            ],
+            "DESC":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.",
+
+            "FOR_SALE": true,
+            "coordinates": [-75.898610599532319, 45.295014379864874]
+
+
+
+
+        },
+
+        {
+
+            "LISTING_ID": 4,
+            "ADDRESS": "2785 8th Line Road",
+            "PRICE": "$500000",
+            "IMAGES":[
+
+            ],
+            "AVAILABLE_AGENTS":[
+
+            ],
+            "DESC":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.",
+
+            "FOR_SALE": true,
+            "coordinates": [-75.468561642270757, 45.23032561834377]
+
+        }
+    ]
+
+}
diff --git a/src/listings-page/listings-page.css b/src/listings-page/listings-page.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/listings-page/listings-page.js b/src/listings-page/listings-page.js
deleted file mode 100644
index 0290527..0000000
--- a/src/listings-page/listings-page.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { Component } from "react";
-
-class ListingsPage extends Component {
-  render() {
-    return <div>ListingsPage</div>;
-  }
-}
-
-export default ListingsPage;
diff --git a/src/listings-page/mapStyles.js b/src/listings-page/mapStyles.js
new file mode 100644
index 0000000..84d724c
--- /dev/null
+++ b/src/listings-page/mapStyles.js
@@ -0,0 +1,267 @@
+export default [
+    {
+        "featureType": "all",
+        "elementType": "labels",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative",
+        "elementType": "all",
+        "stylers": [
+            {
+                "visibility": "off"
+            },
+            {
+                "color": "#efebe2"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative",
+        "elementType": "labels.text",
+        "stylers": [
+            {
+                "visibility": "on"
+            },
+            {
+                "color": "#333333"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative",
+        "elementType": "labels.text.stroke",
+        "stylers": [
+            {
+                "visibility": "off"
+            },
+            {
+                "color": "#f2f1f1"
+            }
+        ]
+    },
+    {
+        "featureType": "administrative.province",
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "color": "#ba7828"
+            }
+        ]
+    },
+    {
+        "featureType": "landscape",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#efebe2"
+            }
+        ]
+    },
+    {
+        "featureType": "landscape",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "visibility": "simplified"
+            },
+            {
+                "color": "#fbf7eb"
+            }
+        ]
+    },
+    {
+        "featureType": "landscape",
+        "elementType": "geometry.stroke",
+        "stylers": [
+            {
+                "color": "#bec1c1"
+            }
+        ]
+    },
+    {
+        "featureType": "landscape",
+        "elementType": "labels.text.stroke",
+        "stylers": [
+            {
+                "color": "#c3c3c3"
+            }
+        ]
+    },
+    {
+        "featureType": "poi",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#e2e1df"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.attraction",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#efebe2"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.business",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#efebe2"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.government",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#dfdcd5"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.medical",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#dfdcd5"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.park",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#aceac5"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.place_of_worship",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#efebe2"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.school",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#efebe2"
+            }
+        ]
+    },
+    {
+        "featureType": "poi.sports_complex",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#efebe2"
+            }
+        ]
+    },
+    {
+        "featureType": "road.highway",
+        "elementType": "geometry.fill",
+        "stylers": [
+            {
+                "color": "#dad5c4"
+            }
+        ]
+    },
+    {
+        "featureType": "road.highway",
+        "elementType": "geometry.stroke",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "featureType": "road.arterial",
+        "elementType": "geometry.fill",
+        "stylers": [
+            {
+                "color": "#ffffff"
+            }
+        ]
+    },
+    {
+        "featureType": "road.arterial",
+        "elementType": "geometry.stroke",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "featureType": "road.local",
+        "elementType": "geometry.fill",
+        "stylers": [
+            {
+                "color": "#fbfbfb"
+            }
+        ]
+    },
+    {
+        "featureType": "road.local",
+        "elementType": "geometry.stroke",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "featureType": "transit",
+        "elementType": "all",
+        "stylers": [
+            {
+                "visibility": "on"
+            },
+            {
+                "saturation": "21"
+            },
+            {
+                "gamma": "1.34"
+            },
+            {
+                "hue": "#ffcc00"
+            }
+        ]
+    },
+    {
+        "featureType": "water",
+        "elementType": "all",
+        "stylers": [
+            {
+                "color": "#aad0fc"
+            }
+        ]
+    },
+    {
+        "featureType": "water",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#aad0fc"
+            }
+        ]
+    }
+]
+
diff --git a/src/listings-page/listing-page/listing-page.css b/src/listings-page/single-listing/listing-page.css
similarity index 100%
rename from src/listings-page/listing-page/listing-page.css
rename to src/listings-page/single-listing/listing-page.css
diff --git a/src/listings-page/listing-page/listing-page.js b/src/listings-page/single-listing/listing-page.js
similarity index 100%
rename from src/listings-page/listing-page/listing-page.js
rename to src/listings-page/single-listing/listing-page.js
diff --git a/src/listings-page/listing-page/listing-page.test.js b/src/listings-page/single-listing/listing-page.test.js
similarity index 100%
rename from src/listings-page/listing-page/listing-page.test.js
rename to src/listings-page/single-listing/listing-page.test.js

From 4b2552768c24a2f2da57ff1f792580956da36d73 Mon Sep 17 00:00:00 2001
From: ruchi <ruchirawperera@gmail.com>
Date: Wed, 31 Mar 2021 13:43:45 -0400
Subject: [PATCH 4/4] m

---
 src/App.js                        | 9 ---------
 src/listings-page/ListingsPage.js | 9 ++++++---
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index 469a81f..2c78e15 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,15 +7,6 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <h1>Kene's Cribs</h1>
-          <p>Real Website loading.......</p>
-        </header>
-        <section>
-        
-          <ListingsPage />
-
-        </section>
           <Homepage></Homepage>
       </div>
     );
diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js
index 8b31b1a..49d6045 100644
--- a/src/listings-page/ListingsPage.js
+++ b/src/listings-page/ListingsPage.js
@@ -117,8 +117,11 @@ class ListingsPage extends Component {
 
       <section class="colored-section2" id="cta">
 
-        <h2> Testing</h2>
 
+      {/*
+      
+    
+    
         <div class="row"> 
 
     
@@ -149,13 +152,13 @@ class ListingsPage extends Component {
           </div>
 
         </div>
-
+  */}
        
         <div class="row"> 
 
           <div class="col-12">
 
-            <h2> Map here</h2>
+            <h2> Map </h2>
        
             <div style={{ width: "100vm", height: "800px" }}>
               <MapWrapped