Added announcement adding page

front/src/components/LocationMarker.jsx

@@ -0,0 +1,27 @@
+import { Marker, Popup, useMapEvents } from "react-leaflet"
+
+const LocationMarker = ({ address, position, setPosition }) => {
+
+    const map = useMapEvents({
+        dragend: () => {
+            setPosition(map.getCenter())
+        },
+        zoomend: () => {
+            setPosition(map.getCenter())
+        },
+        resize: () => {
+            setPosition(map.getCenter())
+        }
+    })
+
+    return (
+        <Marker position={position}>
+            <Popup>
+                {address}
+                {position.lat.toFixed(4)}, {position.lng.toFixed(4)}
+            </Popup>
+        </Marker>
+    )
+}
+
+export default LocationMarker

front/src/components/TrashboxMarkers.jsx

@@ -0,0 +1,26 @@
+import { Marker, Popup } from "react-leaflet"
+
+const TrashboxMarkers = ({ trashboxes, selectTrashbox }) => {
+    return (
+        <>{trashboxes.map((trashbox, index) => (
+            <Marker 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