ackerapple/agm-overlays

Custom marker overlay for the @agm/core package

agm-overlays's Issues

Loading images on AGM maps

I have one requirement to show/hide images on google map using agm something as shown below. I think there is some utility is available with AGM, however i am not aware of it.Below is my code to load map and on handleOnTilesLoaded() method I would like to add some code to load images.
<agm-map [zoom]="5" [latitude]="lat" [longitude]="lng" (mapReady)="onMapReady($event)"
(mapClick)="mapClick($event)" (mapReady)="mapReady($event)"(tilesLoaded)="handleOnTilesLoaded()">

[visible] not working for agm-overlay

markerClick not work

Hi, I'm implementing your npm but when I click on the overlay it gives me the following error, I thought it had to do with "agm-marker-cluster" but it's not like that, to get it I have to perform the click and a small drag

Error is:
Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

My code html:

Result before click:

Position is not correct

Hi I have a problem

Blue dot is the things by agm-overlays(this lib) and maker is agm marker. I used same data for these
But as you can see here it doesn't have route
How can I fix it?

<agm-marker *ngFor="let trace of traces" [latitude]="trace.latitude" [longitude]="trace.longitude"></agm-marker> <ng-container *ngFor="let item of tracing"> <agm-marker *ngFor="let pos of item.trace" [latitude]="pos.coordinate.coordinates[1]" [longitude]="pos.coordinate.coordinates[0]" iconUrl="assets/img/pos.png"></agm-marker> <agm-overlay *ngFor="let pos of item.trace" [latitude]="pos.coordinate.coordinates[1]" [longitude]="pos.coordinate.coordinates[0]"> <div style="width: 5px; height: 5px; border-radius: 50%; background-color: blue;"></div> </agm-overlay> </ng-container>

Question about scope of this project

Hello

I am wondering about the current scope of this project. Is it only for customizing overlays of markers? Or could it be used for all types of overlays?

E.g.

• Heatmaps
• Canvas overlays
• Tiles

Happy to elaborate further

Looking forward to your response ✌️

Having just one mark throws off zoom

Having just one custom overlay always causes super zoomed in because .fitBounds is being called.

Possible solutions:

• Try to read set zoom of agm
• Dont call fitBounds() when only one overlay (sounds promising, may need to comunicate lat lng to map for focus only)

Rendering different data on behalf of zoom level

Thanks very much for providing this plug.in! It is helping med a lot :-)

But I am having a problem. I need to render different data on behalf of the zoom level, and I have almost made a solution. I am using the event zoomChange on agm-map, and in that event function I am switching data. but when I do that the map is changing zoom level :-/ If I use the same approach with agm-marker, it is working like it should.

Do you have any ideer why it is changing zoom level?

It look like the problem is in AgmOverlay.component.ts line 80

Thanks very much in advance :-)

Enhance documentation

Could the documentation be enhanced to actually say what this package does?
I want to create overlays on top of agm-map (like this: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple)
However I have an impression that your library does actually do something else.
Thanks.

Maybe work with me?

I need a more comprehensive version of AGM and I am Working on building a fork.
I am using the google maps types instead of custom objects and have refactored a whole lot of mess. One of the items I need is custom overlays and I have already started integrating and refactoring something based on your code. I wondered if you would be interested in helping me flesh it out?

https://github.com/wdunn001/angular-google-maps

the custom overlay
https://github.com/wdunn001/angular-google-maps/blob/master/packages/core/directives/agm-overlay.ts

current package @agme/core

Event with change z-index not firing

Could you please add z-index update in onChangesOverride method?

Angular 7 unable to find angular/core and @agm/core

import { AgmCoreModule } from '@agm/core';
import { AgmOverlays } from "agm-overlays";


