Angular-google-maps: I created agm-overlays for custom overlays

[AckerApple]

Please adopt my package and help it have a brighter future.

https://www.npmjs.com/package/agm-overlays

Here are a few links for your review:

• Main component performing the work: AgmOverlay.component.ts
• demo page
• demo page template code

Great package! Hope you or anyone finds my contribution to be of value. Perhaps we can get a link to it in the main README.md file?

[tobiasgruber-at]

Hello!

First of all, really great package! I just really needed something like this feature in my application, because I have to apply custom HTML to my markers and work with Angular.

It works perfectly fine, but is there also a way to cluster your overlays, because I'm going to have a lot of markers in my project, so I need any way to reduce the markers, when zooming out.

Have a good day!

[AckerApple]

When I am ready to do clustering (because I will need it too) I plan to start looking at this existing code to see if I can replicate it for my custom overlays package:

https://github.com/SebastianM/angular-google-maps/tree/master/packages/js-marker-clusterer

However, at this time I have not touched tackling clustering (for agm)... done clustering for custom overlays before. Just gotta replicate in this Angular world of ours.

I appreciate your appreciation, very much so. Thank you extra kindly

[AckerApple]

Feel free to start a feature request, for clustering, by submitting an issue here:
https://github.com/ackerapple/agm-overlays/issues

Include as much details and any links to ANY google documentation on how custom overlay clustering might work.

The more documentation you can feed me and save me research time, the quicker I could build clustering... I need them too but my schedule is a juggle

[tobiasgruber-at]

Wow that's really amazing! Seriously, I think your package should be much more popular, it's incredibly useful for dynamic AGM applications, I'm really impressed (I took a quick look at the code before)!

Thank's for your work, you're really helping me for my application, I've just researched 3 hours to solve my problem and your package is just perfect :) I'll add a request within the next days!

Best regards,
Tobias Gruber

[CanWeb]

Hi,
Very good Job.
The package is it able to take tif picture ?

Thanks again,

[CanWeb]

for me, the import works with
import { AgmOverlays } from "agm-overlays"

and not

import { AgmOverlays } from "@agm-overlays"

[AckerApple]

@CanWeb. For a tif image use the agm default marker with an image url

My package is agm-overlays and is not apart of agm core so yeah import must be agm-overlays and not some other invented name

[CanWeb]

It's a raster picture, I already taste that but that's doesn't work. :-(

[AckerApple]

agm-overlays is for custom html markers. If html can do what you need then so too can my package.

Due to many spelling mistakes by you and after reviewing your github account, I think you may be in need of more general help then my package offers

[Dmartinez95]

Is there any chance to make it work with Angular 4?

[AckerApple]

I doubt it... I'm on Angular6 .... Here are my distribution commits, you could try to check out an old version: https://github.com/AckerApple/agm-overlays/commits/dist

It's been upsetting the distribution incompatibilities in Angular recent large numbered versions. But sorry I can't help further backwards compatiblity

[Dmartinez95]

I know, I’m working in a production level site so it’s not as easy as just upgrade it to angular 5+, I’ve heard agm added overlay support just a few months ago, do you know if this is true? If it’s I won’t be able to add a custom overlay marker anyway right?

[Dmartinez95]

And of course thank you for your amazing job, this is a very helpful library to put custom markers over the map

[vguleaev]

Is Custom OverlayView available now? I need it for my project :) Would be amazing, otherwise I cannot use your library.. Because if I add another google.maps library there is a conflict

[AckerApple]

My agm-overlays package, a plug-in for agm-core, has been adopted by many for use in production

[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.

[Niclas73]

Hi and first of all thank you for your great work! Very nice....
I have a project where I would like to put the overlays on another pane. The way I have done it now is to lift out agm-overlay from the node modules and modified row 130 in ArmOverlay.component.js so the div is attached to the mapPane instead, but I dont like this solution. Is there a better way to do it. It would be nice to have the possibillity to set what pane the overlay should use...

[ghost]

what do you mean a different pane?

[Niclas73]

Thank you for the response. Google maps has several different panes to which you can “attach” your objects. All panes has different behavior in terms of for example stacking order and ability to attach click events etc. You are using the overlayLayer (logical!) but there is also

-mapPane
-markerLayer
-overlayMouseTarget
-floatPane

If I remember correctly you attach the overlay to the pane on row 130 or something like that and buy just changing “overlayLayer” on that row to any of the other alternatives I list above we get better possibility to customize behavior... do you understand what I’m trying to say...?

/Niclas

9 okt. 2019 kl. 21:39 skrev Ephraim Khantsis [e-mail]:

what do you mean a different pane?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[ghost]

@AckerApple hey, I just now saw this issue. Feel free to create a PR with your code

@Niclas73 ok, I understand know. I think that we don't support overlays yet, so talk to maintainer of agm-overlays

[barbossa]

@AckerApple thank you for the your lib! I've use it my application.

@doom777 my suggestion to you. You need add info about this lib to readme file of agm-core. Because I've spent a lot of time to find this issue with link to this lib.

[uttamchaturvedi9]

@AckerApple Thanks for your library. I have one requirement may be it already exists.

I am looking for groundoverlay library in AGM. Is there is any way to show overlay transparent images on google map something as shown below in the link.
https://stackoverflow.com/questions/32118107/google-maps-groundoverlay
http://www.ryecemetery.com.au/locate.html

I am using below code for image overlay

[AckerApple]

Yup, looks right @uttamchaturvedi9. With html on a map you can do anything. If you want transparency, use a transparent gif or png

[uttamchaturvedi9]

@AckerApple Thanks for your reply. I am able to get transparent image by setting image as gif.

Additionally I would like to overlay image on complete map starting from top left corner. This should be true If I ZoomIn/ZoomOut map. However with below code Image is not getting overlay on complete map while zooming changes.

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="5" (mapReady)="onMapReady($event)" onresize="mapBounds($event)"> <agm-overlay [latitude]= imageLat [longitude]=imageLng> <img [src] = 'this.imageUrl' alt=""> </agm-overlay> </agm-map>

TypeScript

` latitude: number = 52.52000659999999;
longitude: number = 13.404954

this.imageLat = NWCorner.lat;
this.imageLng = NWCorner.lng;
;`

[AckerApple]

How does $180 an hour sound?

[uttamchaturvedi9]

How does $180 an hour sound?

@AckerApple
Its bit expensive. Additionally I do not need complete feature now, i have implemented minimum required feature for POC.

Thanks