Angular-google-maps: No MouseOver event handler in AgmDataLayer

[aurelianv]

Issue description
There is no MouseOver event handler in AgmDataLayer. Is there a way to achieve this?

Steps to reproduce and a minimal demo of the problem

_Use https://plnkr.co or similar -- try this template as a starting point: http://plnkr.co/edit/YX7W20?p=preview

_What steps should we try in your demo to see the problem?_

Current behavior

Expected/desired behavior

angular2 & angular-google-maps version

Other information

[iget-master]

There's no simple way to do it unfortunately. The same is true for AgmKmlLayer.

The problem is that the agm module doesn't export any services, so it's impossible to use the AgmLayerManager to manually bind to custom events.

Maybe later I can send a PR to implement a method to bind to mouse events.

[aurelianv]

Hi, thank you for the reply.

I thought the same implementation was made for the click event. A listener was in fact added for the click event in the AgmDataLayer.

What I want to achieve is this:
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('letter');
});

Can a new listener be added the same way in the AgmDataLayer?

Thank you

[aurelianv]

By modifying /node_modules/@agm/core/directivesdata-layer.d.ts:
++++ layerMouseOver: EventEmitter;

and /node_modules/@agm/core/data-layer.js:
++++ this.layerMouseOver = new EventEmitter();
..
AgmDataLayer.prototype._addEventListeners = function () {
var _this = this;
var listeners = [
{ name: 'click', handler: function (ev) { return _this.layerClick.emit(ev); } },
++++ { name: 'mouseover', handler: function (ev) { return _this.layerMouseOver.emit(ev); } }
];
..
AgmDataLayer.propDecorators = {
'layerClick': [{ type: Output },],
++++ 'layerMouseOver': [{ type: Output },],

I am now able to set the property correctly in the code:

Would it be possibile to add this feature and also the mouseout event handler?

[Abhijeet-Tiwari]

By modifying /node_modules/@agm/core/directivesdata-layer.d.ts:
++++ layerMouseOver: EventEmitter;

and /node_modules/@agm/core/data-layer.js:
++++ this.layerMouseOver = new EventEmitter();
..
AgmDataLayer.prototype._addEventListeners = function () {
var _this = this;
var listeners = [
{ name: 'click', handler: function (ev) { return _this.layerClick.emit(ev); } },
++++ { name: 'mouseover', handler: function (ev) { return _this.layerMouseOver.emit(ev); } }
];
..
AgmDataLayer.propDecorators = {
'layerClick': [{ type: Output },],
++++ 'layerMouseOver': [{ type: Output },],

I am now able to set the property correctly in the code:

Would it be possibile to add this feature and also the mouseout event handler?

Thanks but not worjing bro

[Abhijeet-Tiwari]

layerMouseOver

Bro, I am getting this error while building. Can you please tell me how to solve this? Your reply will be much awaited:
ERROR in ./node_modules/@agm/core/directives/data-layer.js
Module parse failed: Unexpected token (225:12)
You may need an appropriate loader to handle this file type.
| { name: 'click', handler: function (ev) { return _this.layerClick.emit(ev); } },
| { name: 'mouseover', handler: function (ev) { return _this.layerMouseOver.emit(ev); } }
| { name: 'mouseout', handler: function (ev) { return _this.layerMouseOver.emit(ev); } }
| ];
| listeners.forEach(function (obj) {
@ ./node_modules/@agm/core/directives.js 5:0-55
@ ./node_modules/@agm/core/index.js
@ ./src/app/POSHAN/home-dashboard/home.module.ts
@ ./src/$$_lazy_route_resource lazy
@ ./node_modules/@angular/core/esm5/core.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

[MrHarish]

I need the same functionality with this agm/datalayer, Where I have bunch of census tract, I need to show that particular census-tract data on the info-window when ever I hover on that census-tract

[Abhijeet-Tiwari]

Hi,

You can have to add mouseover event by yourself in the agm folder of node
modules.
It worked for me.

On Sat, Dec 1, 2018, 4:22 AM MrHarish <[email protected] wrote:

I need the same functionality with this agm/datalayer, Where I have bunch
of census tract, I need to show that particular census-tract data on the
info-window when ever I hover on that census-tract

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/SebastianM/angular-google-maps/issues/1279#issuecomment-443363988,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AfadtfztPYuPh0rEC3v7vqcbFFWM3UtUks5u0batgaJpZM4RVngM
.

[MrHarish]

Hi, You can have to add mouseover event by yourself in the agm folder of node modules. It worked for me.
…
On Sat, Dec 1, 2018, 4:22 AM MrHarish @.* wrote: I need the same functionality with this agm/datalayer, Where I have bunch of census tract, I need to show that particular census-tract data on the info-window when ever I hover on that census-tract — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1279 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AfadtfztPYuPh0rEC3v7vqcbFFWM3UtUks5u0batgaJpZM4RVngM .

Hey, Thanks for your response.

Yes, It works but we are working as a team and these changes won't reflect in their machines as they pull it from git and do we have any other way so that I can locally add the changes in the component level and make it as a reusable component.

I wonder would that be possible, I have spent a lot of my time to seek the solution for this. Thanks in advance.

[Abhijeet-Tiwari]

Basically there are two solutions for this. Either you can request the agm
team to add the mouseover event in their package but I guess that would
take a lot of time or you can add your own npm package with these changes
so that all of your team can use your own created package.
Thanks

On Sat, Dec 1, 2018, 8:19 PM MrHarish <[email protected] wrote:

Hi, You can have to add mouseover event by yourself in the agm folder of
node modules. It worked for me.
… <#m_-7212461912060071648_>
On Sat, Dec 1, 2018, 4:22 AM MrHarish @.* wrote: I need the same
functionality with this agm/datalayer, Where I have bunch of census tract,
I need to show that particular census-tract data on the info-window when
ever I hover on that census-tract — You are receiving this because you
commented. Reply to this email directly, view it on GitHub <#1279
(comment)
https://github.com/SebastianM/angular-google-maps/issues/1279#issuecomment-443363988>,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AfadtfztPYuPh0rEC3v7vqcbFFWM3UtUks5u0batgaJpZM4RVngM
.

Hey, Thanks for your response.

Yes, It works but we are working as a team and these changes won't reflect
in their machines as they pull it from git and do we have any other way so
that I can locally add the changes in the component level and make it as a
reusable component.

I wonder would that be possible, I have spent a lot of my time to seek the
solution for this. Thanks in advance.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/SebastianM/angular-google-maps/issues/1279#issuecomment-443431501,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AfadtbEZ3rX2muSS6MOPAYFypxpbGIZYks5u0pb6gaJpZM4RVngM
.

[MrHarish]

Basically there are two solutions for this. Either you can request the agm team to add the mouseover event in their package but I guess that would take a lot of time or you can add your own npm package with these changes so that all of your team can use your own created package. Thanks
…
On Sat, Dec 1, 2018, 8:19 PM MrHarish @.* wrote: Hi, You can have to add mouseover event by yourself in the agm folder of node modules. It worked for me. … <#m_-7212461912060071648_> On Sat, Dec 1, 2018, 4:22 AM MrHarish @.* wrote: I need the same functionality with this agm/datalayer, Where I have bunch of census tract, I need to show that particular census-tract data on the info-window when ever I hover on that census-tract — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1279 (comment) <#1279 (comment)>>, or mute the thread https://github.com/notifications/unsubscribe-auth/AfadtfztPYuPh0rEC3v7vqcbFFWM3UtUks5u0batgaJpZM4RVngM . Hey, Thanks for your response. Yes, It works but we are working as a team and these changes won't reflect in their machines as they pull it from git and do we have any other way so that I can locally add the changes in the component level and make it as a reusable component. I wonder would that be possible, I have spent a lot of my time to seek the solution for this. Thanks in advance. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1279 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AfadtbEZ3rX2muSS6MOPAYFypxpbGIZYks5u0pb6gaJpZM4RVngM .

I'm able to have this, features by adding the above code to the node-modules, but what I wasn't getting is the info-window, I don't know it works for the agm-marker and I used the similar code, it doesn't show anything but I can see the info in the console.

Any help would be much appreciated.

Thanks

[zunamo]

I would also appreciate if all the necessary handlers can be added, else this is not fully usable. We have to do this manually now, but I do not think this should be a custom feature. Thank you!

[MrHarish]

I would really appreciate if all the necessary handlers can be added to this data layer. For now everything has to be done dynamically. Thank you.

[guisantos]

I`m looking forward to use this feature

[ghost]

Hey, can any of you guys create a PR for this, since you already have a solution?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jamesg-gxg]

Can this be reopened or looked at?

[jsgoupil]

Paste this code in your code, include it in your declarations. Then you can use all the events that Google Maps support (https://developers.google.com/maps/documentation/javascript/datalayer)

Your layer must have a style set to clickable: true

@Directive({
    selector: 'agm-data-layer'
})
export class MyAgmMapDataLayer
    implements OnDestroy, OnInit {
    @Output()
    layerAddfeature = new EventEmitter<DataMouseEvent>();

    @Output()
    layerDblclick = new EventEmitter<DataMouseEvent>();

    @Output()
    layerMousedown = new EventEmitter<DataMouseEvent>();

    @Output()
    layerMouseout = new EventEmitter<DataMouseEvent>();

    @Output()
    layerMouseover = new EventEmitter<DataMouseEvent>();

    @Output()
    layerMouseup = new EventEmitter<DataMouseEvent>();

    @Output()
    layerRemovefeature = new EventEmitter<DataMouseEvent>();

    @Output()
    layerRemoveproperty = new EventEmitter<DataMouseEvent>();

    @Output()
    layerRightclick = new EventEmitter<DataMouseEvent>();

    @Output()
    layerSetgeometry = new EventEmitter<DataMouseEvent>();

    @Output()
    layerSetproperty = new EventEmitter<DataMouseEvent>();

    private _subscriptions: Subscription[] = [];

    constructor(
        private ref: ElementRef,
        private dataLayerManager: DataLayerManager,
        private agmDataLayer: AgmDataLayer
    ) { }

    ngOnInit() {
        const listeners = [
            { name: 'addfeature', handler: (ev) => this.layerAddfeature.emit(ev) },
            { name: 'dblclick', handler: (ev) => this.layerDblclick.emit(ev) },
            { name: 'mousedown', handler: (ev) => this.layerMousedown.emit(ev) },
            { name: 'mouseout', handler: (ev) => this.layerMouseout.emit(ev) },
            { name: 'mouseover', handler: (ev) => this.layerMouseover.emit(ev) },
            { name: 'mouseup', handler: (ev) => this.layerMouseup.emit(ev) },
            { name: 'removefeature', handler: (ev) => this.layerRemovefeature.emit(ev) },
            { name: 'removeproperty', handler: (ev) => this.layerRemoveproperty.emit(ev) },
            { name: 'rightclick', handler: (ev) => this.layerRightclick.emit(ev) },
            { name: 'setgeometry', handler: (ev) => this.layerSetgeometry.emit(ev) },
            { name: 'setproperty', handler: (ev) => this.layerSetproperty.emit(ev) }
        ];
        listeners.forEach((obj) => {
            const os = this.dataLayerManager.createEventObservable(obj.name, this.agmDataLayer).subscribe(obj.handler);
            this._subscriptions.push(os);
        });
    }

    ngOnDestroy() {
        // unsubscribe all registered observable subscriptions
        this._subscriptions.forEach(s => s.unsubscribe());
    }
}

[hhkris4u]

Paste this code in your code, include it in your declarations. Then you can use all the events that Google Maps support (https://developers.google.com/maps/documentation/javascript/datalayer)

Your layer must have a style set to clickable: true

@Directive({
    selector: 'agm-data-layer'
})
export class MyAgmMapDataLayer
    implements OnDestroy, OnInit {
    @Output()
    layerAddfeature = new EventEmitter<DataMouseEvent>();

    @Output()
    layerDblclick = new EventEmitter<DataMouseEvent>();

    @Output()
    layerMousedown = new EventEmitter<DataMouseEvent>();

    @Output()
    layerMouseout = new EventEmitter<DataMouseEvent>();

    @Output()
    layerMouseover = new EventEmitter<DataMouseEvent>();

    @Output()
    layerMouseup = new EventEmitter<DataMouseEvent>();

    @Output()
    layerRemovefeature = new EventEmitter<DataMouseEvent>();

    @Output()
    layerRemoveproperty = new EventEmitter<DataMouseEvent>();

    @Output()
    layerRightclick = new EventEmitter<DataMouseEvent>();

    @Output()
    layerSetgeometry = new EventEmitter<DataMouseEvent>();

    @Output()
    layerSetproperty = new EventEmitter<DataMouseEvent>();

    private _subscriptions: Subscription[] = [];

    constructor(
        private ref: ElementRef,
        private dataLayerManager: DataLayerManager,
        private agmDataLayer: AgmDataLayer
    ) { }

    ngOnInit() {
        const listeners = [
            { name: 'addfeature', handler: (ev) => this.layerAddfeature.emit(ev) },
            { name: 'dblclick', handler: (ev) => this.layerDblclick.emit(ev) },
            { name: 'mousedown', handler: (ev) => this.layerMousedown.emit(ev) },
            { name: 'mouseout', handler: (ev) => this.layerMouseout.emit(ev) },
            { name: 'mouseover', handler: (ev) => this.layerMouseover.emit(ev) },
            { name: 'mouseup', handler: (ev) => this.layerMouseup.emit(ev) },
            { name: 'removefeature', handler: (ev) => this.layerRemovefeature.emit(ev) },
            { name: 'removeproperty', handler: (ev) => this.layerRemoveproperty.emit(ev) },
            { name: 'rightclick', handler: (ev) => this.layerRightclick.emit(ev) },
            { name: 'setgeometry', handler: (ev) => this.layerSetgeometry.emit(ev) },
            { name: 'setproperty', handler: (ev) => this.layerSetproperty.emit(ev) }
        ];
        listeners.forEach((obj) => {
            const os = this.dataLayerManager.createEventObservable(obj.name, this.agmDataLayer).subscribe(obj.handler);
            this._subscriptions.push(os);
        });
    }

    ngOnDestroy() {
        // unsubscribe all registered observable subscriptions
        this._subscriptions.forEach(s => s.unsubscribe());
    }
}

I have tried this. But still no luck.. Please help.. any other possible solutions?

[jsgoupil]

@hhkris4u , did you follow everything my message said? You need to add it to the declaration AND your layer must be set to clickable true

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.