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.
281 lines
7.8 KiB
281 lines
7.8 KiB
// 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 * as L from "leaflet"; |
|
|
|
const bedNumb = "تخت شماره 33"; |
|
|
|
const pinMB = L.icon({ |
|
iconUrl: "images/LeafletMapplaceholder.png", |
|
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: "images/LeafletMapplaceholder.png", |
|
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="images/grid.png" |
|
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;
|
|
|