diff --git a/front/src/assets/itemMarker.png b/front/src/assets/itemMarker.png new file mode 100644 index 0000000..f68bbb3 Binary files /dev/null and b/front/src/assets/itemMarker.png differ diff --git a/front/src/assets/trashMarker.png b/front/src/assets/trashMarker.png new file mode 100644 index 0000000..ce5a53b Binary files /dev/null and b/front/src/assets/trashMarker.png differ diff --git a/front/src/components/AnnouncementDetails.tsx b/front/src/components/AnnouncementDetails.tsx index 3fc3329..3fcaf06 100644 --- a/front/src/components/AnnouncementDetails.tsx +++ b/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' /> - + {address}
diff --git a/front/src/components/LocationMarker.tsx b/front/src/components/LocationMarker.tsx index d159613..8335997 100644 --- a/front/src/components/LocationMarker.tsx +++ b/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 ( - + {address} {position.lat.toFixed(4)}, {position.lng.toFixed(4)} diff --git a/front/src/components/TrashboxMarkers.tsx b/front/src/components/TrashboxMarkers.tsx index 3da7cd1..1c5a91f 100644 --- a/front/src/components/TrashboxMarkers.tsx +++ b/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) => ( - +

{trashbox.Address}

Тип мусора: <> diff --git a/front/src/utils/markerIcons.ts b/front/src/utils/markerIcons.ts new file mode 100644 index 0000000..eb3a4ce --- /dev/null +++ b/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 }