A Guide to Building starter GIS application with angular 9
By: Igor Dolbik-Vorobei
Tags: JavaScript, Arcgis, Angular, Esri, Maps

Step 1. Generate default project

Before begin, you must have installed Angular CLI. How to install, see in the angular doc: https://angular.io/guide/setup-local

To genereate a new default project use a command:

ng new arcgis-angualar-map

cd arcgis-angualar-map

In additional, we’ll needed install two package: esri-loader — for load Dojo’s require the classes ArcGIS JavaScript API, and @types/arcgis-js-api — type definitions for ArcGIS JavaScript API, need for correct work in TypeScript

npm i --save esri-loader

npm i --save-dev @types/arcgis-js-api

Step 2. Setup base configuration project

Before create a map, we’ll needed confuigure our project. In first step insert “arcgis-js-api” types in tsconfig.app.json

...

"compilerOptions": {

...

"types": [

"arcgis-js-api"

],

...

}

After we’ll needed insert into index.html link to esri main.css and link to location ArcGIS JavaScrit API.

<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">

<script src="https://js.arcgis.com/4.14/"></script>

We’re ready to create our starter map application with Angular.

Step 3. Create map

In this step we’ll needed to make changes to three files. This is html-template, general class and styles our main component. Post div container for map view into html-template (app.component.html):

...

<div #mapView></div>

...

To configure the correct display, we must specify this code in styles (app.component.css). “Esri-view” — it’s the default name for style class ESRI map view. Please, note that the container in which the #mapView class is placed, must have a fixed height and width.

.esri-view {

height: 100%;

width: 100%;

outline: none;

}

And set up main component class in the same way:

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

import {loadModules} from 'esri-loader';



@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

// Get a container link for map place

@ViewChild('mapView', {static: true}) private readonly

mapViewElement: ElementRef;

// main map view

private mapView;

title = 'ArcGIS angular map';



constructor() {

// This function load Dojo's require the classes

// listed in the array modules

loadModules(['esri/Map', 'esri/views/MapView'])

.then(([Map, MapView]: [__esri.MapConstructor,

__esri.MapViewConstructor]) => {

// set default map properties

const mapProperties = {

basemap: 'gray'

}

// create map by default properties

const map = new Map(mapProperties);

// set default map view properties

// container - element in html-template for locate map

// zoom - default zoom parameter, value from 1 to 18

const mapViewProperties = {

container: this.mapViewElement.nativeElement,

zoom: 3,

map

}

// create map view by default properties

this.mapView = new MapView(mapViewProperties);

});

}

}

Run are command ng serve and visit page http://localhost:4200/ in your browser:



...

** Angular Live Development Server is listening on localhost:4200, open your browser on

: Compiled successfully. ng serve...** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **: Compiled successfully.

I hope it was useful. In the next note I will show how to add a layer on map.

Resources

This project can be viewed at GitHub: https://github.com/gisprod/arcgis-angular-map.