@proginnova/ng-map
v1.0.1-alpha
Published
New update to support with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0
Downloads
13
Keywords
Readme
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:
[center]="{lat: 0.0, lng: 0.0}"
[zoom]="8"
IGMapMarker {
position: { lat: number, lng: number };
title?: string;
icon?: string;
metaData?: any;
}
IClusterConfig {
gridSize?: number;
maxZoom?: number;
zoomOnClick?: boolean;
imagePath?: string;
imageExtension?: string;
averageCenter?: boolean;
minimumClusterSize?: number;
styles?: IClusterStyle[];
}
IClusterStyle {
url?: string;
height?: number;
width?: number;
anchor?: any[];
textColor?: string;
textSize?: number;
backgroundPosition?: string;
}
[infoWindowContent]=""
Or a node:
[infoWindowContent]="content"
<div class="info-window-container" #content>
<app-info-window-content [data]="infoWindowData"></app-info-window-content>
</div>
ShowInfoWindowOptions {
click?: boolean;
hover?: boolean
}
MapTypeStyle
GroupSelectConfig {
poligonColor?: string;
markerIcon?: string;
markerLabel?: string;
}
[draggable]="true"
{
zoom: true,
streetView: true,
fullscreen: true,
mapType: true,
}
[debug]="true"
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
<div style="height: 100vh; width: 100%">
<pgi-ng-map [center]="{lat:9.660880, lng:-84.136653}" [groupSelectConfig]="groupConfig" [mapStyles]="mapStyles" [draggable]="draggable"
[infoWindowContent]="'Hello'" [showInfoWindow]="{hover:true}" [markers]="markers$ | async" [debug]="false" [enableControls]="enabledControls"
[defaultMarkerIcon]="'./assets/marker.png'" [clusterConfig]="clusterConfig" (groupSelected)="markerGroupSelected($event)" (markerClicked)="markerSelected($event)"
[zoom]="5"></pgi-ng-map>
<button style="position: absolute; bottom:0;left: 0;" (click)="draggable = !draggable">click</button>
</div>
Note: draggable and debug are type boolean. infoWindowContent is data to display in the tooltip (can be a component).