Content Comparison

Example 1: MAP + Angular library

Use a CLI command to generate a plugin component with name map.
Code Block
language bash
linenumbers true
eo g plugin map
Use a CLI command to install 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 current position from navigator, and modify 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 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)"

Example 2a: MAP via iframe + core services

Use a CLI command to generate a plugin component.
Code Block
language bash
linenumbers true
eo g plugin map-frame

Update map-frame.component.ts to load current address from dms object, and modify matchType property if necessary. Please check normalize function if it match your scheme properties!

Code Block

language	js
title	map-frame.component.ts
linenumbers	true

import {
  Component,
  AfterViewInit,
  ViewChild,
  ElementRef,
  Renderer2
} from '@angular/core';
import {DmsService, DmsObject, EventService, EnaioEvent, Event} from '@eo-sdk/core';
import {SelectionService, UnsubscribeOnDestroy} from '@eo-sdk/client';
import {takeUntil} from 'rxjs/operators';


@Component({
  selector: 'eo-map-frame',
  templateUrl: './map-frame.component.html',
  styleUrls: ['./map-frame.component.scss']
})
export class MapFrameComponent extends UnsubscribeOnDestroy implements AfterViewInit {

  static id = 'eo.custom.plugin.map-frame';
  static matchType = new RegExp('object-details-tab.*');

  context;
  @ViewChild('mapFrame') mapFrame: ElementRef;

  constructor(private selectionService: SelectionService, private dmsService: DmsService,
              private renderer: Renderer2, private eventService: EventService) {
    super();
  }

  /**
   * normalize Address data - map your data based on scheme properties
   * @param data
   * @returns
   */
  private normalize(data: any = {}): any {
    return {
      streethw: data.strassehw,
      townhw: data.orthw,
      countryhw: data.landhw,
      ...data
    };
  }

  /**
   * Process dmsObject to get the url for map frame
   * @param dmsObj
   */
  setupMap(dmsObj: DmsObject) {
    if (dmsObj) {
      const {streethw, townhw, countryhw} = this.normalize(dmsObj.data);
      const url = `https://www.google.com/maps/embed/v1/place?key=AIzaSyDX8znfh-d4u3spGhC1GvCjq6EA1pjPovQ&q=${streethw}+${townhw}+${countryhw}`;
      this.renderer.setAttribute(this.mapFrame.nativeElement, 'src', url);
    }
  }

  /**
   * Load & update current context/dmsObject
   * @param event
   */
  eventHandler(event: Event) {
    if (event.type === EnaioEvent.DMS_OBJECT_LOADED || (this.context && this.context.id === event.data.id)) {
      this.context = event.data;
      this.setupMap(event.data);
    }
  }

  ngAfterViewInit() {

    this.eventService
      .on(EnaioEvent.DMS_OBJECT_LOADED, EnaioEvent.DMS_OBJECT_UPDATED)
      .pipe(
        takeUntil(this.componentDestroyed$)
      )
      .subscribe(e => this.eventHandler(e));
  }
}

Update map-frame.component.html to include a google maps iframe based on address of the selected dms object.

Code Block

language	xml
title	map-frame.component.html
linenumbers	true

<p>
  map-frame works!
</p>
<iframe
  #mapFrame
  width="100%"
  height="90%"
  frameborder="0" style="border:0" allowfullscreen>
</iframe>

Use a CLI command to generate labels/translations
Code Block
language bash
linenumbers true
eo g label eo.custom.plugin.map-frame --en GoogleMaps --de GoogleMaps

Version	Old Version 3	New Version 4
Changes made by	Team Kolibri (Unlicensed)	Team Kolibri (Unlicensed)
Saved on	Jan 17, 2019	Jan 17, 2019

Versions Compared

Key

Table of Contents

Example 1: MAP + Angular library

Example 2a: MAP via iframe + core services