ADD: added possibility to drag marker and get the new position for updating a entity

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -1,7 +1,7 @@
 
 // import { useMapEvents } from 'react-leaflet/hooks'
 import React, { Component } from "react";
-import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
+import { MapContainer, TileLayer,Marker, Popup, Tooltip } from 'react-leaflet'
 import { friend,Hostile, iconShip,createIcon } from "./icon";
 import "./OpenSeaMap.scss";
 import {w3cwebsocket as W3CWebSocket} from "websocket";
@@ -10,7 +10,9 @@ import ContainerDimensions  from 'react-container-dimensions';
 
 class OpenSeaMap extends Component {
 
-  
+  state =  {
+    EntityOnFocus: undefined
+  } 
   updateDimensions() {
     const height = window.innerWidth >= 992 ? window.innerHeight : 400
     this.setState({ height: height })
@@ -37,19 +39,68 @@ class OpenSeaMap extends Component {
     console.log("hello world");
   }
 
+  // MarkerEventHandler = useMemo(
+  //   (e) => ({
+  //     dragend() {
+  //       // const marker = markerRef.current
+  //       // if (marker != null) {
+  //       //   // setPosition(marker.getLatLng())
+  //       // }
+  //       console.log(e)
+  //     },
+  //     click: (e) =>
+  //     {
+  //       this.props.setEntityOnFocus(e.target.options.data);
+
+  //     }
+  //   }),
+  //   [],
+
+  //  )
+
   makeIcon(index, entity)
   {
     var icon;
     icon = createIcon(entity.Type,entity.Side)
     return (
       <Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
-      draggable={true}
+      draggable={true} 
+      
       eventHandlers={{
         click: (e) => {
           // console.log(e.target.options.data);  // will print 'FooBar' in console
-          this.props.setEntityOnFocus(e.target.options.data);
+          var Ent = {
+            Name :  e.target.options.data,
+            NewPos : undefined
+
+          }
+          this.setState((state) =>({
+            EntityOnFocus: e.target.options.data
+          }))
+          this.props.setEntityOnFocus(Ent);
+
+          // this.props.setEntityOnFocus(e.target.options.data);
         },
-      }}  >
+        dragend: (e) =>
+        { 
+          var Ent = {
+            Name :  e.target.options.data,
+            NewPos : [e.target._latlng.lat,e.target._latlng.lng]
+
+          }
+          this.setState((state) =>({
+            EntityOnFocus: e.target.options.data
+          }))
+          this.props.setEntityOnFocus(Ent);
+
+          // console.log(e.target);
+
+          // console.log(e.target._latlng);
+
+        }
+      }} 
+      // eventHandlers={this.MarkerEventHandler}
+       >
 
       {/* <Popup>
       Omu-Aran the Head Post of Igbomina land, 
@@ -57,8 +108,10 @@ class OpenSeaMap extends Component {
       It originated from Ife and currently the local
       government headquarters of Irepodun local government.
     </Popup> */}
+      <Tooltip direction='bottom' offset={[0,13]} opacity={1} permanent>
+                       <span>{entity.Name}</span>
+                </Tooltip>
     </Marker>
-
     );
   }