Merge pull request #31 from ArcticHawk1/listings

Listings
This commit is contained in:
Samuel Oyediran 2021-04-07 16:26:57 -04:00 committed by GitHub
commit cbd37a212b
14 changed files with 638 additions and 1198 deletions

175
package-lock.json generated
View file

@ -1271,6 +1271,11 @@
} }
} }
}, },
"@googlemaps/js-api-loader": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.6.0.tgz",
"integrity": "sha512-amuilneCf7q5A/jDUE3ml83c9NjW/3DzIqiBDFIKZcraD0JSKbetkEQa5s57Z6QY7jxcequXgoL9CKJUY1xZ5A=="
},
"@hapi/address": { "@hapi/address": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -1916,6 +1921,156 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz",
"integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA==" "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA=="
}, },
"@reach/auto-id": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.10.5.tgz",
"integrity": "sha512-we4/bwjFxJ3F+2eaddQ1HltbKvJ7AB8clkN719El7Zugpn/vOjfPMOVUiBqTmPGLUvkYrq4tpuFwLvk2HyOVHg==",
"requires": {
"@reach/utils": "0.10.5",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/combobox": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/combobox/-/combobox-0.10.5.tgz",
"integrity": "sha512-UrvdELLk+rnxK0o2e+jWmw6b7dteBWAylX4CEHE9KJuBbdwZ1PJY3YIAwJuvWM13Lcll2Pk7OlFJqRT90r2mRg==",
"requires": {
"@reach/auto-id": "0.10.5",
"@reach/descendants": "0.10.5",
"@reach/popover": "0.10.5",
"@reach/portal": "0.10.5",
"@reach/utils": "0.10.5",
"highlight-words-core": "1.2.2",
"prop-types": "^15.7.2",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/descendants": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.10.5.tgz",
"integrity": "sha512-8HhN4DwS/HsPQ+Ym/Ft/XJ1spXBYdE8hqpnbYR9UcU7Nx3oDbTIdhjA6JXXt23t5avYIx2jRa8YHCtVKSHuiwA==",
"requires": {
"@reach/utils": "0.10.5",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/observe-rect": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
"integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
},
"@reach/popover": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/popover/-/popover-0.10.5.tgz",
"integrity": "sha512-S+qWIsjrN1yMpHjgELhjpdGc4Q3q1plJtXBGGQRxUAjmCUA/5OY7t5w5C8iqMNAEBwCvYXKvK/pLcXFxxLykSw==",
"requires": {
"@reach/portal": "0.10.5",
"@reach/rect": "0.10.5",
"@reach/utils": "0.10.5",
"tabbable": "^4.0.0",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/portal": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.10.5.tgz",
"integrity": "sha512-K5K8gW99yqDPDCWQjEfSNZAbGOQWSx5AN2lpuR1gDVoz4xyWpTJ0k0LbetYJTDVvLP/InEcR7AU42JaDYDCXQw==",
"requires": {
"@reach/utils": "0.10.5",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/rect": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/rect/-/rect-0.10.5.tgz",
"integrity": "sha512-JBKs2HniYecq5zLO6UFReX28SUBPM3n0aizdNgHuvwZmDcTfNV4jsuJYQLqJ+FbCQsrSHkBxKZqWpfGXY9bUEg==",
"requires": {
"@reach/observe-rect": "1.2.0",
"@reach/utils": "0.10.5",
"prop-types": "^15.7.2",
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@reach/utils": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.10.5.tgz",
"integrity": "sha512-5E/xxQnUbmpI/LrufBAOXjunl96DnqX6B4zC2MO2KH/dRzLug5gM5VuOwV26egsp0jvsSPxojwciOhS43px3qw==",
"requires": {
"@types/warning": "^3.0.0",
"tslib": "^2.0.0",
"warning": "^4.0.3"
},
"dependencies": {
"tslib": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}
}
},
"@react-google-maps/api": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-1.13.0.tgz",
"integrity": "sha512-mKwXziG5MbOvvcWG53FyZVZ8zjAuPNYkcS/+nYX9STMFNrI96AFq5l/zUn2QifRJnPzE8iO4V1vyMM+Ie9LpGg==",
"requires": {
"@googlemaps/js-api-loader": "1.6.0",
"@react-google-maps/infobox": "1.12.1",
"@react-google-maps/marker-clusterer": "1.12.1",
"invariant": "2.2.4"
}
},
"@react-google-maps/infobox": {
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-1.12.1.tgz",
"integrity": "sha512-tD/xijqRtKK/LNRzuerzuyvybnRaD8SLgCA064len4/enTo1abhQN215ZYqwbTOn7RgYt9qMgNnwoX//u3xoWw=="
},
"@react-google-maps/marker-clusterer": {
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-1.12.1.tgz",
"integrity": "sha512-JBSO5VJuouP/boBnSdRDCWq0UKO7jr3HvZVhis3ew+VGJ/BoCPu3lpU0HDsjjulfng+xwqLfVOIzP3QnvBPdCA=="
},
"@restart/context": { "@restart/context": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@ -5108,6 +5263,11 @@
"whatwg-url": "^8.0.0" "whatwg-url": "^8.0.0"
} }
}, },
"date-fns": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz",
"integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg=="
},
"debug": { "debug": {
"version": "4.3.1", "version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@ -7570,6 +7730,11 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
}, },
"highlight-words-core": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz",
"integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg=="
},
"history": { "history": {
"version": "4.10.1", "version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@ -15242,6 +15407,11 @@
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
}, },
"tabbable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
"integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
},
"table": { "table": {
"version": "6.0.7", "version": "6.0.7",
"resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz", "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
@ -15952,6 +16122,11 @@
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
}, },
"use-places-autocomplete": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/use-places-autocomplete/-/use-places-autocomplete-1.9.1.tgz",
"integrity": "sha512-ZIkCob6qFBT5kP5wvtiDHV2Dw+DjlVSOj8RoM0XRkDB95PPQzICTjWHOhe4ClY0gO2Nq1bFG5K2WfIYYlIYtfg=="
},
"util": { "util": {
"version": "0.11.1", "version": "0.11.1",
"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

View file

@ -34,9 +34,13 @@
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-select": "^4.3.0", "react-select": "^4.3.0",
"reactstrap": "^8.9.0",
"spectre.css": "^0.5.9", "spectre.css": "^0.5.9",
"web-vitals": "^1.1.1", "web-vitals": "^1.1.1",
"@reach/combobox": "^0.10.2",
"@react-google-maps/api": "^1.9.0",
"date-fns": "^2.13.0",
"use-places-autocomplete": "^1.3.5",
"reactstrap": "^8.9.0",
"yup": "^0.32.9" "yup": "^0.32.9"
}, },
"scripts": { "scripts": {

View file

@ -1,126 +0,0 @@
.colored-section {
background-color: #e7dec8;
color: #000000;
white-space: nowrap;
}
.white-section {
background-color: #ffffff;
padding-top: 10rem;
padding-bottom: 5rem;
padding-left: 18%;
}
#title .container-fluid {
padding: 5% 34% 6%;
text-align: left;
font-family: "Georgia";
}
#features .container-fluid {
padding: 2% 14% 4%;
text-align: left;
font-family: "Georgia";
}
.housesIntro{
width: 1200px;
height: 800px;
}
.contactIntro{
padding-left: 30%;
padding-right: 30%;
padding-bottom: 80px;
}
.headerImg{
width: 1200px;
height: 800px;
}
.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;
}
.buttonka{
padding-top: 2px;
}
.prev-icon,
.next-icon {
height: 210px;
width: 100px;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
background-image: none;
text-shadow: 2px 2px 5px black;
}
.next-icon:after
{
content: '>';
font-size: 140px;
color: rgb(255, 255, 255);
text-shadow: 2px 2px 5px black;
}
.prev-icon:after {
content: '<';
font-size: 140px;
color: rgb(255, 255, 255);
text-shadow: 2px 2px 5px black;
}
ol.carousel-indicators {
position: absolute;
bottom: 5px;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li,
ol.carousel-indicators li.active {
width: 1rem;
height: 1rem;
margin: 0;
border-radius: 50%;
border: 0;
background: transparent;
box-shadow: 0 0 1px 1px black;
}
ol.carousel-indicators li {
background: rgb(255, 255, 255);
margin-left: .5rem;
margin-right: .5rem;
box-shadow: 0 0 1px 1px black;
}
ol.carousel-indicators li.active {
background: #17a2b8;
box-shadow: 0 0 1px 1px black;
}
.homePage{
padding-bottom: 15%;
}

View file

@ -1,103 +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 house4 from "../images/house4.jpg";
import Carousel from "react-bootstrap/Carousel";
import Button from "react-bootstrap/Button";
import { withTranslation } from "react-i18next";
class Homepage extends Component {
constructor(props) {
super(props);
this.state = {
nextIcon: <span className="next-icon"></span>,
prevIcon: <span className="prev-icon"></span>,
};
}
render() {
const { t } = this.props;
const { nextIcon, prevIcon } = this.state;
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">{t("Slogan_1")}</h1>
<h1 className="big-heading">{t("Slogan_2")}</h1>
</div>
</div>
</div>
</section>
<section className="white-section">
<div className="housesIntro">
<Carousel nextIcon={nextIcon} prevIcon={prevIcon}>
<Carousel.Item>
<img className="headerImg" src={house1} alt="First House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house2} alt="Second House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house3} alt="Third House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house4} alt="Fourth House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
<section className="colored-section" id="features">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>{t("Desc")}</h2>
<p style={{ fontSize: "110%" }}>{t("Home1")}<br></br>
{t("Home2")}<br></br>
{t("Home3")}<br></br>
{t("Home4")}<br></br>
{t("Home5")}<br></br>
{t("Home6")}</p>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
);
}
}
export default withTranslation()(Homepage);

