<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Plot JSON points on map, then draw a circle to subset and export in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/plot-json-points-on-map-then-draw-a-circle-to/m-p/1598217#M86744</link>
    <description>&lt;P&gt;Hello!&lt;/P&gt;&lt;P&gt;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).&amp;nbsp;&lt;/P&gt;&lt;P&gt;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:&lt;/P&gt;&lt;LI-CODE lang="javascript"&gt;const popupMemberLocs = new PopupTemplate({
    title: "{name}",
    content: [{
        title: "{name}",
        content: "&amp;lt;b&amp;gt;Member Type:&amp;lt;/b&amp;gt; {provType} &amp;lt;br/&amp;gt;" +
            "&amp;lt;b&amp;gt;Specialty:&amp;lt;/b&amp;gt; {specialty} &amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;" +
            "&amp;lt;b&amp;gt;Address:&amp;lt;/b&amp;gt;&amp;lt;br/&amp;gt; {address}"
    }]
})

let memberLocations = new GraphicsLayer();

apiReturn.forEach(point =&amp;gt; {
    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 : " ") + "&amp;lt;br/&amp;gt;" +
                point.GCD_CITY + ", " +
                point.GCD_ST_ABBR + " " +
                point.GCD_ZIPCODE
        },
        popupTemplate: popupMemberLocs
    });
    memberLocations.add(graphic)
});
map.add(memberLocations);&lt;/LI-CODE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;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.&lt;/P&gt;&lt;P&gt;Thank you!&lt;/P&gt;</description>
    <pubDate>Fri, 21 Mar 2025 20:54:40 GMT</pubDate>
    <dc:creator>BBarbs</dc:creator>
    <dc:date>2025-03-21T20:54:40Z</dc:date>
    <item>
      <title>Plot JSON points on map, then draw a circle to subset and export</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/plot-json-points-on-map-then-draw-a-circle-to/m-p/1598217#M86744</link>
      <description>&lt;P&gt;Hello!&lt;/P&gt;&lt;P&gt;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).&amp;nbsp;&lt;/P&gt;&lt;P&gt;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:&lt;/P&gt;&lt;LI-CODE lang="javascript"&gt;const popupMemberLocs = new PopupTemplate({
    title: "{name}",
    content: [{
        title: "{name}",
        content: "&amp;lt;b&amp;gt;Member Type:&amp;lt;/b&amp;gt; {provType} &amp;lt;br/&amp;gt;" +
            "&amp;lt;b&amp;gt;Specialty:&amp;lt;/b&amp;gt; {specialty} &amp;lt;br/&amp;gt;&amp;lt;br/&amp;gt;" +
            "&amp;lt;b&amp;gt;Address:&amp;lt;/b&amp;gt;&amp;lt;br/&amp;gt; {address}"
    }]
})

let memberLocations = new GraphicsLayer();

apiReturn.forEach(point =&amp;gt; {
    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 : " ") + "&amp;lt;br/&amp;gt;" +
                point.GCD_CITY + ", " +
                point.GCD_ST_ABBR + " " +
                point.GCD_ZIPCODE
        },
        popupTemplate: popupMemberLocs
    });
    memberLocations.add(graphic)
});
map.add(memberLocations);&lt;/LI-CODE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;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.&lt;/P&gt;&lt;P&gt;Thank you!&lt;/P&gt;</description>
      <pubDate>Fri, 21 Mar 2025 20:54:40 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/plot-json-points-on-map-then-draw-a-circle-to/m-p/1598217#M86744</guid>
      <dc:creator>BBarbs</dc:creator>
      <dc:date>2025-03-21T20:54:40Z</dc:date>
    </item>
    <item>
      <title>Re: Plot JSON points on map, then draw a circle to subset and export</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/plot-json-points-on-map-then-draw-a-circle-to/m-p/1598228#M86745</link>
      <description>&lt;P&gt;Hi&amp;nbsp;&lt;a href="https://community.esri.com/t5/user/viewprofilepage/user-id/719798"&gt;@BBarbs&lt;/a&gt;&amp;nbsp;,&lt;/P&gt;&lt;P&gt;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.&amp;nbsp; I was able to modify an existing client side feature sample to add the table quite easily.&amp;nbsp; You can still use the array of graphics you are creating with the client side feature layer.&lt;BR /&gt;&lt;A href="https://https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/" target="_self"&gt;Original sample&lt;/A&gt;&lt;BR /&gt;&lt;A href="https://codepen.io/sagewall/pen/jEOxeya?editors=1010" target="_self"&gt;Modified to have the feature table&lt;/A&gt;&lt;BR /&gt;&lt;BR /&gt;Next steps would to use the &lt;A href="https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-sketch/" target="_self"&gt;sketch&lt;/A&gt; widget, the new component or the &lt;A href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html" target="_self"&gt;sketch view model&lt;/A&gt; to draw the circle on the map and then use the intersects geometry operator to select the features that intersect the circle.&amp;nbsp; This tutorial might be of use for that process:&amp;nbsp;&lt;A href="https://developers.arcgis.com/javascript/latest/tutorials/find-spatial-relationships/" target="_blank"&gt;https://developers.arcgis.com/javascript/latest/tutorials/find-spatial-relationships/&lt;/A&gt;&amp;nbsp;&lt;BR /&gt;&lt;BR /&gt;If possible you probably want to start using the map components.&amp;nbsp; 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.&lt;/P&gt;</description>
      <pubDate>Fri, 21 Mar 2025 21:18:00 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/plot-json-points-on-map-then-draw-a-circle-to/m-p/1598228#M86745</guid>
      <dc:creator>Sage_Wall</dc:creator>
      <dc:date>2025-03-21T21:18:00Z</dc:date>
    </item>
  </channel>
</rss>

