bluehalo / ngx-leaflet-markercluster Goto Github PK

License: MIT License

JavaScript 20.89% HTML 8.72% TypeScript 69.80% SCSS 0.58%

ngx-leaflet-markercluster's Introduction

@asymmetrik/ngx-leaflet-markercluster

Extension to the @asymmetrik/ngx-leaflet package for Angular.io Provides leaflet.markercluster integration into Angular.io projects. Compatible with Leaflet v1.x and leaflet.markercluster v1.x Supports Angular v17 and Ivy, and use in Angular-CLI based projects

Install
Usage
Contribute
License

Install

Install the package and its peer dependencies via npm:

npm install leaflet @asymmetrik/ngx-leaflet
npm install leaflet.markercluster @asymmetrik/ngx-leaflet-markercluster

If you intend to use this library in a typescript project (utilizing the typings), you will need to also install the leaflet typings via npm:

npm install @types/leaflet @types/leaflet.markercluster

Usage

This plugin is used with the Angular.io Leaflet plugin.

The first step is to follow the instructions to get @asymmetrik/ngx-leaflet working. Next, follow a similar process to install and configure this plugin. Generally, the steps are:

Install this package and its dependencies (see above).
Import the leaflet.markercluster stylesheet (i.e., node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css and .../MarkerCluster.css for animations).
- Follow the same process as documented in @asymmetrik/ngx-leaflet.
Import the LeafletMarkerClusterModule into your Angular application module and local module (if applicable).
Create and configure a map (see docs below and/or demo)

To create a map, use the leaflet attribute directive. This directive must appear first. You must specify an initial zoom/center and set of layers either via leafletOptions or by binding to leafletZoom, leafletCenter, and leafletLayers.

<div style="height: 400px;"
     leaflet
     [leafletOptions]="options"
     [leafletMarkerCluster]="markerClusterData"
     [leafletMarkerClusterOptions]="markerClusterOptions">
</div>

Finally, to initialize and configure the leaflet markercluster plugin, use the following attribute directives:

leafletMarkerCluster

This attribute is an attribute directive that initiates the marker cluster plugin and binds the marker data.

leafletMarkerClusterOptions

Input binding for the options to be passed directly to the marker cluster plugin upon creation. These options are only currently processed at creation time.

The options object is passed through to the leaflet.markercluster object. Therefore, you can reference their documentation for help configuring this plugin.

Getting a reference to the MarkerCluster Layer

There is an optional output event emitter that will expose the markercluster group being used by the plugin called leafletMarkerClusterReady. See the following example:

<div style="height: 400px;"
     leaflet
     [leafletOptions]="options"
     [leafletMarkerCluster]="markerClusterData"
     [leafletMarkerClusterOptions]="markerClusterOptions"
     (leafletMarkerClusterReady)="markerClusterReady($event)">
</div>

markerClusterReady(markerCluster: L.MarkerClusterGroup) {
	// Do stuff with group
}

Contribute

PRs accepted. If you are part of BlueHalo, please make contributions on feature branches off of the develop branch. If you are outside of BlueHalo, please fork our repo to make contributions.

License

See LICENSE in repository for details.

ngx-leaflet-markercluster's People

Contributors

Stargazers

Watchers

ngx-leaflet-markercluster's Issues

How to deal with markers coming from async call?

