Open Battozxz opened 6 years ago
Hi, I have exactly the same issue but with a Vuejs project
import L from 'leaflet'
import Vue2Leaflet from 'vue2-leaflet'
import { PruneCluster, PruneClusterForLeaflet } from 'prunecluster'
export default {
...
methods: {
setClusters (data) {
var markerLayer = new PruneClusterForLeaflet()
for (var i = 0; i < data.length; i++) {
var marker = new PruneCluster.Marker(data[i].s[2], data[i].s[3])
markerLayer.RegisterMarker(marker)
}
map.addLayer(markerLayer)
markerLayer.ProcessView()
}
}
...
}
and got a
TypeError: __WEBPACK_IMPORTED_MODULE_10_prunecluster__.PruneClusterForLeaflet is not a constructor
i have also tried https://github.com/SINTEF-9012/PruneCluster/issues/115 but get the following error in that case:
no-webpack-loader-syntax Unexpected '!' in 'exports-loader?PruneCluster,PruneClusterForLeaflet!prunecluster/dist/PruneCluster.js'. Do not use import syntax to configure webpack loaders
I am a bit frustated as I need to migrate my old pruneCluster project to VueJS now
Thank you for your help
Sylvain
Hi, This is how i did overcome my issues above.
Following recommendation from https://github.com/facebookincubator/create-react-app/issues/1015
I have added the following line to prevent the eslint error:
/* eslint import/no-webpack-loader-syntax: off */
import { PruneCluster, PruneClusterForLeaflet } from 'exports-loader?PruneCluster,PruneClusterForLeaflet!prunecluster/dist/PruneCluster.js'
import 'prunecluster/dist/LeafletStyleSheet.css'
It's a bit dirty but it works in my case.
Cheers S.
Hi, How I wish this also can work for angular.
Any idea to go about this?
Hey Guys! I'm having the same issue. Has anyone managed to solve it?
I'm trying to use in Angular 7 Project.
in package.json "prunecluster": "2.1.0",
in angular.json
in "styles": [ "./node_modules/prunecluster/dist/LeafletStyleSheet.css",
"scripts": [ "./node_modules/prunecluster/dist/PruneCluster.js",
Then use it in your map component
Hi! Thanks for your reply! After installing @types/leaflet and follow your instructions, I got this error:
Leaflet types don't have any exported member ILayer:
@hansbrito , did you manage to make it work? If anybody has a clear explanation of how i could add PruneCLuster to an angular-cli project.
Yes, i`ve changed in PruneCluster Library:
Everytime I install a new library i need to replace entire folder.
It isn't a solution, only a workaround.
Thanks @hansbrito, but you just inserted .js and .css files like @TheVoxell suggested? Could you tell me how you call pruneCluster and pruneCLusterForLeaflet Constructors in your components ?
angular.json
import Styles:
"node_modules/prunecluster/dist/LeafletStyleSheet.css",
and scripts:
"node_modules/prunecluster/dist/PruneCluster.js",
inside my Component:
declare this variables:
on ngInit:
on onMapReady:
Now you can use like documentation says, adding markers ....
const _marker = new PruneCluster.Marker(packet.lat, packet.lng);
this.pruneCluster.RegisterMarker(_marker);
Thank you for your precious help, i really appreciate
Try: import { PruneCluster, PruneClusterForLeaflet } from "exports-loader?exports[]=PruneCluster&exports[]=PruneClusterForLeaflet!@sintef/prune-cluster/dist/PruneCluster.js"
There is actually a syntax error in the import statement
Hi, i looking for a way to install this library en my project with angular cli but when i try to import the dependencies like this:
import { PruneCluster, PruneClusterForLeaflet } from 'prunepluster'
in my component... i got the following error:
WEBPACK IMPORT MODULE _3_prunecluster _default PruneCluster is not a constructor
Any help?