BIN
src/images/bg1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/images/fbg1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/images/fbg2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/images/fbg3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

View file

@ -1,3 +1,9 @@
body{
/*background-image: url("../images/bg1.jpg");
background-position: 0px 60px;
*/
}
.booking_button{ .booking_button{
text-align: right; text-align: right;
} }
@ -6,4 +12,33 @@
font-size: 40px; font-size: 40px;
font-weight:bolder; font-weight:bolder;
padding-right: 5%; padding-right: 5%;
}; }
.search{
display:inline-block;
margin:3% 0%;
}
.compass{
height:25px;
width:25px;
}
.buttonImg{
background-color: transparent;
border: none !important;
}
.main_borders{
padding:0% 10% 4% 10%;
}
.map_style{
text-align: center;
}
.filters{
margin: 2% 0%
}

View file

@ -2,198 +2,354 @@
import React, { useState, useEffect, Component } from "react"; import React, { useState, useEffect, Component } from "react";
import { import {
GoogleMap, GoogleMap,
withScriptjs, useLoadScript,
withGoogleMap,
Marker, Marker,
InfoWindow InfoWindow,
} from "react-google-maps"; } from "@react-google-maps/api";
import * as listingData from "./data/property-data.json"; import usePlacesAutocomplete, {
getGeocode,
getLatLng,
} from "use-places-autocomplete";
import {
Combobox,
ComboboxInput,
ComboboxPopover,
ComboboxList,
ComboboxOption,
} from "@reach/combobox";
import { formatRelative } from "date-fns";
import Select from "react-select";
import "@reach/combobox/styles.css";
import mapStyles from "./mapStyles"; import mapStyles from "./mapStyles";
import * as listingData from "./data/property-data.json";
import "./ListingsPage.css"; import "./ListingsPage.css";
function Map() { import compassImg from "./compass.svg";
const [selectedProperty, setSelectedProperty] = useState(null); const libraries = ["places"];
const mapContainerStyle = {
height: "700px",
width: "100vm",
};
const options = {
styles: mapStyles,
disableDefaultUI: true,
zoomControl: true,
};
const center = {
lat: 45.4231,
lng: -75.6931,
};
export default function ListingsPage() {
const price_filter = [
{
value: null,
label: "Any",
},
{
value: 100000,
label: "$100000",
},
{
value: 200000,
label: "$200000",
},
{
value: 300000,
label: "$300000",
},
{
value: 400000,
label: "$400000",
}
];
const bed_filter = [
{
value: null,
label: "Any",
},
{
value: 1,
label: "One Bed",
},
{
value: 2,
label: "Two Beds",
},
{
value: 3,
label: "Three Beds",
}
];
const bath_filter = [
{
value: null,
label: "Any",
},
{
value: 1,
label: "One Bath",
},
{
value: 2,
label: "Two Baths",
},
{
value: 3,
label: "Three Baths",
}
];
//console.log(data1[0]);
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: `https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`,
libraries,
});
const [selectedBudget, setSelectedBudget] = useState(null);
const [selectedBeds, setSelectedBeds] = useState(null);
const [selectedBaths, setSelectedBaths] = useState(null);
const [markers, setMarkers] = React.useState([]);
const [selected, setSelected] = React.useState(null);
const [budget, setBudget] = useState(null);
const [bed, setBed] = useState(null);
const [bath, setBath] = useState(null);
const mapRef = React.useRef();
const onMapLoad = React.useCallback((map) => {
mapRef.current = map;
//console.log(current);
}, []);
const panTo = React.useCallback(({ lat, lng }) => {
mapRef.current.panTo({ lat, lng });
mapRef.current.setZoom(10);
}, []);
if (loadError) return "Error";
if (!isLoaded) return "Loading...";
// handle onChange event of the dropdown
const handleBudgetChange = (e) => {
setSelectedBudget(e);
setBudget(e.value);
//https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
//https://stackoverflow.com/questions/57341541/removing-object-from-array-using-hooks-usestate/57341724
};
const handleBedChange = (e) => {
setSelectedBeds(e);
setBed(e.value);
};
const handleBathChange = (e) => {
setSelectedBaths(e);
setBath(e.value);
};
return ( return (
<div className="main_borders">
<div class="filters">
<Search class="search" panTo={panTo} />
<Locate class="search" panTo={panTo} />
<Select
class="search"
placeholder="Select Budget"
value={selectedBudget} // set selected value
options={price_filter} // set list of the data
onChange={handleBudgetChange} // assign onChange function
/>
<Select
class="search"
placeholder="# Beds"
value={selectedBeds} // set selected value
options={bed_filter} // set list of the data
onChange={handleBedChange} // assign onChange function
/>
<Select
class="search"
placeholder="# Baths"
value={selectedBaths} // set selected value
options={bath_filter} // set list of the data
onChange={handleBathChange} // assign onChange function
/>
</div>
<div >
<GoogleMap <GoogleMap
defaultZoom={10} id="map"
defaultCenter={{ lat: 45.4231, lng: -75.6931 }} mapContainerStyle={mapContainerStyle}
//https://snazzymaps.com/explore zoom={10}
defaultOptions={{ styles: mapStyles }} center={center}
options={options}
onLoad={onMapLoad}
> >
{listingData.Properties.map((house) =>
{listingData.Properties.map(house => ( (budget >= house.PRICE || !budget) &&
(bed == house.BEDS || !bed) &&
(bath == house.BATHS || !bath) ? (
<Marker <Marker
key={house.LISTING_ID} key={house.LISTING_ID}
position={{ position={{
lat: house.coordinates[1], lat: house.coordinates[1],
lng: house.coordinates[0] lng: house.coordinates[0],
}} }}
onClick={() => { onClick={() => {
setSelectedProperty(house) setSelected(house);
}} }}
icon={{ icon={{
url: "homes-3.svg", url: "homes-3.svg",
scaledSize: new window.google.maps.Size(50, 50) scaledSize: new window.google.maps.Size(50, 50),
}} }}
visible={true}
/> />
) : (
<Marker
key={house.LISTING_ID}
position={{
lat: house.coordinates[1],
lng: house.coordinates[0],
}}
onClick={() => {
setSelected(house);
}}
icon={{
url: "homes-3.svg",
scaledSize: new window.google.maps.Size(50, 50),
}}
visible={false}
/>
)
)}
{selected ? (
))}
{selectedProperty && (
<InfoWindow <InfoWindow
position={{ position={{
lat: selectedProperty.coordinates[1], lat: selected.coordinates[1],
lng: selectedProperty.coordinates[0] lng: selected.coordinates[0],
}} }}
onCloseClick={() => { onCloseClick={() => {
setSelectedProperty(null); setSelected(null);
}} }}
> >
<div> <div>
<h2>{selectedProperty.ADDRESS}</h2> <h2>{selected.ADDRESS}</h2>
<p> {selectedProperty.DESC}</p> <p> {selected.DESC}</p>
<div> <div>
<div class="row"> <div class="row">
<div className="col-6"> <div className="col-6">
<i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span> <i class="fas fa-bed fa-3x"></i>{" "}
<i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span> <span class="popup_nums"> {selected.BEDS} </span>
<i class="fas fa-bath fa-3x"></i>{" "}
<span class="popup_nums"> {selected.BATHS}</span>
</div> </div>
<div className="col-6 booking_button"> <div className="col-6 booking_button">
<button>Show Listing</button> <button>Show Listing</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</InfoWindow> </InfoWindow>
) : null}
)}
</GoogleMap> </GoogleMap>
</div>
</div>
); );
} }
const MapWrapped = withScriptjs(withGoogleMap(Map)) function Locate({ panTo }) {
class ListingsPage extends Component {
render() {
return ( return (
<button
<div className="listings"> data-toggle="tooltip"
data-placement="right"
<section class="colored-section2" id="cta"> title="Go to my current location"
class="buttonImg"
onClick={() => {
{/* navigator.geolocation.getCurrentPosition(
(position) => {
panTo({
lat: position.coords.latitude,
<div class="row"> lng: position.coords.longitude,
});
},
<div class="col-12"> () => null
);
<div class="dropdown"> }}
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> >
Dropdown button <img src={compassImg} class="compass" alt="my location" />
</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">
<section className="colored-section" id="features">
<div className="container-fluid">
<h2> Map </h2>
</div>
</section>
<div style={{ width: "100vm", height: "800px" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
</div>
</div>
</section>
</div>
); );
} }
}
export default ListingsPage; function Search({ panTo }) {
const {
ready,
value,
suggestions: { status, data },
setValue,
clearSuggestions,
} = usePlacesAutocomplete({
requestOptions: {
location: { lat: () => 43.6532, lng: () => -79.3832 },
radius: 100 * 1000,
},
});
// https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest
const handleInput = (e) => {
setValue(e.target.value);
};
const handleSelect = async (address) => {
setValue(address, false);
clearSuggestions();
try {
const results = await getGeocode({ address });
const { lat, lng } = await getLatLng(results[0]);
panTo({ lat, lng });
} catch (error) {
console.log("😱 Error: ", error);
}
};
return (
<div className="search">
<Combobox onSelect={handleSelect}>
<ComboboxInput
value={value}
onChange={handleInput}
disabled={!ready}
placeholder="Search your location"
/>
<ComboboxPopover>
<ComboboxList>
{status === "OK" &&
data.map(({ id, description }) => (
<ComboboxOption key={id} value={description} />
))}
</ComboboxList>
</ComboboxPopover>
</Combobox>
</div>
);
}

View file

@ -0,0 +1,78 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="25px" y="25px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<circle style="fill:#2C5871;" cx="256" cy="256" r="256"/>
<path style="fill:#1C4754;" d="M256,0c-7.933,0-15.777,0.38-23.526,1.086C362.829,12.966,464.948,122.548,464.948,256
S362.829,499.034,232.474,510.914C240.223,511.62,248.067,512,256,512c141.385,0,256-114.615,256-256S397.385,0,256,0z"/>
<circle style="fill:#E6F1FF;" cx="256" cy="256" r="221.06"/>
<path style="fill:#BFCFD6;" d="M256,34.939c-7.948,0-15.795,0.429-23.526,1.247C343.5,47.932,430.009,141.859,430.009,256
S343.5,464.068,232.474,475.814c7.731,0.818,15.578,1.247,23.526,1.247c122.089,0,221.061-98.972,221.061-221.061
S378.089,34.939,256,34.939z"/>
<path style="fill:#66C1FF;" d="M159.806,163.214L233.29,278.71l115.5,73.487c2.226,1.417,4.823-1.18,3.406-3.406l-73.487-115.5
l-115.496-73.484C160.986,158.389,158.389,160.986,159.806,163.214z"/>
<path style="fill:#FF4C4C;" d="M159.807,163.215L233.29,278.71l45.419-45.419l-115.494-73.483
C160.988,158.39,158.39,160.988,159.807,163.215z"/>
<circle style="fill:#555A66;" cx="256" cy="256" r="33.03"/>
<g>
<path style="fill:#2C5871;" d="M377.166,142.576c-1.981,0-3.963-0.756-5.474-2.268c-3.024-3.023-3.024-7.925,0-10.949
l12.408-12.408c3.023-3.023,7.925-3.023,10.949,0c3.024,3.023,3.024,7.925,0,10.949l-12.408,12.408
C381.129,141.82,379.148,142.576,377.166,142.576z"/>
<path style="fill:#2C5871;" d="M122.425,397.317c-1.981,0-3.963-0.756-5.474-2.268c-3.024-3.023-3.024-7.925,0-10.949
l12.408-12.408c3.023-3.023,7.925-3.023,10.949,0s3.024,7.925,0,10.949L127.9,395.049
C126.388,396.56,124.407,397.317,122.425,397.317z"/>
<path style="fill:#2C5871;" d="M389.575,397.317c-1.981,0-3.963-0.756-5.474-2.268l-12.408-12.408
c-3.024-3.023-3.024-7.925,0-10.949c3.023-3.023,7.925-3.023,10.949,0L395.05,384.1c3.024,3.023,3.024,7.925,0,10.949
C393.537,396.56,391.556,397.317,389.575,397.317z"/>
<path style="fill:#2C5871;" d="M134.834,142.576c-1.981,0-3.963-0.756-5.474-2.268L116.951,127.9
c-3.024-3.023-3.024-7.925,0-10.949c3.023-3.023,7.925-3.023,10.949,0l12.408,12.408c3.024,3.023,3.024,7.925,0,10.949
C138.796,141.82,136.815,142.576,134.834,142.576z"/>
<path style="fill:#2C5871;" d="M114.668,275.577c-0.709,2.126-3.331,3.118-6.023,3.118c-2.622,0-5.386-0.992-5.882-3.118
l-4.535-19.133l-4.606,19.133c-0.496,2.126-3.26,3.118-5.882,3.118c-2.693,0-5.386-0.992-6.024-3.118l-14.031-44.573
c-0.071-0.213-0.142-0.567-0.142-0.85c0-2.055,3.26-3.685,5.882-3.685c1.417,0,2.693,0.496,3.047,1.842l11.197,38.408l6.023-24.66
c0.425-1.772,2.48-2.551,4.535-2.551c1.984,0,4.039,0.78,4.465,2.551l6.023,24.66l11.197-38.408
c0.354-1.346,1.63-1.842,3.047-1.842c2.622,0,5.882,1.63,5.882,3.685c0,0.283-0.071,0.638-0.142,0.85L114.668,275.577z"/>
<path style="fill:#2C5871;" d="M420.998,248.72h10.771c1.842,0,2.905,1.772,2.905,3.685c0,1.63-0.921,3.543-2.905,3.543h-10.771
v14.243h20.054c1.842,0,2.905,1.913,2.905,4.11c0,1.913-0.921,3.968-2.905,3.968h-25.228c-2.055,0-4.039-0.992-4.039-2.905v-45.991
c0-1.913,1.984-2.905,4.039-2.905h25.228c1.984,0,2.905,2.055,2.905,3.968c0,2.197-1.063,4.11-2.905,4.11h-20.054V248.72z"/>
<path style="fill:#2C5871;" d="M263.262,108.382l-15.235-28.487v28.487c0,1.913-2.339,2.905-4.606,2.905
c-2.338,0-4.606-0.992-4.606-2.905V62.391c0-1.984,2.268-2.905,4.606-2.905c3.331,0,4.677,0.709,6.874,4.89l13.676,26.432V62.321
c0-1.984,2.268-2.835,4.606-2.835c2.268,0,4.606,0.85,4.606,2.835v46.061c0,1.913-2.339,2.905-4.606,2.905
C266.381,111.287,264.467,110.579,263.262,108.382z"/>
<path style="fill:#2C5871;" d="M263.228,431.434c0-10.63-22.747-7.37-22.747-24.164c0-10.559,9.071-14.173,17.22-14.173
c4.181,0,13.464,0.992,13.464,5.669c0,1.63-1.134,4.89-3.685,4.89c-2.197,0-3.827-2.693-9.779-2.693
c-5.102,0-8.008,2.055-8.008,5.457c0,8.787,22.747,5.74,22.747,24.093c0,10.134-7.087,15.378-16.866,15.378
c-9.283,0-16.369-4.677-16.369-8.787c0-1.984,1.843-4.961,4.039-4.961c2.905,0,4.819,5.457,12.047,5.457
C259.543,437.599,263.228,435.686,263.228,431.434z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -5,7 +5,9 @@
{ {
"LISTING_ID": 1, "LISTING_ID": 1,
"ADDRESS": "8720 Russell Road", "ADDRESS": "8720 Russell Road",
"PRICE": "$500000", "PRICE": 400000,
"BEDS":3,
"BATHS":3,
"IMAGES":[ "IMAGES":[
], ],
@ -26,7 +28,9 @@
"LISTING_ID": 2, "LISTING_ID": 2,
"ADDRESS": "1490 Youville Drive", "ADDRESS": "1490 Youville Drive",
"PRICE": "$500000", "PRICE": 100000,
"BEDS":1,
"BATHS":1,
"IMAGES":[ "IMAGES":[
], ],
@ -49,7 +53,9 @@
"LISTING_ID": 3, "LISTING_ID": 3,
"ADDRESS": "100 Charlie Rogers Place", "ADDRESS": "100 Charlie Rogers Place",
"PRICE": "$500000", "PRICE": 200000,
"BEDS":2,
"BATHS":3,
"IMAGES":[ "IMAGES":[
], ],
@ -72,7 +78,9 @@
"LISTING_ID": 4, "LISTING_ID": 4,
"ADDRESS": "2785 8th Line Road", "ADDRESS": "2785 8th Line Road",
"PRICE": "$500000", "PRICE": 300000,
"BEDS":3,
"BATHS":3,
"IMAGES":[ "IMAGES":[
], ],

View file

@ -1,789 +0,0 @@
{
"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]
}
}
]
}

View file

@ -1,6 +1,8 @@
#footer{ #footer{
text-align: center; text-align: center;
padding: 5% 7%; padding: 5% 7%;
background-color: white ;
} }
.social-icon{ .social-icon{