Hug your GroupLayer

[ReneRubalcava]

In the ArcGIS API 4 for JavaScript, a new layer type was introduced to help you do manage grouping your layers into like-minded categories. The GroupLayer provides some really interesting functionality for you to do pretty much exactly what it says, group your layers.

Let's assume you have a Dynamic Map Service, like say this NOAA Storm Reports service. This is a handy little service that gives a quick overview of storm reports. However, it is a dynamic map service, which would normally be displayed in a MapImageLayer, however this layer type (formerly known as ArcGISDynamicMapServiceLayer) doesn't support popups in the initial 4.0 release.

It's conceivable that the data behind these points might prove useful, so you may want to display popups for them in your application.

There's an easy way around that, you could just use each individual layer in the service as a FeatureLayer and you can define popups and the world is right again. But maybe you have some logic in your application that requires you to treat this data as a single layer, such as turn them all off at the click of a button.

Now you'll want to hug your GroupLayer.

Let's look at what the code for that might look like.

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/layers/GroupLayer"
], function (Map, MapView, FeatureLayer, GroupLayer) {
  var url = "http://tmservices1.esri.com/arcgis/rest/services/LiveFeeds/NOAA_storm_reports/MapServer/";

  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-98.648, 36.374],
    zoom: 5,
    ui: {
      components: ["zoom", "attribution", "compass"]
    }
  });

  var titles = [
    "NOAA HAIL Storm Reports (24 hours)",
    "NOAA TORNADO Storm Reports (24 hours)",
    "NOAA WIND Storm Reports (24 hours)",
    "NOAA TORNADO Storm Reports (past week)"
  ];

  var layers = ["0", "1", "2", "3"].map(function(index, idx) {
    return new FeatureLayer({
      url: url + index,
      outFields: ["*"],
      popupTemplate: {
        title: titles[idx],
        content: "{*}"
      }
    });
  });

  var groupLayer = new GroupLayer({
    layers: layers,
    visibilityMode: "inherited",
    visible: true
  });
  map.add(groupLayer);

  view.then(function() {
    var btn = document.createElement("div");
    btn.className = "esri-button esri-widget-button esri-interactive esri-icon-feature-layer";
    btn.title = "Toggle Storm Data";
    view.ui.add(btn, "top-right");
    btn.addEventListener("click", function() {
      groupLayer.visible = !groupLayer.visible;
    });
  });
});

What we've done here is added the Storm Report data as individual FeatureLayers, but we've wrapped them in a GroupLayer. Then we added a simple button to the UI that does one thing. It toggles the the visibility of the grouped storm data on and off. Notice that I set the visibilityMode of the GroupLayer to "inherited". This means that all the sublayers will inherit their visibility from the parent GroupLayer. You could change this if you wanted to some conditional visibility of layers in the GroupLayer and get fancy, but for this use case, everything just works.

You can see a live demo of this application here.

You aren't limited to wrapping FeatureLayers with the GroupLayer, you could group any layer types, which could prove very convenient when controlling the visibility of multiple map services in your application.

So take the GroupLayer for a spin in your next ArcGIS API 4 for JavaScript application!

For more geodev tips and tricks, check out my blog.

Title photo via Mel Aclaro at group hug | Flickr - Photo Sharing!