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:
It is important to note the key differences between the CSVLayer and the FeatureLayer, which are expressed in the documentation.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.