Typescript rewrite of ArcGIS Sample Code

gistfile1.txt

/*
  Copyright 2018 Esri
  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'
import esri = __esri

import * as FeatureLayer from 'esri/layers/FeatureLayer'
import * as Legend from 'esri/widgets/Legend'
import * as Point from 'esri/geometry/Point'
import * as esriRequest from 'esri/request'
import * as SimpleRenderer from 'esri/renderers/SimpleRenderer'
import * as Renderer from 'esri/renderers/Renderer'

@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() {
    loadModules([
      'esri/views/MapView',
      'esri/Map',
      'esri/geometry/Point',
      'esri/widgets/Legend',
      'esri/request'
    ])
      .then(([MapView, EsriMap, EsriPoint, EsriLegend, EsriRequest]) => {
        // Set up popup template for the layer

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

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

        // Create MapView
        this.view = new MapView({
          container: 'viewDiv',
          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
            this.mapLoaded.emit(true)
            this.getData()
              .then(this.createGraphics) // then send it to the createGraphics() method
              .then(this.createLayer) // when graphics are created, create the layer
            // .then(this.createLegend, view) // when layer is created, create the legend
          },
          err => {
            console.error(err)
          }
        )
      })
      .catch(err => {
        console.error(err)
      })
  } // ngOnInit

  // Request the earthquake data
  getData() {
    // data downloaded from the USGS at http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/ on 4/4/16
    // month.geojson represents recorded earthquakes between 03/04/2016 and 04/04/2016
    // week.geojson represents recorded earthquakes betwen 03/28/2016 and 04/04/2016

    const url = '../../assets/alaska.js'

    return esriRequest(url, {
      responseType: 'json'
    })
  }

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

  createGraphics(response) {
    // 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 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 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 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 Legend({
      view,
      layerInfos: [
        {
          layer,
          title: 'Earthquake'
        }
      ]
    })
    // }
  }
}