80 lines
2.0 KiB
JavaScript
80 lines
2.0 KiB
JavaScript
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);
|
|
|
|
//add circle with a radius of X m
|
|
//https://leafletjs.com/reference.html#circle
|
|
var circle = L.circle( [ value[3], value[2] ], {
|
|
radius: diameter
|
|
}).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
|
|
};
|