Fixed filter bar location

react_usse/src/App.css

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

react_usse/src/App.js

@@ -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}

react_usse/src/MapContainer.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect } from 'react';
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+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})
+        console.log(useMap())
-            let {name} = location; 
+        this.setState({ selectedLocation : location , showDetails : true, clickedMarkerPos : location.position, clickedMarker : true})
-            let { lng, lat } = location.position;
+        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>
         )
     }