// 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}

`, }); function MyComponent({ setZoom }) { const map = useMap(); return null; } const LeafletMap = () => { // const map = const [zoom, setZoom] = useState(22); const outerBounds = [ [50.505, -29.09], [52.505, 29.09], ]; const leafEl = useRef(null); const mapRef = useRef(null); const onCreated = () => { console.log({ next, add }); add(Math.floor(Math.random() * 10)); // const drawnItems = leafEl.current._layers; // console.log({ drawnItems }); }; const [next, add] = useState(1); const location = [38.9072, -77.0369]; console.log({ mapRef }); if (mapRef.current) { console.log(mapRef.current); } return (
{ mapInstance.on("zoomend", function () { console.log(mapRef.current); setZoom(mapRef.current._zoom); }); mapRef.current = mapInstance; }} center={[49.505, -2.09]} zoom={zoom} maxZoom={24} minZoom={18} maxNativeZoom={22} style={{ height: "100vh" }} zoomControl={false} bounds={outerBounds} > {/* */} {/* */} {bedNumb} Oh snap! you can't draw that!", // Message that will show when intersect }, shapeOptions: { color: "#bada55", }, }, circle: false, // Turns off this drawing tool rectangle: { shapeOptions: { clickable: false, }, }, marker: { icon: icon(next, zoom), }, }} position="topright" count={next} onCreated={(e) => { console.log({ next, e }); onCreated(next); }} allowIntersection={false} />
); }; export default LeafletMap; LeafletMap.defaultProps = { placeholder: "images/LeafletMapplaceholder.png", };