Add clustered markers #1044

jigfox · 2017-06-12T11:43:06Z

This adds a new directive <agm-cluster> which allows to group markers into clusters if they are near each other like described and requested in #307. It uses the https://github.com/googlemaps/js-marker-clusterer to achieve this goal.

hismethod

What a Good Feature what I want!!!!

sebholstein

@jigfox wow, thank you, this looks really good!

One note: I would like to keep the @agm/core package as a place for core Google Maps API features, so this package has no other external dependencies (like js-marker-clusterer).

We need to think about how we can structure this repo so that we can host multiple packages (like in the official angular repo).

I would propose the following package name: @agm/js-marker-clusterer

sebholstein · 2017-06-12T18:07:50Z

src/core/directives/cluster.ts

+  selector: 'agm-cluster',
+  providers: [ClusterManager, {provide: MarkerManager, useExisting: ClusterManager}]
+})
+export class AgmCluster implements OnDestroy, OnChanges, OnInit {


AgmMarkerCluster

sebholstein · 2017-06-12T18:08:16Z

src/core/directives/cluster.ts

+  providers: [ClusterManager, {provide: MarkerManager, useExisting: ClusterManager}]
+})
+export class AgmCluster implements OnDestroy, OnChanges, OnInit {
+  @Input() gridSize: number;


can we add a description for the inputs and outputs?

sebholstein · 2017-06-12T18:08:35Z

src/core/directives/cluster.ts

+  @Input() imagePath: string;
+  @Input() imageExtension: string;
+
+  constructor(private cluster: ClusterManager) {}


private _markerClusterManager: MarkerClusterManager

sebholstein · 2017-06-12T18:09:17Z

src/core/services/managers/cluster-manager.ts

+import {Marker} from '../google-maps-types';
+
+@Injectable()
+export class ClusterManager extends MarkerManager {


MarkerClusterManager

sebholstein · 2017-06-12T18:11:03Z

src/core/services/managers/cluster-manager.ts

+    });
+  }
+
+  init(options:{}) {


can we add a concrete type here for options?

sebholstein · 2017-06-12T18:12:06Z

package.json

@@ -44,7 +44,8 @@
  "homepage": "https://angular-maps.com",
  "peerDependencies": {
    "@angular/common": "^4.0.0 || ^2.0.0",
-    "@angular/core": "^4.0.0 || ^2.0.0"
+    "@angular/core": "^4.0.0 || ^2.0.0",
+    "js-marker-clusterer": "^1.0.0"


We need to have a separate @agm package to handle the different dependencies. (See my last comment)

That should be possible, what name would you suggest? I will try with @agm/cluster, if this is okay with you

sebholstein · 2017-06-12T18:15:04Z

src/core/services/google-maps-types.ts

@@ -547,13 +547,13 @@ export interface CalculatorResult {

 export type CalculateFunction = (marker: Marker[], count: number) => CalculatorResult;

-export interface MarkerClusterer {
+export interface IMarkerClusterer {


MarklerClusterer

That ist not that easy because tslint doesn't like it. The js-marker-clusterer package will create a global var called MarkerClusterer, which I have to declare src/core/services/managers/cluster-manager.ts:12

sebholstein · 2017-06-12T18:15:22Z

src/core/services/managers/cluster-manager.ts

@@ -7,9 +7,9 @@ import {GoogleMapsAPIWrapper} from './../google-maps-api-wrapper';
 import {AgmMarker} from './../../directives/marker';
 import {AgmCluster} from './../../directives/cluster';
 // tslint:disable-next-line: no-use-before-declare
-import {Marker, MarkerClusterer, IClusterOptions} from '../google-maps-types';
+import {Marker, IMarkerClusterer, IClusterOptions} from '../google-maps-types';


ClusterOptions

sebholstein · 2017-06-12T18:15:58Z

src/core/services/google-maps-types.ts

+  imageExtension_:string;
+}
+
+export interface IClusterOptions {


ClusterOptions

jigfox · 2017-06-12T18:26:59Z

Hi, thanks for your Feedback. What name would you suggest your message seems like it was cut off:

I would propose the following package name:

I will Change all other things like requested

sebholstein · 2017-06-18T15:09:12Z

@jigfox oh yeah, missed that. I would propose "@ agm/js-marker-clusterer".

So in the src folder, we would have another folder @ agm/js-marker-clusterer and we would rename the core folder to @ agm/core.

Please let me know when the changes are done. Thank you!

jigfox · 2017-06-20T10:15:53Z

@SebastianM I have some trouble with dependencies while splitting the cluster into its own module: https://github.com/inovex/angular-google-maps/pull/1/files

So I need some help here, integrating this. Another much simpler option would be to create a completely new repo for the clusterer. It would not be the same as in angular itself, but it would be easier to maintain. What do you think?

sebholstein · 2017-06-20T12:05:56Z

@jigfox thx. I worked on a multi-package solution yesterday in this PR (#1051) to support Snazzy Info Window. It's nearly done - I will merge this tomorrow. Afterwards, I can do the package modifications or you can also do this if you want to.

The important part is that the manager cannot be in the providers array of the AgmMap class, so we need a solution for this.

sebholstein · 2017-06-22T08:50:17Z

@jigfox #1051 is merged. There should be everything you need to create another package. Let me know if there are any questions.

jigfox · 2017-06-22T11:12:08Z

okay, I will try this approach, thank you

jigfox · 2017-06-26T13:09:10Z

@SebastianM: I have created a new package like the already existing. Is this okay, the way it is? Or should I change something?

sebholstein · 2017-06-28T09:30:30Z

@jigfox thx. I will review it tomorrow.

ekaitzht · 2017-06-29T09:37:37Z

Any time planing to merge this to master? Thanks

nelsonBlack · 2017-07-01T19:41:43Z

Also patiently waiting for the merge to be done

reginbald · 2017-07-11T11:24:49Z

@SebastianM When do you think this will be merged and released?

jigfox · 2017-08-23T05:22:39Z

@SebastianM Congrats, I totally understand

quedicesebas · 2017-08-31T06:03:42Z

Please, a demo of this? and complete docs

pauljosephatay · 2017-09-01T02:53:58Z

@sebrojas14, I believe you can follow the snazzy window guide

npm install js-marker-clusterer @agm/js-marker-clusterer

depends on js-marker-clusterer

import the module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// add these imports
import { AgmCoreModule } from '@agm/core';
import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: ['YOUR_API_KEY_HERE']
    }),
    AgmJsMarkerClustererModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

is should be available in the template, note the selector is agm-marker-cluster as of beta1

<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982">
  <agm-marker-cluster
  imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
    <agm-marker [latitude]="51.673858" [longitude]="7.815982">
    </agm-marker><!-- multiple markers -->
  </agm-marker-cluster>
</agm-map>

@pauljosephatay

thanks to @pauljosephatay in #1044 (comment)

jigfox · 2017-09-01T05:25:32Z

thanks @pauljosephatay I took your example Code and put it into the README

sadeajayi · 2017-09-02T01:21:46Z

On compilation im getting
EXCEPTION: Uncaught (in promise): Error: Error in ./MapPageComponent class MapPageComponent - inline template:19:12 caused by: No provider for GoogleMapsAPIWrapper!

kuncevic · 2017-09-04T00:14:23Z

@pauljosephatay getting error as mentioned here #1124 (comment) any thoughts?

sadeajayi · 2017-09-04T00:21:43Z

What i'm basically trying to do is add markers on clicking the map, and clustering them in real time, i don't even know if logically speaking, this feature is possible?

pauljosephatay · 2017-09-04T02:28:00Z

@kuncevic probably dependency with js-marker-clusterer. please check out README installation and usage
npm install js-marker-clusterer @agm/js-marker-clusterer --save
or
yarn add js-marker-clusterer @agm/js-marker-clusterer

@sadeajayi, i believe no special treatment needed, like this

template:
<agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982"
  (mapClick)="addMarker($event)">
  <agm-marker-cluster
  imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
    <agm-marker *ngFor="let marker of markers"
      [latitude]="marker.lat"
      [longitude]="marker.lng">
    </agm-marker>
  </agm-marker-cluster>
</agm-map>

=============
component:

markers = [];

addMarker($event){
this.markers.push($event.coords);
}

kuncevic · 2017-09-04T02:36:26Z

@pauljosephatay I done the install thing as I pinted in comment I can see the files listed in my node_modules . Also I tried to just reinstall the whole node_modules and getting caught by the same error.

My env:

@angular/cli: 1.3.2
node: 7.8.0
os: win32 x64
@angular/animations: 4.3.5

html:

<agm-map style="height: 300px" [latitude]=lat [longitude]=lng>
  <agm-marker-cluster [imagePath]="'https://googlemaps.github.io/js-marker-clusterer/images/m'">
    <agm-marker *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lng"></agm-marker>
  </agm-marker-cluster>
</agm-map>

app.module

import { AgmCoreModule } from '@agm/core';
import { AgmJsMarkerClustererModule, ClusterManager } from '@agm/js-marker-clusterer';

@NgModule({
  declarations: [
    AppComponent,
    MapsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: 'key'
    }),
    AgmJsMarkerClustererModule
  ],
  providers: [
    ClusterManager
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

pauljosephatay · 2017-09-04T02:47:17Z

@kuncevic sorry, i guess if you already installed both 1) js-marker-clusterer and 2) @agm/js-marker-clusterer then im not sure what could be the problem. you may create a new clean app with ng cli and install agm map then follow the README and see if it works.

kuncevic · 2017-09-04T02:55:16Z

@pauljosephatay all good now. I was actually missing the js-marker-clusterer module. Thanks for help.

sadeajayi · 2017-09-04T03:39:49Z

@kuncevic how did you include the js-marker-clusterer module in the app module?

sadeajayi · 2017-09-04T03:57:11Z

im still getting
On compilation im getting
EXCEPTION: Uncaught (in promise): Error: Error in ./MapPageComponent class MapPageComponent - inline template:19:12 caused by: No provider for GoogleMapsAPIWrapper!

error on compilation even after including the wrapper as a provider and importing that.
This is what i have

The imports im making in my map-page.component.ts

import { Component, NgModule, NgZone, OnInit, ViewChild, ElementRef } from '@angular/core';
import {MarkerService} from "../../services/marker.service";

import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core';
import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MapCluster } from '../../map-cluster';
import { AgmJsMarkerClustererModule } from "@agm/js-marker-clusterer";

import 'js-marker-clusterer/src/markerclusterer.js';

import {Http, HttpModule} from '@angular/http';

//Importing socket-io services for real-time interactions
import { SocketService } from '../shared/socket.service';
import {GoogleMapsAPIWrapper} from "angular2-google-maps/core/services/google-maps-api-wrapper";

Imports in my app module.ts

import {  AgmCoreModule, MapsAPILoader } from "angular2-google-maps/core";
import { AgmJsMarkerClustererModule } from "@agm/js-marker-clusterer";
import { MapCluster } from './map-cluster';

import {GoogleMapsAPIWrapper} from "angular2-google-maps/core/services/google-maps-api-wrapper";

import { AppComponent } from './app.component';
import { MapPageComponent } from './components/map-page/map-page.component';
import 'js-marker-clusterer/src/markerclusterer.js';

imports: [
    BrowserModule,
    FormsModule,
    FacebookModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyBfW8ETNs6vnLAlGqcqHIZg52NI9lupHxM',
      libraries: ["places"]
    }),
    AgmJsMarkerClustererModule,
  ],
  providers: [ValidateService, MarkerService, SocketService, GoogleMapsAPIWrapper],

