How can I reduce the marker making time of Mapbox js

I don't understand why this page takes minutes to render, it takes so long that I get a gunicorn timeout...

Anyway I could fix it ?

I try to generate a marker for every address passed with django, the current address list has around 300 addresses

Each marker also has a popup do display informations about the user or the event associated with it

// Create a marker for each address
{% for address in addresses %}
            {% if address.user.count|add:address.time_filtered_events.count >= 2 %}
                var el=document.createElement("div");
                el.className="marker";
                el.style.backgroundImage = `url(https://ssb.wiki.gallery/images/3/30/SandbagHeadSSBM.png)`;
                el.style.width = `20px`;
                el.style.height = `20px`;
                el.style.backgroundSize = '100%';
                new mapboxgl.Marker(el)
                    .setPopup(new mapboxgl.Popup().setHTML(...)
                    .setLngLat([{{address.longitude}}, {{address.latitude}}])
                    .addTo(map);

             {% else %}
                 {% for user in address.user.all %}
                     var el=document.createElement("div");
                      el.className="marker";
                      el.style.backgroundImage = `url({{user.main.image}})`;
                      el.style.width = `20px`;
                      el.style.height = `20px`;
                      el.style.backgroundSize = '100%';
                
                        // Add markers to the map.
                      new mapboxgl.Marker(el)
                        .setPopup(new mapboxgl.Popup().setHTML(...)
                        .setLngLat([{{address.longitude}}, {{address.latitude}}])
                        .addTo(map);  
                    {% endfor %}
                    {% for event in address.time_filtered_events %}
                        var el=document.createElement("div");
                        el.className="marker";
                        {% if event in address.current_events %}
                            el.style.backgroundImage = `url(https://i.ibb.co/bX2yVm5/green-smash-ball.png)`;
                        {% else %}
                            el.style.backgroundImage = `url(https://ssb.wiki.gallery/images/7/7a/FightingWireFramesHeadSSBM.png)`;
                        {% endif %}
                        el.style.width = `15px`;
                        el.style.height = `15px`;
                        el.style.backgroundSize = '100%';
                    {% endfor %}
                    {% for event in address.time_filtered_events %}
                        var el=document.createElement("div");
                        el.className="marker";
                        {% if event in address.current_events %}
                            el.style.backgroundImage = `url(https://i.ibb.co/bX2yVm5/green-smash-ball.png)`;
                        {% else %}
                            el.style.backgroundImage = `url(https://ssb.wiki.gallery/images/7/7a/FightingWireFramesHeadSSBM.png)`;
                        {% endif %}
                        el.style.width = `15px`;
                        el.style.height = `15px`;
                        el.style.backgroundSize = '100%';

                        // Add markers to the map.
                        var marker = new mapboxgl.Marker(el)
                        marker.setPopup(new mapboxgl.Popup().setHTML(...) 
                        marker.setLngLat([{{address.longitude}}, {{address.latitude}}])
                        marker.addTo(map);
                     {% endfor %}      
             {% endif %}
{% endfor %}

Back to Top