182 lines
8.4 KiB
JavaScript
182 lines
8.4 KiB
JavaScript
"use client";
|
|
|
|
import { Marker, useMap } from "react-leaflet";
|
|
import { useEffect } from "react";
|
|
import L from "leaflet";
|
|
import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
|
|
import { Box, FormControl, InputAdornment, InputLabel, OutlinedInput, Stack, useMediaQuery } from "@mui/material";
|
|
import VerifiedIcon from "@mui/icons-material/Verified";
|
|
import { useTheme } from "@emotion/react";
|
|
|
|
const ShowLocationMarker = ({ start_lat, start_lng, end_lat, end_lng }) => {
|
|
const map = useMap();
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
|
|
|
const defaultIconSize = [35, 35];
|
|
|
|
const createCustomIcon = (size, iconUrl) => {
|
|
return L.icon({
|
|
iconUrl: iconUrl,
|
|
iconSize: size,
|
|
iconAnchor: [size[0] / 2, size[1]],
|
|
popupAnchor: [0, -size[1]],
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (start_lat && end_lng) {
|
|
map.fitBounds(
|
|
[
|
|
{ lat: start_lat, lng: start_lng },
|
|
{ lat: end_lat, lng: end_lng },
|
|
],
|
|
{ paddingTopLeft: [16, 16], paddingBottomRight: [16, 130] }
|
|
);
|
|
} else if (start_lat) {
|
|
map.setView({ lat: start_lat, lng: start_lng }, 15);
|
|
}
|
|
}, [start_lat, start_lng, map, end_lng, end_lat]);
|
|
|
|
return (
|
|
<>
|
|
{start_lat && start_lng && (
|
|
<Marker
|
|
position={{ lat: start_lat, lng: start_lng }}
|
|
icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
|
|
/>
|
|
)}
|
|
{end_lat && end_lng && (
|
|
<Marker
|
|
position={{ lat: end_lat, lng: end_lng }}
|
|
icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
|
|
/>
|
|
)}
|
|
<Box
|
|
sx={{
|
|
zIndex: "400",
|
|
position: "absolute",
|
|
background: "#ffffff94",
|
|
p: 2,
|
|
borderRadius: "10px",
|
|
boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
|
|
bottom: "5px",
|
|
left: "5px",
|
|
right: "5px",
|
|
}}
|
|
>
|
|
<Stack direction={end_lat && end_lng ? "row" : "column"} spacing={end_lat && end_lng ? 0.5 : 0}>
|
|
{start_lat && start_lng && (
|
|
<Stack spacing={1}>
|
|
<FormControl size="small" variant="outlined">
|
|
<InputLabel sx={{ color: "success.main" }} htmlFor="start_lat">
|
|
{end_lat && end_lng ? "طول جغرافیایی شروع" : "طول جغرافیایی"}
|
|
</InputLabel>
|
|
<OutlinedInput
|
|
id="start_lat"
|
|
type="text"
|
|
size="small"
|
|
readOnly
|
|
fullWidth
|
|
sx={{
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: "success.main",
|
|
},
|
|
color: "success.main",
|
|
}}
|
|
value={start_lat}
|
|
endAdornment={
|
|
<InputAdornment position="end">
|
|
<VerifiedIcon color="success" />
|
|
</InputAdornment>
|
|
}
|
|
label={end_lat && end_lng ? "طول جغرافیایی شروع" : "طول جغرافیایی"}
|
|
/>
|
|
</FormControl>
|
|
<FormControl size="small" variant="outlined">
|
|
<InputLabel sx={{ color: "success.main" }} htmlFor="start_lng">
|
|
{end_lat && end_lng ? "عرض جغرافیایی شروع" : "عرض جغرافیایی"}
|
|
</InputLabel>
|
|
<OutlinedInput
|
|
id="start_lng"
|
|
type="text"
|
|
size="small"
|
|
readOnly
|
|
fullWidth
|
|
sx={{
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: "success.main",
|
|
},
|
|
color: "success.main",
|
|
}}
|
|
value={start_lng}
|
|
endAdornment={
|
|
<InputAdornment position="end">
|
|
<VerifiedIcon color="success" />
|
|
</InputAdornment>
|
|
}
|
|
label={end_lat && end_lng ? "عرض جغرافیایی شروع" : "عرض جغرافیایی"}
|
|
/>
|
|
</FormControl>
|
|
</Stack>
|
|
)}
|
|
{end_lat && end_lng && (
|
|
<Stack spacing={1}>
|
|
<FormControl size="small" variant="outlined">
|
|
<InputLabel sx={{ color: "success.main" }} htmlFor="end_lat">
|
|
طول جغرافیایی پایان
|
|
</InputLabel>
|
|
<OutlinedInput
|
|
id="end_lat"
|
|
type="text"
|
|
size="small"
|
|
readOnly
|
|
sx={{
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: "success.main",
|
|
},
|
|
color: "success.main",
|
|
}}
|
|
value={end_lat}
|
|
endAdornment={
|
|
<InputAdornment position="end">
|
|
<VerifiedIcon color="success" />
|
|
</InputAdornment>
|
|
}
|
|
label="طول جغرافیایی پایان"
|
|
/>
|
|
</FormControl>
|
|
<FormControl size="small" variant="outlined">
|
|
<InputLabel sx={{ color: "success.main" }} htmlFor="end_lng">
|
|
عرض جغرافیایی پایان
|
|
</InputLabel>
|
|
<OutlinedInput
|
|
id="end_lng"
|
|
type="text"
|
|
size="small"
|
|
readOnly
|
|
sx={{
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: "success.main",
|
|
},
|
|
color: "success.main",
|
|
}}
|
|
value={end_lng}
|
|
endAdornment={
|
|
<InputAdornment position="end">
|
|
<VerifiedIcon color="success" />
|
|
</InputAdornment>
|
|
}
|
|
label="عرض جغرافیایی پایان"
|
|
/>
|
|
</FormControl>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ShowLocationMarker;
|