kuncevic · 2017-09-04T04:19:23Z

@sadeajayi check my app.module code just in a comment above

But you have an issue with GoogleMapsAPIWrapper you need to provide that thing.
Also why you are mixing angular2-google-maps (old) and @agm (new) modules? check the docs.

sadeajayi · 2017-09-04T04:25:45Z

Oh okay, I did just that and im still getting the same errors

kuncevic · 2017-09-04T04:38:10Z

@sadeajayi are you importing GoogleMapsAPIWrapper from @agm/core like:

import { GoogleMapsAPIWrapper } from '@agm/core';

sadeajayi · 2017-09-04T04:54:42Z

@kuncevic Oh my God. Youre a life saver.
This whole time i was importing my googlemapsAPI wrapper with the
"angular2-google-maps/core" module i installed 2 months ago instead of using @agm/core.
I was importing agmCoreModule and MapsAPILoader with that same module as well.
I was wondering what was causing my bugs for the last 3 weeks and I couldn't understand what was wrong.
Thanks man

BayardSmart · 2017-09-04T12:06:18Z

Hi, I have this error when trying to compile : ERROR in C:/....../node_modules/@agm/js-marker-clusterer/services/managers/cluster-manager.d.ts (8,22): Class 'ClusterManager' incorrectly extends base class 'MarkerManager'.
Property '_mapsWrapper' is private in type 'MarkerManager' but not in type 'ClusterManager'.

