libs/upp-base/src/modules/geocode.ts
A component that displays information when the user is far from a specified center location. Includes map display and location information based on Google Maps API.
OnInit
AfterViewInit
OnDestroy
| selector | upp-away |
| styleUrls | ./away/view/ui-away.scss |
| templateUrl | ./away/view/ui-away.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
Accessors |
constructor(lang: languageService, geocode: geocodeService, view: viewService, http: HttpClient)
|
|||||||||||||||
|
Loads the Google Maps API script if not already loaded and initializes language and location services.
Parameters :
|
| _center |
Type : Coordinates | null
|
Default value : null
|
|
The center coordinates to calculate the distance from. |
| changeEvent |
Type : EventEmitter
|
|
Emits an event when the distance or accuracy changes. |
| closeEvent |
Type : EventEmitter
|
|
Event emitted when the component is closed. |
| ngAfterViewInit |
ngAfterViewInit()
|
|
Updates the map position after the view initializes.
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Unsubscribes from location updates on component destruction.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Subscribes to location changes to update the position on initialization.
Returns :
void
|
| OnClose |
OnClose()
|
|
Emits the
Returns :
void
|
| OnDestroy |
OnDestroy()
|
|
Returns :
void
|
| Public Async SetLanguage | ||||||||
SetLanguage(language: string)
|
||||||||
|
Clears the cache and triggers a view update if a new language is set.
Parameters :
Returns :
any
Resolves once the language is set and view updated. |
| Public tr | |||||||||||||||
tr(id: string, args: ___targs)
|
|||||||||||||||
|
If no arguments are provided, the translation is cached for optimized future access.
Parameters :
Returns :
string
The translated string. |
| _googlemap |
Type : any
|
Decorators :
@ViewChild('googlemap', {static: false})
|
| Public _mapinfo |
Type : object
|
Default value : {
zoom: 17,
accuracy: 0,
position: {
lat: 0,
lng: 0
},
markers: [{
position: {
lat: 0,
lng: 0
},
options: {
draggable: false,
icon: '/assets/image/marker-place.png'
}
}, {
position: {
lat: 0,
lng: 0
},
options: {
draggable: false
}
}]
}
|
|
Map display information, including markers, accuracy, and zoom level. |
| Public gmapsApiLoaded |
Default value : this._gmapsApiLoaded.asObservable()
|
| Public view |
Type : viewService
|
| Public _chng |
Type : ChangeDetectorRef | null
|
Default value : null
|
| Public _lang |
Type : languageService
|
| Public language |
Type : string | null
|
Default value : null
|
| Distance |
getDistance()
|
|
Gets the distance to the center point. Displays in kilometers if the distance is over 1,000 meters. |
<ion-content>
<div class="mapcontainer">
<div *ngIf="gmapsApiLoaded | async" style="height: 100%; width: 100%;">
<google-map [attr.data-id]="'away-google-map'" #googlemap id="googlemap" height="100%" width="100%" [options]="{ mapTypeControl: false, fullscreenControl: false }" [zoom]="_mapinfo.zoom" [center]="_mapinfo.position">
<map-marker [attr.data-id]="'away-google-marker'" *ngFor="let marker of _mapinfo.markers" [position]="marker.position" [options]="marker.options"></map-marker>
</google-map>
</div>
</div>
<div class="faraway">
<ion-item lines="none">
<ion-label>
{{tr('@far_away_title')}}<br/>
<span class="small">{{tr('@far_away_message', [ Distance ])}}</span>
</ion-label>
</ion-item>
<div class="form-buttons">
<ion-button [attr.data-id]="'away-close-button'" expand="block" (click)="OnClose()">
{{tr('@far_away_close')}}
</ion-button>
</div>
</div>
</ion-content>
./away/view/ui-away.scss
#googlemap {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
cursor: pointer;
&.hide {
opacity: 0;
}
}
:host {
height: 100%;
width: 100%;
ion-content {
div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px;
padding: 10px 16px 25px 16px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 90%, transparent);
&.mapcontainer
{
height: 100%;
background-color: var(--ion-background-color) !important;
background-image: url('../../../assets/image/gmaps.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
ion-item {
--background: transparent;
font-size: 24px;
text-align: center;
ion-label {
.small {
font-size: 80%;
opacity: .8;
}
}
}
.form-buttons {
position: relative;
display: block;
background: transparent !important;
ion-button {
--padding-start: 20px;
--padding-end: 20px;
margin: 0px auto;
display: block;
max-width: fit-content;
}
}
}
}