Files
CloudSimWebApp/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
2023-09-19 14:14:50 +02:00

78 lines
1.9 KiB
JavaScript

// import { useMapEvents } from 'react-leaflet/hooks'
import React, { Component } from "react";
import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
import { friend,Hostile, iconShip,createIcon } from "./icon";
import "./OpenSeaMap.scss"
import { sendMsg } from '../api';
// import icon from 'leaflet/dist/images/marker-icon.png';
class OpenSeaMap extends Component {
componentDidMount() {
// setInterval(() => this.setState({ time: Date.now()}), 1000)
setInterval(() => this.props.parentCallback(), 3000)
}
handleClick(e)
{
// console.log(e.target)
console.log("hello world");
}
makeIcon(index, entity)
{
var icon;
icon = createIcon(entity.Type,entity.Side)
return (
<Marker name={entity.Name} key={index} icon={icon} position={entity.position}
eventHandlers={{
click: (e) => {
console.log(e.target.options.name); // will print 'FooBar' in console
},
}} >
{/* <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='map' >
<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.Entities.map((pos, index) => (
this.makeIcon(index,pos)
))}
</MapContainer>
</div>
);
}
}
export default OpenSeaMap;