feat(leaflet): add vehicle positions to map

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 (
 	<>
-	    <h2>Map</h2>
+	    <h2>
+		vehPos.length: {vehPos.length}
+	    </h2>
 	    <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
 		<TileLayer
 		    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -33,8 +38,17 @@ const Map = () => {
 		<BoatMarker/>
 		<MarkerBFly/>
 		<MarkerBFlyBlack/>
+		{vehPos.map(function(value,key) {
+		    console.log(`key: ${key}, value: ${value}`);
+                    return <VehicleMarker key={key} index={key} location={value}/>;
+                })
+            }
 	    </MapContainer>
 	</>
     );
 }
 export default Map
+
+Map.propTypes = {
+    vehPos: PropTypes.array
+};

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(
+	<>
+	    <Marker
+		index={index}
+		position={[location.lat,location.lon]}
+		icon={myIcon}
+	    >
+		<Popup>
+		    Popup
+		</Popup>
+	    </Marker>
+	</>
+    );
+}
+export default VehicleRealTimeMarker;
+
+
+VehicleRealTimeMarker.propTypes = {
+    index: PropTypes.number,
+    location: PropTypes.object
+};

leaflet/app/pages/home.jsx

@@ -115,7 +115,7 @@ const Home = () => {
 	    <p>
 		vehicle position count: {vehPos.length}
 	    </p>
-	    <Map />
+	    <Map vehPos={vehPos}/>
 	</>
     );
 }