tomwayson / esri-angular-cli-example

Example of how to to use the ArcGIS API for JavaScript in an Angular CLI app

Home Page:https://tomwayson.github.io/esri-angular-cli-example

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot use __esri namespace in ngOnInit or onMapInit

digz6666 opened this issue · comments

I'm trying to add FeatureLayer to the map but cannot use __esri namespace on ngOnInit or onMapInit.

I've cloned this example and modified esri-map.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-esri-map',
  templateUrl: './esri-map.component.html',
  styleUrls: ['./esri-map.component.css']
})
export class EsriMapComponent implements OnInit {
  webMapProperties: __esri.WebMapProperties = {
  };
  mapViewProperties: __esri.MapViewProperties = {
    zoom: 16
  };
  map: __esri.Map;
  mapView: __esri.MapView;

  constructor() { }

  ngOnInit() {
  }

  onMapInit(mapInfo: { map: __esri.Map, mapView: __esri.MapView }) {
    this.map = mapInfo.map;
    this.mapView = mapInfo.mapView;

    var featureLayer = new __esri.FeatureLayer({
      url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
    });
    this.map.add(featureLayer);
  }
}

But it throws following error on new __esri.FeatureLayer on the browser.

EsriMapComponent.html:2 ERROR ReferenceError: __esri is not defined
    at EsriMapComponent.webpackJsonp.../../../../../src/app/esri-map/esri-map.component.ts.EsriMapComponent.onMapInit (esri-map.component.ts:27)
    at Object.eval [as handleEvent] (EsriMapComponent.html:2)
    at handleEvent (core.es5.js:11997)
    at callWithDebugContext (core.es5.js:13458)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13046)
    at dispatchEvent (core.es5.js:8601)
    at core.es5.js:10763
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)

Can I use __esri namespace like this? How can I add feature layers as I cannot find any example.

I read following issue #33 and following example showed me different approach which works perfectly:
https://github.com/ashrafonline/ESRI43AngularCLI