diff --git a/leaflet/app/components/map/map.jsx b/leaflet/app/components/map/map.jsx
index 0a4fbf9..ab2c7d2 100644
--- a/leaflet/app/components/map/map.jsx
+++ b/leaflet/app/components/map/map.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import PropTypes from 'prop-types';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
/*JS module import (vs cdn or style link)*/
import 'leaflet/dist/leaflet.css'
@@ -12,12 +13,16 @@ import BoatMarker from './marker-boat';
import MarkerBFly from './marker-butterfly';
/**/
import MarkerBFlyBlack from './marker-butterfly-black';
-const Map = () => {
- const position = [51.505, -0.09]
+/**/
+import VehicleMarker from '../vehicleMarker';
+const Map = ({ vehPos }) => {
+ const position = [53.2206976, 7.7585528]
const positionP = [51.504, -0.09]
return (
<>
-
Map
+
+ vehPos.length: {vehPos.length}
+
{
+ {vehPos.map(function(value,key) {
+ console.log(`key: ${key}, value: ${value}`);
+ return ;
+ })
+ }
>
);
}
export default Map
+
+Map.propTypes = {
+ vehPos: PropTypes.array
+};
diff --git a/leaflet/app/components/vehicleMarker.js b/leaflet/app/components/vehicleMarker.js
new file mode 100644
index 0000000..919d8c0
--- /dev/null
+++ b/leaflet/app/components/vehicleMarker.js
@@ -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 VehicleRealTimeMarker = ({ index,location }) => {
+ const myIcon = new L.Icon({
+ iconUrl: bfly,
+ iconRetinaUrl: bfly,
+ popupAnchor: [-0, -0],
+ iconSize: [32,45],
+ });
+ return(
+ <>
+
+
+ Popup
+
+
+ >
+ );
+}
+export default VehicleRealTimeMarker;
+
+
+VehicleRealTimeMarker.propTypes = {
+ index: PropTypes.number,
+ location: PropTypes.object
+};
diff --git a/leaflet/app/pages/home.jsx b/leaflet/app/pages/home.jsx
index 65edf8c..0b0209e 100644
--- a/leaflet/app/pages/home.jsx
+++ b/leaflet/app/pages/home.jsx
@@ -115,7 +115,7 @@ const Home = () => {
vehicle position count: {vehPos.length}
-
+