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

Update to react app

Browse Source
This commit is contained in:
Eljakim Herrewijnen 2023-12-28 16:14:37 +01:00
parent 3061069d18
commit f8415483c1
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
react_usse/src/MapContainer.js
View File

@ -46,31 +46,33 @@ class LeafletMap extends Component {
let { maxPrice} = this.props let { maxPrice} = this.props
let { activeMarker, activeMarkerProps} = this.state; let { activeMarker, activeMarkerProps} = this.state;
const position = [52.079, 5.09] const position = [52.079, 5.09]
let count = 0
return( return(
<div> <div>
<div style={{ height: 'calc(100%-10vmin', width: '100%'}}> <div style={{ height: 'calc(100%-10vmin', width: '100%'}}>
<MapContainer center={position} zoom={13} style={{ height: '100vh', width: '100%' }}> <MapContainer center={position} zoom={12} style={{ height: '100vh', width: '100%' }}>
<TileLayer <TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/> />
{markers && markers.map((marker) => ( {markers && markers.map((marker) => (
<Marker 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> <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>
))} ))}
<Marker position={position}>
</Marker>
</MapContainer> </MapContainer>
</div> </div>
{this.props.toggleMenu && ( {this.props.toggleMenu && (