Hello, I have markers coming from an async call. Here is my code in the component file:

    markerClusterData: Array<any> = [];
    markerClusterOptions: L.MarkerClusterGroupOptions = { showCoverageOnHover: true, maxClusterRadius: 64 };

    constructor(searchService: SearchService) {
        searchService.getUsers().subscribe(elements => {
           elements.forEach(item => {
               this.markerClusterData.push(marker([item.lat, item.lon]));
           });
        });

And here is the code in the template:

<div id="map"
     leaflet
     [leafletOptions]="options"
     [leafletMarkerCluster]="markerClusterData"
     [leafletMarkerClusterOptions]="markerClusterOptions">
</div>

I can see the map but I cannot see any cluster nor markers. What's wrong with my code?

Sub-plugin support?

Leaflet.markercluster has "sub-plugins".

One of these "sub-plugins" is Leaflet.MarkerCluster.List by @adammertel which is more "mobile friendly" than the regular clusters.

However, I'm unable to add this sub-plugin and I'm wondering if "sub-plugins" are supported by ngx-leaflet-markercluster?

Thanks for reading! 😄

Edit: This is related to issues #26 and #42 which are both sub-plugins leaflet.markercluster.freezable and leaflet.markercluster.layersupport by @ghybs
Seems like I'm not the only one who cannot get sub-plugins to work with ngx-leaflet-markercluster?

need to upgrade to angular v17

new angular version is 17. ngx-leaflet has already been updated to v17

Can't bind to 'leafletMarkerCluster' since it isn't a known property of 'div'

I'm using ngx-leaflet-markercluster in an angular 5 application. I changed my code according to the demo but still getting the following error:

Can't bind to 'leafletMarkerCluster' since it isn't a known property of 'div'.

Namespace '"C:/Data/Solutions/.../node_modules/@types/leaflet/index"' has no exported member 'MarkerClusterGroup'.

ERROR TypeError: a.markerClusterGroup is not a function

I am currently using the following:

"@asymmetrik/ngx-leaflet": "^5.0.2",
"@asymmetrik/ngx-leaflet-markercluster": "^2.1.1"

During development everything is fine. However, when I build the angular project for production and hosting it, I am not able to see the clusters and I get the following error in Chrome's console:

ERROR TypeError: a.markerClusterGroup is not a function
    at t.ngOnInit (main-es2015.94505399b2d83c23de95.js:1)
    at main-es2015.94505399b2d83c23de95.js:1
    at main-es2015.94505399b2d83c23de95.js:1
    at Kb (main-es2015.94505399b2d83c23de95.js:1)
    at xw (main-es2015.94505399b2d83c23de95.js:1)
    at Object.updateDirectives (14-es2015.a3c30690716486447af1.js:1)
    at Object.updateDirectives (main-es2015.94505399b2d83c23de95.js:1)
    at Xb (main-es2015.94505399b2d83c23de95.js:1)
    at rw (main-es2015.94505399b2d83c23de95.js:1)
    at nw (main-es2015.94505399b2d83c23de95.js:1)

I am importing 'leaflet' and 'leaflet.markercluster' in my component.

Link to StackOverflow question (more details).

Any ideas?

Clustering Polylines and Polygons

Is it possible to extend the Polygon and Polyline classes to create clusterable shapes in similar way as with JS Leaflet (see snippet)? Just inserting the following snippet gives an unsurprising

Property clusterableX does not exist on type 'typeof L'

L.ClusterablePolyline = L.Polyline.extend({
    _originalInitialize: L.Polyline.prototype.initialize,

    initialize: function (bounds, options) {
        this._originalInitialize(bounds, options);
        this._latlng = this.getBounds().getCenter();
    },

    getLatLng: function () {
        return this._latlng;
    },

    // dummy method.
    setLatLng: function () {
    }
});


L.ClusterablePolygon = L.Polygon.extend({
    _originalInitialize: L.Polygon.prototype.initialize,

    initialize: function (bounds, options) {
        this._originalInitialize(bounds, options);
        this._latlng = this.getBounds().getCenter();
    },

    getLatLng: function () {
        return this._latlng;
    },

    // dummy method.
    setLatLng: function () {
    }
});

Error: export 'markerClusterGroup' (imported as 'L') was not found in 'leaflet'

Hello,

I'm getting a weird error starting today in my Angular project. Things worked fine for quite many months but starting today my CI cannot build the project anymore and then doing a clean build on my local machine also fails with the following error:

./node_modules/@asymmetrik/ngx-leaflet-markercluster/fesm2020/asymmetrik-ngx-leaflet-markercluster.mjs:20:32-52 - Error: export 'markerClusterGroup' (imported as 'L') was not found in 'leaflet' (possible exports: Bounds, Browser, CRS, Canvas, Circle, CircleMarker, Class, Control, DivIcon, DivOverlay, DomEvent, DomUtil, Draggable, Evented, FeatureGroup, GeoJSON, GridLayer, Handler, Icon, ImageOverlay, LatLng, LatLngBounds, Layer, LayerGroup, LineUtil, Map, Marker, Mixin, Path, Point, PolyUtil, Polygon, Polyline, Popup, PosAnimation, Projection, Rectangle, Renderer, SVG, SVGOverlay, TileLayer, Tooltip, Transformation, Util, VideoOverlay, bind, bounds, canvas, circle, circleMarker, control, default, divIcon, extend, featureGroup, geoJSON, geoJson, gridLayer, icon, imageOverlay, latLng, latLngBounds, layerGroup, map, marker, noConflict, point, polygon, polyline, popup, rectangle, setOptions, stamp, svg, svgOverlay, tileLayer, tooltip, transformation, version, videoOverlay)

Here is my package.json file:

{
  "name": "app",
  "version": "1.10.3",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~14.2.3",
    "@angular/cdk": "^14.2.2",
    "@angular/common": "~14.2.3",
    "@angular/compiler": "~14.2.3",
    "@angular/core": "~14.2.3",
    "@angular/forms": "~14.2.3",
    "@angular/localize": "^14.2.3",
    "@angular/platform-browser": "~14.2.3",
    "@angular/platform-browser-dynamic": "~14.2.3",
    "@angular/router": "~14.2.3",
    "@asymmetrik/ngx-leaflet": "^14.0.1",
    "@asymmetrik/ngx-leaflet-markercluster": "^14.0.1",
    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
    "@popperjs/core": "^2.11.6",
    "@stripe/stripe-js": "^1.37.0",
    "@tinymce/tinymce-angular": "^7.0.0",
    "@types/leaflet": "^1.8.0",
    "@types/leaflet.markercluster": "^1.5.1",
    "bootstrap": "^5.2.1",
    "d3": "^7.6.1",
    "file-saver-es": "^2.0.5",
    "font-awesome": "^4.7.0",
    "leaflet": "^1.9.0",
    "leaflet.markercluster": "^1.5.3",
    "ngx-stripe": "^14.1.0",
    "rxjs": "~7.5.6",
    "socket.io-client": "^4.5.2",
    "tinymce": "^6.2.0",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~14.2.3",
    "@angular/cli": "~14.2.3",
    "@angular/compiler-cli": "~14.2.3",
    "@angular/language-service": "~14.2.3",
    "@types/jasmine": "~4.3.0",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "^18.7.18",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~4.4.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~10.9.1",
    "eslint": "~8.23.1",
    "typescript": "~4.8.3"
  }
}

