diff --git a/app/assets/Logo_SIB_electricindigo.svg b/app/assets/Logo_SIB_electricindigo.svg
new file mode 100644
index 0000000..458e73e
--- /dev/null
+++ b/app/assets/Logo_SIB_electricindigo.svg
@@ -0,0 +1,35 @@
+
+
+
diff --git a/app/components/map/map.jsx b/app/components/map/map.jsx
index ae789c9..b558162 100644
--- a/app/components/map/map.jsx
+++ b/app/components/map/map.jsx
@@ -1,9 +1,13 @@
import React from 'react';
+import PropTypes from 'prop-types';
import {MapContainer,TileLayer} from 'react-leaflet';
/*JS module import (vs cdn or style link)*/
import 'leaflet/dist/leaflet.css'
import './map.css';
-export default function Map() {
+
+import MsgMarker from './marker-msg';
+
+export default function Map({messages}) {
const position = [53.2206976, 7.7585528]
return (
<>
@@ -14,7 +18,16 @@ export default function Map() {
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
+ {
+ messages.map(function(value,key) {
+ //console.log(`key: ${key}, value: ${value}`);
+ return ;
+ })
+ }
>
);
}
+Map.propTypes = {
+ messages: PropTypes.array
+};
diff --git a/app/components/map/marker-msg.jsx b/app/components/map/marker-msg.jsx
new file mode 100644
index 0000000..4915ab2
--- /dev/null
+++ b/app/components/map/marker-msg.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Marker,Popup} from 'react-leaflet';
+import bfly from '../../assets/Logo_SIB_electricindigo.svg';
+const MarkerMsg = ({ index,location }) => {
+ const iconBfly = new L.Icon({
+ iconUrl: bfly,
+ iconRetinaUrl: bfly,
+ popupAnchor: [-0, -0],
+ iconSize: [32,45],
+ });
+ return(
+ <>
+
+
+ Popup
+
+
+ >
+ );
+}
+export default MarkerMsg;
+
+
+MarkerMsg.propTypes = {
+ index: PropTypes.number,
+ location: PropTypes.object
+};
diff --git a/app/pages/map-page.jsx b/app/pages/map-page.jsx
index b47f6c1..67cd689 100644
--- a/app/pages/map-page.jsx
+++ b/app/pages/map-page.jsx
@@ -1,9 +1,11 @@
-import React, {useEffect} from 'react';
+import React, {useEffect,useState} from 'react';
import axios from 'axios';
import Map from '../components/map/map';
-
+import parseMessages from '../utils/gtfs-rt-utils';
export default function MapPage() {
+ /*storage*/
+ const [vehPos, setVehPos] = useState([]);
const getData= async ()=>{
console.log('getData() start...');
try {
@@ -17,18 +19,22 @@ export default function MapPage() {
});
//TODO remove debugging
if(res.data){
- console.log('getVehPos() res available');
+ //console.log('getVehPos() res available');
+ /*parse messages*/
+ const messages = parseMessages(res.data);
+ console.log('getVehPos() messages.length: '+messages.length);
+ /*set state*/
+ setVehPos(messages);
}else{
- console.log('getVehPos() res NOT available');
+ console.error('getVehPos() res NOT available');
}
} catch (err) {
console.error('err.message: ' + err.message);
}
- console.log('getData() done.');
+ //console.log('getData() done.');
};
useEffect(()=>{
const intervalCall=setInterval(()=>{
- console.log('Map: get data');
getData();
}, 5000);
return ()=>{
@@ -40,7 +46,7 @@ export default function MapPage() {
<>
{/*TODO remove debugging*/}
MapPage
-
+