diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
index cf828631..8dfd624e 100644
--- a/frontend/src/components/Map/index.tsx
+++ b/frontend/src/components/Map/index.tsx
@@ -1,10 +1,18 @@
import React, { useContext, useEffect, useState } from 'react';
import { apiClient } from '../../services/api';
-import { MapContainer, GeoJSON, useMapEvents, Circle, TileLayer, Tooltip } from 'react-leaflet';
+import {
+ MapContainer,
+ GeoJSON,
+ useMapEvents,
+ Circle,
+ TileLayer,
+ Tooltip,
+ Marker,
+} from 'react-leaflet';
import { useTheme, LinearProgress } from '@mui/material';
import { UseAppStoreType, AppContext } from '../../contexts/AppContext';
import { GeoJsonObject } from 'geojson';
-import { LeafletMouseEvent } from 'leaflet';
+import { Icon, LeafletMouseEvent, Point } from 'leaflet';
import { PublicOrder } from '../../models';
import OrderTooltip from '../Charts/helpers/OrderTooltip';
@@ -43,6 +51,37 @@ const Map = ({
}
}, []);
+ const RobotMarker = (
+ key: string | number,
+ position: [number, number],
+ orderType: number,
+ order?: PublicOrder,
+ ) => {
+ const color = orderType == 1 ? 'Blue' : 'Lilac';
+ return (
+ order?.id && onOrderClicked(order.id),
+ }}
+ >
+ {order && (
+
+
+
+ )}
+
+ );
+ };
+
const LocationMarker = () => {
useMapEvents({
click(event: LeafletMouseEvent) {
@@ -52,35 +91,13 @@ const Map = ({
},
});
- const color = orderType == 1 ? theme.palette.primary.main : theme.palette.secondary.main;
-
- return position ? (
-
- ) : (
- <>>
- );
+ return position ? RobotMarker('marker', position, orderType || 0) : <>>;
};
const getOrderMarkers = () => {
return orders.map((order) => {
if (!order.latitude || !order.longitude) return <>>;
-
- const color = order.type == 1 ? theme.palette.primary.main : theme.palette.secondary.main;
- return (
- onOrderClicked(order.id),
- }}
- >
-
-
-
-
- );
+ return RobotMarker('marker', [order.latitude, order.longitude], orderType || 0, order);
});
};