ADD: added APP-6 Symbols to the Map

2023-09-05 18:46:34 +02:00
parent 6d2a1d7556
commit 658830bab6
221 changed files with 73498 additions and 21 deletions
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -1,24 +1,76 @@
-import logo from './logo.svg';
-import './App.css';
-import Controls from './control/controls.js'
-import Mapframe from './map/mapframe';
+// App.js
+import React, { Component } from "react";
+import "./App.css";
+import { connect, sendMsg } from "./components/api/index";
+import Header from './components/Header';
+import Controls from "./components/control/controls";
+// import ChatHistory from "./components/ChatHistory/ChatHistory.jsx";

-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        Test App
-      </header>
-      <div className="MainFrame">
+import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";
+
+
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: " ",
+      History: [],
+      Position: [
+            { id: 1, name: "Apple", position: [51.505, -0.10],Type: "Friend" },
+            { id: 2, name: "Oranges", position: [51.505, -0.11],Type: "Hostile"},
+            { id: 3, name: "Grapes", position: [51.505, -0.12],Type: "Friend"}
+          ],
+    
+        
+    }
+  }
+  componentDidMount() {
+    
+
+
+
+      connect((msg) => {
+          console.log("New Message")
+          console.log(msg)
+      
+      this.setState(prevState => ({
+        chatHistory: [...this.state.History, msg]
+         
+      }))
+  
+      console.log(this.state);
+    });
+  }
+  // send() {
+    //   console.log("hello");
+    //   // sendMsg("hello world");
+    // }
+
+    handleCallback = (ChildData) => {
+      this.setState({name: ChildData})
+      console.log(ChildData);
+    }
+    
+    render() {
+    const {name} = this.state;
+    return (
+      <div className="App">
+        <Header />
        <Controls />
-      <Mapframe />
+        {/* <ChatHistory History={this.state.History} /> */}
+        <div>
+        {name}

+        </div>
+        <OpenSeaMap Positions= {this.state.Position} parentCallback = {this.handleCallback}/>
+        
+
+        <button onClick={this.send}>Hit</button>
+      
      </div>
-    <div>
-
-    </div>
-    </div>
-  );
+    );
+  }
 }

 export default App;
--- a/webapp/src/components/Header/header.jsx
+++ b/webapp/src/components/Header/header.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import "./header.scss";
+
+const Header = () => (
+  <div className="header">
+    <h2>Cloud Simulator</h2>
+  </div>
+);
+
+export default Header;
--- a/webapp/src/components/Header/header.scss
+++ b/webapp/src/components/Header/header.scss
@@ -0,0 +1,10 @@
+.header
+{
+    background-color: #282c34;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+
+}
--- a/webapp/src/components/Header/index.js
+++ b/webapp/src/components/Header/index.js
@@ -0,0 +1,3 @@
+import Header from "./header.jsx";
+
+export default Header;
--- a/webapp/src/components/OpenSeaMap/Index.js
+++ b/webapp/src/components/OpenSeaMap/Index.js
@@ -0,0 +1,3 @@
+import OpenSeaMap from "./OpenSeaMap.jsx.js";
+
+export default OpenSeaMap;
--- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
+++ b/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;
--- a/webapp/src/components/OpenSeaMap/OpenSeaMap.scss
+++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.scss
@@ -0,0 +1,20 @@
+@import 'leaflet/dist/leaflet.css';
+
+// @import url('https://unpkg.com/leaflet@1.5.1/dist/leaflet.css');
+.leaflet-container {
+  width: 100%;
+  height: 100%;
+}
+
+
+.container {
+  padding-top: 1%;
+  height: 800px;
+  width: 79%;
+  padding-left: 20%;
+}
+
+// .leaflet-marker-icon{
+//   background: red;
+
+// }
--- a/webapp/src/components/OpenSeaMap/Tracking_ship_icon_black.svg:Zone.Identifier
+++ b/webapp/src/components/OpenSeaMap/Tracking_ship_icon_black.svg:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://commons.wikimedia.org/
+HostUrl=https://upload.wikimedia.org/wikipedia/commons/a/a9/Tracking_ship_icon_black.svg?download
--- a/webapp/src/components/OpenSeaMap/icon.jsx
+++ b/webapp/src/components/OpenSeaMap/icon.jsx
@@ -0,0 +1,53 @@
+import {L, Icon} from 'leaflet';
+import ms from 'milsymbol'
+
+const iconShip = new Icon({
+  iconUrl: "./ship.svg",
+  iconSize: [50, 50],
+  // iconAnchor: [40, 90],
+  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
+};
+
+var Friend = new ms.Symbol(
+  "SFP---------", {
+    uniqueDesignation: "Friend"
+  })
+// Now that we have a symbol we can ask for the echelon and set the symbol size
+Friend = Friend.setOptions({ size: 25 });
+
+const friend = new Icon({
+  iconUrl: Friend.toDataURL(),
+  iconAnchor: [Friend.getAnchor().x, Friend.getAnchor().y],
+});
+
+
+var hostile = new ms.Symbol(
+  "SHP---------", {
+    uniqueDesignation: "Hostile"
+  })
+// Now that we have a symbol we can ask for the echelon and set the symbol size
+hostile = hostile.setOptions({ size: 25 });
+
+const Hostile = new Icon({
+  iconUrl: hostile.toDataURL(),
+  iconAnchor: [hostile.getAnchor().x, hostile.getAnchor().y],
+});
+
+export { iconShip, friend,Hostile };
--- a/webapp/src/components/OpenSeaMap/ship.png
+++ b/webapp/src/components/OpenSeaMap/ship.png
--- a/webapp/src/components/OpenSeaMap/ship.png:Zone.Identifier
+++ b/webapp/src/components/OpenSeaMap/ship.png:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.flaticon.com/free-icon/ship_3448634
+HostUrl=https://www.flaticon.com/download/icon/3448634?icon_id=3448634&author=379&team=379&keyword=Ship&pack=3448265&style=1&style_id=987&format=png&color=%23000000&colored=1&size=512&selection=1&type=standard&token=03ADUVZwBctycA8emgby0jBjQLKduJUHfGTjmMMzpPkRQbP8zoYPR2WJgIaUpw7HOWhv8JK_sOPYaGiTYqwRBEdqPo2cwWXBld-uq0kcDVyLyhHtb-SQKDmMSFAJUo9IUOx1QVS310h7S9s8-Eok6qFFP5JhptpXj8kOfO-izuBcA8polJlhnR38wMssVmWYYUPOnGDrJjI1wN5JjHBJlYwqhnR82nuWnBEglLJdFLNBQWDOnHngPyTP4GSmReya_uE-jHzLIDTOGlCIcLhgu6ckSqGxZ9aQLt3taBnbY1glKNeRmwc6dhvxamOYodPZ86Vl7qft0NnqNWlzOz90tb2C6Jsw7PXtCercaUo-VLE2cXJi4RP-vnv7a43ddncVky_76V43_pVdmixF8vaqiA0uOrFUTmRrEVXBNT7AiT8Sqr0d5VlCdiYu4q13vgAn1yqQswfFxC2q2c9LgJZ90Vms4MynytbSgFg_BRTwnyJ57XFuMz_WhInOKgedHLE3EsLCnLK9XNOKUji3ZBFtPX-A92ZBC6MemdyC7f0P8s4FLXaXA_QMbNRj7b6m9Zfl9OtcfgWJWoynVovAvroZsmJjuPdT0CfizwyL7j0wOQDoY0Bs_MS4kNBAXkn1smp1zQCNKvhQENfiysjlR_GJf3kDHshw_45jl0XSH6C_5oKRpOX4MHNlWbW9rOjGW5BdC7bihn9BzqngBiAzyM-MymODvmxyObhPdgjVEn2WxIaDvF4NBo_-HXv2DAEnDLSVhANlvzYUbd5AhSz2JpFRv7kUfvkqPeoDfFJ48jCbtOjTdEJ0IEsYoYyKSHg5nJy0qDkZ4Vjlavpq1l4KOgoVgD1zCAVf528-8oKyPkE3lut4g6sc6Rv2lDSW7u86hAu4ZBf39Izz7Bpi13TcM7w05Zi2vKV9HRLpkDpC-yBgh2XeXBfLa3DJXaSZXviBvNZ5I90dUqFalBhWueDlmOC1LG0rzJyHHRx9sAAztlU8DlbLl_KZ2KlfiNprnvpAV9Crr3aeVq1n1hBCgWgnC9tcex3qJqVzWf0bL5N2vQRgsJkKdwuSsQSqT_sOjPI0tf1M5K7iMVubl6fiKvEFmTtt5NCAoZ55s7XdYydMSccy56Gat0NzL6TtfMM06ghrWJAwrv6xwbs1l5opsxUVQB9vOOaXpZ8qSVgj1-YX-wWQwMKctKzWueNAMGcfu51luMwL6OitLe8VKH1zZzU6MvR3VO-gtBrml1FLLgkZx-Cf3LjzsVCIdJyc5IN5pm2l8vSS-Try8sC0Fn7REMGh8B5uIOHp3f-TZJUWaDPCXw2r4MyaA2BDL_HIz3P7S1clyWl_6YXVBbxSHMweLJXGVFRAtUQ4MtJM6sBzivhjBCOXZlBImD37m5P7Q-0d2qODuEucXKGwbJs6_4ddZG415NwKmZlNYbEkckAOhzT-EAhe7XQA2h12zHJQAU3_FHelt3kacqKXumy8c4KeIw-9iwvORa9XcsQ_LV4DeRVylQyunDNjjiBILhc9cTDnXeU67IQXZeclU6gtjhy6Su
--- a/webapp/src/components/OpenSeaMap/ship.svg
+++ b/webapp/src/components/OpenSeaMap/ship.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100" height="80" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <path d="m74.13 7.4c-1.3241-1.293-3.189-1.598-4.7701-0.92436-0.2952 0.12575-0.4325 0.46699-0.30666 0.76216 0.12569 0.29516 0.4669 0.43248 0.76211 0.30671 1.1531-0.4913 2.5174-0.27575 3.5031 0.68677 0.99002 0.96685 1.3113 2.4232 0.92247 3.7036-0.0933 0.30698 0.0799 0.63143 0.38705 0.72465 0.30696 0.0931 0.63143-0.0801 0.72463-0.38708 0.50682-1.6691 0.0973-3.5838-1.2225-4.8725zm-13.509 7.8154 4.4536 3.4178 3.7152-4.8698c-0.1424-0.1262-0.27254-0.26849-0.38745-0.42553zm5.5234 4.2389 4.4767 3.4355-0.25881-8.4572c-0.11753-9e-3 -0.23371-0.0261-0.34822-0.0506zm7.1255-15.501c1.3106 0.45797 2.5683 1.3139 3.4971 2.3724 1.9137 2.1809 1.8881 4.6062 1.1961 7.2722-0.0805 0.31054-0.39771 0.49693-0.7083 0.41631-0.31059-0.0805-0.49697-0.39771-0.41633-0.70825 0.65004-2.504 0.59907-4.4546-0.94472-6.214-0.8-0.91166-1.8902-1.6516-3.0072-2.0419-1.1225-0.39222-2.2027-0.41021-3.0404 6e-3 -0.28713 0.1431-0.63587 0.0263-0.77897-0.26087-0.1431-0.28718-0.0263-0.63596 0.26082-0.77903 1.2097-0.60274 2.6366-0.52002 3.9418-0.0639zm-0.19095 6.7834c0.54092 1.3422-0.0761 2.8502-1.3749 3.4517l0.29871 9.7613 2.6557 2.038c0.5872 0.45057 0.70145 1.2904 0.25599 1.8815-0.40378 0.53582-1.1294 0.68483-1.7035 0.38286-1.8259 1.9737-4.0896 3.352-6.6633 3.7105-1.6645 0.23183-3.3879 0.0271-5.1239-0.64612l-1.0781 1.4519 6.3813 5.3736c0.60379 0.50845 1.0467 1.1683 1.2917 1.9004h0.0935c0.82373 0 1.4881 0.60204 1.4749 1.3486 0 0.74661-0.66449 1.3486-1.4882 1.3486h-19.95c-0.82379 0-1.4882-0.60202-1.4882-1.3486 0-0.70048 0.58495-1.2738 1.3486-1.3419v-7.3378c0-2.6547 2.152-4.8067 4.8068-4.8067 0.46988 0 0.93354 0.0688 1.3771 0.20147l1.0592-1.397c-1.1644-1.5066-1.8455-3.1337-2.0668-4.829-0.34133-2.615 0.43576-5.2038 1.8898-7.5304-0.49183-0.46604-0.56494-1.2365-0.14821-1.7894 0.45099-0.59852 1.3035-0.71452 1.8981-0.25827l2.4205 1.8576 8.6523-2.0876c-0.14875-1.1896 0.51856-2.3761 1.6768-2.8356 1.3778-0.54649 2.9461 0.11501 3.5043 1.5004z"/>
+  <path d="m2.9856 72.588 2.5164 1.5758 2.699 1.1641 2.8626 0.75518 4.4166 0.32716 4.3757-0.6734 3.476-1.145 3.1516-2.0256 2.5164 1.5758 4.1303 1.614 5.8697 0.65431 4.3757-0.65431 4.1303-1.614 2.5164-1.5758 3.8441 2.2083 4.2339 1.3086 4.4166 0.32716 4.373-0.65431 4.1331-1.614 2.5164-1.5758 4.4357 2.7072 5.1145 1.0142 2.9662 0.12268 4.3757-0.65431 4.1303-1.614 2.5136-1.5758v-3.8223l-2.5136 1.5567-2.7208 1.1832-4.313 0.95966h-4.4384l-3.7514-0.57525-3.2825-1.5676-2.5164-1.5567-3.8441 2.1865-3.6369 1.2786-2.0693 0.23446h-4.4384l-4.3157-0.95966-3.3043-1.4886-1.9084-1.2514-3.8468 2.1865-2.7999 0.98147-2.9035 0.53163h-4.4384l-4.3157-0.95966-2.7181-1.1832-2.5164-1.5567-3.8441 2.1865-4.2339 1.3086-1.4531 0.20447-4.4357 0.02181-4.3157-0.98147-2.699-1.1669-2.5164-1.554v3.825"/>
+  <path d="m14.153 68.722-11.23-17.257h17.241l1.9602-3.825h7.7318l2.2301-3.825h-8.018l3.705-7.2792h8.5251l9.1631-15.785h1.9629l-1.2868 3.9259h3.2279v2.6827h-4.1085l-3.0262 9.2585 3.2307 3.3561h23.989l5.5398-9.5475h7.8327v9.5475h4.3757l2.0665 3.8414h-49.365l-1.2677 3.825h52.718l2.0665 3.825h3.6587v13.435l-2.5136 1.554-4.1303 1.614-4.3757 0.65431-4.4221-0.32716-2.8599-0.75518-2.7181-1.1859-2.5164-1.554-3.8441 2.1865-4.2339 1.3086-2.9444 0.32716-4.4166-0.32716-4.2339-1.3086-3.8441-2.1865-3.8468 2.1865-4.2312 1.3086-4.4166 0.32716-4.3975-0.65431-4.1303-1.614-2.5164-1.554-3.7841 2.1674-4.1903 1.3086-1.4313 0.22356-2.9253 0.12268"/>
+ </g>
+</svg>
--- a/webapp/src/components/api/index.js
+++ b/webapp/src/components/api/index.js
@@ -0,0 +1,30 @@
+// api/index.js
+var socket = new WebSocket("ws://localhost:8008/");
+
+let connect = cb => {
+  console.log("connecting");
+
+  socket.onopen = () => {
+    console.log("Successfully Connected");
+  };
+
+  socket.onmessage = msg => {
+    cb(msg);
+  };
+
+  socket.onclose = event => {
+    console.log("Socket Closed Connection: ", event);
+  };
+
+  socket.onerror = error => {
+    console.log("Socket Error: ", error);
+  };
+};
+
+
+let sendMsg = msg => {
+  console.log("sending msg: ", msg);
+  socket.send(msg);
+};
+
+export { connect, sendMsg };
--- a/webapp/src/components/control/controls.css
+++ b/webapp/src/components/control/controls.css
--- a/webapp/src/components/control/controls.jsx
+++ b/webapp/src/components/control/controls.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import './controls.css'

-class controls extends React.Component
+class Controls extends React.Component
 {
    render() {
        return (
-          <div class="controls">
+          <div className="controls">
            My Application!
          </div>
        );
@@ -13,4 +13,4 @@ class controls extends React.Component

 }

-export default controls;
+export default Controls;
--- a/webapp/src/components/map/mapframe.css
+++ b/webapp/src/components/map/mapframe.css
--- a/webapp/src/components/map/mapframe.js
+++ b/webapp/src/components/map/mapframe.js
@@ -5,7 +5,7 @@ class Mapframe  extends React.Component
 {
    render() {
        return (
-          <div class="map">
+          <div className="map">
            this is the map frame
          </div>
        );
--- a/webapp/src/websocket.js
+++ b/webapp/src/websocket.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import useWebSocket from 'react-use-websocket';
+
+class Websocketclient extends React.Component
+{
+    ws = new WebSocket("ws://127.0.0.1:8008");
+    constructor(props) {
+        
+        super(props);
+        
+        this.state = {
+          val: null,
+        };
+      }
+
+      sendMessage(msg )
+      {
+        this.ws.send(msg);
+
+      }
+      componentDidMount() {
+        this.ws.onopen = () => {
+          console.log("opened");
+          this.ws.send("test"); // message to send on Websocket ready
+        };
+    
+        this.ws.onclose = () => {
+          console.log("closed");
+        };
+    
+        this.ws.onmessage = (event) => {
+          console.log("got message", event.data);
+          this.setState({ val: event.data });
+        };
+      }
+    
+      componentWillUnmount() {
+    }
+    
+    close()
+    {    
+        console.log("closing websocket...");
+        this.ws.close();
+    }
+    
+      render() {
+        return <div>Value: {this.state.val}</div>;
+      }
+}
+
+export default Websocketclient;