Do you know what could trigger the above error? I'm just launching ng build and get that error. Many thanks!

Error: export 'markerClusterGroup' (imported as 'L') was not found in 'leaflet'

global Angular CLI version (14.2.4)
local version (12.2.18).

"@types/leaflet": "^1.7.9",
"@types/leaflet-polylinedecorator": "^1.6.1",
"@types/leaflet-rotatedmarker": "^0.2.2",
"@types/leaflet.markercluster": "^1.4.6",

"leaflet": "^1.7.1",
"leaflet-arrowheads": "^1.2.3",
"leaflet-drift-marker": "^2.0.0",
"leaflet-polylinedecorator": "^1.6.0",
"leaflet-rotatedmarker": "^0.2.0",
"leaflet-routing-machine": "^3.2.12",
"leaflet.marker.slideto": "^0.3.0",
"leaflet.markercluster": "^1.5.3",

/node_modules/@asymmetrik/ngx-leaflet-markercluster/__ivy_ngcc__/dist/leaflet-markercluster/leaflet-markercluster.directive.js:18:34-54 - Error: export 'markerClusterGroup' (imported as 'L') was not found in 'leaflet' (possible exports: Bounds, Browser, CRS, Canvas, Circle, CircleMarker, Class, Control, DivIcon, DivOverlay, DomEvent, DomUtil, Draggable, Evented, FeatureGroup, GeoJSON, GridLayer, Handler, Icon, ImageOverlay, LatLng, LatLngBounds, Layer, LayerGroup, LineUtil, Map, Marker, Mixin, Path, Point, PolyUtil, Polygon, Polyline, Popup, PosAnimation, Projection, Rectangle, Renderer, SVG, SVGOverlay, TileLayer, Tooltip, Transformation, Util, VideoOverlay, bind, bounds, canvas, circle, circleMarker, control, default, divIcon, extend, featureGroup, geoJSON, geoJson, gridLayer, icon, imageOverlay, latLng, latLngBounds, layerGroup, map, marker, noConflict, point, polygon, polyline, popup, rectangle, setOptions, stamp, svg, svgOverlay, tileLayer, tooltip, transformation, version, videoOverlay)

Images for clusters aren't displayed

Hello,

I'm trying to use this plugin to display clusters of markers. It seems to work fine but I can't display images for clusters.

