Angular Esri Loader Graphics Layer

The most adaptable solution to link the ArcGIS API for JavaScript with different frameworks has been esri-loader.

Installing the esri-loader package and then using a module loader/bundler to import the functions you require as part of your application’s development is typical.

Step 1 – Create Angular Application

Step 2 – Install  plugins

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4–  Update  HTML file 

Now, open the app.component.html file and update it with the following code:

<section class="main">
    <div class="pt-5">
        <div>
            Choose one: <button class="btn btn-dark btn_set ms-2" id="loadBtn">Load Map 4.17</button>
            <button class="btn btn-dark btn_set ms-2" id="loadBtn18">Load Map 4.19</button> 
        </div>
         <hr>
        <div>
            <button class="btn btn_reload btn-primary text-white"><a href="javascript:window.location.href=window.location.href">Reload</a> </button>
            <span class="ms-2">to investigate alternative possibilities</span>
        </div>
        <div #mapViewNode></div>
        <br>
        <div *ngIf="loaded">If you don't see two points above, zoom in/out. <br>
            (4.18 has a display problem that necessitates zooming, but 4.18 doesn't).
        </div>
    </div>
</section>

Step 5 – Make the following code modifications to the CSS.

app.component.scss

@import url('https://js.arcgis.com/4.14/esri/themes/light/main.css');
@import url('https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css');
/********************************************************/
body {
    padding: 3px;
    margin: 0;
    height: 100%;
    width: 100%;
}
.esri-view {
  height: 400px;
}
#viewDiv {
    padding: 0;
    margin: 0;
    height: 30%;
    width: 100%;
}
.btn_set{
    border-radius: 1px;
    height: 28px;
    width: 140px;
    padding: 0px 0px 2px 0px;
    font-size: 14px;
}
.btn_reload{
    border-radius: 1px;
    height: 28px;
    width: 88px;
    font-size: 16px;
    padding: 0px 1px 3px 1px;
}
.main{
    width: 40%;
    margin: 0 auto;
}
a{
    text-decoration: none;
    color: white;
}

Step 6 –Using the code modifications below, we can update the App component.

Make the necessary changes to the component’s class file.

app.component.ts

import { Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import { setDefaultOptions, loadModules } from "esri-loader";
import * as $ from 'jquery' 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'esri-loader';
  loaded = false;
  @ViewChild("mapViewNode", { static: true })
  private mapViewEl!: ElementRef;

  loadMap(version:any) {
    setDefaultOptions({ version });
    loadModules([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer"
    ]).then(([Map, MapView, Graphic, GraphicsLayer]) => {
      let map = new Map({
        basemap: "topo"
      });

      let view = new MapView({
        container: this.mapViewEl.nativeElement,
        map: map,
        zoom: 4,
        center: [-49.5, 41]
      });

      var pointGraphic1 = new Graphic({
        geometry: {
          type: "point",
          longitude: -48,
          latitude: 41
        },
        symbol: {
          type: "simple-marker",
          color: [40, 119, 226],
          outline: {
            color: [255, 255, 255],
            width: 2
          }
        }
      });
      var pointGraphic2 = new Graphic({
        geometry: {
          type: "point",
          longitude: -51,
          latitude: 41
        },
        symbol: {
          type: "simple-marker",
          color: [226, 119, 40],
          outline: {
            color: [255, 255, 255],
            width: 2
          }
        }
      });

      var graphicsLayer = new GraphicsLayer()
      map.add(graphicsLayer);

      view.when(() => {
        view.graphics.add(pointGraphic1);
        graphicsLayer.addMany([pointGraphic2]);
        console.log("component.loaded");
        this.loaded = true;
      });
    });
  }

  ngOnInit() {
    $("#loadBtn").click(() => {
      $("#loadBtn18").prop("disabled",true);
      this.loadMap('4.17');
    });
    $("#loadBtn18").click(() => {
      $("#loadBtn").prop("disabled",true);
      this.loadMap('4.18');
    });
  }
}

Step 7 –Run Application

ng -o serve