feat: add Relations Map
This commit is contained in:
parent
8d2fc4d71f
commit
6f0ad8721e
|
@ -4,15 +4,16 @@ import PropTypes from 'prop-types';
|
||||||
import EntitiesMap from './map/entities-map';
|
import EntitiesMap from './map/entities-map';
|
||||||
|
|
||||||
//destructure props
|
//destructure props
|
||||||
export default function Map({entities}){
|
export default function EntitiesMapComp({entities}){
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h2>Map</h2>
|
<h2>Map</h2>
|
||||||
<h3>Entity Map</h3>
|
<h3>Entity Map</h3>
|
||||||
<EntitiesMap entities={entities}/>
|
<EntitiesMap entities={entities}/>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Map.propTypes = {
|
EntitiesMapComp.propTypes = {
|
||||||
entities: PropTypes.array,
|
entities: PropTypes.array
|
||||||
};
|
};
|
|
@ -7,20 +7,15 @@ import 'leaflet/dist/leaflet.css'
|
||||||
import './entities-map.css';
|
import './entities-map.css';
|
||||||
|
|
||||||
import EntitiesMarker from './entities-marker';
|
import EntitiesMarker from './entities-marker';
|
||||||
import {getCoordinates} from '../../utils/entities';
|
|
||||||
|
|
||||||
export default function EntitiesMap({entities}) {
|
export default function EntitiesMap({entities}) {
|
||||||
/*lat and lon of Braunschweig,DE*/
|
/*lat and lon of Braunschweig,DE*/
|
||||||
const position = [52.26594, 10.52673]
|
const position = [52.26594, 10.52673]
|
||||||
//TODO make this switch available via configuration!
|
|
||||||
const hasGtfs = false;
|
|
||||||
//set polyline color
|
|
||||||
const colorOptions = { color: 'darkblue' }
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<MapContainer
|
<MapContainer
|
||||||
center={position}
|
center={position}
|
||||||
zoom={6}
|
zoom={8}
|
||||||
minZoom={2}
|
minZoom={2}
|
||||||
scrollWheelZoom={false}
|
scrollWheelZoom={false}
|
||||||
>
|
>
|
||||||
|
@ -40,7 +35,6 @@ export default function EntitiesMap({entities}) {
|
||||||
/>;
|
/>;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
<Polyline pathOptions={colorOptions} positions={getCoordinates(entities)} />
|
|
||||||
</MapContainer>
|
</MapContainer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import {MapContainer,Polyline,TileLayer} from 'react-leaflet';
|
||||||
|
|
||||||
|
/*JS module import (vs cdn or style link)*/
|
||||||
|
import 'leaflet/dist/leaflet.css'
|
||||||
|
import './entities-map.css';
|
||||||
|
|
||||||
|
import EntitiesMarker from './entities-marker';
|
||||||
|
|
||||||
|
export default function RelationsMap({relations}) {
|
||||||
|
/*lat and lon of Braunschweig,DE*/
|
||||||
|
const position = [52.26594, 10.52673]
|
||||||
|
//set polyline color
|
||||||
|
const colorOptions = { color: 'darkblue' }
|
||||||
|
if(relations.length === 0){
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>RelationsMap loading...</p>;
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}else{
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MapContainer
|
||||||
|
center={position}
|
||||||
|
zoom={8}
|
||||||
|
minZoom={2}
|
||||||
|
scrollWheelZoom={false}
|
||||||
|
>
|
||||||
|
<TileLayer
|
||||||
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||||
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
|
/>
|
||||||
|
{
|
||||||
|
relations.map(function(value,key) {
|
||||||
|
//console.log(`key: ${key}, valueFromLat: ${value[0][2]}, valueToLon: ${value[1][3]}`);
|
||||||
|
return<Polyline
|
||||||
|
key={key}
|
||||||
|
pathOptions={colorOptions}
|
||||||
|
positions={[[value[0][2], value[0][3]],[value[1][2],value[1][3]]]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</MapContainer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
RelationsMap.propTypes = {
|
||||||
|
relations: PropTypes.array.isRequired
|
||||||
|
};
|
|
@ -0,0 +1,43 @@
|
||||||
|
import React, {useEffect,useState} from 'react'
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import RelationsMap from './map/relations-map';
|
||||||
|
import {getMap} from '../utils/entities';
|
||||||
|
import {createRelationsOfEntities} from '../utils/relations';
|
||||||
|
|
||||||
|
//destructure props
|
||||||
|
export default function RelationsMapComp({entities,relations}){
|
||||||
|
|
||||||
|
//store rltns
|
||||||
|
const [rltns,setRltns] = useState([]);
|
||||||
|
|
||||||
|
//on page load
|
||||||
|
//add dependency array, otherwise useEffect will not rerun
|
||||||
|
//TODO Study https://www.digitalocean.com/community/tutorials/how-to-handle-async-data-loading-lazy-loading-and-code-splitting-with-react
|
||||||
|
useEffect(()=>{
|
||||||
|
setRltns((rltns) => createRelationsOfEntities(entities,relations));
|
||||||
|
},[entities,relations]);
|
||||||
|
|
||||||
|
if(rltns.length===0){
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h2>Map</h2>
|
||||||
|
<h3>Relations Map</h3>
|
||||||
|
<p>RelationsMapComp loading...</p>;
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}else{
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h2>Map</h2>
|
||||||
|
<h3>Relations Map</h3>
|
||||||
|
<RelationsMap relations={rltns}/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//TODO Study .isRequired!
|
||||||
|
RelationsMapComp.propTypes = {
|
||||||
|
entities: PropTypes.array.isRequired,
|
||||||
|
relations: PropTypes.array.isRequired
|
||||||
|
};
|
|
@ -2,10 +2,14 @@ import React, {useEffect,useState} from 'react'
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
import List from '../components/list';
|
import List from '../components/list';
|
||||||
import Map from '../components/map';
|
import EntitiesMap from '../components/entities-map-comp';
|
||||||
|
import RelationsMap from '../components/relations-map-comp';
|
||||||
import '../style.css';
|
import '../style.css';
|
||||||
export default function Home(){
|
export default function Home(){
|
||||||
|
|
||||||
|
//store relations
|
||||||
|
const [relations,setRelations]=useState([]);
|
||||||
|
|
||||||
//store entites
|
//store entites
|
||||||
const [entities,setEntities]=useState([]);
|
const [entities,setEntities]=useState([]);
|
||||||
|
|
||||||
|
@ -20,9 +24,21 @@ export default function Home(){
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//get relations
|
||||||
|
const fetchRelations = () => {
|
||||||
|
axios.get('http://83.223.94.182:65535/relations/info')
|
||||||
|
.then((response) => {
|
||||||
|
setRelations(response.data);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Home:fetchRelations() error: ' + error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
//on page load
|
//on page load
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
fetchEntities();
|
fetchEntities();
|
||||||
|
fetchRelations();
|
||||||
},[]);
|
},[]);
|
||||||
|
|
||||||
//return
|
//return
|
||||||
|
@ -30,7 +46,11 @@ export default function Home(){
|
||||||
<>
|
<>
|
||||||
<h1>Home</h1>
|
<h1>Home</h1>
|
||||||
<List entities={entities} />
|
<List entities={entities} />
|
||||||
<Map entities={entities} />
|
<EntitiesMap entities={entities} />
|
||||||
|
<RelationsMap
|
||||||
|
entities={entities}
|
||||||
|
relations={relations}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,16 +1,6 @@
|
||||||
/* get coordinates from entity array
|
/*
|
||||||
* @param entities array of entities
|
* get entity array as map of key (entity.id) and value (entity) pairx
|
||||||
* @return coordintes as array
|
|
||||||
*/
|
*/
|
||||||
export function getCoordinates(entities){
|
export function getMap(entities){
|
||||||
//console.log('entities:getCoordinates() # entities: ' + entities.length);
|
return new Map(entities.map(item => [item[0],item]));
|
||||||
let coordinates = new Array();
|
|
||||||
for(let i = 0; i < entities.length; i++){
|
|
||||||
let coordinate = {};
|
|
||||||
coordinate.lat = entities[i][2];
|
|
||||||
coordinate.lon = entities[i][3];
|
|
||||||
coordinates.push(coordinate);
|
|
||||||
}
|
|
||||||
//console.log('entities:getCoordinates() # coordinates: ' + coordinates.length);
|
|
||||||
return coordinates;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
import {getMap} from './entities';
|
||||||
|
/*
|
||||||
|
* create Relations array of Entity arrays
|
||||||
|
*/
|
||||||
|
export function createRelationsOfEntities(entities,relations){
|
||||||
|
const rltnsRry = new Array();
|
||||||
|
if(entities.length === 0){
|
||||||
|
console.error('relations:createRelationsOfEntities() ntts NOT available');
|
||||||
|
return rltnsRry;
|
||||||
|
}
|
||||||
|
//console.log('relations:createRelationsOfEntities() # ntts: ' + entities.length);
|
||||||
|
|
||||||
|
if(relations.length === 0){
|
||||||
|
console.error('relations:createRelationsOfEntities() rltns NOT available');
|
||||||
|
return rltnsRry;
|
||||||
|
}
|
||||||
|
//console.log('relations:createRelationsOfEntities() # rltns: ' + relations.length);
|
||||||
|
|
||||||
|
const entitiesMap = getMap(entities);
|
||||||
|
for(let i=0; i<relations.length; i++){
|
||||||
|
const relation = relations[i];
|
||||||
|
//get From Entity
|
||||||
|
let fromEntity = null;
|
||||||
|
if(!entitiesMap.has(relation[1])){
|
||||||
|
console.error('relations:createRelationsOfEntities() From Entity NOT known');
|
||||||
|
return rltnsRry;
|
||||||
|
}else{
|
||||||
|
fromEntity = entitiesMap.get(relation[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
//get To Entity
|
||||||
|
let toEntity = null;
|
||||||
|
if(!entitiesMap.has(relation[2])){
|
||||||
|
console.error('relations:createRelationsOfEntities() To Entity NOT known');
|
||||||
|
return rltnsRry;
|
||||||
|
}else{
|
||||||
|
toEntity = entitiesMap.get(relation[2]);
|
||||||
|
}
|
||||||
|
const rry = [fromEntity, toEntity];
|
||||||
|
rltnsRry.push(rry);
|
||||||
|
//console.log('relations:createRelationsOfEntities() # rltnsRry: ' + rltnsRry.length);
|
||||||
|
}
|
||||||
|
//console.log('relations:createRelationsOfEntities() # rltnsRry: ' + rltnsRry.length);
|
||||||
|
return rltnsRry;
|
||||||
|
}
|
Loading…
Reference in New Issue