@NgModule({
  imports: [
    CommonModule,
    //SharedRouting,
    AgmOverlays,
    AccordionModule,
      AgmCoreModule.forRoot({apiKey: Settings.API_KEY})
  ],

ERROR in ../node_modules/agm-overlays/AgmOverlay.component.d.ts(1,53): error TS2307: Cannot find module '@angular/core'.
../node_modules/agm-overlays/AgmOverlay.component.d.ts(2,68): error TS2307: Cannot find module '@agm/core'.

This is the issue I face, I have followed your instruction. What wrong I have made?

Can you guide me? it looks a great addition for AGM I want to use it now.

Transparent image blocking hover state

This might be related, I think, to the last comment in Issue #14 regarding the AGM marker image being present.

I'm using agm-overlay to render a custom (agm-snazzy-info-window) markers on the map, which look fine, but I also need to apply a hover state to the custom marker. This works fine except for a 40px by 40px transparent image rendered in the center by agm-marker, which I can't see any way (as agm-overlay is implemented currently) to get around it. The image is not identified in any particular way and is rendered in a separate are of the DOM with a managed z-index causing it to appear above my custom marker.

A solution for this that works in my case is to specify a custom iconUrl to the agm marker of size 0, but agm-overlay hard-codes that iconUrl and doesn't allow me to override it.

Propose either providing an iconUrl input that, if provided, will override the " " string here:

agm-overlays/src/AgmOverlay.component.ts

Line 160 in 2ee7c86

this.overlayView.iconUrl = " "

Or, if that marker is truly never desired, then instead of setting:
this.overlayView.iconUrl= " "
set:
this.overlayView.iconUrl = {"url": "", "scaledSize": {"height": 0, "width": 0}};

For me, that removes the transparent icon entirely so the hover state works as desired.

Load Images

I have one requirement to show/hide images on google map using agm something as shown below. I think there is some utility is available with AGM, however i am not aware of it.Below is my code to load map and on handleOnTilesLoaded() method I would like to add some code to load images.
<agm-map [zoom]="5" [latitude]="lat" [longitude]="lng" (mapReady)="onMapReady($event)"
(mapClick)="mapClick($event)" (mapReady)="mapReady($event)"(tilesLoaded)="handleOnTilesLoaded()">

Update position of overlay

Hi, I saw issue #4 after I encountered the same problem. I'm currently on latest (1.3.0) on which the same issue seems to be happening. In the 1.1.2 version the location can be updated indeed.

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'addEventListener' of undefined TypeError: Cannot read property 'addEventListener' of undefined at AgmOverlay.getOverlay (AgmOverlay.component.js:134) at eval (AgmOverlay.component.js:70) at ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4760) at ZoneDelegate.invoke (zone.js:387) at Zone.run (zone.js:138) at eval (zone.js:872) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4751) at ZoneDelegate.invokeTask (zone.js:420) at AgmOverlay.getOverlay (AgmOverlay.component.js:134) at eval (AgmOverlay.component.js:70) at ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4760) at ZoneDelegate.invoke (zone.js:387) at Zone.run (zone.js:138) at eval (zone.js:872) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4751) at ZoneDelegate.invokeTask (zone.js:420) at resolvePromise (zone.js:814) at eval (zone.js:724) at eval (zone.js:740) at ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4760) at ZoneDelegate.invoke (zone.js:387) at Zone.run (zone.js:138) at eval (zone.js:872) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4751)

agm-map won't allow mapClick event with agm-overlay

I want to display the marker on custom overlay using the @agm/core and agm-overlay library

Draggable or Editable overlays

Are you going to finish the draggable or editable abilities of the overlays? It would also be amazing if you could ad the ability to add an image to the agm-rectangle directive that just takes on its height and width.

Cannot update position of overlay

The initial rendering of the overlay works fine, but when I update the lat/lng of the marker it does not update.

I went digging in the source and found a few issues.
Imports not being used : Subscription, EventEmitter, TemplateRef, QueryList, AgmInfoWindow, LatLngBounds, LatLng, AgmMarker, GoogleMap

Are these still necessary?

Additionally, you are not importing AfterViewInit, OnChanges, or OnDestroy from @angular/core

I'm not seeing a call to MarkerManager.updateMarkerPosition

Within overlayView.draw your point will never change as it can never obtain a new lat/lng from the variable latlng as it is defined up above.

I'm wondering if there were some breaking changes made upstream.

I am using Angular 6 and the latest release of AGM.

Input [visible] not working

Hi, i have problem with [visible] input. I know some other ways how can I do it, but this one is much better. I have agm-overlay with ngFor, so ngIf I cant use. But I have some conditions for each marker specially, if current marker is visible or not. So will you repair [visible] input or I must do it som other way?

Clustering of Overlays

Hello :)

