Error in Leaflet: Uncaught TypeError: layer.addEventParent is not a function in the promise

Having trouble with Leaflet clusterGroup, encountering the following error: Leaflet error Uncaught (in promise) TypeError: layer.addEventParent is not a function

const markerClusters = new MarkerClusterGroup();
const clusters = [];
const markers = [];
const customIcon = new L.Icon({
    iconUrl: "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef838a8e89838a9bafdec1dac1de">[email protected]</a>/dist/images/marker-icon.png",
    iconSize: [25, 41]
});

onMounted(()=>{
    markerClusters.clearLayers();
    toRaw(props.coordinatesTwo).forEach((item)=> {
        let marker = L.marker(new L.LatLng(item.coordinates.lat, item.coordinates.lng), {
            icon: customIcon
        })
        markers.push(marker)
        //markerClusters.addLayer(marker);
    })
    markerClusters.addLayer(markers)
    //console.log(markers);
    props.map.leafletObject.addLayer(markerClusters);
})
javascriptvue.jsdictionaryleaflet

Answer №1

To properly utilize the addLayer() method of MarkerClusterGroup, it is essential to supply either a single layer object or an array of layer objects as input parameters. Your current implementation involves passing an array of markers to the addLayer() method, leading to an error in functionality. To rectify this issue, consider individually adding each marker to the markerClusters group using the addLayer() method within your loop. The following code snippet demonstrates the updated approach:

