Tech: Angular + Esri Series — Marker’s Tooltip

A Complete Guide to Building an Interactive Map with Angular

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 markers to the existing base map. This article shows you how to render a tooltip for each marker. We often use tooltip to display additional information specific to the feature and/or perform some actions on the feature.

Construct A Template For Tooltip

In order to construct a tooltip’s template, you need to define two attributes: PopupTemplate and Fields in FeatureLayer. With PopupTemplate, you can either use the default template or build a custom one with HTML.

Use default template

The default template for a feature’s tooltip is a simple data table that lists all properties related to selected feature. These properties should be specified in PopupTemplate’s fieldInfos, which is an array of objects containing the label, fieldName and other useful attributes to format the content.

import PopupTemplate from '@arcgis/core/PopupTemplate';
import Field from '@arcgis/core/layers/support/Field';
data = [
  { lat: 40.77, lng: -111.89, direction: 'West' },
  { lat: 44.98, lng: -93.23, direction: 'North' },
  { lat: 35.91, lng: -79.05, direction: 'East' },
  { lat: 29.76, lng: -95.37, direction: 'South' },
];
addDataFt(data: any[]) {
  const ftLayer = new FeatureLayer({
    source: this.buildGraphics(data),
    geometryType: 'point',
    objectIdField: 'objectId',
    fields: this.getFields(),
    popupTemplate: this.buildPopupTemplate()
  });
  
  this.mapView.map.add(ftLayer, 0);
}
buildPopupTemplate(): __esri.PopupTemplate {
  return new PopupTemplate({
    title: 'Properties',
    content: [{
      type: 'fields',
      fieldInfos: [
        { fieldName: 'lat', label: 'Latitude' },
        { fieldName: 'lng', label: 'Longitude' },
        { fieldName: 'direction', label: 'Direction' },
      ],
    }]
  });
}
getFields(): __esri.Field[] {
  return [
    new Field({ name: 'objectId', type: 'oid' }),
    new Field({ name: 'lat', type: 'double' }),
    new Field({ name: 'lng', type: 'double' }),
    new Field({ name: 'direction', type: 'string' }),
  ];
}

After following these steps, your map should be rendered like the screenshot below. See full demo here.

Display Feature’s Tooltip

Use default template with Action buttons

You can also add some action buttons to the tooltip by defining Actions attribute in PopupTemplate object. Each action button should have an id so it can be easily queried for event callback.

import PopupTemplate from '@arcgis/core/PopupTemplate';
import Field from '@arcgis/core/layers/support/Field';
import ActionButton from '@arcgis/core/support/actions/ActionButton';

buildPopupTemplate(): __esri.PopupTemplate {
  return new PopupTemplate({
    title: 'Properties',
    actions: this.buildPopupActions(),
    content: [{
      type: 'fields',
      fieldInfos: [
        { fieldName: 'lat', label: 'Latitude' },
        { fieldName: 'lng', label: 'Longitude' },
        { fieldName: 'direction', label: 'Direction' },
      ],
    }]
  });
}
buildPopupActions() {
  return [
    new ActionButton({
      title: 'Alert Me',
      id: 'alert',
      className: 'esri-icon-tracking',
    })
  ];
}

Here’s how you define a callback method for the click event triggered by the button in PopupTemplate.

onPopupAction() {
  this.mapApi.mapView.popup.on('trigger-action', (event) => {
    if (event.action.id === 'alert') {
      this.alert(event);
    }
  });
}

alert(event) {
  // obtain attributes from selected features
  const { lat, lng } =       this.mapApi.mapView.popup.selectedFeature.attributes;
  alert(`Lat/Lng: ${lat}, ${lng}`);
}

After following these steps, your map should be rendered like the screenshot below. See full demo here.

Display Feature’s Tooltip w/ Action Button

Use custom template

If you want to provide a custom template for the tooltip, you should update the Content attribute, which accepts a HTML string, in PopupTemplate.

import PopupTemplate from '@arcgis/core/PopupTemplate';
import Field from '@arcgis/core/layers/support/Field';
data = [
  { lat: 40.77, lng: -111.89, direction: 'West' },
  { lat: 44.98, lng: -93.23, direction: 'North' },
  { lat: 35.91, lng: -79.05, direction: 'East' },
  { lat: 29.76, lng: -95.37, direction: 'South' },
];
addDataFt(data: any[]) {
  const ftLayer = new FeatureLayer({
    source: this.buildGraphics(data),
    geometryType: 'point',
    objectIdField: 'objectId',
    fields: this.getFields(),
    popupTemplate: this.buildPopupTemplate()
  });
  
  this.mapView.map.add(ftLayer, 0);
}
buildPopupTemplate(): __esri.PopupTemplate {
  return new PopupTemplate({
    title: 'Properties',
    content: `
      <ul>
        <li>Lat: {lat}</li>
        <li>Long: {long}</li>
        <li>Direction: {direction}</li>
      </ul>
    `,
  });
}

After following these steps, your map should be rendered like the screenshot below. See full demo here.

Display Feature’s CustomTooltip