Gathering detailed insights and metrics for @proginnova/ng-map
Installations
npm install @proginnova/ng-mapDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
18.16.0
NPM Version
9.8.0
Score
70.9
Supply Chain
95.3
Quality
81.6
Maintenance
100
Vulnerability
98.6
License
Releases
Unable to fetch releases
Contributors
5
Download Statistics
Total Downloads
7,246
Last Day
3
Last Week
10
Last Month
81
Last Year
684
Bundle Size
12.91 kB
Minified
3.60 kB
Minified + Gzipped
Maintainers
5
Package Meta Information
Latest Version
1.0.1-alpha
Package Id
@proginnova/ng-map@1.0.1-alpha
Unpacked Size
149.88 kB
Size
35.29 kB
File Count
18
NPM Version
9.8.0
Node Version
18.16.0
Publised On
07 Aug 2023
Total Downloads
Cumulative downloads
Total Downloads
7,246
Last day
200%
3
Compared to previous day
Last week
66.7%
10
Compared to previous week
Last month
3,950%
81
Compared to previous month
Last year
-52.7%
684
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Versions
NgMap
New update to support with Angular CLI version 16.1.0
How to install
npm install @proginnova/ng-map -S
Then install the package npm install @types/googlemaps.
Getting Started
In the tsconfig.json add the next compiler options:
"compilerOptions": {
...
"strictPropertyInitialization": false,
"strictNullChecks": false,
"noImplicitThis": false,
"noImplicitAny": false,
...
}
In the module.ts import the library and set the Google api key:
imports: [
...
NgMapModule.forRoot({
apiKey: {yourApiKey}
})
]
How to use
This library accept these Inputs:
| Input | Description | Example |
|---|---|---|
| center | Sets a point as the center of the map, providing its latitude and longitude coordinates. |
|
| zoom | Set the initial zoom level on a specific point in maps. |
|
| markers | Identifies a location on a map. |
|
| clusterConfig | The number on a cluster indicates how many markers it contains. Notice that as you zoom into any of the cluster locations, the number on the cluster decreases, and you begin to see the individual markers on the map. Zooming out of the map consolidates the markers into clusters again. This configuration set the configuration related with the Cluster. [Note: To use this configuration you must have embeded the marker clusterer javascript.] |
|
| infoWindowContent | Add content to every marker. Can be a string or a Node |
|
| showInfoWindow | Set if the window content shows up with a click or hover the mouse over the marker. |
|
| mapStyles | Is a collection of selectors and stylers that define how the map should be styled. | |
| groupSelectConfig | It is use to select multiple markers at the same time. |
|
| draggable | used to enable the functionality of selecting groups of markers. |
|
| enableControls | Enable or disable Google maps controls. |
|
| debug | In the browser console, show scential information of every input used in the library. |
|
The library has the next outputs:
| Name | Description | Example |
|---|---|---|
| markerClicked | Emits the data stored in the marker, when click on a marker. | (markerClicked)="someFunction($event)" |
| markerHover | Emits the data stored in the marker, when hover the mouse over marker. | (markerHover)="someFunction($event)" |
| zoomChanged | Emits the actual map zoom level. | (zoomChanged)="someFunction($event)" |
| centerChanged | Emits the actual latitude and logitude | (centerChanged)="someFunction($event)" |
| groupSelected | Emits an collection of markers. This works when are using draggable is true. | (groupSelected)="someFunction($event)" |
Example in HTML
1<div style="height: 100vh; width: 100%"> 2 <pgi-ng-map [center]="{lat:9.660880, lng:-84.136653}" [groupSelectConfig]="groupConfig" [mapStyles]="mapStyles" [draggable]="draggable" 3 [infoWindowContent]="'Hello'" [showInfoWindow]="{hover:true}" [markers]="markers$ | async" [debug]="false" [enableControls]="enabledControls" 4 [defaultMarkerIcon]="'./assets/marker.png'" [clusterConfig]="clusterConfig" (groupSelected)="markerGroupSelected($event)" (markerClicked)="markerSelected($event)" 5 [zoom]="5"></pgi-ng-map> 6 <button style="position: absolute; bottom:0;left: 0;" (click)="draggable = !draggable">click</button> 7</div>
Note: draggable and debug are type boolean. infoWindowContent is data to display in the tooltip (can be a component).
No vulnerabilities found.
No security vulnerabilities found.