Versions Compared

Version Old Version 9 New Version 10
Changes made by

Team Kolibri (Unlicensed)

Team Kolibri (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Example 1: MAP + Angular library

  1. Use a CLI command to generate a plugin component with name map.

    Code Block
    languagebash
    linenumberstrue
    eo g plugin map


  2. Use a CLI command to install maps package (takes some time).

    Code Block
    languagebash
    linenumberstrue
    npm install -P @agm/core


  3. Import AgmCoreModule module to CustomPluginsModule.

    Code Block
    languagejs
    titlecustom-plugins.module.ts
    linenumberstrue
    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 {
}


  4. Update map.component.ts to load current position from navigator, and modify matchType property if necessary.

    Code Block
    languagejs
    titlemap.component.ts
    linenumberstrue
    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();
  }

}


  5. Update map.component.html to include a map component with the latitude and longitude based on current position.

    Code Block
    languagexml
    titlemap.component.html
    linenumberstrue
    <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>


  6. To make it look nice we add some scss

    Code Block
    languagecss
    titlemap.component.scss
    linenumberstrue
    .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;
  }
}


  7. Use a CLI command to generate labels/translations

    Code Block
    languagebash
    linenumberstrue
    eo g label eo.custom.plugin.map --en Map --de Stadtplan


    Code Block
    languagebash
    linenumberstrue
    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)"


...