dancingCycle
/
rgncycle-ui
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add Polyline to Map

This commit is contained in:
dancingCycle 2023-04-25 21:14:11 +02:00
parent a9f2673592
commit 8d2fc4d71f
4 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/map/entities-map.jsx
View File

@ -1,25 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import {MapContainer,TileLayer} from 'react-leaflet';
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';
import {getCoordinates} from '../../utils/entities';
export default function EntitiesMap({entities}) {
/*lat and lon of Braunschweig,DE*/
const position = [52.26594, 10.52673]
//TODO make this switch available via configuration!
const hasGtfs = false;
//set polyline color
const colorOptions = { color: 'darkblue' }
return (
<>
<MapContainer
center={position}
zoom={6}
minZoom={2}
scrollWheelZoom={true}
scrollWheelZoom={false}
>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@ -37,6 +40,7 @@ export default function EntitiesMap({entities}) {
/>;
})
}
<Polyline pathOptions={colorOptions} positions={getCoordinates(entities)} />
</MapContainer>
</>
);

16
app/utils/entities.js Normal file
View File

@ -0,0 +1,16 @@
/* get coordinates from entity array
* @param entities array of entities
* @return coordintes as array
*/
export function getCoordinates(entities){
//console.log('entities:getCoordinates() # entities: ' + entities.length);
let coordinates = new Array();
for(let i = 0; i < entities.length; i++){
let coordinate = {};
coordinate.lat = entities[i][2];
coordinate.lon = entities[i][3];
coordinates.push(coordinate);
}
//console.log('entities:getCoordinates() # coordinates: ' + coordinates.length);
return coordinates;
}

8
package-lock.json generated
View File

@ -10,12 +10,12 @@
"license": "GPL-3.0-or-later",
"dependencies": {
"axios": "1.3.6",
"leaflet": "^1.9.3",
"leaflet": "1.9.3",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-leaflet": "^4.2.1",
"react-router-dom": "^6.10.0"
"react-leaflet": "4.2.1",
"react-router-dom": "6.10.0"
},
"devDependencies": {
"@babel/core": "7.21.4",
@ -25,7 +25,7 @@
"css-loader": "6.7.3",
"html-webpack-plugin": "5.5.1",
"style-loader": "3.3.2",
"svg-url-loader": "^8.0.0",
"svg-url-loader": "8.0.0",
"webpack": "5.80.0",
"webpack-cli": "5.0.1",
"webpack-dev-server": "4.13.3",

8
package.json
View File

@ -25,7 +25,7 @@
"css-loader": "6.7.3",
"html-webpack-plugin": "5.5.1",
"style-loader": "3.3.2",
"svg-url-loader": "^8.0.0",
"svg-url-loader": "8.0.0",
"webpack": "5.80.0",
"webpack-cli": "5.0.1",
"webpack-dev-server": "4.13.3",
@ -33,11 +33,11 @@
},
"dependencies": {
"axios": "1.3.6",
"leaflet": "^1.9.3",
"leaflet": "1.9.3",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-leaflet": "^4.2.1",
"react-router-dom": "^6.10.0"
"react-leaflet": "4.2.1",
"react-router-dom": "6.10.0"
}
}