EljakimHerrewijnen/usse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed filter bar location

Browse Source
This commit is contained in:
Eljakim Herrewijnen 2024-01-01 21:41:29 +01:00
parent d7270057f6
commit f0f47dc10a
3 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
react_usse/src/App.css
View File

@ -44,9 +44,13 @@
position: absolute;
left: 10px;
width: 300px;
height: calc(100%-10vmin);
top: calc(10px+10vmin);
top: 0;
/*height: calc(100%-10vmin);
top: calc(10px+10vmin);*/
height: 100%;
top: 0;
border-bottom: 1px solid #d5d8df;
z-index: 10;
}
.priceFilterBlock{

2
react_usse/src/App.js
View File

@ -70,7 +70,7 @@ class App extends Component {
<div className="App">
<header className="App-header">
<h1>Vind je droomhuis</h1>
<button className="toggle-menu" onClick={this.onToggleMenu}><FaBars/></button>
<button name="toggle-menu" className="toggle-menu" onClick={this.onToggleMenu}><FaBars/></button>
</header>
<LeafletMap toggleMenu={this.state.toggleMenu}
locations={showingLocations}

66
react_usse/src/MapContainer.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import React, { Component, useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import LocationDetails from './LocationDetails';
import L from 'leaflet';
@ -25,7 +25,7 @@ class LeafletMap extends Component {
}
mapReady = (props, map) => {
this.setState({map})
this.setState({map: map})
}
onClickMarker = (props, marker, e) => {
@ -35,10 +35,10 @@ class LeafletMap extends Component {
this.setState({ activeMarker: {}, showingInfoWindow: false, activeMarkerProps: {} });
onListItemClick = (location) => {
this.setState({ selectedLocation : location , showDetails : true})
let {name} = location;
let { lng, lat } = location.position;
}
console.log(useMap())
this.setState({ selectedLocation : location , showDetails : true, clickedMarkerPos : location.position, clickedMarker : true})
console.log( this.map.getCenter())
}
render() {
@ -46,35 +46,8 @@ class LeafletMap extends Component {
let { maxPrice} = this.props
let { activeMarker, activeMarkerProps} = this.state;
const position = [52.079, 5.09]
let count = 0
return(
<div>
<div style={{ height: 'calc(100%-10vmin', width: '100%'}}>
<MapContainer center={position} zoom={12} style={{ height: '100vh', width: '100%' }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
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]}}>
<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/>
Korhoen: {Math.floor(marker.korhoen_location.distance / 1000)} km, {Math.floor(marker.korhoen_location.duration / 60)} minuten <br/>
Bakkersdijk: {Math.floor(marker.bakkersdijk_location.distance / 1000)} km, {Math.floor(marker.bakkersdijk_location.duration / 60)} minuten <br/>
Hoogstraat: {Math.floor(marker.hoogstraat_location.distance / 1000)} km, {Math.floor(marker.hoogstraat_location.duration / 60)} minuten <br/>
Harde: {Math.floor(marker.harde_location.distance / 1000)} km, {Math.floor(marker.harde_location.duration / 60)} minuten <br/>
Location: {count + "=" + marker.address + " " + Math.floor(marker.position[0]) + ":" + Math.floor(marker.position[1]) + "City:" + marker.city} <br/>
<a href={"https://www.funda.nl/" + marker.house_id }>Klik mij voor het huis</a>
</Popup>
{/* {console.log(count + "=" + marker.position + "price:" + marker.city)}
{count = count + 1} */}
</Marker>
))}
</MapContainer>
</div>
{this.props.toggleMenu && (
<div className="list-locations">
<input
@ -95,8 +68,7 @@ class LeafletMap extends Component {
this.props.onUpdatePrice(e.target.value)
}}/>
<p className='priceFilterValue'>{maxPrice}</p>
</div>
</div>
<div className="location-list container">
<ol className="location-list">
{this.props.locations.map((location) => (
@ -115,6 +87,28 @@ class LeafletMap extends Component {
)}
</div>
)}
<div style={{ height: 'calc(100%-10vmin', width: '100%'}}>
<MapContainer center={position} zoom={12} style={{ height: '100vh', width: '100%', "z-index": 0 }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
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]}}>
<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/>
Korhoen: {Math.floor(marker.korhoen_location.distance / 1000)} km, {Math.floor(marker.korhoen_location.duration / 60)} minuten <br/>
Bakkersdijk: {Math.floor(marker.bakkersdijk_location.distance / 1000)} km, {Math.floor(marker.bakkersdijk_location.duration / 60)} minuten <br/>
Hoogstraat: {Math.floor(marker.hoogstraat_location.distance / 1000)} km, {Math.floor(marker.hoogstraat_location.duration / 60)} minuten <br/>
Harde: {Math.floor(marker.harde_location.distance / 1000)} km, {Math.floor(marker.harde_location.duration / 60)} minuten <br/>
<a href={"https://www.funda.nl/" + marker.house_id }>Klik mij voor het huis</a>
</Popup>
</Marker>
))}
</MapContainer>
</div>
</div>
)
}