Starting ArcGIS JavaScript API: CSVLayers

[JamesMilner1]

Following on from my previous post examining GraphicsLayers and FeatureLayers, I now want to look at CSVLayers (We'll look at KMLLayers next time!).

CSVLayers

CSVLayers allow you to add CSV data to a map. When we create a new layer, the module will work out the geographic attributes in the csv table provided and use these to place the point data to the map (see below the code for allowed geographic field names). Lets imagine we have a csv file with Boris Bike stations (a cycle share scheme) in London, alongside how many available docks there currently are at the station. One of the fields is titled 'long' and another is 'lat'. We can simply create a new layer by creating a new CSVLayer object and passing the first argument as a string with the location of the CSV file (line 18 in code below). In this example for simplicity the file is stored on the same web host in a folder called 'csv'.

We must then pass a object with two key value pairs to express explicitly which field data we wish to pull through from the CSV file. First key value pair consists of the key 'name' and the value which is "INSERT_FIELD_NAME". The second key value pair is the key 'type' and then a string expressing the type of the field. Allowed types are "Date", "Number" and "String".

Lets take a look at a working example as it will make a lot more sense! Take a look at line 19 for a working example of how to setup the fields we wish to pull through with the appropriate type.

           require([  
            "esri/map",
            "esri/layers/CSVLayer",
            "esri/symbols/PictureMarkerSymbol",
            "esri/renderers/SimpleRenderer",
            "dojo/domReady!"  
            ],        
            function(Map, CSVLayer, PictureMarkerSymbol, SimpleRenderer) {


                var map = new Map("map", {  
                   basemap: "gray",  
                   center: [-0.122, 51.514], // longitude, latitude  
                   zoom: 13 
                 });

                // CSV Layer created using the fields we want to bring through to the client
                var layer = new CSVLayer("csv/borisbikes.csv", {
                  fields: [{name: "name", type: "String"}, {name: "empty_docks", type: "Number"}]
                });
                
                var logo = new PictureMarkerSymbol("imgs/logo.png", 16, 11); // Define a marker image 
                var simpleRenderer = new SimpleRenderer(logo); // Define a new renderer
                layer.setRenderer(simpleRenderer); //Set the simple point renderer to the feature layer
                
                map.addLayer(layer); // Add the layer to the map


            });

I've tested some longitude and latitude field titles and the following have worked for me:

•      long, lat
•      lon, lat
•      longitude, latitude
•      Longitude,  Latitude
•      LONGITUDE, LATITUDE
•      x, y
•      X, Y
•      Mixtures of these appear to work, although I would avoid it for sanity reasons!

It is important to note the key differences between the CSVLayer and  the FeatureLayer, which are expressed in the documentation.

• "edits are applied on the client not posted to the server."
• "The feature layer generates a unique object id for new features."
• "[CSVLayer] Does not support queries that need to be performed on the server, e.g. queries with a where clause or non-extent based spatial queries."
• "The feature layer toJson method returns an object with the same properties as the feature collection. The returned object includes all the features that are in the layer when the method is called. This method can be used to access a serializable representation of the features that can be saved on the server."

With regards to crossdomain issues, if you are using a CSV file that is not from the same domain as the hosting website, you require a server with CORS enabled or a proxy.