I am getting the type of garbage from the backend. Eg: plastic, glass, metal, paper, etc. I am showing the user's location on a map using Leaflet in React.
How can I get dustbin locations based on the type of garbage near users' locations in React?
I can have garbage type for example const garbage = "glass".
Here is my React Leaflet code to display the user's location.
<MapContainer center={location} zoom={13} scrollWheelZoom={true} style={{ height: '450px', width: '100%' }}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{location &&
<Marker position={location} icon={userLocationIcon}>
<Popup>
Your location
</Popup>
</Marker>
}
</MapContainer>
I am using Django as the backend where I classify uploaded garbage image.