search and filters
This commit is contained in:
ruchi
parent
66783412f0
commit
147dfd376d
11 changed files with 742 additions and 243 deletions
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%
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,268 +1,354 @@
|
|||
import React, { useState, useEffect, Component } from "react";
|
||||
import {
|
||||
GoogleMap,
|
||||
withScriptjs,
|
||||
withGoogleMap,
|
||||
GoogleMap,
|
||||
useLoadScript,
|
||||
Marker,
|
||||
InfoWindow,
|
||||
useLoadScript
|
||||
} from "react-google-maps";
|
||||
} 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";
|
||||
|
||||
import * as listingData from "./data/property-data.json";
|
||||
import mapStyles from "./mapStyles";
|
||||
import "./ListingsPage.css";
|
||||
import compassImg from "./compass.svg";
|
||||
|
||||
|
||||
const libraries = ["places"];
|
||||
|
||||
function Map(){
|
||||
const mapContainerStyle = {
|
||||
height: "700px",
|
||||
width: "100vm",
|
||||
};
|
||||
|
||||
const [selectedProperty, setSelectedProperty] = useState(null);
|
||||
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}}
|
||||
>
|
||||
<div className="main_borders">
|
||||
|
||||
{
|
||||
<div class="filters">
|
||||
<Search class="search" panTo={panTo} />
|
||||
<Locate class="search" panTo={panTo} />
|
||||
|
||||
listingData.Properties.map(house => {
|
||||
<Select
|
||||
class="search"
|
||||
placeholder="Select Budget"
|
||||
value={selectedBudget} // set selected value
|
||||
options={price_filter} // set list of the data
|
||||
onChange={handleBudgetChange} // assign onChange function
|
||||
/>
|
||||
|
||||
console.log(house.PRICE)
|
||||
house.PRICE > 100 ?
|
||||
|
||||
<Marker
|
||||
key={house.LISTING_ID}
|
||||
position={{
|
||||
lat: house.coordinates[1],
|
||||
lng: house.coordinates[0]
|
||||
|
||||
}}
|
||||
<Select
|
||||
class="search"
|
||||
placeholder="# Beds"
|
||||
value={selectedBeds} // set selected value
|
||||
options={bed_filter} // set list of the data
|
||||
onChange={handleBedChange} // assign onChange function
|
||||
/>
|
||||
|
||||
onClick={() => {
|
||||
setSelectedProperty(house)
|
||||
}}
|
||||
|
||||
icon={{
|
||||
url:"homes-3.svg",
|
||||
scaledSize: new window.google.maps.Size(50,50)
|
||||
}}
|
||||
|
||||
|
||||
|
||||
/>
|
||||
:
|
||||
|
||||
console.log(house.PRICE)
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
<Select
|
||||
class="search"
|
||||
placeholder="# Baths"
|
||||
value={selectedBaths} // set selected value
|
||||
options={bath_filter} // set list of the data
|
||||
onChange={handleBathChange} // assign onChange function
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{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 className="row">
|
||||
|
||||
<div className="col-4">
|
||||
|
||||
|
||||
<div class="input-group rounded">
|
||||
<input type="search" class="form-control rounded" placeholder="Search" aria-label="Search"
|
||||
aria-describedby="search-addon" />
|
||||
<span class="input-group-text border-0" id="search-addon">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col-4">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-4">
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Beds
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||||
<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 className="col-4">
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Beds
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||||
<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">
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<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 >
|
||||
<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}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<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 |
|
|
@ -6,6 +6,8 @@
|
|||
"LISTING_ID": 1,
|
||||
"ADDRESS": "8720 Russell Road",
|
||||
"PRICE": 400000,
|
||||
"BEDS":3,
|
||||
"BATHS":3,
|
||||
"IMAGES":[
|
||||
|
||||
],
|
||||
|
|
@ -25,6 +27,8 @@
|
|||
"LISTING_ID": 2,
|
||||
"ADDRESS": "1490 Youville Drive",
|
||||
"PRICE": 100000,
|
||||
"BEDS":1,
|
||||
"BATHS":1,
|
||||
"IMAGES":[
|
||||
|
||||
],
|
||||
|
|
@ -45,6 +49,8 @@
|
|||
"LISTING_ID": 3,
|
||||
"ADDRESS": "100 Charlie Rogers Place",
|
||||
"PRICE": 200000,
|
||||
"BEDS":2,
|
||||
"BATHS":3,
|
||||
"IMAGES":[
|
||||
|
||||
],
|
||||
|
|
@ -66,6 +72,8 @@
|
|||
"LISTING_ID": 4,
|
||||
"ADDRESS": "2785 8th Line Road",
|
||||
"PRICE": 300000,
|
||||
"BEDS":3,
|
||||
"BATHS":3,
|
||||
"IMAGES":[
|
||||
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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