Merge branch 'main' of ssh://git.herreweb.nl:3022/EljakimHerrewijnen/usse
This commit is contained in:
Eljakim
commit
84c6a6c7e2
43
Google_Maps_App_ReactsJS/Original_README.md
Normal file
43
Google_Maps_App_ReactsJS/Original_README.md
Normal file
@ -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.
|
||||
5
Google_Maps_App_ReactsJS/Readme.md
Normal file
5
Google_Maps_App_ReactsJS/Readme.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Usse
|
||||
|
||||
```bash
|
||||
export NODE_OPTIONS=--openssl-legacy-provider
|
||||
```
|
||||
@ -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
|
||||
./use_docker.sh
|
||||
|
||||
Several commands are supported:
|
||||
|
||||
.. code-block:: bash
|
||||
|
||||
./use_docker.sh remove
|
||||
./use_docker.sh recreate
|
||||
@ -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{
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
||||
import React, { Component, useEffect } from 'react';
|
||||
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})
|
||||
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(
|
||||
<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='© <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='© <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>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user