feat: add Distances Map
This commit is contained in:
parent
62d71a6537
commit
58673a4464
|
@ -1,5 +1,6 @@
|
|||
# Others
|
||||
build*
|
||||
*.tar.gz
|
||||
|
||||
# Logs
|
||||
logs
|
||||
|
|
|
@ -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
|
||||
};
|
|
@ -11,7 +11,6 @@ export default function EntitiesMapComp({entities}){
|
|||
<h1>Map</h1>
|
||||
<h2>Entity Map</h2>
|
||||
<EntitiesMap entities={entities}/>
|
||||
|
||||
</>
|
||||
);
|
||||
}else{
|
||||
|
|
|
@ -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: '© <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
|
||||
};
|
|
@ -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}
|
||||
/>
|
||||
<DistancesMap distances={distances} />
|
||||
</>
|
||||
);
|
||||
}else{
|
||||
|
|
|
@ -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]));
|
||||
|
|
Loading…
Reference in New Issue