168 lines
4.1 KiB
JavaScript
168 lines
4.1 KiB
JavaScript
|
|
// import { useMapEvents } from 'react-leaflet/hooks'
|
|
import React, { Component } from "react";
|
|
import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet'
|
|
import { friend,Hostile, iconShip,createIcon } from "./icon";
|
|
import "./OpenSeaMap.scss";
|
|
import {w3cwebsocket as W3CWebSocket} from "websocket";
|
|
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 })
|
|
}
|
|
|
|
componentWillMount() {
|
|
this.updateDimensions()
|
|
}
|
|
|
|
componentDidMount() {
|
|
window.addEventListener("resize", this.updateDimensions.bind(this))
|
|
|
|
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.removeEventListener("resize", this.updateDimensions.bind(this))
|
|
}
|
|
|
|
|
|
handleClick(e)
|
|
{
|
|
// console.log(e.target)
|
|
// this.setState({ currentPos: e.latlng });
|
|
console.log(e.latlng);
|
|
|
|
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}
|
|
|
|
eventHandlers={{
|
|
click: (e) => {
|
|
// console.log(e.target.options.data); // will print 'FooBar' in console
|
|
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,
|
|
is a town in the Nigerian state of Kwara.
|
|
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>
|
|
);
|
|
}
|
|
|
|
setPos(props)
|
|
{
|
|
console.log(props);
|
|
|
|
this.props.setFocusPosition([1,2])
|
|
}
|
|
|
|
render() {
|
|
const LocationFinderDummy = (props) => {
|
|
const map = useMapEvents({
|
|
click(e) {
|
|
|
|
props.props.setFocusPosition(e.latlng)
|
|
// console.log(e.latlng);
|
|
},
|
|
});
|
|
return null;
|
|
};
|
|
// const positions = this.props.Positions.map((pos, index) => (
|
|
// <Marker name={"test"} key={index} position={pos.position} icon= {ship} />
|
|
// ));
|
|
|
|
return (
|
|
<div className='map' style={{ height: this.state.height }} >
|
|
<MapContainer MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true}>
|
|
<LocationFinderDummy props ={this.props} />
|
|
|
|
<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.Entities.map((pos, index) => (
|
|
this.makeIcon(index,pos)
|
|
))}
|
|
</MapContainer>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default OpenSeaMap;
|