onMounted(() => {
  markerClusters.clearLayers();
  toRaw(props.coordinatesTwo).forEach((item) => {
    let marker = L.marker(new L.LatLng(item.coordinates.lat, item.coordinates.lng), {
      icon: customIcon
    });
    markerClusters.addLayer(marker);
  });

  props.map.leafletObject.addLayer(markerClusters);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to redefine TypeScript module export definitions

I recently installed a plugin that comes with type definitions. declare module 'autobind-decorator' { const autobind: ClassDecorator & MethodDecorator; export default autobind; } However, I realized that the type definition was incorrec ...

javascripttypescripttypescript-typings

How to prevent checkbox autocomplete from selecting the previously checked value using Jquery Ajax

Working on implementing the "Autocomplete ajax search" feature using Php. Successfully fetching data from the database. Currently, when searching for something, the results with checkboxes are displayed. However, when I search for a text, check a checkbo ...

javascriptphpjqueryajax

Incorporating a classList.toggle into a snippet of code

button, p, h1, h2, h3, h4, h5, a{ /* Define specific elements to use "fantasy" font */ font-family: Tahoma; } #main_body{ margin: 0px auto; background-color: #dedede; } #top_body{ /* Remove margin for simplicity */ } #t ...

javascripthtmlcss

What is the method for accessing a variable that has been defined within server.js from within my ejs script tag?

Currently working on my first NodeJS project which involves a significant amount of file management. I've been thinking about how to streamline the process by accessing a variable created in my server.js within a script tag inside one of my ejs files. ...

javascriptnode.jsexpressejs

A declaration of "import '***.css';" was located within an ECMAScript module file in the monaco-editor npm library

It's perplexing to me why the developers of monaco-editor included these statements, as they are actually causing errors in my browser such as: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME typ ...

javascriptnpmes6-modulesmonaco-editor

Using jQuery's .remove() function removes all of the children from the container, rather than just one at

For my latest project, I am focused on creating a seamless full-page transition using AJAX calls. The challenge I'm facing is removing content from the DOM when loading in a new page. Despite adding a unique class or ID to the element, the .remove() f ...

javascriptjquery

Importing a Vue component within a functional component

I've developed a component named SpotifyButton within the components directory, and here's how it looks: <template functional> <b-button pill size="sm" :href="props.spotifyUri" class="spotify-green"> ...

vue.jsnuxt.js

The latest version of Next.js, 11.1.0, does not support monitoring for code changes within the node

In the latest version of Nextjs (11.1.0), there seems to be an issue where code changes in the `node_modules` directory are not being watched, unlike in the previous version (10.2.1). While working on a project with Nextjs 11.1.0, I have tried explicitly ...

javascriptwebpacknext.js

What is preventing this Javascript from running in Firefox and Chrome?

I recently encountered an issue with some Javascript code that functions correctly in Internet Explorer, but fails to work on Mozilla Firefox or Google Chrome. Any insights as to why this might be the case? function returnData(strCode,strProgramCode,strNa ...

javascriptasp.net

The issue of variable stagnation in Firefox content script while utilizing self.port.on

I'm having trouble updating the version var as intended. When I try to update it with the following code: self.port.on("get-version", ver => { version = ver; alert(version); }); An alert pops up displaying the correct version number, but the HTML ...

javascriptfirefoxfirefox-addonfirefox-addon-sdkcontent-script

Can you provide instructions for generating a simple menu bar with options utilizing webgl/three.js?

I find the documentation for the three.js 3-D viewer difficult to understand as a beginner. I am curious about the fundamental steps involved in creating a menu bar or selector with options for a 3-D viewer using three.js / WebGL. Additionally, I am inter ...

javascriptthree.jswebgl

The functionality of ClickMarker is malfunctioning in the XY Amcharts

Recently, I encountered a situation where I had to incorporate custom legends in XY Amcharts. After managing to implement them successfully, I came across an issue. Despite adding event listeners to the legends, the associated function failed to trigger. ...

javascriptgraphlegendamcharts

The Nuxt Auth local token cookie enables the user's status to be marked as logged in

At the moment, I am utilizing Nuxt Auth for managing logins and sessions in my application. Everything is functioning smoothly so far. However, I seem to be facing an issue with how cookies are being handled in my setup. I'm not entirely sure where th ...

vue.jsvuejs2nuxt.jsnuxt-authnuxt.config.js

`The Art of Binding() with Objects Created on the Fly`

Currently facing challenges with rebinding something using a dynamically created object from prepend. Despite trying several methods, I am only able to unbind. Seeking assistance. $(document).ready(function(){ $(".newdir").click(function(){ $(".d-exp ...

javascriptjquerybinding

Discovering the pixel value of scrolled distance (scroll delta) using jQuery scroll event

Here's the issue I'm facing: $(window).scroll(function(e){ console.log(e); }) I'm trying to figure out how much I've scrolled in pixels. It seems like the scroll value may be influenced by the window size and screen resolution ...

javascriptjquery

Display a substitute image if there is no internet connection available to load the Google Map Canvas

I have a WebApp that runs locally, but it's possible that users may not always have access to 3G/WiFi when using the app. This means that the Google Map will not load without an internet connection since it requires the web API. In order to provide a ...

javascripthtmlgoogle-maps

How can I send a variable into the DOM using AJAX?

Apologies for posting a question earlier about creating a condition for checkbox without proper investigation. It appears that I need to pass my variables here. function setsession(sessionid, action, data) { $("#totalselection").show(); $. ...

javascriptphpjqueryajax

Dynamically Loading External JavaScript Files Depending on User Input

Looking for guidance on how to dynamically load a single javascript file out of several options based on user input in an HTML code. Any suggestions on how to achieve this task? Thank you! ...

javascripthtml

Webpack encounters difficulty resolving non-js `require`s located within node_modules

In my Next.js project, I have set up the configuration to handle imports ending in .web.js, which works fine except for files within the node_modules directory. For this setup, I adjusted the webpack config by setting resolve.extensions = ['.web.js&ap ...

javascriptnode.jswebpacknext.js

Blurring a section of a circular image using a combination of CSS and JavaScript

I'm trying to achieve a specific effect with my circular image and overlaying div. I want the overlaying div to only partially shade out the image based on a certain degree value. For example, if I specify 100 degrees, I only want 260 degrees of the c ...

javascriptjqueryhtmlcss