Skip to content

Instantly share code, notes, and snippets.

@odoe
Created Dec 21, 2015
Embed
What would you like to do?
// home.component.ts
import { Component, ElementRef } from 'angular2/core';
import { HomeViewModel, topic } from 'esri-mods';
@Component({
selector: 'esri-home',
template: '<a class="esri-home" href="#" (click)="onClick($event)"><i class="material-icons">home</i></a>'
})
export class HomeComponent {
vm: HomeViewModel = null;
view: null;
constructor() {
topic.subscribe('map-view', this.onMapView.bind(this));
}
onMapView(view) {
this.vm = new HomeViewModel({
view: view
});
}
onClick(e) {
e.preventDefault();
this.vm.goHome();
}
}
// map.component.ts
import { Component, ElementRef } from 'angular2/core';
import MapService from './map.service';
import { MapView } from 'esri-mods';
@Component({
selector: 'esri-map',
template: '<div id="viewDiv"></div>',
providers: [MapService]
})
export class MapComponent {
view: null,
constructor(public _service: MapService, private elRef:ElementRef) {}
ngOnInit() {
this.view = new MapView({
container: this.elRef.nativeElement.firstChild,
map: this._service.map,
zoom: 10,
center: [-120.76, 37.93]
});
this._service.setView(this.view);
}
}
// app.component.ts
import { Component } from 'angular2/core';
import { MapComponent } from './map.component';
import { HomeComponent } from './home.component';
@Component({
directives: [MapComponent, HomeComponent],
selector: 'my-app',
template:
`
<div>
<esri-map></esri-map>
<esri-home></esri-home>
</div>
`
})
export class AppComponent { }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment