feat: add Distances Map

.gitignore

@@ -1,5 +1,6 @@
 # Others
 build*
+*.tar.gz
 
 # Logs
 logs

app/components/distances-map-comp.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import DistancesMap from './map/distances-map';
+
+//destructure props
+export default function DistancesMapComp({distances}){
+    if(distances.length>0){
+    return (
+	<>
+	    <h1>Map</h1>
+	    <h2>Distance Map</h2>
+	    <DistancesMap distances={distances}/>
+	</>
+    );
+    }else{
+	return (
+	    <>
+		<h1>Map</h1>
+		<p>DistancesMap loading...</p>
+	    </>
+	);
+    }
+}
+DistancesMapComp.propTypes = {
+    distances: PropTypes.array
+};

app/components/entities-map-comp.jsx

@@ -11,7 +11,6 @@ export default function EntitiesMapComp({entities}){
 	    <h1>Map</h1>
 	    <h2>Entity Map</h2>
 	    <EntitiesMap entities={entities}/>
-
 	</>
     );
     }else{

app/components/map/distances-map.jsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useRef, useState } from 'react'
+import PropTypes from 'prop-types';
+import L from 'leaflet'
+
+import "leaflet/dist/leaflet.css";
+
+export default function DistancesMap({distances}) {
+
+    //console.log('distances-map:DistanesMap: distances.lngth: ' + distances.length);
+
+    /*lat and lon of Braunschweig,DE*/
+    const position = [52.26594, 10.52673]
+
+    const mapRef = useRef();
+
+    useEffect(() => {
+
+        const map = L.map(
+	    mapRef.current,
+	    {attributionControl: true}
+	).setView(
+	    position,
+	    6
+	);
+
+	L.tileLayer(
+	    "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
+	    {
+                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+		maxZoom: 18,
+		scrollWheelZoom: false,
+	    }).addTo(map);
+
+	//TODO: Why is 'scrollWheelZoom: false,' above not working?
+	//TODO: Why the following line instead?
+	map.scrollWheelZoom.disable()
+
+	distances.map( function( value, key ) {
+
+	    //console.log('distances-map:DistanesMap: value: ' +JSON.stringify(value));
+	    //console.log('distances-map:DistanesMap: value[2]: ' + value[2]);
+	    const diameter = value[7];
+	    //console.log('distances-map:DistanesMap: diameter: ' + diameter);
+	    const radius = diameter / 2;
+	    //console.log('distances-map:DistanesMap: radius: ' + radius);
+
+	    //add circle with a radius of X m
+	    //https://leafletjs.com/reference.html#circle
+	    var circle = L.circle( [ value[3], value[2] ], {
+		radius: radius
+	    }).addTo(map);
+	});
+	// unmount map function
+	//You should unmount the function in react.js to remove the existing map.
+	return () => map.remove();
+    }, []);    
+
+    if ( distances !== undefined && distances !== null && distances.length > 0 ) {
+	return (
+	    <>
+		<div
+		    style={{padding: 0, margin: 0, height: "85vh",}}
+		    ref={el => mapRef.current = el}>
+		</div>
+	    </>
+	);
+    }else{
+	//TODO Why does mapRef have to be present?
+	return (
+            <>
+		<p>loading...</p>
+		<div
+		    ref={el => mapRef.current = el}>
+		</div>
+            </>
+	);
+    }
+}
+DistancesMap.propTypes = {
+    distances: PropTypes.array
+};

app/pages/home.jsx

@@ -4,15 +4,21 @@ import axios from 'axios';
 import List from '../components/list';
 import EntitiesMap from '../components/entities-map-comp';
 import RelationsMap from '../components/relations-map-comp';
+import DistancesMap from '../components/distances-map-comp';
+
 import '../style.css';
+
 export default function Home(){
 
-    //store relations
+    //store distances
-    const [relations,setRelations]=useState([]);
+    const [distances,setDistances]=useState([]);
 
     //store entites
     const [entities,setEntities]=useState([]);
 
+    //store relations
+    const [relations,setRelations]=useState([]);
+
     //get entities
     const fetchEntities = () => {
 	axios.get('https://v1rgncy.api.swingbe.de/entities/info')
@@ -24,6 +30,17 @@ export default function Home(){
             });
     };
 
+    //get distances
+    const fetchDistances = () => {
+	axios.get('https://v1rgncy.api.swingbe.de/distances/info')
+            .then((response) => {
+		setDistances(response.data);
+            })
+            .catch((error) => {
+		console.error('Home:fetchDistances() error: ' + error);
+            });
+    };
+
     //get relations
     const fetchRelations = () => {
 	axios.get('https://v1rgncy.api.swingbe.de/relations/info')
@@ -37,6 +54,7 @@ export default function Home(){
 
     //on page load
     useEffect(()=>{
+	fetchDistances();
 	fetchEntities();
 	fetchRelations();
     },[]);
@@ -50,6 +68,7 @@ export default function Home(){
 		    entities={entities}
 		    relations={relations}
 		/>
+		<DistancesMap distances={distances} />
 	    </>
 	);
     }else{

app/utils/entities.js

@@ -1,5 +1,5 @@
 /*
- * get entity array as map of key (entity.id) and value (entity) pairx
+ * get entity array as map of key (entity.id) and value (entity) pair
  */
 export function getMap(entities){
     return new Map(entities.map(item => [item[0],item]));