The class name is not defined for a certain child element in the icon creation function

Question

The class name is not defined for a certain child element in the icon creation function

Currently, I am developing a Vue2 web application using Leaflet and marker-cluster. I am encountering an issue with the iconCreateFunction option in my template:

 <v-marker-cluster :options="{ iconCreateFunction: iconCreateClsPrg}">
          <l-marker ....> 
                <l-icon :class-name="programme.display ? 'custom-marker notDisplay' : 'custom-marker display'">

Here is a snippet of the iconCreateClsPrg method:

iconCreateClsPrg (marker_cluster) {
        const childs = marker_cluster.getAllChildMarkers();
         childs.forEach(child => {
            const cssCluster = child.options.icon.options.className;
            if (cssCluster && cssCluster.includes(this.css_marker_selected_simple)) {
                nbSelected++;
            }
          }
             ...
}

The issue arises when the cssCluster const sometimes becomes undefined without any clear reason. This unexpected behavior occurs sporadically at certain zoom levels that are inconsistent. Any suggestions or ideas would be greatly appreciated!

I have attempted to resolve this by refreshing the map, waiting for it to become defined (but faced issues with async methods), restarting the method from scratch, switching to a for loop instead of forEach, among other attempts. Unfortunately, none of these solutions have proven successful.

javascript vue.js vuejs2 leaflet leaflet.markercluster

Answer 1

Answer №1

After much searching, I have finally discovered a technique to ensure that the icon is fully loaded by utilizing promises:

iconCreateClsPrg (marker_cluster) {
            let nbSelected = 0;
            try {
                const childs = marker_cluster.getAllChildMarkers();
                const promises = [];
                childs.forEach(child => {
                    // create promise to wait for all children
                    const promise = new Promise(resolve => {
                        // introduce a 0ms delay to allow the browser to render the page asynchronously
                        setTimeout(() => {
                            const cssCluster = child.options.icon.options.className;
                            if (cssCluster && cssCluster.includes(this.css_marker_selected_simple)) {
                                nbSelected++;
                            }
                            resolve();
                        }, 0);
                    });
                    promises.push(promise);
                });
                // wait for all children to be processed before proceeding
                Promise.all(promises).then(() => {
                    // complete the remaining tasks
                    const divIcon = new L.DivIcon({
                        html: htmlContent,
                        className: css_cluster,
                        iconSize: [30 + childCount, 30 + childCount],
                    });

                    // Ensure the cluster icon updates on the map after the promise has resolved
                    marker_cluster.setIcon(divIcon);
                });
            } catch (e) {
                // handle any errors encountered
            }
            // Start with a blank icon as a fallback
            return new L.DivIcon({
            });
        }

Answer 2

After much searching, I have finally discovered a technique to ensure that the icon is fully loaded by utilizing promises:

iconCreateClsPrg (marker_cluster) {
            let nbSelected = 0;
            try {
                const childs = marker_cluster.getAllChildMarkers();
                const promises = [];
                childs.forEach(child => {
                    // create promise to wait for all children
                    const promise = new Promise(resolve => {
                        // introduce a 0ms delay to allow the browser to render the page asynchronously
                        setTimeout(() => {
                            const cssCluster = child.options.icon.options.className;
                            if (cssCluster && cssCluster.includes(this.css_marker_selected_simple)) {
                                nbSelected++;
                            }
                            resolve();
                        }, 0);
                    });
                    promises.push(promise);
                });
                // wait for all children to be processed before proceeding
                Promise.all(promises).then(() => {
                    // complete the remaining tasks
                    const divIcon = new L.DivIcon({
                        html: htmlContent,
                        className: css_cluster,
                        iconSize: [30 + childCount, 30 + childCount],
                    });

                    // Ensure the cluster icon updates on the map after the promise has resolved
                    marker_cluster.setIcon(divIcon);
                });
            } catch (e) {
                // handle any errors encountered
            }
            // Start with a blank icon as a fallback
            return new L.DivIcon({
            });
        }

The class name is not defined for a certain child element in the icon creation function

Answer №1

Similar questions

Guide to creating a rising or waving effect for text using CSS or JavaScript without the need for animation

Apply a Fade In transition to the ul li elements following a JavaScript toggle

Importing ReactDOM alone does not result in the rendering of anything

Ways to sum up the values within a JSON object

Error message encountered when attempting to process json-encoded JavaScript using Ajax

Is there a way to transpile a dependency within the node_modules directory when using Nuxt 2?

Upcoming 13.4 Error: NEXT_REDIRECT detected in API routes

What steps do I need to take in order to successfully implement the v-tabs component in Vuetify.js

Enhancing Efficiency with Laravel 5: Updating Multiple Data Entries

creating an interactive table with the help of the useState hook

Issues with data within a Vue.js pagination component for Bootstrap tables

Tips for eliminating the menu bar in the external window generated by an Electron application's URL

Enlarging the modal overlay

Is there a way to adjust the width of a table cell in Material UI using React?

Incorporate a course within the conditional statement

Implementing automatic activation of a tab upon page load using Angular

Integrating a Vue application with an OpenId provider using the OpenId Connect library

Sending a Thunk to the store using Typescript

Converting Typescript objects containing arrays into a single array

dividing values for future angular use