ADD: added tracklist and automated update

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -4,36 +4,45 @@ import React, { Component } from "react";
 import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
 import { friend,Hostile, iconShip,createIcon } from "./icon";
 import "./OpenSeaMap.scss"
+import { sendMsg } from '../api';
 
 
 // import icon from 'leaflet/dist/images/marker-icon.png';
 class OpenSeaMap extends Component {
  
+  componentDidMount() {
+    // setInterval(() => this.setState({ time: Date.now()}), 1000)
+    setInterval(() => this.props.parentCallback(), 3000)
+    
+
+}
+
+
+  handleClick(e)
+  {
+    // console.log(e.target)
+    console.log("hello world");
+  }
 
   makeIcon(index, entity)
   {
     var icon;
-    // switch (entity.Side)
-    // {
-    //   case "Friend":
-    //     icon = friend;
-    //   break;
-    //   case "Hostile":
-    //     icon = Hostile;
-    //   break;
-    //   default:
-        
-    //   break;
-    // }
     icon = createIcon(entity.Type,entity.Side)
     return (
-      <Marker name={"test"} key={index} icon={icon} position={entity.position} >
-      <Popup>
+      <Marker name={entity.Name} key={index} icon={icon} position={entity.position} 
+      
+      eventHandlers={{
+        click: (e) => {
+          console.log(e.target.options.name);  // will print 'FooBar' in console
+        },
+      }}  >
+
+      {/* <Popup>
       Omu-Aran the Head Post of Igbomina land, 
       is a town in the Nigerian state of Kwara. 
       It originated from Ife and currently the local
       government headquarters of Irepodun local government.
-    </Popup>
+    </Popup> */}
     </Marker>
 
     );
@@ -45,7 +54,7 @@ class OpenSeaMap extends Component {
     // ));
 
     return (
-      <div className='container' >
+      <div className='map' >
        <MapContainer MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
@@ -54,14 +63,6 @@ class OpenSeaMap extends Component {
           {/* {positions} */}
           {this.props.Entities.map((pos, index) => (
             this.makeIcon(index,pos)
-          // <Marker name={"test"} key={index} icon={friend} position={pos.position} >
-          //     <Popup>
-          //     Omu-Aran the Head Post of Igbomina land, 
-          //     is a town in the Nigerian state of Kwara. 
-          //     It originated from Ife and currently the local
-          //     government headquarters of Irepodun local government.
-          //   </Popup>
-          //   </Marker>
         ))}
       </MapContainer>
       </div>

webapp/src/components/OpenSeaMap/OpenSeaMap.scss

@@ -7,11 +7,12 @@
 }
 
 
-.container {
+.map {
   padding-top: 1%;
   height: 800px;
-  width: 79%;
-  padding-left: 20%;
+  width: 76%;
+  // padding-left: 20%;
+  float: left;
 }
 
 // .leaflet-marker-icon{

webapp/src/components/OpenSeaMap/icon.jsx

@@ -1,4 +1,4 @@
-import {L, Icon} from 'leaflet';
+import { Icon} from 'leaflet';
 import ms from 'milsymbol'
 
 const iconShip = new Icon({
@@ -50,10 +50,11 @@ switch (Type) {
     break;
 
   default:
-    SideLetter = "N";
+    TypeLetter = "S";
     break;
 }
 
+
 var IconS = new ms.Symbol(
   "S"+SideLetter+TypeLetter+"*"+"--------"
 )