L.DistanceGrid is not a constructor when markercluster and locatecontrol are used together

[emdahlstrom]

Hi!
I'm having some trouble combining v-marker-cluster and v-locatecontrol in a Nuxt project. They work on their own but if both are active at the same time I get the following error:

app.js:507 TypeError: L.DistanceGrid is not a constructor at NewClass._generateInitialClusters (vendors.app.js:2708) at NewClass.onAdd (vendors.app.js:2346) at NewClass._layerAdd (vendors.app.js:11064) at NewClass.whenReady (vendors.app.js:8931) at NewClass.addLayer (vendors.app.js:11126) at VueComponent.addLayer (vendors.app.js:25761) at VueComponent.mounted (vendors.app.js:20625) at invokeWithErrorHandling (commons.app.js:16849) at callHook (commons.app.js:19203) at Object.insert (commons.app.js:18132)

Both are integrated as Nuxt plugins and I'm using the nuxt-leaflet package.

Has anyone else seen this? Any idea how to debug?

[jperelli]

Hi! which versions of leaflet, vue2-leaflet, vue2-leaflet-markercluster and v-locatecontrol are you using?
There are some breaking changes and strong version incompatibilities with es6 import/export modules that might be the root of your issue

[emdahlstrom]

Hi! Many thanks for taking a look at this issue!

These are the versions I'm running:

leaflet.locatecontrol@^0.66.2: version "0.66.2"
vue2-leaflet-locatecontrol@^1.0.1: version "1.0.1"

leaflet.markercluster@^1.4.1: version "1.4.1"
vue2-leaflet-markercluster@^3.0.0: version "3.0.0"

leaflet@^1.4.0: version "1.4.0"
vue2-leaflet@^2.0.2: version "2.1.1"
nuxt-leaflet@^0.0.18: version "0.0.18"

Leaflet wasn't explicitly added to packages.json so I tried adding it. I also tried upgrading leaflet to 1.5.1 but that didn't make any difference.

This is the nuxt plugin I wrote to integrate vue2-leaflet-locatecontrol:

import Vue from 'vue'
import Vue2LeafletLocatecontrol from 'vue2-leaflet-locatecontrol'
Vue.component('v-locatecontrol', Vue2LeafletLocatecontrol)
Vue.use(Vue2LeafletLocatecontrol)

And the one for marker cluster is the same:

import Vue from 'vue'
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
Vue.component('v-marker-cluster', Vue2LeafletMarkerCluster)
Vue.use(Vue2LeafletMarkerCluster)

I've also been trying out editable circle marker with the same kind of integration but that doesn't create a conflict.

Any suggestions on how to debug are helpful.

Would you suggest any particular versions?

[stasoft91]

bump
Any progress yet?

[emdahlstrom]

@stasoft91 hi! I just accepted that I couldn't use both at once. It's a side project that I haven't had time to focus on over summer but will return to it in the fall. Maybe something will have changed in the ecosystem by then.

If you have a similar problem, maybe you can set up a codesandbox with an example and that might help the issue move forward

[quite]

I have the same problem. Just a fresh vue+vue2-leaflet project. Tried the same things as @emdahlstrom (same versions). I'm getting the TypeError: L.DistanceGrid is not a constructor before adding any marker components to the marker-cluster (I'm currently doing this when user clicks a control). Once markers are added, all hell breaks loose :) (a TypeError: Cannot read property 'getNearObject' of undefined for each marker).

Wondering is this is vue interactions, does vue2-leaflet-locatecontrol component creator @vUdav have any idea? Or leaflet-locatecontrol author @domoritz?

[domoritz]

I'm not familiar with vue or have a clue as to why this error occurrs.

[emdahlstrom]

@quite good to know that it isn't specific to Nuxt, thanks!

[quite]

I tried a "pure js" page, just including the libs. No problem, so this is vue related.

[banli17]

when i only import vue2-leaflet-polylinedecorator and not use, same error report

[banli17]

it sames version not compatible

[edwh]

I banged my head against this a lot. It wasn't when using locatecontrol - it was an intermittent problem I was seeing with vue2-leaflet-markercluster generally.

I didn't get to the bottom of it but I'll put what I found here in case someone else comes across this and it helps. So far as I could tell, the problem is that:

• The underlying Leaflet.markercluster library relies on the global L variable. It sets up DistanceGrid in there.
• The L variable is being recreated (somewhere), and so DistanceGrid isn't around when it tries to use it.

There is a pull request to remove Leaflet.markercluster's dependency on the global L here. But the library is not being actively maintained and so it has stalled. I'm not completely convinced that solves the problem.

After trying lots of things to make this work and failing, I gave up. Instead I wrote a clustering component which did the job for my purposes.

You can see the component code here and in action here. Feel free to use the code.

Under the covers this uses the Supercluster library to manipulate the data - which is the hard point. Once you have that, then showing that info on a vue2leaflet map is straightforward.

I'd still like to have the nice animations and extra function that vue2-leaflet-markercluster gives you, but this is a workaround for anyone else struggling with it.

[theianjohnson]

Still an issue here, @jperelli?

[vUdav]

Hi! I'm developer vue2-leaflet-locatecontrol and today I'm see this problem on my project. If I use my package with vue2-leaflet-markercluster on Nuxt then catch this problem.

I dont know how fix this, but on my project I'm just add L to global window object and this resolve for me!

import L from 'leaflet'

window.L = L;