FYI I use this configuration in the angular cli config for ngx-leaflet for assets:

            "assets": [
              {
                "glob": "**/*",
                "input": "./node_modules/leaflet/dist/images",
                "output": "leaflet/"
              },
              "src/favicon.ico",
              "src/assets"
            ],

Thanks for your help!
Thierry

Markerclustergroup doesn't render after onmapready

Dear,

I am using your package together with NGX-leaflet and it is awesome.
The last week I have creating a POC with markerclustering and it worked great but this was with mocked data.
Now when using real data (which means there is a delay until we get the data I am not able to add the markercluster group.

I do the drawing and adding to different layers after I receive the data but it doesn't seem the markerClusterGroup picks this up.

Some code which might come in handy:
` // Get data from API and process data
this.mapsService.getDayPlanning(dayPlanningFilter).subscribe(data => {
this.processData(data);

  console.log('-- add layers');
  this.loaded = true;
  this.markerClusterGroup.addLayers([
    this.visitLayerGroup,
    this.addressLayerGroup,
    this.arrowLayerGroup,
    this.technicianLayerGroup]).refreshClusters();

});

this.options = {
  zoomSnap: 0.5,
  layers: [
    tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '' }),
    this.arrowHeadLayerGroup,
  ],
  zoom: 5,
  center: latLng(50.865020, 4.666740)
};`

This code all lives in the NgOnInit and the ProcessData is a function that draws some polylines and markers based on data.
These markers/polylines are added to different types of layers that gets added to the MarkerClusterGroup in the end.

Hope you can help me out find the issue here.

If you need more information I would love to give it!

Undefined markerData in asymmetrick-ngx-leaflet-markercluster.mjs:23:1

I have no issues running ngx markercluster, but I keep getting a nagging error in my console.

 ERROR TypeError: Cannot read properties of undefined (reading 'getLatLng')
    at NewClass.addLayer (leaflet.markercluster-src.js:104:1)
    at NewClass.addLayers (leaflet.markercluster-src.js:208:1)
    at LeafletMarkerClusterDirective.setData (asymmetrik-ngx-leaflet-markercluster.mjs:37:1)
    at LeafletMarkerClusterDirective.ngOnInit (asymmetrik-ngx-leaflet-markercluster.mjs:23:1)
    at callHook (core.mjs:2549:1)
    at callHooks (core.mjs:2518:1)
    at executeInitAndCheckHooks (core.mjs:2469:1)
    at refreshView (core.mjs:9514:1)
    at refreshComponent (core.mjs:10670:1)
    at refreshChildComponents (core.mjs:9295:1)

I'm not quite sure why but for some reason the markerData in the following code is getting read as undefined, even if I default the input of [leafletMarkerCluster]. markerData is undefined on the first pass of ngOnChanges, followed by ngOnInit, and finally it is defined on the second pass of ngOnChanges. This throws 2 of the above errors in the console.

class LeafletMarkerClusterDirective {
    constructor(leafletDirective) {
        // Hexbin data binding
        this.markerData = [];
        // Fired when the marker cluster is created
        this.markerClusterReady = new EventEmitter();
        this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
    }
    ngOnInit() {
        this.leafletDirective.init();
        const map = this.leafletDirective.getMap();
        this.markerClusterGroup = L.markerClusterGroup(this.markerClusterOptions);
        // Add the marker cluster group to the map
        this.markerClusterGroup.addTo(map);
        // Set the data now that the markerClusterGroup exists
        this.setData(this.markerData);
        // Fire the ready event
        this.markerClusterReady.emit(this.markerClusterGroup);
    }
    ngOnChanges(changes) {
        // Set the new data
        if (changes['markerData']) {
            this.setData(this.markerData);
        }
    }

Could this be fixed by adding a check for undefined in the spots where this is called? For now I'll just have to let my developers know not to worry about the errors.

"dependencies": {
    "@angular/animations": "~13.2.7",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "~13.2.2",
    "@angular/compiler": "~13.2.2",
    "@angular/core": "~13.2.7",
    "@angular/forms": "~13.2.2",
    "@angular/platform-browser": "~13.2.2",
    "@angular/platform-browser-dynamic": "~13.2.2",
    "@angular/router": "~13.2.2",
    "@asymmetrik/ngx-leaflet": "^13.0.2",
    "@asymmetrik/ngx-leaflet-markercluster": "^13.0.0",
    "@ngx-formly/core": "^5.10.18",
    "@ngx-formly/primeng": "^5.10.18",
    "@types/esri-leaflet": "^2.1.9",
    "@types/leaflet": "^1.9.0",
    "@types/leaflet.markercluster": "^1.5.1",
    "chart.js": "^3.8.0",
    "esri-leaflet": "^3.0.9",
    "leaflet": "^1.9.3",
    "leaflet.markercluster": "^1.5.3",
    "lottie-web": "^5.9.6",
    "ngx-lottie": "^8.2.0",
    "ngx-mask": "^12.0.0",
    "primeflex": "^2.0.0",
    "primeicons": "^5.0.0",
    "primeng": "^13.4.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  }

ngx-leaflet spiderfy marker.cluster with condition

I,m using ngx-leaflet-markercluster to show large number of points on the map.

in some cases I have the large number of points with the same latLng that in max zoom Level, spiderfy showing feature not work properly and get confused end user.

is there anyway to check points count to decide whether show in spiderfy or not

Peer dependencies Angular 10

I am using the plugin in a Angular 10 app.

In Angular 10 tslib@2 is used. Thus the peer dependency to tslib@1 cannot be fullfilled.
Another peer dependency declared by this lib is leaflet@2.

As far as i know the latest version of leaflet is 1.7 and there is no version 2.

TypeError: L.markerClusterGroup is not a function

Hi,

I just tried implementing the markerCluster functionality into my application based on Angular17 (with standalone Components). I copied the example from this repo 1:1 (as own module as in the example) and getting the following error:
TypeError: L.markerClusterGroup is not a function

The Error is thrown within the directive in the ngOnInit (line 18). See the following screenshot.

Extract from package.json:
"leaflet": "^1.9.4", "leaflet.markercluster": "^1.5.3", "@asymmetrik/ngx-leaflet": "^17.0.0", "@asymmetrik/ngx-leaflet-markercluster": "^17.0.0",

typings for leaflet markercluster

I had some issue with at-loader while building the project. I had to change
@types/leaflet-markercluster
to
@types/leaflet.markercluster

in the dependencies.

Hope it helps.

marker cluster module error

i cant import the marker cluster module it fails

Using leaflet.markercluster.freezable

Hi,

I want to make use of the package leaflet.markercluster.freezable but when I try to enable/disable clustering it doesn't seem to do anything.

I use it as follows:
`onMapReady(map: Map) {
this.map = map;

map.on('moveend', function() {
  const visibleMarkerCount = this.calculateVisibleMarkers(map);
  if (visibleMarkerCount  >= 50) {
    this.markerClusterGroup.enableClustering();
    if (map.hasLayer(this.arrowHeadLayerGroup)) {
        map.removeLayer(this.arrowHeadLayerGroup);
    }
    if (map.hasLayer(this.arrowLayerGroup)) {
      map.removeLayer(this.arrowLayerGroup);
    }
}
if (visibleMarkerCount < 50) {
    this.markerclusterGroup.disableClustering();
    if (!map.hasLayer(this.arrowHeadLayerGroup)) {
      map.addLayer(this.arrowHeadLayerGroup);
    }
    if (!map.hasLayer(this.arrowLayerGroup)) {
      map.addLayer(this.arrowLayerGroup);
    }
}
}.bind(this));

I also import the package like follows:
import 'leaflet.markercluster.freezable';

And it is added in my angular.json as follows:
"scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/signalr/jquery.signalR.js", "./node_modules/leaflet/dist/leaflet.js", "./node_modules/leaflet.markercluster.freezable/dist/leaflet.markercluster.freezable.js" ]

I am wondering if there is something Angular specific why this isn't working ?
Or am I still doing something wrong.

Hope you can help me out because not sure where the problem could be.

Thanks very much in advance!

Angular v15 is not supported

I cannot use this extension with Angular v15. When I try to install it I get this error message:

PS C:\localRepositories\Private\TestLeaflet> npm install leaflet.markercluster @asymmetrik/ngx-leaflet-markercluster
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^15.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"14" from @asymmetrik/[email protected]
npm ERR! node_modules/@asymmetrik/ngx-leaflet-markercluster
npm ERR!   @asymmetrik/ngx-leaflet-markercluster@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Add instructions for markercluster styles to README

The README makes no mention of importing the styles for leaflet.markercluster. If you don't include these, the clusters won't render properly.

Ao.markerClusterGroup is not a function

Hello, thanks for the good library.

I had a problem, after the project is build, an error occurs.
For the assembly, I use cli

node_modules/@types/leaflet/index"' has no exported member 'MarkerClusterGroup'

Hi,

Its still issue there. I have added @typings and all packages from readme

env:

Angular CLI: 9.0.7
Node: 14.4.0
OS: win32 x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/cdk                      9.1.3
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

angular.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": { ...
            ],
            "styles": [ ...
              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",

package.json

dependencies: [
  "@asymmetrik/ngx-leaflet": "^8.1.0",
  "@asymmetrik/ngx-leaflet-markercluster": "^5.0.0",
  "@types/leaflet": "^1.5.19",
  "@types/leaflet.markercluster": "^1.4.3",
  "leaflet": "^1.7.1",
  "leaflet.markercluster": "^1.4.1",
]

I have also checked the @types/leaflet/index directive if it have those 'MarkerClusterGroup' and it's missing.
If You see something wrong here please let me know.

Regards

"TypeError: L.markerClusterGroup is not a function" while testing with Jest

Hello,
I have no issues while developing, but I'm having this one while running a component test with Jest:

MapComponent › should create

TypeError: L.markerClusterGroup is not a function

  31 |     fixture = TestBed.createComponent(MapComponent);
  32 |     component = fixture.componentInstance;
> 33 |     fixture.detectChanges();
     |             ^
  34 |   });
  35 |
  36 |   it('should create', () => {

  at LeafletMarkerClusterDirective.ngOnInit (node_modules/@asymmetrik/ngx-leaflet-markercluster/fesm2020/asymmetrik-ngx-leaflet-markercluster.mjs:20:37)
  at callHook (node_modules/@angular/core/fesm2020/core.mjs:2498:22)
  at callHooks (node_modules/@angular/core/fesm2020/core.mjs:2467:17)
  at executeInitAndCheckHooks (node_modules/@angular/core/fesm2020/core.mjs:2418:9)
  at refreshView (node_modules/@angular/core/fesm2020/core.mjs:11984:21)
  at refreshComponent (node_modules/@angular/core/fesm2020/core.mjs:13043:13)
  at refreshChildComponents (node_modules/@angular/core/fesm2020/core.mjs:11759:9)
  at refreshView (node_modules/@angular/core/fesm2020/core.mjs:12019:13)
  at detectChangesInternal (node_modules/@angular/core/fesm2020/core.mjs:13187:9)
  at RootViewRef.detectChanges (node_modules/@angular/core/fesm2020/core.mjs:13699:9)
  at ComponentFixture._tick (node_modules/@angular/core/fesm2020/testing.mjs:140:32)
  at node_modules/@angular/core/fesm2020/testing.mjs:153:22
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
  at Object.onInvoke (node_modules/@angular/core/fesm2020/core.mjs:26231:33)
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
  at NgZone.run (node_modules/@angular/core/fesm2020/core.mjs:26085:28)
  at ComponentFixture.detectChanges (node_modules/@angular/core/fesm2020/testing.mjs:152:25)
  at src/app/feature/search/components/map/map.component.spec.ts:33:13
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
  at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4330:34)

My package.json (the gist related to leaflet) contains:

"dependencies": {
    ...
    "@asymmetrik/ngx-leaflet": "^14.0.1",
    "@asymmetrik/ngx-leaflet-markercluster": "^14.0.1",
    ...
    "leaflet": "^1.8.0",
    "leaflet.markercluster": "^1.5.3",
},
"devDependencies": {
    ...
    "@types/leaflet": "^1.9.0",
    "@types/leaflet.markercluster": "^1.5.1",
    ...
}

Removing the leafletMarkerCluster directive from the component template passes the test.

What can I do?

Thanks

Support of Leaflet.MarkerCluster.LayerSupport

Hello,

Thanks for this awesome extension.

I'd like to know if it is possible to extend this extension to allow use Leaflet.MarkerCluster.LayerSupport natively.

Or is it better to create a new extension poject like : ngx-leaflet-markercluster-layersupport (https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport)

Thanks

L.MarkerClusterGroup is not an exported member.

i am not able to create marker cluster group because showing error

frontend/node_modules/@types/leaflet/index"' has no exported member 'MarkerClusterGroup'.

have followed all steps and normal map is working properly

2 different sets of leafletMarkerCluster

Hello. How can i use with leaflet directive 2 different sets of leafletMarkerCluster with different leafletMarkerClusterOptions ?

Module Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

I've added the the package as documented. When I add the module to my module's import, I get the following error.

node_modules/@asymmetrik/ngx-leaflet-markercluster/dist/leaflet-markercluster/leaflet-markercluster.module.d.ts:2:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@asymmetrik/ngx-leaflet-markercluster) which declares LeafletMarkerClusterModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2 export declare class LeafletMarkerClusterModule {

Here's the output of my ng v

Angular CLI: 9.0.4
Node: 12.14.0
OS: win32 x64

Angular: 9.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.4
@angular-devkit/build-angular     0.900.4
@angular-devkit/build-optimizer   0.900.4
@angular-devkit/build-webpack     0.900.4
@angular-devkit/core              9.0.4
@angular-devkit/schematics        9.0.4
@angular/cdk                      9.1.2
@angular/fire                     6.0.0
@angular/google-maps              9.1.0
@ngtools/webpack                  9.0.4
@schematics/angular               9.0.4
@schematics/update                0.900.4
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Thanks

Map has no maxZoom specified

This is just an FYI issue, if anyone else runs into this:

markercluster throws error Map has no maxZoom specified if max zoom is not specified.
A solution can be specifying max zoom, but than that would override the tile's max zoom (leading to too little, or too much zoom)

Relevant code part that cause the issue:

    <div
      leaflet
      [leafletOptions]="mapOptions"
      (leafletMapReady)="onMapReady($event)">
    </div>

mapOptions: MapOptions = {
    zoom: 2,
    center: latLng(0, 0),
    layers: [markerClusterGroup()]
  };

Possible workaround:

setting dummy max zoom by default:

mapOptions: MapOptions = {
    zoom: 2,
    // setting max zoom is needed to MarkerCluster https://github.com/Leaflet/Leaflet.markercluster/issues/611
    maxZoom: 2,
    center: latLng(0, 0),
    layers: [markerClusterGroup()]
  };

Then removing it once the map loaded, so it can fallback to the tile's max zoom:

onMapReady(map: Map): void {
    this.leafletMap = map;
    this.leafletMap.setMaxZoom(undefined);
  }

Related issue at leaflet: Leaflet/Leaflet.markercluster#611

L.DistanceGrid is not a constructor

I'v got this error when i destroy all map component, then init map again. First time working everything correctly.

package.json:

"@asymmetrik/ngx-leaflet": "^14.0.0",
  "@asymmetrik/ngx-leaflet-markercluster": "^14.0.1",
  "leaflet": "1.8.0",
  "leaflet-fullscreen": "^1.0.2",
  "leaflet-loading": "^0.1.24",
  "leaflet.locatecontrol": "^0.76.1",
  "leaflet.markercluster": "^1.5.3",

zoomToShowLayer not firing callback

In certain situations the zoomToShowLayer callback is not fired.

I have created a reproduction of this issue:

https://plnkr.co/edit/PZlXx7gZQXQ9bees6GbB?p=preview

Steps to reproduce:

Click the "Jump" button
Notice it should log out "callback fired!!!" but it does not
Zoom out slowly and eventually the callback will fire.

I have created this same example without angular and the same issue does not exist:

https://jsfiddle.net/aharris/pdt8kq4o/

Clicking jump fires the callback every time.

Error "export 'markerClusterGroup' (imported as 'L') was not found in 'leaflet'" in file leaflet-markercluster.directive.js

This setup has worked for weeks, and today it suddenly does not work.
Error is coming from node_modules/@asymmetrik/ngx-leaflet-markercluster/__ivy_ngcc__/dist/leaflet-markercluster/leaflet-markercluster.directive.js
Tried on two different computers.

I have tried to delete node_modules and package-lock.json and running npm install again.

npm 8.15.0
node v16.17.0

package.json

"dependencies": {
    "@asymmetrik/ngx-leaflet": "^8.1.0",
    "@asymmetrik/ngx-leaflet-markercluster": "^5.0.1",
    "@types/leaflet.markercluster": "^1.4.5",
    "leaflet": "^1.7.1",
    "leaflet.markercluster": "^1.5.1",
    "proj4": "^2.7.5",
    "proj4leaflet": "^1.0.2",
},
"devDependencies": {
    "@types/leaflet": "^1.7.5",
    "@types/proj4": "^2.5.2",
    "@types/proj4leaflet": "^1.0.6",
}

Error:

Error: ./node_modules/@asymmetrik/ngx-leaflet-markercluster/__ivy_ngcc__/dist/leaflet-markercluster/leaflet-markercluster.directive.js 18:34-54
"export 'markerClusterGroup' (imported as 'L') was not found in 'leaflet'
    at HarmonyImportSpecifierDependency._getErrors (/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:1463:22)
    at /frontend/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:1258:10
    at _next0 (eval at create (/frontend/node_modules/@angular-devkit/build-angular/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:1)
    at eval (eval at create (/frontend/node_modules/@angular-devkit/build-angular/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:45:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
 @ ./node_modules/@asymmetrik/ngx-leaflet-markercluster/__ivy_ngcc__/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

TypeError on Loading MarkerClusterDirective

Hi. I want to use ngx-leaflet-markercluster in an Ionic 4 app with Angular 7.2.2.
I get the following error on loading the MarkerClusterDirective:

ERROR TypeError: L.MarkerClusterGroup is not a constructor
    at Object.push../node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js.L.markerClusterGroup (leaflet.markercluster-src.js:1385)
    at LeafletMarkerClusterDirective.push../node_modules/@asymmetrik/ngx-leaflet-markercluster/dist/leaflet-markercluster/leaflet-markercluster.directive.js.LeafletMarkerClusterDirective.ngOnInit (leaflet-markercluster.directive.js:25)
    at checkAndUpdateDirectiveInline (core.js:22098)
    at checkAndUpdateNodeInline (core.js:23362)
    at checkAndUpdateNode (core.js:23324)
    at debugCheckAndUpdateNode (core.js:23958)
    at debugCheckDirectivesFn (core.js:23918)
    at Object.eval [as updateDirectives] (LeafletMapComponent.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910)
    at checkAndUpdateView (core.js:23306)

My component looks like the demo file:

<div id="map" 
  leaflet 
  [leafletOptions]="options" 
  (leafletMapReady)="onMapReady($event)"
  
  [leafletMarkerClusterOptions]="markerClusterOptions"
  [leafletMarkerCluster]="markerClusterData" 
  (leafletMarkerClusterReady)="markerClusterReady($event)">
</div>

On init markerClusterData is an empty Array [].
As markerClusterOptions I use the default options from leaflet.markercluster

I have installed the latest packages as well as the latest types versions.

dependancies
    "@asymmetrik/ngx-leaflet": "^5.0.1",
    "@asymmetrik/ngx-leaflet-markercluster": "^2.0.0",
    "leaflet": "^1.4.0",
    "leaflet.markercluster": "^1.4.1",

devDependancies
    "@types/leaflet": "^1.4.3",
    "@types/leaflet.markercluster": "^1.4.0",
    "typescript": "~3.1.6"

I have absolutely no Idea how to fix this problem.

Angular v16 is not supported

I cannot use this extension with Angular v15. When I try to install it I get this error message:

λ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^16.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"15" from @asymmetrik/[email protected]
npm ERR! node_modules/@asymmetrik/ngx-leaflet-markercluster
npm ERR! @asymmetrik/ngx-leaflet-markercluster@"^15.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See d:\tools\nodejs\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! d:\tools\nodejs\npm-cache_logs\2023-05-17T08_02_01_399Z-debug-0.log`

Namespace L has no exported member MarkerClusterGroup

When I use markerClusterReady I got this error :

ERROR in /Users/siyanew/Visualizer/Visualizer/src/app/app.component.ts (77,39): Namespace 'L' has no exported member 'MarkerClusterGroup'.

What can I do ?

bluehalo / ngx-leaflet-markercluster Goto Github PK

ngx-leaflet-markercluster's Introduction

@asymmetrik/ngx-leaflet-markercluster

Table of Contents

Install

Usage

leafletMarkerCluster

leafletMarkerClusterOptions

Getting a reference to the MarkerCluster Layer

Contribute

License

ngx-leaflet-markercluster's People

Contributors

Stargazers

Watchers

Forkers

ngx-leaflet-markercluster's Issues

Recommend Projects

Recommend Topics

Recommend Org