Starting ArcGIS JavaScript API: GraphicsLayers and FeatureLayers

[JamesMilner1]

Introducing Layers - Part 1

Layers are data sets (generally of the same theme) that can be added to your map; for example you might have a data layer expressing local police stations, or cafes. Your web map might have multiple layers and in ArcGIS JavaScript API you can mix am match you layers. Think of the map as your canvas and your layers as your paint. There are several different types of layers available to you, but in this blog post I will cover two of the most used and fundamental layer types; the Graphics Layer and the Feature Layer.

Graphics Layers

Graphics Layers allow you to add arbitrary markers (graphics) to your map. A graphic layer might contain markers with the location of benches, bins, or trees in your local area for example. When you initiate a map using the ArcGIS JavaScript API, it comes with a graphics layer initially (map.graphics) however you can add more layers where necessary.

GraphicsLayers can add graphics, which are constructed using a geometry, a symbol, attributes, and/or an infoTemplate (an infoTemplate is a template for the popup that appears when you click on a graphic on the map).

Attributes are just a JavaScript object, with named value pairs i.e. { key1: value1, key2: value2 }. You can assign attributes by using the graphic.attributes property, and assigning a JavaScript object.

Geometries can be constructed coordinates from arbitrary data sources, such as databases or iterated data API returns, just make sure that you know which coordinate system is being used with such data.

You can also create a graphic using a json object. Visibility can be turned on an off using the visibility property (Boolean).

We can use Multipoint  Point  Polygon  Polyline geometries with specific types of symbols:

• Points:  SimpleMarkerSymbol, PictureMarkerSymbol, TextSymbol (Font)

• Lines:  SimpleLineSymbol, CartographicLineSymbol
• Polygons:  SimpleFillSymbol, PictureFillSymbol

Text symbols require point geometries to add to the map, although a good example to get a point geometry from an arbitrary polygon can be seen here.

Here is an example of setting the a graphics layer with a SimpleMarkerSymbol, a custom geometry point and infoTemplate:

var map;

require([
     "esri/map",  
     "esri/graphic", 
     "esri/geometry/Point",
     "esri/symbols/SimpleMarkerSymbol", 
     "esri/InfoTemplate", 
     "dojo/domReady!"
     ], 
     function(Map, Graphic, Point, SimpleMarkerSymbol, InfoTemplate) {
       
         map = new Map("map", {
          basemap: "streets",
          center: [-1.268388,51.753249], // longitude, latitude
          zoom: 17
         });

         var locationLayer = new esri.layers.GraphicsLayer();
         var point = new Point(-1.268388,51.753249);
         var symbol = new SimpleMarkerSymbol().setColor("#1036DE").setSize(20);
         var graphic = new Graphic(point, symbol);
         locationLayer.add(graphic);
                           
         var infoTemplate = new InfoTemplate();
         infoTemplate.setTitle("<b>Saïd Business School</b>");
         infoTemplate.setContent("Park End St, Oxford, OX1 1HP <br> <b>Coordinates:</b> 51.753249,  -1.268388");
         graphic.setInfoTemplate(infoTemplate);
         map.addLayer(locationLayer)  // Makes sure that map is loaded
                                                        
});

Feature Layer

The FeatureLayer is similar to the GraphicsLayer (it inherits it) however it allows the user to make use of a Feature Service to provide its geometry data, attributes and symbology. You can create feature services from your developer account, (Hosted Data -> Create Feature Service) and also from CSV files‌ or uploading a Shapefile, or GeoJSON. You can GUI edit Feature Services through the ArcGIS Online interface. When the feature layer is added to the map, symbols and attribute data are pulled through for the current view extent.

The feature service has four modes that can be used in its constructor:

• MODE_AUTO: “If the total number of features in a layer are less than maxRecordCount and total vertexes is less than 250,000, snapshot mode is used. Otherwise, on-demand mode is used.”
• MODE_ONDEMAND: “In on-demand mode, the feature layer retrieves features from the server when needed.”
• MODE_SELECTION: “In selection mode, features are retrieved from the server only when they are selected.”
• MODE_SNAPSHOT: “In snapshot mode, the feature layer retrieves all the features from the associated layer resource and displays them as graphics on the client.”

Default mode is MODE_ONDEMAND. We can also use attributes from the feature service in the infoTemplate (the popup on click) using string substitution:

Here is an example of using a hosted Feature Service on a map using MODE_ONDEMAND:

var map;  
require([  
"esri/map",   
"esri/graphic",   
"esri/geometry/Point",   
"esri/symbols/SimpleMarkerSymbol",   
"esri/InfoTemplate", 
"esri/layers/FeatureLayer",
"dojo/domReady!"  
],        
function(Map, Graphic, Point, SimpleMarkerSymbol, InfoTemplate, FeatureLayer) {  
     map = new Map("map", {  
       basemap: "streets",  
       center: [-98.2926121, 38.49233], // longitude, latitude  
       zoom: 8  
     });  
    
     var infoTemplate = new InfoTemplate("${FIELD_NAME}", "Oil and Gas Field");  
     var featureLayer = new FeatureLayer(  
     "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...",{  
          mode: FeatureLayer.MODE_ONDEMAND,  
          infoTemplate: infoTemplate,  
          outFields: ["*"]   
     }); 
  
     map.addLayer(featureLayer);  
  
 });
});

To get arbitrary data from the feature layer you must do a query. The query method is fairly extensive, but one of its most important features is the ability to use query.where which allows for SQL like querying.

//initialize & execute query
var queryTask = new esri.tasks.QueryTask(
"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..."
);

var query = new esri.tasks.Query();
query.where = "STATE_NAME = 'Washington'";
query.outSpatialReference = {wkid:102100};
query.returnGeometry = true;
query.outFields = ["CITY_NAME"];
queryTask.execute(query, addPointsToMap);

//add points to map and set their symbology + info template
function addPointsToMap(featureSet) { 
    dojo.forEach(featureSet.features,function(feature){     
         map.graphics.add(feature.setSymbol(defaultSymbol).setInfoTemplate(resultTemplate));
    });
}

Next in the series I aim to examine CSVLayers, KMLLayers and potentially MapImageLayers.

[GaneshmoorthiM]

Thanks for the post. Waiting for the next one

[SubuSwaminathan1]

The FeatureLayer will work with a MapService too.

Refer to:

https://community.esri.com/message/494488?et=watches.email.thread#494488

[JamesFitzgerald]

Thanks! Your post is helpful!