From d7270057f6d3f46507f1143e5806fb95a27957b5 Mon Sep 17 00:00:00 2001 From: Eljakim Herrewijnen Date: Thu, 28 Dec 2023 22:09:56 +0100 Subject: [PATCH 1/2] updated docs --- Google_Maps_App_ReactsJS/Original_README.md | 43 +++++++++++++++++++++ Google_Maps_App_ReactsJS/Readme.md | 5 +++ documentation/source/app.rst | 9 ++++- 3 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 Google_Maps_App_ReactsJS/Original_README.md create mode 100644 Google_Maps_App_ReactsJS/Readme.md diff --git a/Google_Maps_App_ReactsJS/Original_README.md b/Google_Maps_App_ReactsJS/Original_README.md new file mode 100644 index 00000000..6f28f4e3 --- /dev/null +++ b/Google_Maps_App_ReactsJS/Original_README.md @@ -0,0 +1,43 @@ +### React Google Maps Final Project + +A single page React App, featuring google maps, a list of locations with on map markers, a filter locations options for finding locations easier, and a third API for rendering details about the map locations. + +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +### APIs used in this project +- Google Maps API +- Zomato API + +### Download and run the project +- Download the project file +- run $ npm install +- run $ npm start +The project runs at http://localhost:3000/ + +## Project Specifications + +### Interface Design +- All application components render on-screen in a responsive manner, and are usable across modern desktop, tablet, and phone browsers. + +### Application Functionality +- Includes a text input field or dropdown menu that filters the map markers and list items to locations matching the text input or selection. Filter function runs error-free. + +### List View +- A list-view of location names is provided which displays all locations by default, and displays the filtered subset of locations when a filter is applied. +- Clicking a location on the list displays unique information about the location. + +### Map and Markers +- Map displays all location markers by default, and displays the filtered subset of location markers when a filter is applied. +- Clicking a marker displays unique information about a location on the page in a separate div. + +### Asynchronous API Requests +- Application utilizes the Google Maps API and Zomato API. +- All data requests are retrieved in an asynchronous manner using Fetch API. + + +### Offline Use +- When available in the browser, the site uses a service worker to cache responses to requests for site assets. Visited pages are rendered when there is no network access. + +### Accessibility +- Elements on the page use the appropriate semantic elements. For those elements in which a semantic element is not available, appropriate ARIA roles are defined. +- All content-related images include appropriate alternate text that clearly describes the content of the image. diff --git a/Google_Maps_App_ReactsJS/Readme.md b/Google_Maps_App_ReactsJS/Readme.md new file mode 100644 index 00000000..8afaec6e --- /dev/null +++ b/Google_Maps_App_ReactsJS/Readme.md @@ -0,0 +1,5 @@ +# Usse + +```bash +export NODE_OPTIONS=--openssl-legacy-provider +``` \ No newline at end of file diff --git a/documentation/source/app.rst b/documentation/source/app.rst index 8126d6c8..d1d829e2 100644 --- a/documentation/source/app.rst +++ b/documentation/source/app.rst @@ -25,4 +25,11 @@ To use the dockerfile you can simply use the bash script: ``use_docker.sh`` and .. code-block:: bash - ./use_docker.sh \ No newline at end of file + ./use_docker.sh + +Several commands are supported: + +.. code-block:: bash + + ./use_docker.sh remove + ./use_docker.sh recreate \ No newline at end of file From f0f47dc10a46d9f852e6435065ecf73af8729445 Mon Sep 17 00:00:00 2001 From: Eljakim Herrewijnen Date: Mon, 1 Jan 2024 21:41:29 +0100 Subject: [PATCH 2/2] Fixed filter bar location --- react_usse/src/App.css | 8 +++-- react_usse/src/App.js | 2 +- react_usse/src/MapContainer.js | 66 ++++++++++++++++------------------ 3 files changed, 37 insertions(+), 39 deletions(-) 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 {

Vind je droomhuis

- +
{ - 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 && (

{maxPrice}

-
- +
    {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 + + + ))} + +
) }