Compare commits

...

7 Commits
main ... ui-osm

7 changed files with 132 additions and 130 deletions

View File

@ -28,9 +28,15 @@ export default function App(){
<Route path='/bus-stop' element={<EntityOsm
address={ config.ADDRESS + 'nwr[highway=bus_stop]' + config.AREA }
title='Bus Stops'/>}/>
<Route path='/charging-station' element={<EntityOsm
address={ config.ADDRESS + 'nwr[amenity=charging_station]' + config.AREA }
title='Charging Stations'/>}/>
<Route path='/park-ride' element={<EntityOsm
address={ config.ADDRESS + 'nwr["park_ride"!="no"]["park_ride"]' + config.AREA }
title='P+R Stations'/>}/>
<Route path='/pid' element={<EntityOsm
address={ config.ADDRESS + 'nwr[passenger_information_display=yes]' + config.AREA }
title='Passenger Information Displays'/>}/>
<Route path='/taxi' element={<EntityOsm
address={ config.ADDRESS + 'nwr[amenity=taxi]' + config.AREA }
title='Taxi Stations'/>}/>

View File

@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import { get } from '../utils/request';
//TODO adjust config usage

View File

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {MapContainer,Polyline,TileLayer} from 'react-leaflet';
import MarkerClusterGroup from 'react-leaflet-cluster';
/*JS module import (vs cdn or style link)*/
import 'leaflet/dist/leaflet.css'
@ -15,13 +16,6 @@ export default function EntitiesMap({entities}) {
const position = [52.16594, 10.52673];
if ( entities !== undefined && entities !== null && entities.length > 0 ) {
/*return a React element*/
}else{
return (
<>
<p>Loading...</p>
</>
);
}
return (
<>
<MapContainer
@ -38,18 +32,23 @@ export default function EntitiesMap({entities}) {
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MarkerClusterGroup
chunkedLoading
>
{
entities.map( function( value, key ) {
if ( value.type === "node"){
return <EntitiesMarker
key={value.id}
index={value.id}
id={value.id}
lat={value.lat}
lon={value.lon}
name={value.tags.name}
/>;
} else if ( value.type === "way" ) {
return (
<EntitiesMarker
key={value.id}
index={value.id}
id={value.id}
lat={value.lat}
lon={value.lon}
name={value.tags.name}
/>
);
} else if ( value.type === "way" || value.type === "relation" ) {
return <EntitiesMarker
key={value.id}
index={value.id}
@ -63,9 +62,17 @@ export default function EntitiesMap({entities}) {
}
})
}
</MarkerClusterGroup>
</MapContainer>
</>
);
}else{
return (
<>
<p>Loading...</p>
</>
);
}
}
EntitiesMap.propTypes = {
entities: PropTypes.array

View File

@ -16,7 +16,7 @@ function TableEntries ({array}) {
<td>{item.lon}</td>
</tr>
);
} else if( item.type === "way" ) {
} else if( item.type === "way" || item.type === "relation") {
return (
<tr
key={item.id}

View File

@ -7,7 +7,9 @@ export default function Home(){
const [bikeRideCount, setBikeRideCount] = useState('loading...');
const [busStopCount, setBusStopCount] = useState('loading...');
const [parkRideRry, setParkRideRry] = useState('loading...');
const [chargingStationCount, setChargingStationCount] = useState('loading...');
const [parkRideCount, setParkRideCount] = useState('loading...');
const [pidCount, setPidCount] = useState('loading...');
const [taxiCount, setTaxiCount] = useState('loading...');
const [ticketMachineCount, setTicketMachineCount] = useState('loading...');
const [ticketOfficeCount, setTicketOfficeCount] = useState('loading...');
@ -32,10 +34,22 @@ export default function Home(){
setBusStopCount(data.elements.length);
});
//charging station
get(address + 'nwr[amenity=charging_station]' + area)
.then(data => {
setChargingStationCount(data.elements.length);
});
//park ride
get(address + 'nwr["park_ride"!="no"]["park_ride"]' + area)
.then(data => {
setParkRideRry(data.elements.length);
setParkRideCount(data.elements.length);
});
//passenger information display
get(address + 'nwr[passenger_information_display=yes]' + area)
.then(data => {
setPidCount(data.elements.length);
});
//taxi
@ -109,6 +123,21 @@ export default function Home(){
<td>Bus stops
</td>
</tr>
<tr
key='charging-station'
>
<td>
<Link
to={'/charging-station'}
>
<button>
{chargingStationCount}
</button>
</Link>
</td>
<td>Charging Stations
</td>
</tr>
<tr
key='pr'
>
@ -117,13 +146,28 @@ export default function Home(){
to={'/park-ride'}
>
<button>
{parkRideRry}
{parkRideCount}
</button>
</Link>
</td>
<td>Park and ride (P+R) stations
</td>
</tr>
<tr
key='pid'
>
<td>
<Link
to={'/pid'}
>
<button>
{pidCount}
</button>
</Link>
</td>
<td>Passenger Information Displays
</td>
</tr>
<tr
key='taxi'
>

147
ui-osm/package-lock.json generated
View File

@ -1,20 +1,20 @@
{
"name": "rvb-ui",
"version": "0.1.0",
"version": "0.3.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "rvb-ui",
"version": "0.1.0",
"version": "0.3.0",
"license": "GPL-3.0-or-later",
"dependencies": {
"axios": "1.3.6",
"leaflet": "1.9.4",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-leaflet": "4.2.1",
"react-leaflet-cluster": "2.1.0",
"react-router-dom": "6.15.0"
},
"devDependencies": {
@ -2400,21 +2400,6 @@
"integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
"dev": true
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.6.tgz",
"integrity": "sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==",
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/babel-loader": {
"version": "9.1.3",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
@ -2776,17 +2761,6 @@
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@ -3080,14 +3054,6 @@
"node": ">=8"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@ -3726,6 +3692,7 @@
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"dev": true,
"funding": [
{
"type": "individual",
@ -3741,19 +3708,6 @@
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -4457,6 +4411,14 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
},
"node_modules/leaflet.markercluster": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
"integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
"peerDependencies": {
"leaflet": "^1.3.1"
}
},
"node_modules/loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@ -4604,6 +4566,7 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
@ -4612,6 +4575,7 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
@ -5142,11 +5106,6 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/punycode": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@ -5254,6 +5213,20 @@
"react-dom": "^18.0.0"
}
},
"node_modules/react-leaflet-cluster": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.1.0.tgz",
"integrity": "sha512-16X7XQpRThQFC4PH4OpXHimGg19ouWmjxjtpxOeBKpvERSvIRqTx7fvhTwkEPNMFTQ8zTfddz6fRTUmUEQul7g==",
"dependencies": {
"leaflet.markercluster": "^1.5.3"
},
"peerDependencies": {
"leaflet": "^1.8.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-leaflet": "^4.0.0"
}
},
"node_modules/react-router": {
"version": "6.15.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
@ -8352,21 +8325,6 @@
"integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
"dev": true
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.6.tgz",
"integrity": "sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==",
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"babel-loader": {
"version": "9.1.3",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
@ -8635,14 +8593,6 @@
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
"dev": true
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"commander": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@ -8864,11 +8814,6 @@
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
"dev": true
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@ -9357,17 +9302,8 @@
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"dev": true
},
"forwarded": {
"version": "0.2.0",
@ -9880,6 +9816,12 @@
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
},
"leaflet.markercluster": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
"integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
"requires": {}
},
"loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@ -9996,12 +9938,14 @@
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"requires": {
"mime-db": "1.52.0"
}
@ -10386,11 +10330,6 @@
}
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"punycode": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@ -10471,6 +10410,14 @@
"@react-leaflet/core": "^2.1.0"
}
},
"react-leaflet-cluster": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.1.0.tgz",
"integrity": "sha512-16X7XQpRThQFC4PH4OpXHimGg19ouWmjxjtpxOeBKpvERSvIRqTx7fvhTwkEPNMFTQ8zTfddz6fRTUmUEQul7g==",
"requires": {
"leaflet.markercluster": "^1.5.3"
}
},
"react-router": {
"version": "6.15.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",

View File

@ -2,7 +2,7 @@
"private": true,
"name": "rvb-ui",
"description": "UI to display RVB data",
"version": "0.1.0",
"version": "0.3.0",
"main": "index.js",
"keywords": [
"react",
@ -20,24 +20,23 @@
"@babel/preset-env": "7.22.10",
"@babel/preset-react": "7.22.5",
"babel-loader": "9.1.3",
"html-webpack-plugin": "5.5.3",
"webpack": "5.88.2",
"webpack-cli": "5.1.4",
"webpack-dev-server": "4.15.1",
"webpack-merge": "5.9.0",
"css-loader": "6.7.3",
"css-loader": "6.7.3",
"file-loader": "6.2.0",
"html-webpack-plugin": "5.5.1",
"style-loader": "3.3.2",
"svg-url-loader": "8.0.0"
"svg-url-loader": "8.0.0",
"webpack": "5.88.2",
"webpack-cli": "5.1.4",
"webpack-dev-server": "4.15.1",
"webpack-merge": "5.9.0"
},
"dependencies": {
"axios": "1.3.6",
"leaflet": "1.9.4",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-leaflet": "4.2.1",
"react-leaflet-cluster": "2.1.0",
"react-router-dom": "6.15.0"
}
}