import React, { useState, useRef, useMemo } from "react";
import {
MapContainer,
TileLayer,
FeatureGroup,
Rectangle,
useMap,
Popup,
Marker,
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";
import placeholder from "./placeholder.png";
import * as L from "leaflet";
const bedNumb = "تخت شماره 33";
const pinMB = L.icon({
iconUrl: placeholder,
iconSize: [24, 41],
iconAnchor: [0, 44],
popupAnchor: [12, -40],
shadowUrl: null,
shadowSize: null,
shadowAnchor: null,
});
const MyCustomMarker = L.icon({
iconUrl: placeholder,
iconSize: [24, 41],
iconAnchor: [0, 44],
popupAnchor: [12, -40],
shadowUrl: null,
shadowSize: null,
shadowAnchor: null,
});
L.drawLocal = {
draw: {
toolbar: {
actions: {
title: "لغو کردن رسم",
text: "لغو",
},
finish: {
title: "پایان رسم",
text: "پایان رسم",
},
undo: {
title: "پاک کردن آخرین نقطه رسم شده",
text: "پاک کردن آخرین نقطه رسم شده",
},
buttons: {
polyline: "موکب مورد نظر خود را رسم نمایید",
polygon: "رسم پولیگان",
rectangle: "رسم جای خواب",
circle: "رسم دایره",
marker: "رسم مارکر",
circlemarker: "رسم دایره مارکر",
},
},
handlers: {
circle: {
tooltip: {
start: "کلیک کنید و سپس درگ کنید تا یک دایره بکشید.",
},
radius: "ردیوس",
},
circlemarker: {
tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
},
},
marker: {
icon: MyCustomMarker,
tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
},
},
polygon: {
tooltip: {
start: "یک شکل رسم کنید.",
cont: "ادامه رسم شکل.",
end: "برای پایان رسم بر روی اولین نقظه کلیک کنید.",
},
},
polyline: {
error: "Error: shape edges cannot cross!",
tooltip: {
start: "با کلیک کردن یک خط رسم کنید.",
cont: "با کلیک به رسم خود ادامه دهید.",
end: "برای پایان رسم بر روی آخرین نقظ رسم شده کلیک کنید.",
},
},
rectangle: {
tooltip: {
start: "با کلیک و درگ کردن یک جای خواب رسم کنید.",
},
},
simpleshape: {
tooltip: {
end: "ماوس را رها کنید تا رسم تمام شود.",
},
},
},
},
edit: {
toolbar: {
actions: {
save: {
title: "ذخیره تنظیمات",
text: "ذخیره",
},
cancel: {
title: "لغو کردن، ویرایش تمام تغییرات نادیده گرفته خواهند شد",
text: "لغو",
},
clearAll: {
title: "پاک کردن تمام لایه ها",
text: "پاک کردن لایه ها",
},
},
buttons: {
edit: "ویرایش لایه ها",
editDisabled: "لایه ای برای ویرایش وجود ندارد",
remove: "پاک کردن لایه ها",
removeDisabled: "لایه ای برای پاک کردن وجود ندارد",
},
},
handlers: {
edit: {
tooltip: {
text: "Drag handles or markers to edit features.",
subtext: "با کلیک بر روی لغو تغییرات اعمال نخواهند شد.",
},
},
remove: {
tooltip: {
text: "Click on a feature to remove.",
},
},
},
},
};
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 });
};
const location = [38.9072, -77.0369];
return (
{bedNumb}
);
};
export default LeafletMap;