Added colored markers and filters for distances and prices

This commit is contained in:
Eljakim Herrewijnen 2024-04-01 15:17:38 +02:00
parent f930ebc9ea
commit 26ddbc6c6b
3 changed files with 160 additions and 36 deletions

View File

@ -57,10 +57,6 @@
margin: 5%;
}
.priceFilterValue{
}
/*Search Input*/
input.search-locations {
position: absolute;

View File

@ -26,46 +26,69 @@ class App extends Component {
}
updatePrice = (maxPrice) => {
this.setState({ price: maxPrice.trim()})
this.setState({ price: parseInt(maxPrice.trim())})
}
updateAfstand = (minuten, naar) => {
if (naar === 'NFI') {
this.setState({ afstandNFI: parseInt(minuten.trim())})
}
if (naar === 'Hoogstraat') {
this.setState({ afstandHoogstraat: parseInt(minuten.trim())})
}
if (naar === 'Korhoen') {
this.setState({ afstandKorhoen: parseInt(minuten.trim())})
}
if (naar === 'Bakkersdijk') {
this.setState({ afstandBakkersdijk: parseInt(minuten.trim())})
}
}
render() {
const { allLocations, query, price } = this.state
const { allLocations, query, price, afstandNFI, afstandHoogstraat, afstandKorhoen, afstandBakkersdijk } = this.state
let showingLocations
if (query || price) {
if (query || price || afstandNFI || afstandHoogstraat || afstandKorhoen || afstandBakkersdijk) {
showingLocations = allLocations;
if(query){
const match = new RegExp(escapeRegExp(query), 'i')
showingLocations = allLocations.filter((location) =>
showingLocations = showingLocations.filter((location) =>
match.test(location.name)
)
}
if(price){
const maxPrice = parseInt(price) * 1000
showingLocations = []
allLocations.map( house =>
{if(parseInt(house['price'].split(" ")[1] * 1000) <= maxPrice){
// showingLocations[house['name']] = house
showingLocations += house
}}
showingLocations = showingLocations.filter((location) =>
location.price <= maxPrice
)
}
if(afstandNFI){
showingLocations = showingLocations.filter((location) =>
location.nfi_location.duration <= (afstandNFI * 60)
)
}
if(afstandHoogstraat){
showingLocations = showingLocations.filter((location) =>
location.hoogstraat_location.duration <= (afstandHoogstraat * 60)
)
}
if(afstandKorhoen){
showingLocations = showingLocations.filter((location) =>
location.korhoen_location.duration <= (afstandKorhoen * 60)
)
}
if(afstandBakkersdijk){
showingLocations = showingLocations.filter((location) =>
location.bakkersdijk_location.duration <= (afstandBakkersdijk * 60)
)
// console.log(showingLocations)
// const match = new RegExp(escapeRegExp(String((parseInt(price) * 1000))), 'i')
// showingLocations = allLocations.filter((location) =>
// match.test(location.price)
// )
}
} else {
showingLocations = allLocations
}
if (showingLocations.length === 0) {showingLocations = allLocations}
// showingLocations.sort(sortBy('name'));
const position = [51.505, -0.09]; // Latitude and Longitude of the map center
return (
<div className="App">
<header className="App-header">
@ -78,12 +101,17 @@ class App extends Component {
query={this.state.query}
onUpdateQuery={this.updateQuery}
onUpdatePrice={this.updatePrice}
onUpdateAfstand={this.updateAfstand}
onListItemClick={this.onListItemClick}
showDetails={this.state.showDetails}
selectedLocation={this.state.selectedLocation}
locationData={this.state.locationData}
maxPrice={this.state.price}
/>
afstandNFI={this.state.afstandNFI}
afstandHoogstraat={this.state.afstandHoogstraat}
afstandKorhoen={this.state.afstandKorhoen}
afstandBakkersdijk={this.state.afstandBakkersdijk}
/>
</div>
);
}

View File

@ -1,5 +1,5 @@
import React, { Component, useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
import { MapContainer, TileLayer, Marker, Popup, useMap, Icon } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import LocationDetails from './LocationDetails';
import L from 'leaflet';
@ -11,8 +11,46 @@ let DefaultIcon = L.icon({
shadowUrl: iconShadow
});
const myCustomColour = '#583470'
const markerHtmlStyles = `
background-color: ${myCustomColour};
width: 3rem;
height: 3rem;
display: block;
left: -1.5rem;
top: -1.5rem;
position: relative;
border-radius: 3rem 3rem 0;
transform: rotate(45deg);
border: 1px solid #FFFFFF`
const marker_custom_icon = L.divIcon({
className: "my-custom-pin",
iconAnchor: [0, 24],
labelAnchor: [-6, 0],
popupAnchor: [0, -36],
html: `<span style="${markerHtmlStyles}" />`
})
L.Marker.prototype.options.icon = DefaultIcon;
function valueToColor(value) {
// Clamp the value between 2000 and 5000
value = Math.max(2000, Math.min(5000, value));
// Map the value to the range 0 to 255
let green = Math.round(255 * (5000 - value) / 3000);
let red = Math.round(255 * (value - 2000) / 3000);
// Ensure the values are within the RGB range
green = Math.max(0, Math.min(255, green));
red = Math.max(0, Math.min(255, red));
// Return the RGB color
return `rgb(${red}, ${green}, 0)`;
}
class LeafletMap extends Component {
state = {
map: null,
@ -24,6 +62,29 @@ class LeafletMap extends Component {
locationData: {}
}
getCustomIcon = (price_m2) => {
const color = valueToColor(price_m2);
const markerHtmlStyles = `
background-color: ${color};
width: 3rem;
height: 3rem;
display: block;
left: -1.5rem;
top: -1.5rem;
position: relative;
border-radius: 3rem 3rem 0;
transform: rotate(45deg);
border: 1px solid #FFFFFF`
const marker_custom_icon = L.divIcon({
className: "my-custom-pin",
iconAnchor: [0, 24],
labelAnchor: [-6, 0],
popupAnchor: [0, -36],
html: `<span style="${markerHtmlStyles}" />`
})
return marker_custom_icon
}
mapReady = (props, map) => {
this.setState({map: map})
}
@ -44,13 +105,18 @@ class LeafletMap extends Component {
render() {
let { markers} = this.props
let { maxPrice} = this.props
let { afstandNFI} = this.props
let { activeMarker, activeMarkerProps} = this.state;
if (markers === undefined || markers.length === 0) {
console.log('No markers')
}
const position = [52.079, 5.09]
return(
<div>
{this.props.toggleMenu && (
<div className="list-locations">
<input
{/* <input
className="search-locations"
type="text"
placeholder="Filter Locations..."
@ -59,19 +125,53 @@ class LeafletMap extends Component {
this.props.onUpdateQuery(e.target.value)
this.setState({ showDetails: false })
}}
onClick={this.onNewSearch}/>
onClick={this.onNewSearch}/> */}
<div className='priceFilterBlock'>
<input type="range" min="100" max="400" onInput={(e) => {
<li>Maximale prijs</li>
<input type="range" min="100" max="700" onInput={(e) => {
this.props.onUpdatePrice(e.target.value)
}}/>
<p className='priceFilterValue'>{maxPrice}</p>
}} />
<output>{maxPrice}</output>
</div>
<div className='priceFilterBlock'>
<li>Afstand NFI(minuten)</li>
<input type="range" min="10" max="200" onInput={(e) => {
this.props.onUpdateAfstand(e.target.value, "NFI")
}} />
<output>{afstandNFI}</output>
</div>
<div className='priceFilterBlock'>
<li>Afstand Hoogstraat(minuten)</li>
<input type="range" min="10" max="200" onInput={(e) => {
this.props.onUpdateAfstand(e.target.value, "Hoogstraat")
}} />
<output>{afstandNFI}</output>
</div>
<div className='priceFilterBlock'>
<li>Afstand Korhoen(minuten)</li>
<input type="range" min="10" max="200" onInput={(e) => {
this.props.onUpdateAfstand(e.target.value, "Korhoen")
}} />
<output>{afstandNFI}</output>
</div>
<div className='priceFilterBlock'>
<li>Afstand Bakkersdijk(minuten)</li>
<input type="range" min="10" max="200" onInput={(e) => {
this.props.onUpdateAfstand(e.target.value, "Bakkersdijk")
}} />
<output>{afstandNFI}</output>
</div>
<div className="location-list container">
<ol className="location-list">
{this.props.locations.map((location) => (
{this.props.query && this.props.locations.length === 0 && (
<li className="location-list-item">
No results found
</li>
)}
{/* {this.props.locations.map((location) => (
<button
key={location.name} className="location-list-item"
location={location}
@ -79,7 +179,7 @@ class LeafletMap extends Component {
{location.name}
</button>
))}
))} */}
</ol>
</div>
{this.state.showDetails && (
@ -94,8 +194,8 @@ class LeafletMap extends Component {
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
{markers && markers.map((marker) => (
<Marker key={marker.house_id} position={{ lng : marker.position[0], lat : marker.position[1]}}>
// marker.price_m2
<Marker key={marker.house_id} position={{ lng : marker.position[0], lat : marker.position[1]}} icon={this.getCustomIcon(marker.price_m2)}>
<Popup>
Prijs: {marker.price} Per m2: {marker.price_m2} <br/>
NFI: {Math.floor(marker.nfi_location.distance / 1000)} km, {Math.floor(marker.nfi_location.duration / 60)} minuten <br/>