ADD: added APP-6 Symbols to the Map

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -0,0 +1,75 @@
+
+// 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 "./OpenSeaMap.scss"
+
+
+// import icon from 'leaflet/dist/images/marker-icon.png';
+class OpenSeaMap extends Component {
+ 
+
+  makeIcon(index, entity)
+  {
+    var icon;
+    switch (entity.Type)
+    {
+      case "Friend":
+        icon = friend;
+      break;
+      case "Hostile":
+        icon = Hostile;
+      break;
+      default:
+        
+      break;
+    }
+    return (
+      <Marker name={"test"} key={index} icon={icon} position={entity.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>
+
+    );
+  }
+
+  render() {
+    // const positions = this.props.Positions.map((pos, index) => (
+    //   <Marker name={"test"} key={index} position={pos.position} icon= {ship} />
+    // ));
+
+    return (
+      <div className='container' >
+       <MapContainer MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        <TileLayer
+          url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />    
+          {/* {positions} */}
+          {this.props.Positions.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>
+    );
+  }
+}
+
+
+
+
+
+export default OpenSeaMap;