0

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='&copy; <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.

0