topic Re: Angular CLI cluster creation with custom lat and long in ArcGIS JavaScript Maps SDK Questions

Angular CLI cluster creation with custom lat and long

ekkuluriravi — Mon, 04 Oct 2021 19:16:49 GMT

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

Thanks

Re: Angular CLI cluster creation with custom lat and long

AndyGup — Mon, 04 Oct 2021 21:24:42 GMT

@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

Re: Angular CLI cluster creation with custom lat and long

RaviKumarEkkuluri — Wed, 06 Oct 2021 04:09:30 GMT

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

Re: Angular CLI cluster creation with custom lat and long

AndyGup — Wed, 06 Oct 2021 15:50:49 GMT

@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" });

Re: Angular CLI cluster creation with custom lat and long

RaviKumarEkkuluri — Fri, 08 Oct 2021 02:04:18 GMT

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.