Angular CLI cluster creation with custom lat and long

362
4
10-04-2021 12:16 PM
ekkuluriravi
New Contributor

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

Thanks

0 Kudos
4 Replies
AndyGup
Esri Regular Contributor

@ekkuluriravithere is an SDK Guide Topic covering cluster here: https://developers.arcgis.com/javascript/latest/sample-code/featurereduction-cluster/. My recommendation is get the functionality working in vanilla JS first and then migrate it to Angular.

Also, here is our Angular CLI example: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli

0 Kudos
RaviKumarEkkuluri
New Contributor

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

0 Kudos
AndyGup
Esri Regular Contributor

@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"
}); 
0 Kudos
RaviKumarEkkuluri
New Contributor

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.

0 Kudos