esri namespace problem

map.component.ts

/*
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  Input,
  Output,
  EventEmitter
} from '@angular/core'

import { loadModules } from 'esri-loader'

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  // Private vars with default values
  private _zoom = 10
  private _center = [0.1278, 51.5074]
  private _basemap = 'streets'

  @Input()
  set zoom(zoom: number) {
    this._zoom = zoom
  }

  get zoom(): number {
    return this._zoom
  }

  @Input()
  set center(center: any[]) {
    this._center = center
  }

  get center(): any[] {
    return this._center
  }

  @Input()
  set basemap(basemap: string) {
    this._basemap = basemap
  }

  get basemap(): string {
    return this._basemap
  }

  map: __esri.Map
  view: __esri.MapView

  @Output() mapLoaded = new EventEmitter<boolean>()

  // this is needed to be able to create the MapView at the DOM element in this component
  @ViewChild('mapViewNode') private mapViewEl: ElementRef

  /**************************************************
   * Define the renderer for symbolizing earthquakes
   **************************************************/

  quakesRenderer = {
    type: 'simple', // autocasts as new SimpleRenderer()
    symbol: {
      type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
      style: 'circle',
      size: 20,
      color: [211, 255, 0, 0],
      outline: {
        width: 1,
        color: '#FF0055',
        style: 'solid'
      }
    },
    visualVariables: [
      {
        type: 'size',
        field: 'mag', // earthquake magnitude
        valueUnit: 'unknown',
        minDataValue: 2,
        maxDataValue: 7,
        // Define size of mag 2 quakes based on scale
        minSize: {
          type: 'size',
          expression: 'view.scale',
          stops: [
            {
              value: 1128,
              size: 12
            },
            {
              value: 36111,
              size: 12
            },
            {
              value: 9244649,
              size: 6
            },
            {
              value: 73957191,
              size: 4
            },
            {
              value: 591657528,
              size: 2
            }
          ]
        },
        // Define size of mag 7 quakes based on scale
        maxSize: {
          type: 'size',
          expression: 'view.scale',
          stops: [
            {
              value: 1128,
              size: 80
            },
            {
              value: 36111,
              size: 60
            },
            {
              value: 9244649,
              size: 50
            },
            {
              value: 73957191,
              size: 50
            },
            {
              value: 591657528,
              size: 25
            }
          ]
        }
      }
    ]
  }

  fields = [
    {
      name: 'ObjectID',
      alias: 'ObjectID',
      type: 'oid'
    },
    {
      name: 'title',
      alias: 'title',
      type: 'string'
    },
    {
      name: 'type',
      alias: 'type',
      type: 'string'
    },
    {
      name: 'place',
      alias: 'place',
      type: 'string'
    },
    {
      name: 'depth',
      alias: 'depth',
      type: 'string'
    },
    {
      name: 'time',
      alias: 'time',
      type: 'date'
    },
    {
      name: 'mag',
      alias: 'Magnitude',
      type: 'double'
    },
    {
      name: 'url',
      alias: 'url',
      type: 'string'
    },
    {
      name: 'mmi',
      alias: 'intensity',
      type: 'double'
    },
    {
      name: 'felt',
      alias: 'Number of felt reports',
      type: 'double'
    },
    {
      name: 'sig',
      alias: 'significance',
      type: 'double'
    }
  ]

  pTemplate = {
    title: '{title}',
    content: [
      {
        type: 'fields',
        fieldInfos: [
          {
            fieldName: 'place',
            label: 'Location',
            visible: true
          },
          {
            fieldName: 'time',
            label: 'Date and time',
            visible: true
          },
          {
            fieldName: 'mag',
            label: 'Magnitude',
            visible: true
          },
          {
            fieldName: 'mmi',
            label: 'Intensity',
            visible: true
          },
          {
            fieldName: 'depth',
            label: 'Depth',
            visible: true
          },
          {
            fieldName: 'felt',
            label: 'Number who felt the quake',
            visible: true,
            format: {
              digitSeparator: true,
              places: 0
            }
          },
          {
            fieldName: 'sig',
            label: 'Significance',
            visible: true
          },
          {
            fieldName: 'url',
            label: 'More info',
            visible: true
          }
        ]
      }
    ],
    fieldInfos: [
      {
        fieldName: 'time',
        format: {
          dateFormat: 'short-date-short-time'
        }
      }
    ]
  }

  constructor() {}

  public ngOnInit() {
    const dojoConfig = {
      has: {
        'esri-featurelayer-webgl': 1
      }
    }

    loadModules(
      [
        'esri/views/MapView',
        'esri/Map',
        'esri/geometry/Point',
        'esri/widgets/Legend',
        'esri/request',
        'esri/config'
      ],
      { dojoConfig }
    )
      .then(
        ([
          MapView,
          EsriMap,
          EsriPoint,
          EsriLegend,
          EsriRequest,
          EsriConfig
        ]) => {
          // EsriConfig.request.proxyUrl = '/resource-proxy/Java/proxy.jsp'

          /**************************************************
           * Create the map and view
           **************************************************/

          // request GeoJson data from USGS remote server
          // const url =
          //   'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson'

          // const url = 'assets/uae.geojson'

          // EsriRequest(url, {
          //   responseType: 'json'
          // })
          //   .then(response => {
          //     // The requested data
          //     console.log('received response')
          //     const geoJson = response.data
          //     console.log(geoJson)
          //   })
          //   .catch(err => console.error(err))

          this.map = new EsriMap({
            basemap: 'dark-gray'
          })

          // Create MapView
          this.view = new MapView({
            container: this.mapViewEl.nativeElement,
            map: this.map,
            center: [-144.492, 62.771],
            zoom: 5,
            // customize ui padding for legend placement
            ui: {
              padding: {
                bottom: 15,
                right: 0
              }
            }
          })

          this.view.when(
            () => {
              // All the resources in the MapView and the map have loaded. Now execute additional processes
              console.log('it loaded')

              EsriRequest('assets/week.json', {
                responseType: 'json'
              })
                .then(this.createGraphics) // then send it to the createGraphics() method
                .then(this.createLayer) // when graphics are created, create the layer
                .catch(err => console.error(err))

              // .then(this.createLegend, view) // when layer is created, create the legend

              this.mapLoaded.emit(true)
            },
            err => {
              console.error(err)
            }
          )
        }
      )
      .catch(err => {
        console.error(err)
      })
  } // ngOnInit

  /**************************************************
   * Create graphics with returned geojson data
   **************************************************/

  createGraphics(response) {
    console.log('received response')
    const myData = response.data
    console.log(myData)

    // raw GeoJSON data
    const geoJson = response.data

    // Create an array of Graphics from each GeoJSON feature
    return geoJson.features.map((feature, i) => {
      return {
        geometry: new __esri.Point({
          x: feature.geometry.coordinates[0],
          y: feature.geometry.coordinates[1]
        }),
        // select only the attributes you care about
        attributes: {
          ObjectID: i,
          title: feature.properties.title,
          type: feature.properties.type,
          place: feature.properties.place,
          depth: feature.geometry.coordinates[2] + ' km',
          time: feature.properties.time,
          mag: feature.properties.mag,
          mmi: feature.properties.mmi,
          felt: feature.properties.felt,
          sig: feature.properties.sig,
          url: feature.properties.url
        }
      }
    })
  }

  /**************************************************
   * Create a FeatureLayer with the array of graphics
   **************************************************/

  createLayer(graphics) {
    const lyr = new __esri.FeatureLayer({
      source: graphics, // autocast as an array of esri/Graphic
      // create an instance of esri/layers/support/Field for each field object
      fields: this.fields, // This is required when creating a layer from Graphics
      objectIdField: 'ObjectID', // This must be defined when creating a layer from Graphics
      renderer: new __esri.SimpleRenderer(this.quakesRenderer), // set the visualization on the layer
      spatialReference: {
        wkid: 4326
      },
      geometryType: 'point', // Must be set when creating a layer from Graphics
      popupTemplate: this.pTemplate
    })

    this.map.add(lyr)
    return lyr
  }

  /******************************************************************
   * Add layer to layerInfos in the legend
   ******************************************************************/

  createLegend(layer, view) {
    // if the legend already exists, then update it with the new layer
    // if (legend) {
    //   legend.layerInfos = [
    //     {
    //       layer,
    //       title: 'Magnitude'
    //     }
    //   ]
    // } else {
    const legend = new __esri.Legend({
      view,
      layerInfos: [
        {
          layer,
          title: 'Earthquake'
        }
      ]
    })
    // }
  }
}