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: placeholder, tooltip: { start: "با کلیک بر روی نقشه یک مارکر رسم کنید.", }, }, polygon: { tooltip: { start: "یک شکل رسم کنید.", cont: "ادامه رسم شکل.", end: "برای پایان رسم بر روی اولین نقظه کلیک کنید.", }, }, polyline: { error: "<strong>Error:</strong> 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: `<div style = 'transform: scale(${Math.pow(2, zoom - 23)})' class='origin-top-left w-20 h-40 bg-white rounded text-center flex flex-col p-2 justify-between transition-all delay-200'> <p class='h-4 rounded bg-gray-300'> </p> <p>${val || 0}</p> </div>`, }); 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 ( <div style={{ direction: "ltr" }}> <MapContainer whenCreated={(mapInstance) => { 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} > {/* <MyComponent setZoom={setZoom} /> */} <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} /> <Marker icon={icon(50, zoom)} position={[49.505, -2.09]}> {/* <Marker position={[49.505, -2.09]} icon={MyCustomMarker2()}> */} <Popup>{bedNumb}</Popup> </Marker> <FeatureGroup ref={leafEl}> <EditControl draw={{ polyline: { shapeOptions: { color: "#f357a1", weight: 1, }, }, polygon: { allowIntersection: false, // Restricts shapes to simple polygons drawError: { color: "#e1e100", // Color the shape will turn when intersects message: "<strong>Oh snap!<strong> 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} /> </FeatureGroup> <LayerGroup></LayerGroup> <ScaleControl position="topleft" /> <ZoomControl position="topleft" /> </MapContainer> </div> ); }; export default LeafletMap;