|
|
|
// it has style inside index.scss ---> // Start LeafletMap && end LeafletMap
|
|
|
|
|
|
|
|
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;
|