Tech: Angular + Esri Series — Map Markers

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 here.

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.

--

--

--

Front End architect, opensource contributor and investment enthusiast. New content posted every week.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Gallery and InnerGallery, CSS side

Connect Metamask Wallet to Client Side Application

NVM vs. NPM Vs. Yarn

Node.JS image

Best Practices to follow in Angular Development– Part II

PM2: Production-Ready Nodejs Applications in Minutes

How to test a React App, with Jest and react-testing-library

The Vibration API in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Khoi Bui

Khoi Bui

Front End architect, opensource contributor and investment enthusiast. New content posted every week.

More from Medium

Donut Gauges with Angular and D3

Mobile device displaying a donut chart next to a vase in the shape of a donut

Create interactive maps with Angular 13 and OpenLayers

Authentication using the Amazon Cognito to an Angular application

How To Create A Data table in Angular 10 Using Bootstrap And Contrast