feat: add Relations Map

app/components/entities-map-comp.jsx

@@ -4,15 +4,16 @@ import PropTypes from 'prop-types';
 import EntitiesMap from './map/entities-map';
 
 //destructure props
-export default function Map({entities}){
+export default function EntitiesMapComp({entities}){
     return (
 	<>
 	    <h2>Map</h2>
 	    <h3>Entity Map</h3>
 	    <EntitiesMap entities={entities}/>
+
 	</>
     );
 }
-Map.propTypes = {
-    entities: PropTypes.array,
+EntitiesMapComp.propTypes = {
+    entities: PropTypes.array
 };

app/components/map/entities-map.jsx

@@ -7,20 +7,15 @@ import 'leaflet/dist/leaflet.css'
 import './entities-map.css';
 
 import EntitiesMarker from './entities-marker';
-import {getCoordinates} from '../../utils/entities';
 
 export default function EntitiesMap({entities}) {
     /*lat and lon of Braunschweig,DE*/
     const position = [52.26594, 10.52673]
-    //TODO make this switch available via configuration!
-    const hasGtfs = false;
-    //set polyline color
-    const colorOptions = { color: 'darkblue' }
     return (
 	<>
 	    <MapContainer
 		center={position}
-		zoom={6}
+		zoom={8}
 		minZoom={2}
 		scrollWheelZoom={false}
 	    >
@@ -40,7 +35,6 @@ export default function EntitiesMap({entities}) {
 			       />;
                     })
 		}
-		<Polyline pathOptions={colorOptions} positions={getCoordinates(entities)} />
 	    </MapContainer>
 	</>
     );

app/components/map/relations-map.jsx

@@ -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='&copy; <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
+};

app/components/relations-map-comp.jsx

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

app/pages/home.jsx

@@ -2,10 +2,14 @@ import React, {useEffect,useState} from 'react'
 import axios from 'axios';
 
 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';
 export default function Home(){
 
+    //store relations
+    const [relations,setRelations]=useState([]);
+
     //store entites
     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
     useEffect(()=>{
 	fetchEntities();
+	fetchRelations();
     },[]);
 
     //return
@@ -30,7 +46,11 @@ export default function Home(){
 	<>
 	    <h1>Home</h1>
 	    <List entities={entities} />
-	    <Map entities={entities} />
+	    <EntitiesMap entities={entities} />
+	    <RelationsMap
+		entities={entities}
+		relations={relations}
+	    />
 	</>
     );
 }

app/utils/entities.js

@@ -1,16 +1,6 @@
-/* get coordinates from entity array
- * @param entities array of entities
- * @return coordintes as array
+/*
+ * get entity array as map of key (entity.id) and value (entity) pairx
  */
-export function getCoordinates(entities){
-    //console.log('entities:getCoordinates() # entities: ' + entities.length);
-    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;
+export function getMap(entities){
+    return new Map(entities.map(item => [item[0],item]));
 }

app/utils/relations.js

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