Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
emdahlstrom opened this issue May 12, 2019 · 14 comments

Comments

@emdahlstrom
Copy link

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
Copy link
Owner

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
Copy link
Author

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?

@jperelli jperelli pinned this issue May 14, 2019
@stasoft91
Copy link

bump
Any progress yet?

@emdahlstrom
Copy link
Author

@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
Copy link

quite commented Sep 10, 2019

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
Copy link

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

@emdahlstrom
Copy link
Author

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

@quite
Copy link

quite commented Sep 12, 2019

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

@banli17
Copy link

banli17 commented Oct 22, 2019

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

@banli17
Copy link

banli17 commented Oct 25, 2019

it sames version not compatible

@edwh
Copy link

edwh commented Oct 8, 2020

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
Copy link

Still an issue here, @jperelli?

@vUdav
Copy link

vUdav commented Jul 23, 2021

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;

@pengge
Copy link

pengge commented Oct 10, 2021

try to delete node_modules\leaflet folder

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants