Tech: Angular + Esri Series — Map Markers

A Complete Guide to Building an Interactive Map with Angular

3 min readMar 5, 2022

Do you need to integrate an interactive map into your Angular apps ? Are you struggling to find a map library that is easy to use and cost-effective ? If you answer yes to either question you come to the right place. This series will walk you through all the steps to integrate a map library called Esri, a web-based mapping software that gives developer easy access to variety of resources in order to build attractive and high performance maps. You can check out entire Angular and Esri map series below.

Khoi Bui

Angular + Esri Series

View list

4 stories

In previous article, we learned how to add and render a base map. This article shows you how to add markers to the existing base map. There are two main steps to add markers into the map: create a feature layer with data points and style the data points.

Create a Feature Layer

A feature layer can be created in one of two ways: reference a service URL or construct client-side features.

Method 1: Reference a Service URL

If the resource is built on ArcGIS Enterprise or ArcGIS online, you can specify its URL of the service directly in the FeatureLayer object.

import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
addUrlFeature() {
  const featureLayer = new FeatureLayer({
    url: <service URL>,
  });
  this.mapView.map.add(featureLayer);
}

See full code here.

Method 2: Construct Client-side Features

When the resource is stored on the client, an array of features needs to be built with their geometry properties such as latitudes and longitudes before adding to the FeatureLayer object.

import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import Point from '@arcgis/core/geometry/Point';
import Graphic from '@arcgis/core/Graphic';
data = [
  { lat: 40.77, lng: -111.89 },
  { lat: 44.98, lng: -93.23 }
];addDataFt(data: any[]) {
  const ftLayer = new FeatureLayer({
    source: this.buildGraphics(data),
    geometryType: 'point',
    objectIdField: 'objectId',
  });  // add new layer to the top
  this.mapView.map.add(ftLayer, 0);
}buildGraphics(data: any[]): __esri.Graphic[] {
  return data.map((item) => new Graphic({
    geometry: this.buildGeoPoint(item)
  }));
}buildGeoPoint(params: { lat: number; lng: number }): __esri.Point {
  return new Point({
    latitude: params.lat,
    longitude: params.lng,
  });
}

See full code here.

Style Markers

After all features are added to the map, you need to provide a custom renderer in FeatureLayer object to define the visualization of each marker.

💡You may not need to provide the renderer if you reference the service URL to add features.

💡For simplicity, we use SimpleMarkerSymbol as the renderer for the markers.

import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol';
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol';
import Color from '@arcgis/core/Color';
import SimpleRenderer from '@arcgis/core/renderers/SimpleRenderer';
data = [
  { lat: 40.77, lng: -111.89 },
  { lat: 44.98, lng: -93.23 }
];addDataFt(data: any[]) {
  const ftLayer = new FeatureLayer({
    renderer: this.buildRenderer(),
  });  // add new layer to the top
  this.mapView.map.add(ftLayer, 0);
}buildRenderer(): __esri.SimpleRenderer {
  return new SimpleRenderer({
    symbol: new SimpleMarkerSymbol({
      style: 'circle',
      size: 14,
      color: new Color([255, 255, 255]),
      outline: new SimpleLineSymbol({
        width: 1,
        color: new Color([255, 255, 255]),
      }),
    }),
  });
}

Congratulations for reaching to this point. Your map should be rendered like the screenshot below. See full demo here.