I would love to use clustering for my overlays, just like this package (https://angular-maps.com/api-docs/js-marker-clusterer/modules/AgmJsMarkerClustererModule.html) does it, so that you basically put a wrapper, maybe called 'agm-overlay-cluster', around the overlays and they get grouped on specific zoom levels, depending on the density (if they are too near to each other).

Another method I could imagine (if it's not too complex to develop) is, that you can put a value on each overlay and the most valuable ones are filtered out on lower zoom levels (like here on checkfelix: https://www.checkfelix.com/explore/). For example if I have 15 blog entires in city A and 20 in city B, the more valuable one (B) is filtered out if I zoom out and they are about to collide (and A disappears, or just gets smaller).

But again, I'd also be happy if the basic clustering method works, but if this is even easier, or as much effort to develop as method 1, I would prefer this one :)

It would be awesome if you implement one of those functionalities!

Have a great day!

Clickable elements inside overlay

Is it possible to make elements inside an overlay clickable?
I did not get it to work using the following:

<agm-overlay *ngFor="let loc of locations" [latitude]="loc.lat" [longitude]="loc.lon">
<div class="custom-marker" (click)="openLocation(loc)"></div>
<div class="custom-marker2" (click)="addLocation(loc)"></div>
</agm-overlay>

If this is not possible, could it be added to this package? Thank you!

[Question] What values to be passed in [bounds] to make a perfect square

I tried the default value provided for [bounds] attribute as [bounds]="{x:{latitude:-0.00321,longitude:-0.0052},y:{latitude:0.00321,longitude:0.0052}}" but this does not creates a perfect square. Need more information how this bounds value works. Or how can I overlay a perfect square with zoom enabled.

same coords

Hi! Please help with the same coords, I can't click and how to avoid it becouse some times we have the same coords

Fails in Angular 6 library at least

Your package isn't found when including in Angular 6 library. Maybe incompatible with NG6? In any event it doesn't work.

BTW, this not part of the agm product so why use the "agm" prefix? A unique scope would be better, like @acker/overlay and acker-overlay as the selector. Also, why does your example use --save-dev rather than --save?

This is from your example. Did you actually test this as an npm module include?

import { AgmOverlays } from "../../src"

Work with Angular universal

Please add support Angular universal.
Now i have error "ERROR ReferenceError: window is not defined"
)

Not able to open agm-snazzy-info-window using agm-overlays

I need to open agm-snazzy-info-window with the agm-overlays but I am unable to do so. Can you help?

TypeError: Cannot read property 'kind' of undefined

Hello, when I'm trying to run ng build --prod appears the following error
ERROR in ./node_modules/agm-overlays/fesm5/agm-overlays.js Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js): TypeError: Cannot read property 'kind' of undefined

I am using Angular 7, is there any solution?

Thanks

how to set pixel offset to <agm-info-window>

I need to change the position of agm-info-window so it won't overlap with my agm-overlay icon. Is there is way to set pixel offset of the info window?
Thank you very much in advance for your help.

Angular 9 ng build --prod error

Hi,

I recently updated my app to angular 9 and it works fine with ng serve, but when I try to build it with ng build --prod I get the following error: ERROR in node_modules/agm-overlays/AgmOverlays.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of MapPageModule, but could not be resolved to an NgModule class any idea on how to resolve this issue?

fitBounds not supported?

Hey
Looks like fitBounds is not supported as I am adding new overlays after the map was loaded and nothing happens?

Am I correct that it is not supported?

Thanks
Nick

markerClick boundaries are incorrect?

Current behaviour:
The area that is "clickable" using the (markerClick) output is some small area in the top left of the overlay in the demo example. A small overlay will be enveloped by the clickable area, so it might be a constant size?
Open the demo example and hover over the overlay blue boxes, the top left area turns the cursor into the "clickable pointy finger" instead of the "open hand".
It does work as expected when in "mobile" mode (F12 --> Toggle device toolbar)

Info windows do work and are not affected by this.

Expected behaviour:
The size of the child defines what is clickable.

Overlays with Info Window

Overlays seem to break agm-info-window

Style InfoWindow

Hello, Can I style infowindow like this ? Please help!

node_modules/agm-overlays: Appears to be a git repo or submodule

Getting this error after installing new agm-overlays, reverting doesn't help. Now any npm command is not executable successfully.

node_modules/agm-overlays: Appears to be a git repo or submodule

npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

node 12.2.0
npm 6.9.0

[Error - readme] Bounds

Incorrect bounds attribute into the readme

(Not sure about that) The bounds attribute should be in the agm-overlay instead of the agm-map

contextmenu event

Could you add a contextmenu (rightClick) output for the agm-overlay?

Probably this can help you: agm-marker right click event

Feature request: Overlays in street view

Just wondering if maybe this is something that agm-overlays is looking to do in the future, would be a nice feature, or maybe it can already be done ( and i dont know what im doing )

mouseOver Events

Is 'mouseOver' event supported? I'm trying to render an SVG image and I want to do something on mouse over. Please suggest me some related links.