Any Idea ?

MarKco · 2017-09-08T13:32:59Z

I'm experiencing the same issue: added the library following the readme instructions and can't compile because of the following

ERROR in C:/.../node_modules/@agm/js-marker-clusterer/services/managers/cluster-manager.d.ts (8,22): Class 'ClusterManager' incorrectly extends base class 'MarkerManager'. Property '_mapsWrapper' is private in type 'MarkerManager' but not in type 'ClusterManager'.

jigfox · 2017-09-08T13:37:59Z

@uakgul-talis @MarKco
which version of @agm/core are you running? It should be working in 1.0.0-beta.1 as you can see here the property _mapsWrapper isn't private but protected as it should be: https://github.com/SebastianM/angular-google-maps/blob/c16295d331cbb74841585cf433ab7af3d7e415d5/packages/core/services/managers/marker-manager.ts#L15

MarKco · 2017-09-08T13:40:36Z

I installed with npm install js-marker-clusterer @agm/js-marker-clusterer --save, in the installation log I see the following: @agm/[email protected]

So it seems I'm already running the beta.1. Any chance the change was not deployed?

jigfox · 2017-09-08T13:41:50Z

@agm/[email protected] is not the same as @agm/[email protected] what version of @agm/core are you running?

MarKco · 2017-09-08T13:53:19Z

