500 markers generate 14500 DOM Elements, Map loads very slow, solution?

Created on 17 March 2021, over 3 years ago
Updated 29 April 2021, over 3 years ago

Hello Christian or somebody who can give me a hint
I have a view with fields that generates a leaflet map with 500 markers which are clustered and shouldn't be a problem to load. But the view generates 14500 DOM-Elements so it loads very slow and get a problem for mobile browsers.

The main problem are the DIVs with data-views-row-index = "0" up to = "500" that look like the Code below. What is the reason of/for this <div data-views-row-index="0">...</div>. When I delete them from the DOM with Chrome DevTool the map works without any problem.

Is there a way to drop those Elements or get less DOM-Elements (apart from stripping some tags out of the html in views backend)?
Thanks for any hints, they are highly appreciated.

<div data-views-row-index="0" class="geolocation-location js-hide" id="6055450794e53" data-lat="54.577991469482"
    data-lng="10.5776115415149" data-set-marker="true" data-icon="/sites/default/files/marker/marker1.png"
    typeof="Place" style="display: none">
    <span property="geo" typeof="GeoCoordinates">
        <meta property="latitude" content="" />
        <meta property="longitude" content="" />
    </span>
    <h2 class="location-title" property="name">
        <a href="/linkname" target="_blank">Some title</a>
    </h2>
    <div class="location-content">
        <span><span><a href="/linkname" target="_blank">Some title</a></span></span>
        <span class="views-field views-field-body">
            <span class="field-content"><a href="/linkname" target="_blank">
                    <p>Some text.</p>
                </a></span>
            </span>
            <div class="views-field views-field-name1">
                <span class="views-label views-label-field-name1">Registered: </span><span
                    class="field-content">05.11.2020</span>
            </div>
            <div class="views-field views-field-nothing">
                <span class="views-label views-label-nothing">Picture: </span><span class="field-content">
                    <div>yes</div>
                </span>
            </div>
            <div class="views-field views-field-fieldname2">
                <span class="views-label views-label-fieldname2">Active: </span>
                <div class="field-content">No</div>
            </div>
    </div>
</div>

Obviously \geolocation\src\Element\GeolocationMapLocation.php is where this part is created, but i don't know how to solve it by now.

πŸ“Œ Task
Status

Closed: works as designed

Version

3.2

Component

Javascript General / Frontend

Created by

Live updates comments and jobs are added and updated live.
  • views

    Involves, uses, or integrates with views. In Drupal 8 core, use the β€œVDC” tag instead.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024