You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

287 lines
7.9 KiB

3 years ago
// it has style inside index.scss ---> // Start LeafletMap && end LeafletMap
import React, { useState, useRef, useMemo, placeholder } from "react";
3 years ago
3 years ago
import {
MapContainer,
TileLayer,
FeatureGroup,
Rectangle,
useMap,
Popup,
Marker,
3 years ago
LayerGroup,
ZoomControl,
ScaleControl,
} from "react-leaflet";
3 years ago
3 years ago
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
3 years ago
3 years ago
import { EditControl } from "react-leaflet-draw";
3 years ago
3 years ago
import "leaflet-draw";
import "./index.scss";
3 years ago
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,
// });
3 years ago
L.drawLocal = {
draw: {
toolbar: {
actions: {
title: "لغو کردن رسم",
text: "لغو",
3 years ago
},
finish: {
title: "پایان رسم",
text: "پایان رسم",
},
undo: {
title: "پاک کردن آخرین نقطه رسم شده",
text: "پاک کردن آخرین نقطه رسم شده",
},
buttons: {
polyline: "موکب مورد نظر خود را رسم نمایید",
polygon: "رسم پولیگان",
rectangle: "رسم جای خواب",
circle: "رسم دایره",
marker: "رسم مارکر",
circlemarker: "رسم دایره مارکر",
},
},
handlers: {
circle: {
tooltip: {
start: "کلیک کنید و سپس درگ کنید تا یک دایره بکشید.",
},
radius: "ردیوس",
},
circlemarker: {
tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
3 years ago
},
},
marker: {
icon: placeholder,
3 years ago
tooltip: {
start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
3 years ago
},
},
polygon: {
tooltip: {
start: "یک شکل رسم کنید.",
cont: "ادامه رسم شکل.",
end: "برای پایان رسم بر روی اولین نقظه کلیک کنید.",
3 years ago
},
},
polyline: {
error: "<strong>Error:</strong> shape edges cannot cross!",
tooltip: {
start: "با کلیک کردن یک خط رسم کنید.",
cont: "با کلیک به رسم خود ادامه دهید.",
end: "برای پایان رسم بر روی آخرین نقظ رسم شده کلیک کنید.",
3 years ago
},
},
rectangle: {
tooltip: {
start: "با کلیک و درگ کردن یک جای خواب رسم کنید.",
},
},
simpleshape: {
tooltip: {
end: "ماوس را رها کنید تا رسم تمام شود.",
},
},
},
},
edit: {
toolbar: {
actions: {
save: {
title: "ذخیره تنظیمات",
text: "ذخیره",
},
cancel: {
title: "لغو کردن، ویرایش تمام تغییرات نادیده گرفته خواهند شد",
text: "لغو",
3 years ago
},
clearAll: {
title: "پاک کردن تمام لایه ها",
text: "پاک کردن لایه ها",
},
},
buttons: {
edit: "ویرایش لایه ها",
editDisabled: "لایه ای برای ویرایش وجود ندارد",
remove: "پاک کردن لایه ها",
removeDisabled: "لایه ای برای پاک کردن وجود ندارد",
},
},
handlers: {
edit: {
tooltip: {
text: "Drag handles or markers to edit features.",
subtext: "با کلیک بر روی لغو تغییرات اعمال نخواهند شد.",
3 years ago
},
},
remove: {
tooltip: {
text: "Click on a feature to remove.",
},
},
},
},
};
3 years ago
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>`,
});
3 years ago
function MyComponent({ setZoom }) {
const map = useMap();
3 years ago
return null;
}
3 years ago
3 years ago
const LeafletMap = () => {
// const map =
const [zoom, setZoom] = useState(22);
const outerBounds = [
[50.505, -29.09],
[52.505, 29.09],
];
3 years ago
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 });
3 years ago
};
const [next, add] = useState(1);
const location = [38.9072, -77.0369];
console.log({ mapRef });
if (mapRef.current) {
console.log(mapRef.current);
}
3 years ago
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}
3 years ago
maxZoom={24}
minZoom={18}
3 years ago
maxNativeZoom={22}
style={{ height: "100vh" }}
zoomControl={false}
bounds={outerBounds}
>
{/* <MyComponent setZoom={setZoom} /> */}
<TileLayer
attribution='&copy; <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="images/grid.png"
apikey="db5ae1f5778a448ca662554581f283c5"
maxZoom={24}
maxNativeZoom={24}
opacity={0.5}
3 years ago
/>
<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>
3 years ago
);
};
export default LeafletMap;
LeafletMap.defaultProps = {
placeholder: "images/LeafletMapplaceholder.png",
};