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

Utilizing AMAZON_COGNITO_USER_POOLS in conjunction with apollo-client: A comprehensive guide

unable to apply angular measurement inside quotation marks

How to transfer data from an HTML form to PHP using AJAX

Using a JavaScript if statement to check the height of a specific HTML element

Modify the indentation format in CSS/JS

Exploring the process of extracting a nested JSON value using Postman

ESLint does not recognize the types from `@vuelidate/core` when importing them

React-highlightjs failing to highlight syntax code properly

Error: Uncaught ReferenceError: d3 is undefined. The script is not properly referenced

Animate an image to the right when clicked, then return it to the left with a second click

Can you elaborate on the users object found in the npm registry JSON response?

Vue Pinia ensures that reactive state is only updated once, preventing unnecessary updates

Printing Apex Oracle reports using Internet Explorer

Expanding a website banner slide to fill the entire width of the page

React Material-UI Multiple Select with Checkboxes not displaying initial selections as checked

Unexpected issue with sliding menu toggle implementation

Updating the data returned by the params function in Vue.js

Steps for accessing the controller scope from a directive nested within another directive:

Altering the hue of various stroke patterns

Adding a type declaration to the severity property in React Alert - A guide to Typescript