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

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='&copy; <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;