jperelli / vue2-leaflet-markercluster

markercluster plugin extension for vue2-leaflet package
MIT License
132 stars 55 forks source link

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

Open emdahlstrom opened 5 years ago

emdahlstrom commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

bump Any progress yet?

emdahlstrom commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

emdahlstrom commented 5 years ago

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

quite commented 5 years ago

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

banli17 commented 4 years ago

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

banli17 commented 4 years ago

it sames version not compatible

edwh commented 4 years ago

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:

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 commented 3 years ago

Still an issue here, @jperelli?

vUdav commented 3 years ago

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 commented 3 years ago

try to delete node_modules\leaflet folder