How to add a layer into map with ArcGIS Angular app

Tutorial for adding a layer from MapServer into map with ArcGIS Angular app

In this tutorial, we’ll add a layer from ArcGIS MapServer to the our GIS application. How to create starter GIS application see previous post in this blog. As an example, we ‘ll take the published service on the boundaries of oil sands with ArcGIS Online. In your case, this can be any other service with ArcGIS Online or from your internal ArcGIS Enterprise Server.

In our starter project we’ll need to mapping this code by:

loadModules(['esri/Map', 'esri/views/MapView', 'esri/layers/MapImageLayer'])
  .then(([Map, MapView, MapImageLayer]: [__esri.MapConstructor, __esri.MapViewConstructor,
    __esri.MapImageLayerConstructor]) => {
    // 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);

    // Set service properties
    // url - this address to MapServer from ArcGIS Enterprise
    // sublayers - this are the settings for the inner layers of the service.
    // id = 1 it tell us that will be displayed only one layer with the identifier
    const oilSandLayerProperties = {
      url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/OilSandsProjectBoundaries/MapServer',
      sublayers: [{id: 1}]
    };
    // Create map image layer by properties
    const oilSandsLayer = new MapImageLayer(oilSandLayerProperties);
    // Adding a layer into map
    map.add(oilSandsLayer);
  });

In a const oilSandLayerProperties we’ll need are set current url of a MapServer layer and set sub layers settings for one layer show only, if we need this. If you want show all layers, just leave this parameter from properties. To view all possible properties look at ArcGIS JavaScript documentation website https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapImageLayer.html#properties-summary

I hope it was useful. In the next note I will show how to display layer lsit (table of content) in our GIS project.

Resources

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