Added styled item and trash icons

Related to #12

front/src/components/AnnouncementDetails.tsx

@@ -5,6 +5,7 @@ import LineDot from './LineDot'
 import { categoryNames } from '../assets/category'
 import { useBook } from '../hooks/api'
 import { Announcement } from '../hooks/api/useHomeAnnouncementList'
+import { iconItem } from '../utils/markerIcons'
 
 type AnnouncementDetailsProps = {
     close: () => void,
@@ -41,7 +42,7 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy
                             url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                         />
 
-                        <Marker position={[lat, lng]}>
+                        <Marker icon={iconItem} position={[lat, lng]}>
                             <Popup>
                                 {address}
                                 <br />

front/src/components/LocationMarker.tsx

@@ -2,6 +2,7 @@ import { Marker, Popup, useMapEvents } from 'react-leaflet'
 import { LatLng } from 'leaflet'
 
 import { SetState } from '../utils/types'
+import { iconItem } from '../utils/markerIcons'
 
 type LocationMarkerProps = {
     address: string,
@@ -24,7 +25,7 @@ const LocationMarker = ({ address, position, setPosition }: LocationMarkerProps)
     })
 
     return (
-        <Marker position={position}>
+        <Marker icon={iconItem} position={position}>
             <Popup>
                 {address}
                 {position.lat.toFixed(4)}, {position.lng.toFixed(4)}

front/src/components/TrashboxMarkers.tsx

@@ -1,6 +1,7 @@
 import { Marker, Popup } from 'react-leaflet'
 
 import { Trashbox } from '../hooks/api/useTrashboxes'
+import { iconTrash } from '../utils/markerIcons'
 
 type TrashboxMarkersProps = {
     trashboxes: Trashbox[],
@@ -10,7 +11,7 @@ type TrashboxMarkersProps = {
 const TrashboxMarkers = ({ trashboxes, selectTrashbox }: TrashboxMarkersProps) => {
     return (
         <>{trashboxes.map((trashbox, index) => (
-            <Marker key={`${trashbox.Lat}${trashbox.Lng}`} position={[trashbox.Lat, trashbox.Lng]}>
+            <Marker icon={iconTrash} key={`${trashbox.Lat}${trashbox.Lng}`} position={[trashbox.Lat, trashbox.Lng]}>
                 <Popup>
                     <p>{trashbox.Address}</p>
                     <p>Тип мусора: <>

front/src/utils/markerIcons.ts

@@ -0,0 +1,20 @@
+import L from 'leaflet'
+
+import itemMarker from '../assets/itemMarker.png'
+import trashMarker from '../assets/trashMarker.png'
+
+const iconItem = new L.Icon({
+    iconUrl: itemMarker,
+    iconRetinaUrl: itemMarker,
+    popupAnchor: [0, 0],
+    iconSize: [41, 41],
+})
+
+const iconTrash = new L.Icon({
+    iconUrl: trashMarker,
+    iconRetinaUrl: trashMarker,
+    popupAnchor: [0, 0],
+    iconSize: [34, 41],
+})
+
+export { iconItem, iconTrash }