Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
agm-overlays-synergi
Advanced tools
Readme
Custom marker overlay for the @agm/core package
Source Repository : master branch here
Please be sure you have installed:
Open a command terminal and type the following
npm install agm-overlays --save-dev
import { AgmOverlays } from "agm-overlays"
import { NgModule } from "@angular/core"
import { BrowserModule } from '@angular/platform-browser'
@NgModule({
imports:[
BrowserModule,
AgmOverlays,
AgmCoreModule.forRoot({
apiKey: '...your-key-here...'
})
]
}) export class AppModule {}
Multiple Custom Overlays
<agm-map style="height:300px;display:block;">
<agm-overlay
*ngFor = "let item of latLngArray"
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<!-- blue html square -->
<div style="width:15px;height:15px;background-color:blue;"></div>
</agm-overlay>
</agm-map>
With multiple custom overlays, the zoom is auto set by the bounds calculated amongst all custom overlays
Single Custom Overlay
<agm-map
[zoom] = "12"
style = "height:300px;display:block;"
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<agm-overlay
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<!-- blue html square -->
<div style="width:15px;height:15px;background-color:blue;"></div>
</agm-overlay>
</agm-map>
By default, markers are always the same size regardless of zoom. Change that!
The following example expands the latitude(0.003) and the longitude(0.0052) in both directions
<agm-map
[zoom] = "12"
style = "height:300px;display:block;"
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<agm-overlay
[latitude] = "item.latitude"
[longitude] = "item.longitude"
[bounds] = "{x:{latitude:-0.003,longitude:-0.0052},y:{latitude:0.003,longitude:0.0052}}"
>
<!-- blue html square -->
<div style="width:15px;height:15px;background-color:blue;"></div>
</agm-overlay>
</agm-map>
Clustering is NOT a responsibility of this package, however it can be done
demo page This demo uses @agm/js-marker-clusterer to demonstrate how to do clustering
<agm-map
[latitude] = "latLngArray[0].latitude"
[longitude] = "latLngArray[1].latitude"
>
<agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-overlay
*ngFor = "let item of latLngArray;let i=index"
[latitude] = "item.latitude"
[longitude] = "item.longitude"
>
<!-- blue html square -->
<div class="block">
<strong style="color:white;">{{i}}</strong>
</div>
</agm-overlay>
</agm-marker-cluster>
</agm-map>
FAQs
Custom marker overlay for the @agm/core package
The npm package agm-overlays-synergi receives a total of 24 weekly downloads. As such, agm-overlays-synergi popularity was classified as not popular.
We found that agm-overlays-synergi demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.