52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
|
||
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
|
||
import L from 'leaflet';
|
||
import './App.css'
|
||
import { useCallback, useState } from 'react';
|
||
|
||
|
||
function App() {
|
||
const [coords, setCoords] = useState([0, 0])
|
||
const [nextLabel, setNextLabel] = useState("Clicked Marker")
|
||
const [markers, setMarkers] = useState([
|
||
{label: "Spawn", x:0, y: 0}
|
||
])
|
||
|
||
let map = useCallback((it : L.Map|null) => {
|
||
if (it == null) return;
|
||
it.on('mousemove', (e) => {setCoords([Math.round(e.latlng.lat), Math.round(e.latlng.lng)])})
|
||
it.on('click', (e) => {setMarkers([...markers, {label: nextLabel, x: e.latlng.lng, y: e.latlng.lat}])})
|
||
}, [markers, nextLabel]);
|
||
return (
|
||
<>
|
||
<MapContainer id="map"
|
||
center={[0, 0]}
|
||
maxBounds={[[-8000,-8000],[8000,8000]]}
|
||
crs={L.CRS.Simple}
|
||
zoom={-4}
|
||
ref={map}
|
||
>
|
||
<TileLayer
|
||
url="/tiles/{z}/{x}_{y}.png"
|
||
tileSize={512}
|
||
minZoom={-4}
|
||
maxNativeZoom={-1}
|
||
/>
|
||
{/* COORDS ARE Minecraft’s [-y, x] */}
|
||
{
|
||
markers.map((it, i) =>
|
||
(<Marker key={i} position={[it.y, it.x]}>
|
||
<Popup>
|
||
{it.label}
|
||
</Popup>
|
||
</Marker>))
|
||
}
|
||
</MapContainer>
|
||
<p>Mouse is at {coords[1]}, {-coords[0]}</p>
|
||
<input id="label" type="text" onChange={(e) => setNextLabel(e.target.value)} value={nextLabel}/>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default App
|