Intro to CSVLayer

The CSVLayer allows you to add features from a comma-separated values text file (.csv) or delimited text file (.txt) that include latitude and longitude information. The file is referenced as a hosted file on the web. Because of this, the file must be publicly accessible. The file needs to include at least one pair of coordinate fields as these fields are used to locate the features on the map.

This sample shows how to add an instance of CSVLayer to a Map in a SceneView. The resulting point features can be queried via the API and then subsequently used as input for other operations.

If CSV files are not on the same domain as your website, a CORS-enabled server or a proxy is required.

How it works

This sample uses data from USGS.

Create a new CSVLayer and set the properties within its constructor. In this specific example, the url to the USGS earthquakes csv file is added in addition to the copyright and popupTemplate properties.

1
2
3
4
5
const csvLayer = new CSVLayer({
  url: url,
  copyright: "USGS Earthquakes",
  popupTemplate: template
});

A SimpleRenderer is then set on the layer and the layer added to the map.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Set a simple renderer on the layer
csvLayer.renderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: {
    type: "point-3d", // autocasts as new PointSymbol3D()
    // for this symbol we use 2 symbol layers, one for the outer circle
    // and one for the inner circle
    symbolLayers: [{
      type: "icon", // autocasts as new IconSymbol3DLayer()
      resource: { primitive: "circle"},
      material: { color: [255, 84, 54, 1] },
      size: 5
    }, {
      type: "icon", // autocasts as new IconSymbol3DLayer()
      resource: { primitive: "circle"},
      material: { color: [255, 84, 54, 0] },
      outline: {color: [255, 84, 54, 0.6], size: 1},
      size: 25
    }]
  }
}
// Add the layer to the map
map.add(csvLayer);

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close