diff --git a/.gitignore b/.gitignore
index 9b9efe6..f7e3f26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
# Others
build*
+*.tar.gz
# Logs
logs
diff --git a/app/components/distances-map-comp.jsx b/app/components/distances-map-comp.jsx
new file mode 100644
index 0000000..c42ae8c
--- /dev/null
+++ b/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 (
+ <>
+
Map
+ Distance Map
+
+ >
+ );
+ }else{
+ return (
+ <>
+ Map
+ DistancesMap loading...
+ >
+ );
+ }
+}
+DistancesMapComp.propTypes = {
+ distances: PropTypes.array
+};
diff --git a/app/components/entities-map-comp.jsx b/app/components/entities-map-comp.jsx
index 30b1b1f..5fa8934 100644
--- a/app/components/entities-map-comp.jsx
+++ b/app/components/entities-map-comp.jsx
@@ -11,7 +11,6 @@ export default function EntitiesMapComp({entities}){
Map
Entity Map
-
>
);
}else{
diff --git a/app/components/map/distances-map.jsx b/app/components/map/distances-map.jsx
new file mode 100644
index 0000000..842a857
--- /dev/null
+++ b/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: '© OpenStreetMap 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 (
+ <>
+ mapRef.current = el}>
+
+ >
+ );
+ }else{
+ //TODO Why does mapRef have to be present?
+ return (
+ <>
+ loading...
+ mapRef.current = el}>
+
+ >
+ );
+ }
+}
+DistancesMap.propTypes = {
+ distances: PropTypes.array
+};
diff --git a/app/pages/home.jsx b/app/pages/home.jsx
index 757a983..9942307 100644
--- a/app/pages/home.jsx
+++ b/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
- const [relations,setRelations]=useState([]);
+ //store distances
+ 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}
/>
+
>
);
}else{
diff --git a/app/utils/entities.js b/app/utils/entities.js
index 1f1f2fe..8fe908d 100644
--- a/app/utils/entities.js
+++ b/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]));