35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import { Marker, Popup } from 'react-leaflet'
|
||
|
||
import { Trashbox } from '../api/trashbox/types'
|
||
import { iconTrash } from '../utils/markerIcons'
|
||
|
||
type TrashboxMarkersProps = {
|
||
trashboxes: Trashbox[],
|
||
selectTrashbox: ({ index, category }: { index: number, category: string }) => void
|
||
}
|
||
|
||
const TrashboxMarkers = ({ trashboxes, selectTrashbox }: TrashboxMarkersProps) => {
|
||
return (
|
||
<>{trashboxes.map((trashbox, index) => (
|
||
<Marker icon={iconTrash} key={`${trashbox.Lat}${trashbox.Lng}`} position={[trashbox.Lat, trashbox.Lng]}>
|
||
<Popup>
|
||
<p>{trashbox.Address}</p>
|
||
<p>Тип мусора: <>
|
||
{trashbox.Categories.map((category, j) =>
|
||
<span key={trashbox.Address + category}>
|
||
<a href='#' onClick={() => selectTrashbox({ index, category })}>
|
||
{category}
|
||
</a>
|
||
{(j < trashbox.Categories.length - 1) ? ', ' : ''}
|
||
</span>
|
||
)}
|
||
</></p>
|
||
<p>{trashbox.Lat.toFixed(4)}, {trashbox.Lng.toFixed(4)}</p>
|
||
</Popup>
|
||
</Marker>
|
||
))}</>
|
||
)
|
||
}
|
||
|
||
export default TrashboxMarkers
|