._.

src/pages/DeliveryOrderDetails.css

@@ -33,3 +33,26 @@
     max-width: 800px;
     margin: 0 auto;
 }
+
+.custom-marker {
+    background-color: white;
+    /* Фон для маркера */
+    border-radius: 50%;
+    /* Круглая форма */
+    border: 2px solid #007bff;
+    /* Граница */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    /* Ширина маркера */
+    height: 30px;
+    /* Высота маркера */
+}
+
+.marker-number {
+    font-weight: bold;
+    /* Жирный текст для номера */
+    color: #007bff;
+    /* Цвет текста */
+}

src/pages/DeliveryOrderDetails.jsx

@@ -9,6 +9,7 @@ import {
   Popup,
   Polyline,
 } from "react-leaflet";
+import { DivIcon } from "leaflet";
 import polyline from "@mapbox/polyline";
 import "./DeliveryOrderDetails.css";
 
@@ -70,18 +71,18 @@ 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">
           <ol className="city-list">
-            {deliveryAccessories.map((accessory) => {
+            {deliveryAccessories.map((accessory, index) => {
               const coord = coordinates.find(
                 (c) => c.city === accessory.city_name
               );
               return (
                 <li key={accessory.id} className="city-item">
-                  <strong>Доставка:</strong> {accessory.name}
+                  <strong>{index + 1}. Доставка:</strong> {accessory.name}
                   <span className="city-info">
                     (Город: {accessory.city_name}, Координаты:{" "}
                     {coord
@@ -92,6 +93,14 @@ const DeliveryOrderDetails = () => {
                 </li>
               );
             })}
+            <li className="city-item">
+              <strong>{deliveryAccessories.length + 1}. Конечный пункт:</strong>{" "}
+              {DELIVERY_CITY.name}
+              <span className="city-info">
+                (Координаты: {DELIVERY_CITY.latitude}, {DELIVERY_CITY.longitude}
+                )
+              </span>
+            </li>
           </ol>
           {coordinates.length > 0 && (
             <div className="map-container">
@@ -108,12 +117,28 @@ const DeliveryOrderDetails = () => {
                   <Marker
                     key={index}
                     position={[coord.latitude, coord.longitude]}
+                    icon={
+                      new DivIcon({
+                        className: "custom-marker",
+                        html: `<div class='marker-number'>${index + 1}</div>`,
+                        iconSize: [30, 30],
+                      })
+                    }
                   >
                     <Popup>{coord.city}</Popup>
                   </Marker>
                 ))}
                 <Marker
                   position={[DELIVERY_CITY.latitude, DELIVERY_CITY.longitude]}
+                  icon={
+                    new DivIcon({
+                      className: "custom-marker",
+                      html: `<div class='marker-number'>${
+                        deliveryAccessories.length + 1
+                      }</div>`,
+                      iconSize: [30, 30],
+                    })
+                  }
                 >
                   <Popup>{DELIVERY_CITY.name}</Popup>
                 </Marker>