Hide Table of Contents
View Use multiple graphics layers sample in sandbox
Use multiple graphics layers

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.

Notice that if you click an area with overlapping graphics (a city, in this example) only the topmost graphic responds to the click event.

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.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");

      var map;

      function init() {
        map = new esri.Map("map", {
          basemap: "streets",
          center: [-98.215, 38.382],
          zoom: 7,
          slider: false
        });
        dojo.connect(map, "onLoad", doQueries);
      }

      function doQueries(map) {
        //Query all counties in Kansas
        var countyQueryTask = new esri.tasks.QueryTask("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_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://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
        var cityQuery = new esri.tasks.Query();
        cityQuery.outFields = ["*"];
        cityQuery.returnGeometry = true;
        cityQuery.outSpatialReference = map.spatialReference;
        cityQuery.where = "STATE_NAME = 'Kansas'";
        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("${CITY_NAME}","${*}"));
        
        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>