Plot JSON points on map, then draw a circle to subset and export

BBarbs

Hello!

I am building a web app that uses point location data from an API endpoint we have. The data return is in JSON format and includes fields for latitude and longitude. I would like the user to be able to draw a circle of a user-chosen radius and export the selected points as a csv (or be able to display the selected in a table and download from there). 

So far, I am able to take the API's return and plot the points on a map using GraphicsLayer() and looping through the results to plot them:

const popupMemberLocs = new PopupTemplate({
    title: "{name}",
    content: [{
        title: "{name}",
        content: "<b>Member Type:</b> {provType} <br/>" +
            "<b>Specialty:</b> {specialty} <br/><br/>" +
            "<b>Address:</b><br/> {address}"
    }]
})

let memberLocations = new GraphicsLayer();

apiReturn.forEach(point => {
    const graphic = new Graphic({
        geometry: {
            type: 'point',
            longitude: point.GCD_LONGITUDE,
            latitude: point.GCD_LATITUDE
        },
        symbol: {
            type: "simple-marker",
            color: "red",
            size: "8px"
        },
        attributes: {
            name: point.FIRST_NAME + " " + point.LAST_NAME,
            memType: point.MEM_TYPE_DESC,
            specialty: point.MEM_SPECIALTY_DESC,
            address: point.GCD_STREET_ADDRESS + " " +
                (point.GCD_SUBADDRESS ? point.GCD_SUBADDRESS : " ") + "<br/>" +
                point.GCD_CITY + ", " +
                point.GCD_ST_ABBR + " " +
                point.GCD_ZIPCODE
        },
        popupTemplate: popupMemberLocs
    });
    memberLocations.add(graphic)
});
map.add(memberLocations);

 

Where should I go from here? The samples I've come across seem to mostly utilize hosted feature layers, so I'm hoping I may have missed one about JSON, or there's a different method of getting the points and their attributes onto a map that's more flexible.

Thank you!

Sage_Wall

Hi @BBarbs ,

At a high level, using a client side feature layer would make this easier as then you could use the feature table to view your attributes and export a csv file out of the box.  I was able to modify an existing client side feature sample to add the table quite easily.  You can still use the array of graphics you are creating with the client side feature layer.
Original sample
Modified to have the feature table

Next steps would to use the sketch widget, the new component or the sketch view model to draw the circle on the map and then use the intersects geometry operator to select the features that intersect the circle.  This tutorial might be of use for that process: https://developers.arcgis.com/javascript/latest/tutorials/find-spatial-relationships/ 

If possible you probably want to start using the map components.  I apologize I didn't have time to convert the codepen showing the table to use components, but the tutorial uses the new web components.