Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Use multiple graphics layers
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to add multiple graphics layers to the map. One of the graphics layers shows counties, the other shows cities. The ability to have multiple graphics layers in a map was added in version 1.4 of the ArcGIS JavaScript API.
Separating the gray county polygons from the blue city points makes the graphics easier to manage. For example, if you want to remove the cities only, you just have to remove the graphics layer that has the city points. If the cities and counties were in the same graphics layer, you would have to write some extra code to detect city graphics and remove only those.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Multiple Graphics Layers</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map;
function init() {
map = new esri.Map("map", {
basemap: "topo-vector",
center: [-98.215, 38.382],
zoom: 6,
slider: false
});
dojo.connect(map, "onLoad", doQueries);
}
function doQueries(map) {
//Query all counties in Kansas
var countyQueryTask = new esri.tasks.QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3");
var countyQuery = new esri.tasks.Query();
countyQuery.outFields = ["*"];
countyQuery.returnGeometry = true;
countyQuery.outSpatialReference = map.spatialReference;
countyQuery.where = "state_name = 'Kansas'";
countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);
//Query all cities in Kansas
var cityQueryTask = new esri.tasks.QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0/");
var cityQuery = new esri.tasks.Query();
cityQuery.outFields = ["*"];
cityQuery.returnGeometry = true;
cityQuery.outSpatialReference = map.spatialReference;
cityQuery.where = "st = 'KS'";
cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
}
function addCountyFeatureSetToMap(featureSet) {
var symbol = new esri.symbol.SimpleFillSymbol();
symbol.setColor(new dojo.Color([150,150,150,0.5]));
//Create graphics layer for counties
var countyLayer = new esri.layers.GraphicsLayer();
countyLayer.setInfoTemplate(new esri.InfoTemplate("${name}","${*}"));
map.addLayer(countyLayer);
//Add counties to the graphics layer
dojo.forEach(featureSet.features, function(feature) {
countyLayer.add(feature.setSymbol(symbol));
});
}
function addCityFeatureSetToMap(featureSet) {
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setColor(new dojo.Color([0,0,255]));
//Create graphics layer for cities
var cityLayer = new esri.layers.GraphicsLayer();
cityLayer.setInfoTemplate(new esri.InfoTemplate("${areaname}","${*}"));
map.addLayer(cityLayer);
map.reorderLayer(cityLayer,1);
//Add cities to the graphics layer
dojo.forEach(featureSet.features, function(feature) {
cityLayer.add(feature.setSymbol(symbol));
});
}
dojo.ready(init);
</script>
</head>
<body>
<div id="map" class="claro" style="width:800px; height:400px; border:1px solid #000;"></div>
</body>
</html>