You were right!
Since I had agm/core installed for a long time it wasn't updated. I performed an npm update , version @agm/[email protected] was installed and now clustering works as expected! :)

I guess this could probably be the way to solve the issue for @uakgul-talis as well! Thank you!

BayardSmart · 2017-09-08T14:00:40Z

@jigfox Thanks man !!! It's working properly now.
I also performed a npm update like @MarKco did .

Thank you again!

sadeajayi · 2017-11-07T01:29:18Z

Hi guys, I have another issue
I'm trying to write a method in my component.ts file to handle deletion of markers.
Basically, if a user drops a marker at location 'x', but moves out of a set radius for that location, their marker should get deleted.
So if there's a cluster showing 45 markers at a location, and one user leaves that location, the number of markers will reduce by 1.
I just don't know how to go about implementing deletion in my component.ts file please help

@pauljosephatay

thanks to @pauljosephatay in sebholstein/angular-google-maps#1044 (comment)

hismethod reviewed Jun 12, 2017

View reviewed changes

sebholstein requested changes Jun 12, 2017

View reviewed changes

sebholstein reviewed Jun 12, 2017

View reviewed changes

src/core/services/google-maps-types.ts Outdated

imageExtension_:string;

}

export interface IClusterOptions {

Copy link

Owner

sebholstein Jun 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ClusterOptions

sebholstein assigned jigfox Jun 12, 2017

jigfox changed the title ~~Add clustered markers~~ WIP: Add clustered markers Jun 20, 2017

jigfox added 9 commits June 22, 2017 13:13

Add Cluster Feature

51c8e30

add some doc comments two cluster directive

c354df4

create Interface for style

27b1e14

add some specs

dfdd50d

fix linting

c87aeff

adds external to rollup

8a26446

remove name clash

b990298

refactor AgmCluster => AgmMarkerCluster

68403f0

split into own module

28c05ea

jigfox force-pushed the add-clustered-markers branch from a58dba2 to 28c05ea Compare June 22, 2017 13:15

sebholstein mentioned this pull request Jun 22, 2017

Fit Map Bounds to Makers/Elements Automatically? #781

Closed

jigfox changed the title ~~WIP: Add clustered markers~~ Add clustered markers Jun 23, 2017

adds index.ts and remove not needed package.json

5a740c8

sebholstein mentioned this pull request Aug 25, 2017

How to use a Marker Clusterer? #307

Closed

jigfox added a commit that referenced this pull request Sep 1, 2017

add simple Readme for js-marker-clusterer (#1130)

7b5578b

thanks to @pauljosephatay in #1044 (comment)

jigfox deleted the add-clustered-markers branch September 1, 2017 05:25

kuncevic mentioned this pull request Sep 4, 2017

Cluster not working #1124

Closed

srwebdev3627 added a commit to srwebdev3627/angular-google-maps that referenced this pull request Apr 29, 2024

add simple Readme for js-marker-clusterer (#1130)

fb8592e

thanks to @pauljosephatay in sebholstein/angular-google-maps#1044 (comment)

Add clustered markers #1044

Add clustered markers #1044

Conversation

jigfox commented Jun 12, 2017

hismethod left a comment

Choose a reason for hiding this comment

sebholstein left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jigfox commented Jun 12, 2017

sebholstein commented Jun 18, 2017 • edited Loading

jigfox commented Jun 20, 2017

sebholstein commented Jun 20, 2017

sebholstein commented Jun 22, 2017

jigfox commented Jun 22, 2017

jigfox commented Jun 26, 2017

sebholstein commented Jun 28, 2017

ekaitzht commented Jun 29, 2017

nelsonBlack commented Jul 1, 2017

reginbald commented Jul 11, 2017 • edited Loading

jigfox commented Aug 23, 2017

quedicesebas commented Aug 31, 2017

pauljosephatay commented Sep 1, 2017

jigfox commented Sep 1, 2017 • edited Loading

sadeajayi commented Sep 2, 2017

kuncevic commented Sep 4, 2017

sadeajayi commented Sep 4, 2017

pauljosephatay commented Sep 4, 2017

kuncevic commented Sep 4, 2017 • edited Loading

pauljosephatay commented Sep 4, 2017

kuncevic commented Sep 4, 2017

sadeajayi commented Sep 4, 2017

sadeajayi commented Sep 4, 2017

kuncevic commented Sep 4, 2017 • edited Loading

sadeajayi commented Sep 4, 2017

kuncevic commented Sep 4, 2017 • edited Loading

sadeajayi commented Sep 4, 2017

BayardSmart commented Sep 4, 2017

MarKco commented Sep 8, 2017

jigfox commented Sep 8, 2017 • edited Loading

MarKco commented Sep 8, 2017

jigfox commented Sep 8, 2017 • edited Loading

MarKco commented Sep 8, 2017

BayardSmart commented Sep 8, 2017

sadeajayi commented Nov 7, 2017

sebholstein commented Jun 18, 2017 •

edited

Loading

reginbald commented Jul 11, 2017 •

edited

Loading

jigfox commented Sep 1, 2017 •

edited

Loading

kuncevic commented Sep 4, 2017 •

edited

Loading

kuncevic commented Sep 4, 2017 •

edited

Loading

kuncevic commented Sep 4, 2017 •

edited

Loading

jigfox commented Sep 8, 2017 •

edited

Loading

jigfox commented Sep 8, 2017 •

edited

Loading