Angular CLI cluster creation with custom lat and long

Question

Hi, Its a basic question. I started learning. 
I am looking for a Angular CLI support clustered maps with custom lat and long.

Thanks

RaviKumarEkkuluri · Answer

Thanks @AndyGup the above steps helped. 
Could you please suggest how to access all cluster data in the popupTemplate.

I am looking like the following example in Typescript
https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=layers_point_clustering

I tried with this example, but not able to access ClusterLayer.js in my Angular app.

AndyGup · Answer

@RaviKumarEkkuluriif you are using a FeatureLayer for clustering, then take a look at the code snippet example in the source property: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#source. Also take a look at the API doc for point Geometry: https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html.

One caveat with Angular and TypeScript is you have to explicitly declare all ArcGIS JS API classes because of a well-known limitation in TypeScript. You'll have to convert your JSON to an array of Graphics, and then add those Graphics to FeatureLayer.source. Here's an example of how it will work in the API:

import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import Graphic from "@arcgis/core/Graphic";
import Point from "@arcgis/core/geometry/Point";

let point = new Point(
 {
    latitude: 100,
    longitude: 30
 });

let tempGraphic = new Graphic({
  geometry: point,
  attributes: {
     ObjectID: 1,
     DepArpt: "KATL",
     MsgTime: Date.now(),
     FltId: "UAL1"
   }
});

let layer = new FeatureLayer({
  source: [tempGraphic],  
  objectIdField: "ObjectID"
});

RaviKumarEkkuluri · Answer

Thanks @AndyGup for the response. Could you please help me how do i show the clusters with my Json(lat,lng and name). Any examples in vanilla js that will help