merge develop
This commit is contained in:
@@ -1,28 +1,28 @@
|
|||||||
import { Box, Typography } from "@mui/material";
|
import { Box, Typography } from "@mui/material";
|
||||||
|
|
||||||
const AlarmText = ({ isSource }) => {
|
const AlarmText = ({ isSource }) => {
|
||||||
if (isSource) return null;
|
if (isSource) return null;
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: 5,
|
top: 5,
|
||||||
left: 5,
|
left: 5,
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
border: "1px solid #ed0f02",
|
border: "1px solid #ed0f02",
|
||||||
backgroundColor: "#f19898",
|
backgroundColor: "#f19898",
|
||||||
py: 0.5,
|
py: 0.5,
|
||||||
px: 1,
|
px: 1,
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
|
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
|
<Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
|
||||||
با کلیک بر روی مارکر موقعیت را انتخاب کنید
|
با کلیک بر روی مارکر موقعیت را انتخاب کنید
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AlarmText;
|
export default AlarmText;
|
||||||
|
|||||||
@@ -1,53 +1,53 @@
|
|||||||
import { Box, Button, TextField } from "@mui/material";
|
import { Box, Button, TextField } from "@mui/material";
|
||||||
|
|
||||||
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
|
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
|
||||||
if (!isSource) return null;
|
if (!isSource) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
bottom: 5,
|
bottom: 5,
|
||||||
left: 5,
|
left: 5,
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
border: "1px solid #e1e1e1",
|
border: "1px solid #e1e1e1",
|
||||||
padding: 1,
|
padding: 1,
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
gap: 1,
|
gap: 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
|
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
|
||||||
<TextField
|
<TextField
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
size="small"
|
size="small"
|
||||||
readOnly
|
readOnly
|
||||||
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
|
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
|
||||||
/>
|
/>
|
||||||
{isSource && isDest && (
|
{isSource && isDest && (
|
||||||
<Button variant="contained" color="success" size="small" onClick={onEditSource}>
|
<Button variant="contained" color="success" size="small" onClick={onEditSource}>
|
||||||
ویرایش مبدا
|
ویرایش مبدا
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{isDest && (
|
{isDest && (
|
||||||
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
|
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
|
||||||
<TextField
|
<TextField
|
||||||
size="small"
|
size="small"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
readOnly
|
readOnly
|
||||||
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
|
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
|
||||||
/>
|
/>
|
||||||
<Button variant="contained" color="error" size="small" onClick={onEditDest}>
|
<Button variant="contained" color="error" size="small" onClick={onEditDest}>
|
||||||
ویرایش مقصد
|
ویرایش مقصد
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DataBox;
|
export default DataBox;
|
||||||
|
|||||||
@@ -1,46 +1,46 @@
|
|||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import { Marker, Polyline, useMap } from "react-leaflet";
|
import { Marker, Polyline, useMap } from "react-leaflet";
|
||||||
import L from "leaflet";
|
import L from "leaflet";
|
||||||
import polyline from "@mapbox/polyline";
|
import polyline from "@mapbox/polyline";
|
||||||
import SourceIcon from "@/assets/images/source-icon.svg";
|
import SourceIcon from "@/assets/images/source-icon.svg";
|
||||||
import DestIcon from "@/assets/images/destination-icon.svg";
|
import DestIcon from "@/assets/images/destination-icon.svg";
|
||||||
|
|
||||||
const ShowRoute = ({ area }) => {
|
const ShowRoute = ({ area }) => {
|
||||||
const map = useMap();
|
const map = useMap();
|
||||||
const defaultIconSize = [35, 35];
|
const defaultIconSize = [35, 35];
|
||||||
|
|
||||||
const createCustomIcon = (size, iconUrl) => {
|
const createCustomIcon = (size, iconUrl) => {
|
||||||
return L.icon({
|
return L.icon({
|
||||||
iconUrl: iconUrl,
|
iconUrl: iconUrl,
|
||||||
iconSize: size,
|
iconSize: size,
|
||||||
iconAnchor: [size[0] / 2, size[1]],
|
iconAnchor: [size[0] / 2, size[1]],
|
||||||
popupAnchor: [0, -size[1]],
|
popupAnchor: [0, -size[1]],
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (coords.length > 0) {
|
if (coords.length > 0) {
|
||||||
map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
|
map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
|
||||||
}
|
}
|
||||||
}, [area]);
|
}, [area]);
|
||||||
const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
|
const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
|
||||||
const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
|
const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
|
||||||
|
|
||||||
if (!area) return null;
|
if (!area) return null;
|
||||||
const coords = polyline.decode(area, 6);
|
const coords = polyline.decode(area, 6);
|
||||||
|
|
||||||
if (coords.length === 0) return null;
|
if (coords.length === 0) return null;
|
||||||
|
|
||||||
const sourcePosition = coords[0];
|
const sourcePosition = coords[0];
|
||||||
const destPosition = coords[coords.length - 1];
|
const destPosition = coords[coords.length - 1];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Polyline positions={coords} color="#015688" weight={7} opacity={1} />
|
<Polyline positions={coords} color="#015688" weight={7} opacity={1} />
|
||||||
<Marker position={sourcePosition} icon={sourceIcon} />
|
<Marker position={sourcePosition} icon={sourceIcon} />
|
||||||
<Marker position={destPosition} icon={destIcon} />
|
<Marker position={destPosition} icon={destIcon} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ShowRoute;
|
export default ShowRoute;
|
||||||
|
|||||||
@@ -1,219 +1,219 @@
|
|||||||
import { Marker, Polyline, useMapEvents } from "react-leaflet";
|
import { Marker, Polyline, useMapEvents } from "react-leaflet";
|
||||||
import L from "leaflet";
|
import L from "leaflet";
|
||||||
import polyline from "@mapbox/polyline";
|
import polyline from "@mapbox/polyline";
|
||||||
import SourceIcon from "@/assets/images/source-icon.svg";
|
import SourceIcon from "@/assets/images/source-icon.svg";
|
||||||
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
|
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
|
||||||
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
|
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
|
||||||
import DestIcon from "@/assets/images/destination-icon.svg";
|
import DestIcon from "@/assets/images/destination-icon.svg";
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import DataBox from "./DataBox";
|
import DataBox from "./DataBox";
|
||||||
import AlarmText from "./AlarmText";
|
import AlarmText from "./AlarmText";
|
||||||
|
|
||||||
const Routing = ({ setArea, setLocations, locations, area }) => {
|
const Routing = ({ setArea, setLocations, locations, area }) => {
|
||||||
const mapPrevSourceMarker = useRef();
|
const mapPrevSourceMarker = useRef();
|
||||||
const mapPrevDestMarker = useRef();
|
const mapPrevDestMarker = useRef();
|
||||||
const mapRef = useRef(null);
|
const mapRef = useRef(null);
|
||||||
const defaultIconSize = [35, 35];
|
const defaultIconSize = [35, 35];
|
||||||
const [isSource, setIsSource] = useState(false);
|
const [isSource, setIsSource] = useState(false);
|
||||||
const [sourcePosition, setSourcePosition] = useState(null);
|
const [sourcePosition, setSourcePosition] = useState(null);
|
||||||
const [isDest, setIsDest] = useState(false);
|
const [isDest, setIsDest] = useState(false);
|
||||||
const [destPosition, setDestPosition] = useState(null);
|
const [destPosition, setDestPosition] = useState(null);
|
||||||
const [routeCoords, setRouteCoords] = useState([]);
|
const [routeCoords, setRouteCoords] = useState([]);
|
||||||
const [alternateCoords, setAlternateCoords] = useState([]);
|
const [alternateCoords, setAlternateCoords] = useState([]);
|
||||||
const [editingTarget, setEditingTarget] = useState(null);
|
const [editingTarget, setEditingTarget] = useState(null);
|
||||||
const [selectedRoute, setSelectedRoute] = useState(null);
|
const [selectedRoute, setSelectedRoute] = useState(null);
|
||||||
|
|
||||||
const createCustomIcon = (size, iconUrl) => {
|
const createCustomIcon = (size, iconUrl) => {
|
||||||
return L.icon({
|
return L.icon({
|
||||||
iconUrl: iconUrl,
|
iconUrl: iconUrl,
|
||||||
iconSize: size,
|
iconSize: size,
|
||||||
iconAnchor: [size[0] / 2, size[1]],
|
iconAnchor: [size[0] / 2, size[1]],
|
||||||
popupAnchor: [0, -size[1]],
|
popupAnchor: [0, -size[1]],
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultIcon = createCustomIcon(
|
const defaultIcon = createCustomIcon(
|
||||||
defaultIconSize,
|
defaultIconSize,
|
||||||
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
|
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
|
||||||
);
|
);
|
||||||
|
|
||||||
const prevDestIcon = createCustomIcon(
|
const prevDestIcon = createCustomIcon(
|
||||||
defaultIconSize,
|
defaultIconSize,
|
||||||
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
|
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
|
||||||
);
|
);
|
||||||
|
|
||||||
const isMovingSource = !isSource || editingTarget === "source";
|
const isMovingSource = !isSource || editingTarget === "source";
|
||||||
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
|
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
|
||||||
|
|
||||||
const map = useMapEvents({
|
const map = useMapEvents({
|
||||||
move(e) {
|
move(e) {
|
||||||
if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
|
if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
|
||||||
if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
|
if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
|
||||||
},
|
},
|
||||||
movestart() {
|
movestart() {
|
||||||
if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
|
if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
|
||||||
if (isMovingDest && mapPrevDestMarker.current)
|
if (isMovingDest && mapPrevDestMarker.current)
|
||||||
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
|
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
|
||||||
},
|
},
|
||||||
moveend() {
|
moveend() {
|
||||||
if (isMovingSource)
|
if (isMovingSource)
|
||||||
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
|
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
|
||||||
if (isMovingDest && mapPrevDestMarker.current)
|
if (isMovingDest && mapPrevDestMarker.current)
|
||||||
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
|
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
mapRef.current = map;
|
mapRef.current = map;
|
||||||
}, [map]);
|
}, [map]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (locations.length < 2) return;
|
if (locations.length < 2) return;
|
||||||
const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
|
const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
|
||||||
const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
|
const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
|
||||||
setSourcePosition(restoredSource);
|
setSourcePosition(restoredSource);
|
||||||
setDestPosition(restoredDest);
|
setDestPosition(restoredDest);
|
||||||
setIsSource(true);
|
setIsSource(true);
|
||||||
setIsDest(true);
|
setIsDest(true);
|
||||||
if (area) {
|
if (area) {
|
||||||
const decoded = polyline.decode(area, 6);
|
const decoded = polyline.decode(area, 6);
|
||||||
setRouteCoords(decoded);
|
setRouteCoords(decoded);
|
||||||
setSelectedRoute({ index: "main", coords: decoded });
|
setSelectedRoute({ index: "main", coords: decoded });
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
|
mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
|
||||||
}, 100);
|
}, 100);
|
||||||
} else {
|
} else {
|
||||||
fetchRoute(restoredSource, restoredDest);
|
fetchRoute(restoredSource, restoredDest);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const fetchRoute = async (source, dest) => {
|
const fetchRoute = async (source, dest) => {
|
||||||
const locs = [
|
const locs = [
|
||||||
{ lat: source.lat, lon: source.lng },
|
{ lat: source.lat, lon: source.lng },
|
||||||
{ lat: dest.lat, lon: dest.lng },
|
{ lat: dest.lat, lon: dest.lng },
|
||||||
];
|
];
|
||||||
try {
|
try {
|
||||||
const response = await fetch("https://jouya.141.ir/api/router/drive", {
|
const response = await fetch("https://jouya.141.ir/api/router/drive", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({ locations: locs }),
|
body: JSON.stringify({ locations: locs }),
|
||||||
});
|
});
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
const shape = data.trip.legs[0].shape;
|
const shape = data.trip.legs[0].shape;
|
||||||
setLocations(locs);
|
setLocations(locs);
|
||||||
setArea(shape);
|
setArea(shape);
|
||||||
const decoded = polyline.decode(shape, 6);
|
const decoded = polyline.decode(shape, 6);
|
||||||
setRouteCoords(decoded);
|
setRouteCoords(decoded);
|
||||||
setSelectedRoute({ index: "main", coords: decoded });
|
setSelectedRoute({ index: "main", coords: decoded });
|
||||||
|
|
||||||
if (data.alternates?.length > 0) {
|
if (data.alternates?.length > 0) {
|
||||||
const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
|
const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
|
||||||
setAlternateCoords(decodedAlternates);
|
setAlternateCoords(decodedAlternates);
|
||||||
} else {
|
} else {
|
||||||
setAlternateCoords([]);
|
setAlternateCoords([]);
|
||||||
}
|
}
|
||||||
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
|
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Routing error:", error);
|
console.error("Routing error:", error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMarkerClick = async () => {
|
const handleMarkerClick = async () => {
|
||||||
if (!isSource || editingTarget === "source") {
|
if (!isSource || editingTarget === "source") {
|
||||||
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
|
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
|
||||||
setSourcePosition(clickedPosition);
|
setSourcePosition(clickedPosition);
|
||||||
setIsSource(true);
|
setIsSource(true);
|
||||||
setEditingTarget(null);
|
setEditingTarget(null);
|
||||||
setRouteCoords([]);
|
setRouteCoords([]);
|
||||||
setAlternateCoords([]);
|
setAlternateCoords([]);
|
||||||
setSelectedRoute(null);
|
setSelectedRoute(null);
|
||||||
|
|
||||||
if (editingTarget === "source" && destPosition) {
|
if (editingTarget === "source" && destPosition) {
|
||||||
await fetchRoute(clickedPosition, destPosition);
|
await fetchRoute(clickedPosition, destPosition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDestMarkerClick = async () => {
|
const handleDestMarkerClick = async () => {
|
||||||
if (!isDest || editingTarget === "dest") {
|
if (!isDest || editingTarget === "dest") {
|
||||||
const clickedPosition = mapPrevDestMarker.current.getLatLng();
|
const clickedPosition = mapPrevDestMarker.current.getLatLng();
|
||||||
setDestPosition(clickedPosition);
|
setDestPosition(clickedPosition);
|
||||||
setIsDest(true);
|
setIsDest(true);
|
||||||
setEditingTarget(null);
|
setEditingTarget(null);
|
||||||
|
|
||||||
await fetchRoute(sourcePosition, clickedPosition);
|
await fetchRoute(sourcePosition, clickedPosition);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEditSource = () => {
|
const handleEditSource = () => {
|
||||||
setEditingTarget("source");
|
setEditingTarget("source");
|
||||||
setRouteCoords([]);
|
setRouteCoords([]);
|
||||||
setAlternateCoords([]);
|
setAlternateCoords([]);
|
||||||
setSelectedRoute(null);
|
setSelectedRoute(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEditDest = () => {
|
const handleEditDest = () => {
|
||||||
setEditingTarget("dest");
|
setEditingTarget("dest");
|
||||||
setRouteCoords([]);
|
setRouteCoords([]);
|
||||||
setAlternateCoords([]);
|
setAlternateCoords([]);
|
||||||
setSelectedRoute(null);
|
setSelectedRoute(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSelectRoute = (index, coords) => {
|
const handleSelectRoute = (index, coords) => {
|
||||||
setSelectedRoute({ index, coords });
|
setSelectedRoute({ index, coords });
|
||||||
const encoded = polyline.encode(coords, 6);
|
const encoded = polyline.encode(coords, 6);
|
||||||
setArea(encoded);
|
setArea(encoded);
|
||||||
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
|
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DataBox
|
<DataBox
|
||||||
isSource={isSource}
|
isSource={isSource}
|
||||||
isDest={isDest}
|
isDest={isDest}
|
||||||
sourcePosition={sourcePosition}
|
sourcePosition={sourcePosition}
|
||||||
destPosition={destPosition}
|
destPosition={destPosition}
|
||||||
editingTarget={editingTarget}
|
editingTarget={editingTarget}
|
||||||
onEditSource={handleEditSource}
|
onEditSource={handleEditSource}
|
||||||
onEditDest={handleEditDest}
|
onEditDest={handleEditDest}
|
||||||
/>
|
/>
|
||||||
<AlarmText isSource={isSource} />
|
<AlarmText isSource={isSource} />
|
||||||
<Marker
|
<Marker
|
||||||
position={sourcePosition || map.getCenter()}
|
position={sourcePosition || map.getCenter()}
|
||||||
ref={mapPrevSourceMarker}
|
ref={mapPrevSourceMarker}
|
||||||
eventHandlers={{ click: handleMarkerClick }}
|
eventHandlers={{ click: handleMarkerClick }}
|
||||||
icon={defaultIcon}
|
icon={defaultIcon}
|
||||||
/>
|
/>
|
||||||
{isSource && (
|
{isSource && (
|
||||||
<Marker
|
<Marker
|
||||||
position={destPosition || map.getCenter()}
|
position={destPosition || map.getCenter()}
|
||||||
ref={mapPrevDestMarker}
|
ref={mapPrevDestMarker}
|
||||||
eventHandlers={{ click: handleDestMarkerClick }}
|
eventHandlers={{ click: handleDestMarkerClick }}
|
||||||
icon={prevDestIcon}
|
icon={prevDestIcon}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{alternateCoords.map((coords, index) => (
|
{alternateCoords.map((coords, index) => (
|
||||||
<Polyline
|
<Polyline
|
||||||
key={`alternate-${index}-${selectedRoute?.index === index}`}
|
key={`alternate-${index}-${selectedRoute?.index === index}`}
|
||||||
positions={coords}
|
positions={coords}
|
||||||
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
|
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
|
||||||
weight={selectedRoute?.index === index ? 7 : 6}
|
weight={selectedRoute?.index === index ? 7 : 6}
|
||||||
opacity={selectedRoute?.index === index ? 1 : 0.7}
|
opacity={selectedRoute?.index === index ? 1 : 0.7}
|
||||||
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
|
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{routeCoords.length > 0 && (
|
{routeCoords.length > 0 && (
|
||||||
<Polyline
|
<Polyline
|
||||||
key={`main-${selectedRoute?.index === "main"}`}
|
key={`main-${selectedRoute?.index === "main"}`}
|
||||||
positions={routeCoords}
|
positions={routeCoords}
|
||||||
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
|
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
|
||||||
weight={selectedRoute?.index === "main" ? 7 : 6}
|
weight={selectedRoute?.index === "main" ? 7 : 6}
|
||||||
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
|
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
|
||||||
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
|
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Routing;
|
export default Routing;
|
||||||
|
|||||||
Reference in New Issue
Block a user