._.

src/pages/DeliveryOrderDetails.jsx

@@ -12,6 +12,12 @@ import {
 import polyline from "@mapbox/polyline";
 import "./DeliveryOrderDetails.css";
 
+const DELIVERY_CITY = {
+  name: "Челябинск",
+  latitude: 55.159902,
+  longitude: 61.402554,
+};
+
 const DeliveryOrderDetails = () => {
   const { id: deliveryOrderId } = useParams();
   const [deliveryAccessories, setDeliveryAccessories] = useState([]);
@@ -36,8 +42,10 @@ const DeliveryOrderDetails = () => {
       );
       setCoordinates(coords);
 
-      if (coords.length > 1) {
+      const fullCoordinates = [...coords, DELIVERY_CITY];
-        const waypoints = coords
+
+      if (fullCoordinates.length > 1) {
+        const waypoints = fullCoordinates
           .map(({ longitude, latitude }) => `${longitude},${latitude}`)
           .join(";");
         const routeUrl = `https://router.project-osrm.org/route/v1/driving/${waypoints}?overview=full`;
@@ -62,7 +70,7 @@ const DeliveryOrderDetails = () => {
     <div className="delivery-order-details">
       {loading ? (
         <div className="spinner-border" role="status">
-          <span className="visually-hidden">Загрузка...</span>
+          <span className="visually-hidden"></span>
         </div>
       ) : (
         <div className="content-container">
@@ -104,6 +112,11 @@ const DeliveryOrderDetails = () => {
                     <Popup>{coord.city}</Popup>
                   </Marker>
                 ))}
+                <Marker
+                  position={[DELIVERY_CITY.latitude, DELIVERY_CITY.longitude]}
+                >
+                  <Popup>{DELIVERY_CITY.name}</Popup>
+                </Marker>
                 {route.length > 0 && (
                   <Polyline positions={route} color="blue" />
                 )}