I’m trying to load a map with markers on costumers address in a delivery map. I get the address, use this information to get the latitude and longitude coords and, then, load the map with the markers.
The problem is that not all the markers are being loaded.

All the address really exists (im using some stores points) and i’m separating all address by neighborhood/district and that’s how its showing up:

You can take a look in some parts of my code. Maybe its correct and openstreetmap just not allow this much markers. Notice that in the first district i just have 2 markers (should be 5). Something like that in the second district…

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import { FullscreenControl } from "react-leaflet-fullscreen";
import "react-leaflet-fullscreen/styles.css";
import axios from 'axios';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

function MapaPedidos() {

    [...]

  useEffect(() => {
    const fetchCoordinates = async (endereco, bairro, cidade) => {
      const formattedAddress = `${endereco}, ${bairro}, ${cidade}`;
      const response = await axios.get('https://nominatim.openstreetmap.org/search', {
        params: {
          q: formattedAddress,
          format: 'json',
          limit: 1
        }
      });
      if (response.data.length > 0) {
        return {
          lat: response.data[0].lat,
          lon: response.data[0].lon
        };
      } else {
        alert('Nâo foi possível carregar as localidades');
        return {
          lat: null,
          lon: null
        };
      }
    };

    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
    const addCoordinatesToPedidos = async () => {
        const updatedPedidos = [];
        setIsLoading(true);
        for (const pedido of jsonPedidosAgrupados) {
            setIsLoading(true);
            const { nbl_endereco, nbl_bairro, nbl_cidade } = pedido;
            const coords = await fetchCoordinates(nbl_endereco, nbl_bairro, nbl_cidade);
            updatedPedidos.push({
            ...pedido,
            latitude: coords.lat,
            longitude: coords.lon
            });

            // Wait for 1.5 seconds before processing the next item
            await sleep(1500);
        }
        setPedidosWithCoords(updatedPedidos);
        setIsLoading(false);
    };

    if (jsonPedidosAgrupados.length > 0) {
      addCoordinatesToPedidos();
    }
  }, [jsonPedidosAgrupados]);

    return <>
        <Navbar tela='pedidos'/>
        <LoadingScreen isLoading={isLoading}/>

        <div className='container-fluid corpo-pagina' id="container-acopanhamento">
            [...]
            
                <div className='card-aguardando card-bairro-mapa'>
                    <div className='card-header'>
                        <span className='span-card-header'>{bairro.bairro}</span>
                    </div>
                    <div className='card-body text-center' id='card-body-mapa'>
                        {pedidosWithCoords?.length > 0 &&
                            <MapContainer center={[pedidosWithCoords.find(ped => ped.nbl_bairro === bairro.bairro).latitude, pedidosWithCoords.find(ped => ped.nbl_bairro === bairro.bairro).longitude]} zoom={12} style={{ height: "155px", width: "100%"}}>
                                <TileLayer
                                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                    attribution="© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
                                />
                                {pedidosWithCoords.map(pedido => (
                                    <>  
                                        {console.log(pedido)}
                                        {pedido.nbl_bairro === bairro.bairro ?<Marker key={pedido.nbl_id} position={[pedido.latitude, pedido.longitude]}>
                                                <Popup>
                                                    #{pedido.nbl_num_nota} - {pedido.nbl_endereco}
                                                </Popup>
                                            </Marker>
                                        :
                                            null
                                        }
                                        
                                    </>
                                ))}
                                <FullscreenControl />
                            </MapContainer>
                        }
                        
                    </div>
                </div>

            [...]
        </div>

               
    </>
    

}

export default MapaPedidos;