// it has style inside index.scss ---> // Start LeafletMap && end LeafletMap import React, { useState, useRef, useMemo, placeholder } 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 * 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: placeholder, 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 icon = (val, zoom) => L.divIcon({ className: "my-div-icon", html: `
${val || 0}