You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.7 KiB
70 lines
1.7 KiB
3 years ago
|
import React, { useState, useRef, useMemo } from "react";
|
||
|
import {
|
||
|
MapContainer,
|
||
|
TileLayer,
|
||
|
FeatureGroup,
|
||
|
Rectangle,
|
||
|
useMap,
|
||
|
LayerGroup,
|
||
|
ZoomControl,
|
||
|
ScaleControl,
|
||
|
} from "react-leaflet";
|
||
|
import "leaflet/dist/leaflet.css";
|
||
|
import "leaflet-draw/dist/leaflet.draw.css";
|
||
|
import { EditControl } from "react-leaflet-draw";
|
||
|
import "leaflet-draw";
|
||
|
import "./index.scss";
|
||
|
import grid from "../../assets/images/grid.png";
|
||
|
const outerBounds = [
|
||
|
[50.505, -29.09],
|
||
|
[52.505, 29.09],
|
||
|
];
|
||
|
|
||
|
const LeafletMap = () => {
|
||
|
const leafEl = useRef(null);
|
||
|
const onCreated = (e) => {
|
||
|
const drawnItems = leafEl.current._layers;
|
||
|
console.log({ drawnItems });
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<MapContainer
|
||
|
center={[49.505, -2.09]}
|
||
|
zoom={24}
|
||
|
maxZoom={24}
|
||
|
maxNativeZoom={22}
|
||
|
style={{ height: "100vh" }}
|
||
|
zoomControl={false}
|
||
|
bounds={outerBounds}
|
||
|
>
|
||
|
<TileLayer
|
||
|
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||
|
url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
|
||
|
apikey="db5ae1f5778a448ca662554581f283c5"
|
||
|
maxZoom={24}
|
||
|
maxNativeZoom={22}
|
||
|
opacity={0.8}
|
||
|
/>
|
||
|
<TileLayer
|
||
|
url={grid}
|
||
|
apikey="db5ae1f5778a448ca662554581f283c5"
|
||
|
maxZoom={24}
|
||
|
maxNativeZoom={24}
|
||
|
opacity={0.5}
|
||
|
/>
|
||
|
<FeatureGroup ref={leafEl}>
|
||
|
<EditControl
|
||
|
position="topright"
|
||
|
onCreated={onCreated}
|
||
|
allowIntersection={false}
|
||
|
/>
|
||
|
</FeatureGroup>
|
||
|
<LayerGroup></LayerGroup>
|
||
|
<ScaleControl position="topleft" />
|
||
|
<ZoomControl position="topleft" />
|
||
|
</MapContainer>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default LeafletMap;
|