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>