...
...
...
...
...
...
...
...
...
...
| Info |
|---|
The CLI component is only working for versions before 9.10. It must be upgraded to Angular 15 as well and will come later. |
| Table of Contents | ||
|---|---|---|
|
Example 1: MAP + Angular library
Description
In this example we will create a new tab in the object area, which will show a map with our current location.
Implementation
Use a CLI command to generate a plug-in component with name map.
Code Block language bash linenumbers true eo g plugin map
Use a CLI command to install the maps package (takes some time).
Code Block language bash linenumbers true npm install -P @agm/core
Import AgmCoreModule module to CustomPluginsModule.
Code Block language js title custom-plugins.module.ts linenumbers true import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {EoFrameworkModule} from '@eo-sdk/client'; import {PluginsModule} from '@eo-sdk/client'; import {EoPlugin} from '@eo-sdk/client'; import {links} from '../custom-states/custom-states.module'; import {MapComponent} from './map/map.component'; import {AgmCoreModule} from '@agm/core'; export const entryComponents: EoPlugin[] = [ MapComponent, ]; @NgModule({ imports: [ CommonModule, EoFrameworkModule, AgmCoreModule.forRoot(), PluginsModule.forRoot(entryComponents, links) ], declarations: [MapComponent], exports: [PluginsModule] }) export class CustomPluginsModule { }Update map.component.ts to load the current position from navigator, and modify the matchType property if necessary.
Code Block language js title map.component.ts linenumbers true import { Component, OnInit } from '@angular/core'; @Component({ selector: 'eo-map', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'] }) export class MapComponent implements OnInit { static id = 'eo.custom.plugin.map'; static matchType = new RegExp ('object-details-tab.*'); currentPosition; secureOriginIssue = false; constructor() { } private getCurrentPosition(): void { navigator.geolocation.getCurrentPosition((position) => { this.currentPosition = position; }, failure => { if (failure.message.indexOf('Only secure origins are allowed') === 0) { this.secureOriginIssue = true; } }); } ngOnInit() { this.getCurrentPosition(); } }Update map.component.html to include a map component with the latitude and longitude based on the current position.
Code Block language xml title map.component.html linenumbers true <agm-map *ngIf="currentPosition && !secureOriginIssue" [latitude]="currentPosition.coords.latitude" [longitude]="currentPosition.coords.longitude" [style.height.%]="90"> <agm-marker [latitude]="currentPosition.coords.latitude" [longitude]="currentPosition.coords.longitude"></agm-marker> </agm-map> <section *ngIf="!currentPosition && secureOriginIssue" class="secure-origin__issue"> <eo-icon class="no-file" [iconSrc]="'assets/_default/svg/ic_not_listed_location.svg'"></eo-icon> <span translate>eo.custom.plugin.map.secure.origin</span> </section>
To make it look nice, we add some scss
Code Block language css title map.component.scss linenumbers true .secure-origin__issue { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-transform: capitalize; border: 0; .no-file { width: 128px; height: 128px; opacity: .06; } }Use a CLI command to generate labels/translations
Code Block language bash linenumbers true eo g label eo.custom.plugin.map --en Map --de Stadtplan
Code Block language bash linenumbers true eo g label eo.custom.plugin.map.secure.origin --en "Please, change to a secure connection (https)" --de "Bitte wechseln sie zu einer sicheren verbindung (https)"
...