diff --git a/react_usse/src/App.css b/react_usse/src/App.css
index 8f70bbd1..8f7c74c7 100644
--- a/react_usse/src/App.css
+++ b/react_usse/src/App.css
@@ -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{
diff --git a/react_usse/src/App.js b/react_usse/src/App.js
index 4fd71422..df8e4d93 100644
--- a/react_usse/src/App.js
+++ b/react_usse/src/App.js
@@ -70,7 +70,7 @@ class App extends Component {
{
- 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(
-
-
-
- {markers && markers.map((marker) => (
-
-
-
- Prijs: {marker.price} Per m2: {marker.price_m2}
- NFI: {Math.floor(marker.nfi_location.distance / 1000)} km, {Math.floor(marker.nfi_location.duration / 60)} minuten
- Korhoen: {Math.floor(marker.korhoen_location.distance / 1000)} km, {Math.floor(marker.korhoen_location.duration / 60)} minuten
- Bakkersdijk: {Math.floor(marker.bakkersdijk_location.distance / 1000)} km, {Math.floor(marker.bakkersdijk_location.duration / 60)} minuten
- Hoogstraat: {Math.floor(marker.hoogstraat_location.distance / 1000)} km, {Math.floor(marker.hoogstraat_location.duration / 60)} minuten
- Harde: {Math.floor(marker.harde_location.distance / 1000)} km, {Math.floor(marker.harde_location.duration / 60)} minuten
- Location: {count + "=" + marker.address + " " + Math.floor(marker.position[0]) + ":" + Math.floor(marker.position[1]) + "City:" + marker.city}
- Klik mij voor het huis
-
- {/* {console.log(count + "=" + marker.position + "price:" + marker.city)}
- {count = count + 1} */}
-
- ))}
-
-
-
{this.props.toggleMenu && (
-
+
{this.props.locations.map((location) => (
@@ -115,6 +87,28 @@ class LeafletMap extends Component {
)}
)}
+
+
+
+ {markers && markers.map((marker) => (
+
+
+
+ Prijs: {marker.price} Per m2: {marker.price_m2}
+ NFI: {Math.floor(marker.nfi_location.distance / 1000)} km, {Math.floor(marker.nfi_location.duration / 60)} minuten
+ Korhoen: {Math.floor(marker.korhoen_location.distance / 1000)} km, {Math.floor(marker.korhoen_location.duration / 60)} minuten
+ Bakkersdijk: {Math.floor(marker.bakkersdijk_location.distance / 1000)} km, {Math.floor(marker.bakkersdijk_location.duration / 60)} minuten
+ Hoogstraat: {Math.floor(marker.hoogstraat_location.distance / 1000)} km, {Math.floor(marker.hoogstraat_location.duration / 60)} minuten
+ Harde: {Math.floor(marker.harde_location.distance / 1000)} km, {Math.floor(marker.harde_location.duration / 60)} minuten
+ Klik mij voor het huis
+
+
+ ))}
+
+
)
}