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 { 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={13} style={{ height: '100vh', 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 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>
</div>
{this.props.toggleMenu && (