54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
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='© <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
|
|
};
|