ADD: added function for the dynamic creation of entities

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -2,7 +2,7 @@
 // import { useMapEvents } from 'react-leaflet/hooks'
 import React, { Component } from "react";
 import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
-import { friend,Hostile, iconShip } from "./icon";
+import { friend,Hostile, iconShip,createIcon } from "./icon";
 import "./OpenSeaMap.scss"
 
 
@@ -13,18 +13,19 @@ class OpenSeaMap extends Component {
   makeIcon(index, entity)
   {
     var icon;
-    switch (entity.Type)
-    {
-      case "Friend":
-        icon = friend;
-      break;
-      case "Hostile":
-        icon = Hostile;
-      break;
-      default:
+    // switch (entity.Side)
+    // {
+    //   case "Friend":
+    //     icon = friend;
+    //   break;
+    //   case "Hostile":
+    //     icon = Hostile;
+    //   break;
+    //   default:
         
-      break;
-    }
+    //   break;
+    // }
+    icon = createIcon(entity.Type,entity.Side)
     return (
       <Marker name={"test"} key={index} icon={icon} position={entity.position} >
       <Popup>
@@ -51,7 +52,7 @@ class OpenSeaMap extends Component {
         <TileLayer
           url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />    
           {/* {positions} */}
-          {this.props.Positions.map((pos, index) => (
+          {this.props.Entities.map((pos, index) => (
             this.makeIcon(index,pos)
           // <Marker name={"test"} key={index} icon={friend} position={pos.position} >
           //     <Popup>

webapp/src/components/OpenSeaMap/icon.jsx

@@ -8,26 +8,68 @@ const iconShip = new Icon({
   popupAnchor: [-25, -40],
 });
 
-const iconSize = {
-  "Team/Crew": 5,
-  "Squad": 10,
-  "Section": 15,
-  "Platoon/detachment": 20,
-  "Company/battery/troop": 25,
-  "Battalion/squadron": 30,
-  "Regiment/group": 35,
-  "Brigade": 40,
-  "Division": 45,
-  "Corps/MEF": 50,
-  "Army": 55,
-  "Army Group/front": 60,
-  "Region/Theater": 65,
-  "Command": 70
-};
+const HostileLetter = "H";
+const FriendLetter = "F";
+const NeutralLetter = "N";
+
+const AirLetter = "A";
+const SurfaceLetter = "S";
+const SubsurfaceLetter = "U";
+
+const Size = 25;
+
+function createIcon(Type , Side )
+{
+  var TypeLetter = "S";
+  var SideLetter = "N";
+switch (Side) {
+  case "Hostile":
+    SideLetter = HostileLetter;
+    break;
+    case "Friend":
+    SideLetter = FriendLetter;
+    break;
+    case "Neutral":
+    SideLetter = NeutralLetter;
+    break;
+
+  default:
+    SideLetter = "N";
+    break;
+}
+
+switch (Type) {
+  case "Air":
+      TypeLetter = AirLetter;
+    break;
+    case "Surface":
+      TypeLetter = SurfaceLetter;
+    break;
+    case "Subsurface":
+      TypeLetter = SubsurfaceLetter;
+    break;
+
+  default:
+    SideLetter = "N";
+    break;
+}
+
+var IconS = new ms.Symbol(
+  "S"+SideLetter+TypeLetter+"*"+"--------"
+)
+IconS = IconS.setOptions({ size: 25 });
+
+var Symbol = new Icon({
+  iconUrl: IconS.toDataURL(),
+  iconAnchor: [IconS.getAnchor().x, IconS.getAnchor().y],
+})
+
+return Symbol
+}
 
 var Friend = new ms.Symbol(
-  "SFP---------", {
-    uniqueDesignation: "Friend"
+  "SFS*--------", {
+    // uniqueDesignation: "Friend"
   })
 // Now that we have a symbol we can ask for the echelon and set the symbol size
 Friend = Friend.setOptions({ size: 25 });
@@ -39,7 +81,7 @@ const friend = new Icon({
 
 
 var hostile = new ms.Symbol(
-  "SHP---------", {
+  "SHU*---------", {
     uniqueDesignation: "Hostile"
   })
 // Now that we have a symbol we can ask for the echelon and set the symbol size
@@ -50,4 +92,4 @@ const Hostile = new Icon({
   iconAnchor: [hostile.getAnchor().x, hostile.getAnchor().y],
 });
 
-export { iconShip, friend,Hostile };
+export { iconShip, friend,Hostile,createIcon };

webapp/src/components/control/controls.jsx

@@ -1,12 +1,31 @@
 import React from 'react';
 import './controls.css'
+import { sendMsg } from '../api';
 
 class Controls extends React.Component
 {
+  constructor(props) {
+    super(props);
+    this.ws = props.ws;
+
+    // This binding is necessary to make `this` work in the callback
+  }
+  getMessage()
+  {
+    var msg = 
+    {
+      Type: "Request",
+      Data: "COP"
+
+    }
+    sendMsg(JSON.stringify(msg));
+    console.log("test");
+
+  }
     render() {
         return (
           <div className="controls">
-            My Application!
+            <button onClick={this.getMessage}> click me!</button>
           </div>
         );
       }