import { Component , ViewChild } from '@angular/core' ; import { MapComponent } from './map.component' ; import { SearchComponent } from './search.component' ; import { LegendComponent } from './legend.component' ; import { BasemapSelect } from './basemapselect.component' ; import { LayerComponent } from './layer.component' ; @ Component ( { selector : 'my-app' , template : `
    <div class="row">
      <div class="col-sm-8 col-md-9 col-lg-10 map-col">
        <esri-map [itemId]="itemId" [options]="mapOptions" (mapLoaded)="onMapLoad($event)">
          <esri-search [options]="searchOptions"></esri-search>
        </esri-map>
      </div>
      <div class="col-sm-4 col-md-3 col-lg-2">
        <h3>{{title}}</h3>
        <tabs>
          <tab tabTitle="Legend">
            <h4>Legend</h4>
            <esri-legend></esri-legend>
          </tab>  
          <tab tabTitle="Options">
            <h4>Layer Visibility</h4>
              <esri-layer></esri-layer>
            <h4>Basemap</h4>
            <basemap-select (basemapSelected)="onBasemapSelected($event)"></basemap-select>
          </tab>
        </tabs> 
      </div>
    </div>
    ` } ) export class AppComponent { @ ViewChild ( MapComponent ) mapComponent : MapComponent ; @ ViewChild ( SearchComponent ) searchComponent : SearchComponent ; @ ViewChild ( LegendComponent ) legendComponent : LegendComponent ; @ ViewChild ( BasemapSelect ) basemapSelect : BasemapSelect ; @ ViewChild ( LayerComponent ) LayerComponent : LayerComponent ; title = 'Map Title' ; itemId = '8e42e164d4174da09f61fe0d3f206641' ; public mapOptions = { basemap : 'gray' , center : [ - 97 , 38 ] , zoom : 5 } ; public searchOptions = { enableButtonMode : true , enableLabel : false , enableInfoWindow : true , showInfoWindowOnSelect : false , } ; onMapLoad ( response ) { const map = response . map ; this . searchComponent . setMap ( map ) ; this . legendComponent . init ( map , response . layerInfos ) ; this . basemapSelect . selectedBasemap = response . basemapName ; this . title = response . itemInfo . item . title ; this . LayerComponent . init ( response ) ; } onBasemapSelected ( basemapName ) { this . mapComponent . setBasemap ( basemapName ) ; } }