translation
This commit is contained in:
kene17
commit
de604dd068
18 changed files with 765 additions and 1024 deletions
|
|
@ -3,7 +3,6 @@ import Footer from "./shared-components/footer-component/Footer";
|
|||
import Navbar from "./shared-components/navbar-component/Navbar";
|
||||
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
||||
import i18next from "i18next";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Cookies from "js-cookie";
|
||||
import HomePage from "./homePage/Homepage";
|
||||
import ListingsPage from "./listings-page/ListingsPage";
|
||||
|
|
@ -31,7 +30,6 @@ function App() {
|
|||
const currentLanguage = langauges.find(
|
||||
(lang) => lang.code === currentLanguageCode
|
||||
);
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
document.body.dir = currentLanguage.dir || "ltr";
|
||||
|
|
@ -69,9 +67,6 @@ function App() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
{t("Welcome_to_React")}
|
||||
</div>
|
||||
</div>
|
||||
<BrowserRouter>
|
||||
<Navbar></Navbar>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ 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";
|
||||
|
||||
|
||||
|
||||
|
|
@ -19,6 +20,7 @@ class Homepage extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { nextIcon, prevIcon } = this.state;
|
||||
return (
|
||||
<div className="homePage">
|
||||
|
|
@ -26,8 +28,8 @@ class Homepage extends Component {
|
|||
<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>
|
||||
<h1 className="big-heading">{t("Slogan_1")}</h1>
|
||||
<h1 className="big-heading">{t("Slogan_2")}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,9 +41,9 @@ class Homepage extends Component {
|
|||
<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" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<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">Click for Details</Button>
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -49,9 +51,9 @@ class Homepage extends Component {
|
|||
<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" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<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">Click for Details</Button>
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -59,9 +61,9 @@ class Homepage extends Component {
|
|||
<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" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<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">Click for Details</Button>
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -69,9 +71,9 @@ class Homepage extends Component {
|
|||
<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" }}>1 Bedroom, 2 Bathroom</h2>
|
||||
<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">Click for Details</Button>
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -80,13 +82,13 @@ class Homepage extends Component {
|
|||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>Description </h2>
|
||||
<p style={{ fontSize: "110%" }}> Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses. <br></br>
|
||||
The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the<br></br>
|
||||
website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page<br></br>
|
||||
is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our<br></br>
|
||||
members who want to benefit from our deals. Above are some houses which can interest you. Feel free to<br></br>
|
||||
click the buttons above to explore the houses you want. </p>
|
||||
<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>
|
||||
|
|
@ -98,4 +100,4 @@ class Homepage extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Homepage;
|
||||
export default withTranslation()(Homepage);
|
||||
|
|
|
|||
BIN
src/images/bg1.jpg
Normal file
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
BIN
src/images/fbg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/images/fbg2.png
Normal file
BIN
src/images/fbg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/images/fbg3.png
Normal file
BIN
src/images/fbg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
|
|
@ -1,3 +1,9 @@
|
|||
body{
|
||||
/*background-image: url("../images/bg1.jpg");
|
||||
background-position: 0px 60px;
|
||||
*/
|
||||
}
|
||||
|
||||
.booking_button{
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -6,4 +12,33 @@
|
|||
font-size: 40px;
|
||||
font-weight:bolder;
|
||||
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%
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,198 +2,354 @@
|
|||
import React, { useState, useEffect, Component } from "react";
|
||||
import {
|
||||
GoogleMap,
|
||||
withScriptjs,
|
||||
withGoogleMap,
|
||||
useLoadScript,
|
||||
Marker,
|
||||
InfoWindow
|
||||
} from "react-google-maps";
|
||||
import * as listingData from "./data/property-data.json";
|
||||
InfoWindow,
|
||||
} from "@react-google-maps/api";
|
||||
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 * as listingData from "./data/property-data.json";
|
||||
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 (
|
||||
<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)
|
||||
}}
|
||||
|
||||
<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
|
||||
/>
|
||||
|
||||
|
||||
))}
|
||||
|
||||
|
||||
{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">
|
||||
|
||||
|
||||
{/*
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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
|
||||
id="map"
|
||||
mapContainerStyle={mapContainerStyle}
|
||||
zoom={10}
|
||||
center={center}
|
||||
options={options}
|
||||
onLoad={onMapLoad}
|
||||
>
|
||||
{listingData.Properties.map((house) =>
|
||||
(budget >= house.PRICE || !budget) &&
|
||||
(bed == house.BEDS || !bed) &&
|
||||
(bath == house.BATHS || !bath) ? (
|
||||
<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={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 ? (
|
||||
<InfoWindow
|
||||
position={{
|
||||
lat: selected.coordinates[1],
|
||||
lng: selected.coordinates[0],
|
||||
}}
|
||||
onCloseClick={() => {
|
||||
setSelected(null);
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2>{selected.ADDRESS}</h2>
|
||||
<p> {selected.DESC}</p>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div className="col-6">
|
||||
<i class="fas fa-bed fa-3x"></i>{" "}
|
||||
<span class="popup_nums"> {selected.BEDS} </span>
|
||||
<i class="fas fa-bath fa-3x"></i>{" "}
|
||||
<span class="popup_nums"> {selected.BATHS}</span>
|
||||
</div>
|
||||
|
||||
<div className="col-6 booking_button">
|
||||
<button>Show Listing</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</InfoWindow>
|
||||
) : null}
|
||||
</GoogleMap>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ListingsPage;
|
||||
function Locate({ panTo }) {
|
||||
return (
|
||||
<button
|
||||
data-toggle="tooltip"
|
||||
data-placement="right"
|
||||
title="Go to my current location"
|
||||
class="buttonImg"
|
||||
onClick={() => {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
panTo({
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude,
|
||||
});
|
||||
},
|
||||
() => null
|
||||
);
|
||||
}}
|
||||
>
|
||||
<img src={compassImg} class="compass" alt="my location" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
78
src/listings-page/compass.svg
Normal file
78
src/listings-page/compass.svg
Normal 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 |
|
|
@ -5,7 +5,9 @@
|
|||
{
|
||||
"LISTING_ID": 1,
|
||||
"ADDRESS": "8720 Russell Road",
|
||||
"PRICE": "$500000",
|
||||
"PRICE": 400000,
|
||||
"BEDS":3,
|
||||
"BATHS":3,
|
||||
"IMAGES":[
|
||||
|
||||
],
|
||||
|
|
@ -26,7 +28,9 @@
|
|||
|
||||
"LISTING_ID": 2,
|
||||
"ADDRESS": "1490 Youville Drive",
|
||||
"PRICE": "$500000",
|
||||
"PRICE": 100000,
|
||||
"BEDS":1,
|
||||
"BATHS":1,
|
||||
"IMAGES":[
|
||||
|
||||
],
|
||||
|
|
@ -49,7 +53,9 @@
|
|||
|
||||
"LISTING_ID": 3,
|
||||
"ADDRESS": "100 Charlie Rogers Place",
|
||||
"PRICE": "$500000",
|
||||
"PRICE": 200000,
|
||||
"BEDS":2,
|
||||
"BATHS":3,
|
||||
"IMAGES":[
|
||||
|
||||
],
|
||||
|
|
@ -72,7 +78,9 @@
|
|||
|
||||
"LISTING_ID": 4,
|
||||
"ADDRESS": "2785 8th Line Road",
|
||||
"PRICE": "$500000",
|
||||
"PRICE": 300000,
|
||||
"BEDS":3,
|
||||
"BATHS":3,
|
||||
"IMAGES":[
|
||||
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.heading-1{
|
||||
padding-left: 38%;
|
||||
padding-left: 36%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20%;
|
||||
font-size: 40px;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
FormWithConstraints
|
||||
} from 'react-form-with-constraints';
|
||||
import Alert from 'react-bootstrap/Alert';
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
|
||||
|
||||
|
|
@ -28,25 +29,26 @@ class ContactUs extends Component {
|
|||
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<div className="contact-us">
|
||||
<Alert variant="danger" style={{ display: this.state.alertBad ? "block" : "none" }} onClose={() => this.setState({ alertBad: false })} dismissible>
|
||||
<Alert.Heading>Message could not send.</Alert.Heading>
|
||||
<Alert.Heading>{t("Danger1")}</Alert.Heading>
|
||||
<p>
|
||||
There are some errors in your contact form.
|
||||
</p>
|
||||
{t("Danger2")}
|
||||
</p>
|
||||
</Alert>
|
||||
<Alert variant="success" style={{ display: this.state.alertSucess ? "block" : "none" }} onClose={() => this.setState({ alertSucess: false })} dismissible>
|
||||
<Alert.Heading>The message is successfully sent.</Alert.Heading>
|
||||
<Alert.Heading>{t("Success1")}</Alert.Heading>
|
||||
<p>
|
||||
You contact form will be delivered to our support team.
|
||||
</p>
|
||||
{t("Success2")}
|
||||
</p>
|
||||
</Alert>
|
||||
<div className="container">
|
||||
<section class="colored-section" id="contact">
|
||||
<div className="container-fluid">
|
||||
<div className="contactIntro">
|
||||
<h2 className="heading-1">Contact Us</h2>
|
||||
<h2 className="heading-1">{t("Contact-Title")}</h2>
|
||||
<FormWithConstraints ref={form => this.form = form}
|
||||
id="contact-form"
|
||||
onSubmit={this.handleSubmit.bind(this)}
|
||||
|
|
@ -57,30 +59,34 @@ class ContactUs extends Component {
|
|||
<div className="row">
|
||||
<div className="col-6">
|
||||
<select className="form-group" name="agent" id="dropdown" required onChange={this.onAgentChange.bind(this)} value={this.state.agent}>
|
||||
<option value="">Select an Agent</option>
|
||||
<option value="">{t("Contact-Agent")}</option>
|
||||
<option value="Michael">Michael</option>
|
||||
<option value="Jin">Jin </option>
|
||||
<option value="Anita">Anita</option>
|
||||
<option value="Alex">Alex</option>
|
||||
<option value="Xuan">Xuan</option>
|
||||
<option value="Walter">Walter</option>
|
||||
<option value="No preference">No preference</option>
|
||||
<option value="No preference">{t("No-Pref")}</option>
|
||||
</select>
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error1")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<select className="form-group" name="house" id="dropdown" required onChange={this.onHouseChange.bind(this)} value={this.state.house}>
|
||||
<option value="">Select a House</option>
|
||||
<option value="">{t("Contact-House")}</option>
|
||||
<option value="100 Charlie Rogers">100 Charlie Rogers</option>
|
||||
<option value="1490 Youville Drive">1490 Youville Drive </option>
|
||||
<option value="8720 Russell Road">8720 Russell Road</option>
|
||||
<option value="2785 8th Line Road">2785 8th Line Road</option>
|
||||
<option value="No preference">No preference</option>
|
||||
<option value="No preference">{t("No-Pref")}</option>
|
||||
</select>
|
||||
<FieldFeedbacks for="house">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error1")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,24 +96,28 @@ class ContactUs extends Component {
|
|||
<input name="firstname"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="First Name"
|
||||
placeholder={t("Contact-First")}
|
||||
value={this.state.firstname}
|
||||
required onChange={this.onFirstNameChange.bind(this)}
|
||||
/>
|
||||
<FieldFeedbacks for="firstname">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error2")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<input name="lastname"
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Last Name"
|
||||
placeholder={t("Contact-Last")}
|
||||
value={this.state.lastname}
|
||||
required onChange={this.onLastNameChange.bind(this)}
|
||||
/>
|
||||
<FieldFeedbacks for="lastname">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error2")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,31 +125,34 @@ class ContactUs extends Component {
|
|||
<input name="email"
|
||||
type="email"
|
||||
className="form-control"
|
||||
placeholder="Email Address"
|
||||
placeholder={t("Contact-Mail")}
|
||||
aria-describedby="emailHelp"
|
||||
value={this.state.email}
|
||||
required onChange={this.onEmailChange.bind(this)}
|
||||
/>
|
||||
<FieldFeedbacks for="email">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedback when={value => value.length === 0}>{t("Contact-Error2")}</FieldFeedback>
|
||||
<FieldFeedback when={value => !/\S+@\S+/.test(value)}>{t("Contact-Error3")}</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea name="message"
|
||||
className="form-control"
|
||||
placeholder="Message"
|
||||
placeholder={t("Contact-Message")}
|
||||
rows="5"
|
||||
value={this.state.message}
|
||||
required onChange={this.onMessageChange.bind(this)}
|
||||
/>
|
||||
<FieldFeedbacks for="message">
|
||||
<FieldFeedback when="*" />
|
||||
<FieldFeedbacks for="agent">
|
||||
<FieldFeedback when="*">
|
||||
{t("Contact-Error1")}
|
||||
</FieldFeedback>
|
||||
</FieldFeedbacks>
|
||||
</div>
|
||||
<div className="buttonhelper">
|
||||
<button type="submit" className="button-1">
|
||||
Submit
|
||||
</button>
|
||||
{t("Contact-Submit")}
|
||||
</button>
|
||||
</div>
|
||||
</FormWithConstraints>
|
||||
</div>
|
||||
|
|
@ -203,12 +216,12 @@ class ContactUs extends Component {
|
|||
|
||||
}
|
||||
|
||||
alertSuccess(){
|
||||
alertSuccess() {
|
||||
this.setState({ alertBad: false, alertSucess: true })
|
||||
}
|
||||
|
||||
alertBad(){
|
||||
this.setState({ alertSucess: false, alertBad: true })
|
||||
alertBad() {
|
||||
this.setState({ alertSucess: false, alertBad: true })
|
||||
}
|
||||
|
||||
resetForm() {
|
||||
|
|
@ -217,4 +230,4 @@ class ContactUs extends Component {
|
|||
}
|
||||
|
||||
|
||||
export default ContactUs;
|
||||
export default withTranslation()(ContactUs);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
|
||||
#footer{
|
||||
text-align: center;
|
||||
padding: 5% 7%;
|
||||
background-color: white ;
|
||||
}
|
||||
|
||||
.social-icon{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue