ADD: current dev version simple entity control input

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -7,15 +7,7 @@ import "./OpenSeaMap.scss";
 import {w3cwebsocket as W3CWebSocket} from "websocket";
 import ContainerDimensions  from 'react-container-dimensions';
 
-// const config = {
-//   // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
-//   apiUrl: "10.110.242.105",
-//   apiProt: 9999
-// }
 
-// const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
-
-// import icon from 'leaflet/dist/images/marker-icon.png';
 class OpenSeaMap extends Component {
 
   
@@ -50,11 +42,11 @@ class OpenSeaMap extends Component {
     var icon;
     icon = createIcon(entity.Type,entity.Side)
     return (
-      <Marker name={entity.Name} key={index} icon={icon} position={entity.position} data={entity.id}
+      <Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
       
       eventHandlers={{
         click: (e) => {
-          console.log(e.target.options.data);  // will print 'FooBar' in console
+          // console.log(e.target.options.data);  // will print 'FooBar' in console
           this.props.setEntityOnFocus(e.target.options.data);
         },
       }}  >
@@ -77,7 +69,7 @@ class OpenSeaMap extends Component {
 
     return (
       <div className='map' style={{ height: this.state.height }} >
-       <MapContainer MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
+       <MapContainer MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true}>
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
         <TileLayer

webapp/src/components/OpenSeaMap/OpenSeaMap.scss

@@ -11,9 +11,9 @@
   // display: flex;
   padding-top: 10px;
   // height: 750px;
-  width: 79%;
+  width: 78.5%;
   // padding-left: 20%;
-  float: left;
+  display: inline-flex;
   // height: 80%;
 }