{"id":1282172,"date":"2021-07-09T07:30:20","date_gmt":"2021-07-09T14:30:20","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1282172"},"modified":"2024-04-12T11:23:47","modified_gmt":"2024-04-12T18:23:47","slug":"subtypegrouplayer-with-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript","title":{"rendered":"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript"},"author":246262,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191],"tags":[761052,27491,760752],"industry":[],"product":[761642,36831],"class_list":["post-1282172","blog","type-blog","status-publish","format-standard","hentry","category-developers","tag-4-20","tag-jsapi4","tag-whats-new-june-2021","product-platform","product-js-api-arcgis"],"acf":{"short_description":"Learn how to bring in a subtype group layer from ArcGIS Pro into your ArcGIS API for JavaScript web applications.","flexible_content":[{"acf_fc_layout":"content","content":"

In the June release of the ArcGIS API for JavaScript (JS API), version 4.20, we added support for subtype group layers<\/a> via a new layer called SubtypeGroupLayer<\/a>.<\/p>\n

The first question you may ask is \u201cWhat exactly is a SubtypeGroupLayer?\u201d. Subtyping allows us to subdivide a feature class into logical subsets. This concept has existed for decades, what is new is how we represent these subtypes on a map. Previously each subtype was assigned a single symbol, now with the SubtypeGroupLayer we can assign a single renderer to each subtype. SubtypeGroupLayers can be authored by ArcGIS Pro and are perhaps most familiar to users in the utility industry. Below I will dive deeper into the how, what, and why of SubtypeGroupLayers:<\/p>\n

    \n
  1. What is a SubtypeGroupLayer<\/a><\/li>\n
  2. How to create and publish a subtype group layer in ArcGIS Pro<\/a><\/li>\n
  3. How to consume using the JS API<\/a><\/li>\n
  4. More features of the SubtypeGroupLayer that we can take advantage of with the JS API<\/a><\/li>\n<\/ol>\n

    <\/a><\/p>\n

    What is a SubtypeGroupLayer<\/h2>\n

    Subtypes<\/h3>\n

    Before we get to the layer, we must first learn about subtypes. A subtype is a subset of features in a feature class that share the same attributes and behavior. This is useful for categorizing your data, and it has some performance benefits. This is key for utility network datasets because it is very common to have numerous subtypes within the feature classes that make up the utility network. To learn more about subtypes, check out Introduction to subtypes<\/em><\/a>.<\/p>\n

    Subtype group layer<\/h3>\n

    Now let\u2019s get into what the subtype group layer<\/a> is. A subtype group layer, is as the name suggests, a group layer comprised of a sublayer for each subtype. Each sublayer can be assigned a valid renderer such as a simple renderer, unique value renderer, or class breaks renderer, which means we can configure layer properties for each sublayer independently of one another. The sublayers of a SubtypeGroupLayer are conceptually no different from the sublayers in other layer types such as MapImageLayer<\/a> and WMSLayer<\/a>. The big difference is that the SubtypeGroupLayer’s sublayers<\/a> come from a single feature source. This is a crucial performance benefit because a single query to the feature source will return results for every single sublayer. Since all of the subtypes are published in single layer, we only have to send a request to a single feature source to fetch feature data when loading data, panning, or zooming in the map. This is much faster than sending requests to multiple feature sources.<\/p>\n

    Subtype group layer vs. multiple feature layers<\/h3>\n

    In the next section<\/a> I provide a feature class with 11 subtypes. If we attempt to mimic the SubtypeGroupLayer behavior with a FeatureLayer using this same dataset, it would require us to publish 11 different layers! Anytime we zoom or pan the map, there could be requests to 11 different feature sources each time. With larger datasets, the performance difference between these two workflows will become more apparent.<\/p>\n

    In this example the SubtypeGroupLayer loads 4x faster than individual feature layers, and reduces the total number of queries from 497 to 131. We are also able to draw all the features after zooming in twice with the SubtypeGroupLayer before the feature layers finish their initial load.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1286012,"id":1286012,"title":"stgl-performance","filename":"stgl-performance.gif","filesize":1377078,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/stgl-performance","alt":"SubtypeGroupLayer performance","author":"246262","description":"","caption":"Drawing performance between a dataset as individual FeatureLayers (left) vs a SubtypeGroupLayer (right)","name":"stgl-performance","status":"inherit","uploaded_to":1282172,"date":"2021-07-07 20:11:25","modified":"2021-07-07 20:15:26","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":880,"height":356,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance.gif","medium-width":464,"medium-height":188,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance.gif","medium_large-width":768,"medium_large-height":311,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance.gif","large-width":880,"large-height":356,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance.gif","1536x1536-width":880,"1536x1536-height":356,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance.gif","2048x2048-width":880,"2048x2048-height":356,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance-826x334.gif","card_image-width":826,"card_image-height":334,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/stgl-performance.gif","wide_image-width":880,"wide_image-height":356}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    <\/a><\/p>\n

    How to create and publish a subtype group layer in ArcGIS Pro<\/h2>\n

    To demonstrate how to create and publish a subtype group layer in ArcGIS Pro, I created a simple point feature class with some subtypes and uploaded the dataset here<\/a> if you would like to follow along. Feel free to skip this section if you already know how to publish a subtype group layer. You can use the following item<\/a> and move on to the next section<\/a> to start loading the data into the JS API. This dataset consists of point features representing marine animals around the United States. Note – this dataset was just created to showcase the subtype group layer and was not designed to contain accurate data<\/em>. Let\u2019s go ahead and get started!<\/p>\n

    Step 1<\/strong>:<\/p>\n

    Download the MarineLifeGDB<\/a> file geodatabase containing the point feature class. Unzip the folder, connect to it from ArcGIS Pro, and load the data onto your Map by dragging the feature class over to the Map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282322,"id":1282322,"title":"GDB connection","filename":"step0.png","filesize":4019,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/step0","alt":"Connect to file geodatabase from Pro","author":"246262","description":"","caption":"","name":"step0","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 20:57:35","modified":"2021-07-02 20:58:34","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":397,"height":183,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0-213x183.png","thumbnail-width":213,"thumbnail-height":183,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0.png","medium-width":397,"medium-height":183,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0.png","medium_large-width":397,"medium_large-height":183,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0.png","large-width":397,"large-height":183,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0.png","1536x1536-width":397,"1536x1536-height":183,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0.png","2048x2048-width":397,"2048x2048-height":183,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0.png","card_image-width":397,"card_image-height":183,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step0.png","wide_image-width":397,"wide_image-height":183}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Once the data is added to the Map, you should see the following in your Pro project. The subtype field we are using is the TYPE field. A subtype field defines the field in the feature class that stores the subtype codes. Additionally, a feature class can have only one subtype field. In this dataset, the TYPE field represents the type of marine animal that corresponds to each feature.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282332,"id":1282332,"title":"MarineLife feature class","filename":"step02.png","filesize":162489,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/step02","alt":"MarineLife feature class added to the Map","author":"246262","description":"","caption":"","name":"step02","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 20:57:50","modified":"2021-07-02 20:59:52","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1274,"height":571,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02.png","medium-width":464,"medium-height":208,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02.png","medium_large-width":768,"medium_large-height":344,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02.png","large-width":1274,"large-height":571,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02.png","1536x1536-width":1274,"1536x1536-height":571,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02.png","2048x2048-width":1274,"2048x2048-height":571,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02-826x370.png","card_image-width":826,"card_image-height":370,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step02.png","wide_image-width":1274,"wide_image-height":571}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Step 2<\/strong>:<\/p>\n

    Create the subtype group layer by going to the Map tab in the Layer group and click Add Preset.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282352,"id":1282352,"title":"Add Preset","filename":"step1.png","filesize":7214,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/step1-5","alt":"Add Preset","author":"246262","description":"","caption":"","name":"step1-5","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 21:03:02","modified":"2021-07-02 21:03:19","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":290,"height":109,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1-213x109.png","thumbnail-width":213,"thumbnail-height":109,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1.png","medium-width":290,"medium-height":109,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1.png","medium_large-width":290,"medium_large-height":109,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1.png","large-width":290,"large-height":109,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1.png","1536x1536-width":290,"1536x1536-height":109,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1.png","2048x2048-width":290,"2048x2048-height":109,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1.png","card_image-width":290,"card_image-height":109,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step1.png","wide_image-width":290,"wide_image-height":109}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Step 3<\/strong>:<\/p>\n

    Next, click Subtype Group Layer and navigate to the MarineLife feature class.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282362,"id":1282362,"title":"Add Subtype Group Layer","filename":"step05.png","filesize":16815,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/step05","alt":"Add Subtype Group Layer","author":"246262","description":"","caption":"","name":"step05","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 21:04:34","modified":"2021-07-02 21:04:59","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":487,"height":176,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05-213x176.png","thumbnail-width":213,"thumbnail-height":176,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05.png","medium-width":464,"medium-height":168,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05.png","medium_large-width":487,"medium_large-height":176,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05.png","large-width":487,"large-height":176,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05.png","1536x1536-width":487,"1536x1536-height":176,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05.png","2048x2048-width":487,"2048x2048-height":176,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05.png","card_image-width":487,"card_image-height":176,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step05.png","wide_image-width":487,"wide_image-height":176}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Add subtype group layer ArcGIS Pro 3.0 update<\/h2>\n

    As of version 3.0 of ArcGIS Pro, the workflow to add a subtype group layer to the map has changed. The behavior remains consistent, however, there was a slight change in Step 2 and 3 above.<\/p>\n

    Step 2<\/strong>:<\/p>\n

    Create the subtype group layer by going to the Map tab and in the Layer group click the Add Data dropdown.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2306202,"id":2306202,"title":"add-data","filename":"add-data.png","filesize":9775,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/add-data-10","alt":"","author":"246262","description":"","caption":"","name":"add-data-10","status":"inherit","uploaded_to":1282172,"date":"2024-04-12 18:10:07","modified":"2024-04-12 18:14:31","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":240,"height":99,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-213x99.png","thumbnail-width":213,"thumbnail-height":99,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data.png","medium-width":240,"medium-height":99,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data.png","medium_large-width":240,"medium_large-height":99,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data.png","large-width":240,"large-height":99,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data.png","1536x1536-width":240,"1536x1536-height":99,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data.png","2048x2048-width":240,"2048x2048-height":99,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data.png","card_image-width":240,"card_image-height":99,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data.png","wide_image-width":240,"wide_image-height":99}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Step 3<\/strong>:<\/p>\n

    Next, click the Subtype Group Layer option in the Add Data dropdown and navigate to the MarineLife feature class.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2306212,"id":2306212,"title":"add-data-subtype-group-layer","filename":"add-data-subtype-group-layer.png","filesize":6067,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/add-data-subtype-group-layer","alt":"","author":"246262","description":"","caption":"","name":"add-data-subtype-group-layer","status":"inherit","uploaded_to":1282172,"date":"2024-04-12 18:13:05","modified":"2024-04-12 18:14:31","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":229,"height":83,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer-213x83.png","thumbnail-width":213,"thumbnail-height":83,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer.png","medium-width":229,"medium-height":83,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer.png","medium_large-width":229,"medium_large-height":83,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer.png","large-width":229,"large-height":83,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer.png","1536x1536-width":229,"1536x1536-height":83,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer.png","2048x2048-width":229,"2048x2048-height":83,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer.png","card_image-width":229,"card_image-height":83,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/add-data-subtype-group-layer.png","wide_image-width":229,"wide_image-height":83}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Now you can see the subtype group layer has been added to your Contents pane. The original MarineLife feature class will still be there, remove it so we only have the subtype group layer in the Contents pane and in the Map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282372,"id":1282372,"title":"Contents","filename":"step03.png","filesize":7415,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/step03","alt":"Subtype group layer in Contents","author":"246262","description":"","caption":"","name":"step03","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 21:05:32","modified":"2021-07-02 21:06:00","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":388,"height":683,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03.png","medium-width":148,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03.png","medium_large-width":388,"medium_large-height":683,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03.png","large-width":388,"large-height":683,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03.png","1536x1536-width":388,"1536x1536-height":683,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03.png","2048x2048-width":388,"2048x2048-height":683,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03-264x465.png","card_image-width":264,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step03.png","wide_image-width":388,"wide_image-height":683}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    As you can see, you now have the ability to hide all the features corresponding to a particular subtype, like you would normally with an individual layer! You can configure additional layer properties on these sublayers; like their own renderers as well. For instance, you can set a unique value renderer on the Turtle sublayer by using the TURTLE_SPECIES field. A unique symbol can represent the unique turtle species names from that field to make the features more distinguishable. We won\u2019t get into much detail here because I will showcase how exactly we can do this using the API. So let\u2019s move on to the final step in publishing the data.<\/p>\n

    Step 4<\/strong>:<\/p>\n

    To publish the layer to ArcGIS Online, or Portal for ArcGIS, right click the layer in the Contents pane, hover over Sharing, then select Share as Web Layer.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282382,"id":1282382,"title":"Share as Web Layer","filename":"step06.png","filesize":10059,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/step06","alt":"Share as Web Layer","author":"246262","description":"","caption":"","name":"step06","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 21:08:42","modified":"2021-07-02 21:09:00","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":569,"height":298,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06.png","medium-width":464,"medium-height":243,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06.png","medium_large-width":569,"medium_large-height":298,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06.png","large-width":569,"large-height":298,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06.png","1536x1536-width":569,"1536x1536-height":298,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06.png","2048x2048-width":569,"2048x2048-height":298,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06.png","card_image-width":569,"card_image-height":298,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step06.png","wide_image-width":569,"wide_image-height":298}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    The Share As Web Layer form will display. Set the following values, and make sure Feature is selected as the Layer Type. Then click Analyze. If there are no errors, then click Publish.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282392,"id":1282392,"title":"Publish Web Layer","filename":"step07.png","filesize":16982,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/step07","alt":"Publish Web Layer","author":"246262","description":"","caption":"","name":"step07","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 21:11:02","modified":"2021-07-02 21:11:19","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":520,"height":526,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07.png","medium-width":258,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07.png","medium_large-width":520,"medium_large-height":526,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07.png","large-width":520,"large-height":526,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07.png","1536x1536-width":520,"1536x1536-height":526,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07.png","2048x2048-width":520,"2048x2048-height":526,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07-460x465.png","card_image-width":460,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/step07.png","wide_image-width":520,"wide_image-height":526}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    And that is it, you have now created and published a subtype group layer! Let us now learn how we can consume this service as a SubtypeGroupLayer using JS API.
    \n    <\/a><\/p>\n

    How to consume using the JS API<\/h2>\n

    Initializing the SubtypeGroupLayer in the API is similar to the way we bring in a FeatureLayer. We just need to pass in the service url or the portalItem id pointing to the feature service.<\/p>\n

    const<\/span> stgl = new<\/span> SubtypeGroupLayer({\r\n  url: \"https:\/\/services.arcgis.com\/V6ZHFr6zdgNZuVG0\/ArcGIS\/rest\/services\/MarineLife\/FeatureServer\/0\"<\/span>,\r\n});\r\n<\/code><\/pre>\n
    OR<\/p>\n
    const<\/span> stgl = new<\/span> SubtypeGroupLayer({\r\n  portalItem: {  \/\/ autocasts as new PortalItem()<\/span>\r\n    id: \"105ce08103ed481197654d16c0fb0c9d\"<\/span>\r\n  }\r\n});\r\n<\/code><\/pre>\n
    Here is an example of how we can load the SubtypeGroupLayer onto a Map using a service url. With the addition of the LayerList widget, it really feels like we are working with separate layers. However, we must remember that we are just loading an individual feature service!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282412,"id":1282412,"title":"load subtypegrouplayer app","filename":"load-stgl.png","filesize":721454,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/load-stgl","alt":"Load SubtypeGroupLayer app","author":"246262","description":"","caption":"Load a SubtypeGroupLayer onto a Map.","name":"load-stgl","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 21:33:50","modified":"2021-07-02 21:35:53","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1915,"height":900,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl.png","medium-width":464,"medium-height":218,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl.png","medium_large-width":768,"medium_large-height":361,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl.png","large-width":1915,"large-height":900,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl-1536x722.png","1536x1536-width":1536,"1536x1536-height":722,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl.png","2048x2048-width":1915,"2048x2048-height":900,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl-826x388.png","card_image-width":826,"card_image-height":388,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/load-stgl.png","wide_image-width":1915,"wide_image-height":900}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/banuelosj.github.io\/subtypegrouplayer\/load-stgl\/"},{"acf_fc_layout":"content","content":"
    Visualizing the sublayers<\/h2>\n
    As mentioned, it is possible to configure layer properties for each sublayer. This means we can set a renderer on each individual sublayer. We can even set a min\/max scale on each sublayer, so we have more control over when the features are rendered as a user zooms in and out of the map. We can configure these layer properties from the sublayers property of the SubtypeGroupLayer class, very similar to how sublayers can be configured already with the MapImageLayer<\/a>.<\/p>\n
    const<\/span> stgl = new<\/span> SubtypeGroupLayer({\r\n  url: \"https:\/\/services.arcgis.com\/V6ZHFr6zdgNZuVG0\/ArcGIS\/rest\/services\/MarineLife\/FeatureServer\/0\"<\/span>,\r\n  outFields: ['*'<\/span>],\r\n  sublayers: [{\r\n    subtypeCode: 1<\/span>, \/\/ Fish<\/span>\r\n    visible: true<\/span>,\r\n    renderer: createMarineSymbol(\"Fish\"<\/span>),\r\n    title: \"Fish\"<\/span>\r\n  }, {\r\n    subtypeCode: 3<\/span>, \/\/ Whale<\/span>\r\n    visible: true<\/span>,\r\n    renderer: createMarineSymbol(\"Whale\"<\/span>),\r\n    title: \"Whale\"<\/span>,\r\n    minScale: 10000000<\/span>,\r\n  }, {\r\n    subtypeCode: 9<\/span>, \/\/ Turtle<\/span>\r\n    visible: true<\/span>,\r\n    renderer: turtleUniqueValueRenderer,\r\n    title: \"Turtle\"<\/span>\r\n  }]\r\n});\r\n<\/code><\/pre>\n
    Here is an example demonstrating how we can configure a renderer for each sublayer of the SubtypeGroupLayer.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282422,"id":1282422,"title":"Visualize SubtypeGroupLayer","filename":"visualize-stgl.png","filesize":113637,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/visualize-stgl","alt":"Visualize the SubtypeGroupLayer","author":"246262","description":"","caption":"Visualize the SubtypeGroupLayer with renderers, min\/max scale, and visibility properties.","name":"visualize-stgl","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 21:43:57","modified":"2021-07-02 21:45:11","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1915,"height":937,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl.png","medium-width":464,"medium-height":227,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl.png","medium_large-width":768,"medium_large-height":376,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl.png","large-width":1915,"large-height":937,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl-1536x752.png","1536x1536-width":1536,"1536x1536-height":752,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl.png","2048x2048-width":1915,"2048x2048-height":937,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl-826x404.png","card_image-width":826,"card_image-height":404,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/visualize-stgl.png","wide_image-width":1915,"wide_image-height":937}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/banuelosj.github.io\/subtypegrouplayer\/visualize-stgl\/"},{"acf_fc_layout":"content","content":"
    const<\/span> webStyleSymbolUrl = \"https:\/\/arcgis.com\/sharing\/rest\/content\/items\/beb787401c41401ba1eef6ce161d6664\/data\"<\/span>;\r\n\r\n\/\/ create web style symbol from the symbol name<\/span>\r\nfunction<\/span> createMarineSymbol<\/span>(name) {\r\n  return<\/span> {\r\n    type: \"simple\"<\/span>,\r\n    symbol: {\r\n      type: \"web-style\"<\/span>,  \/\/ autocasts as new WebStyleSymbol()<\/span>\r\n      styleUrl: webStyleSymbolUrl,\r\n      name: name\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\n
    More features of the SubtypeGroupLayer that we can take advantage of with the JS API<\/h2>\n
    In the previous two examples, we took advantage of the renderer, min\/max scales, and visibility properties for each sublayer. Now lets take advantage of the popupTemplate<\/a> property to configure unique popups per sublayer. All of these features share the same exact attributes, however, we only want to display popups with content that are relevant to each feature. For instance, when we click on a \u201cWhale\u201d type feature, we do not care about the turtle species value from the TURTLE_SPECIES field. It is anyways empty, since this feature is not of type \u201cTurtle\u201d. Therefore, we can create a popup for “Whale” features that does not display this field. The SubtypeGroupLayer allows us to configure these popups rather easily.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1282452,"id":1282452,"title":"Sublayer Popups","filename":"popup-stgl.png","filesize":81703,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/popup-stgl","alt":"Sublayer Popups","author":"246262","description":"","caption":"Configuring unique popups per sublayer.","name":"popup-stgl","status":"inherit","uploaded_to":1282172,"date":"2021-07-02 21:55:05","modified":"2021-07-02 21:55:42","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1913,"height":935,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl.png","medium-width":464,"medium-height":227,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl.png","medium_large-width":768,"medium_large-height":375,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl.png","large-width":1913,"large-height":935,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl-1536x751.png","1536x1536-width":1536,"1536x1536-height":751,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl.png","2048x2048-width":1913,"2048x2048-height":935,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl-826x404.png","card_image-width":826,"card_image-height":404,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/popup-stgl.png","wide_image-width":1913,"wide_image-height":935}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/banuelosj.github.io\/subtypegrouplayer\/popup-template\/"},{"acf_fc_layout":"content","content":"
    We didn\u2019t even talk about how we can configure each sublayer\u2019s labels as well! Fortunately, we have the Intro to SubtypeGroupLayer<\/em><\/a>\u00a0sample in our documentation, which demonstrates how we can achieve this. This sample uses a Utility Network dataset, so we get to see an example of how the features of the SubtypeGroupLayer work well with utility network data.<\/p>\n
    Speaking of the utility network, we plan on providing full support for SubtypeGroupLayers with the utility network with the JS API for our next release. To learn more about the utility network<\/a> features added in this release to the JS API, check out Hussein Nasser’s amazing blog Utility Network is now on ArcGIS JavaScript API 4.20<\/em><\/a>.<\/p>\n
    Enterprise Deployment Workflow (Update 8-24-2021)<\/h2>\n
    It was brought to my attention that the workflow provided with publishing a SubtypeGroupLayer was not working for some users with an Enterprise deployment. After further investigation, we discovered that it is currently not possible to publish a SubtypeGroupLayer as a hosted feature service in Enterprise. Therefore, users who attempt to publish the SubtypeGroupLayer in Pro from the file geodatabase provided will run into the following error message:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1334652,"id":1334652,"title":"pro-error-message","filename":"pro-error-message.png","filesize":9435,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/pro-error-message","alt":"pro-error-message","author":"246262","description":"Error message obtained from ArcGIS Pro when attempting to publish to Enterprise from a file geodatabase.","caption":"","name":"pro-error-message","status":"inherit","uploaded_to":1282172,"date":"2021-08-24 21:18:30","modified":"2021-08-24 21:20:40","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":681,"height":526,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message.png","medium-width":338,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message.png","medium_large-width":681,"medium_large-height":526,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message.png","large-width":681,"large-height":526,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message.png","1536x1536-width":681,"1536x1536-height":526,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message.png","2048x2048-width":681,"2048x2048-height":526,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message-602x465.png","card_image-width":602,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/pro-error-message.png","wide_image-width":681,"wide_image-height":526}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
    It is possible to publish a SubtypeGroupLayer to Enterprise, however, it must be published as a non-hosted feature service. This means the data needs to come from a registered enterprise geodatabase. For users who are publishing to Enterprise, the MarineLife feature class from the file geodatabase provided must first be copied over into a registered enterprise geodatabase.<\/p>\n
    Please make sure the registered database you copy the data over to is an enterprise geodatabase. You can tell by going to the Databases in the Catalog and right-clicking the registered database. If you don’t see the “Enable Enterprise Geodatabase” option as highlighted below, then that means it has already been enabled as an enterprise geodatabase, so you don’t have to do anything. Otherwise, if you do see the option, then click on it to enable your database as an enterprise geodatabase.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1334672,"id":1334672,"title":"enable-geodatabase","filename":"enable-geodatabase.png","filesize":11175,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\/enable-geodatabase","alt":"enable-geodatabase","author":"246262","description":"","caption":"","name":"enable-geodatabase","status":"inherit","uploaded_to":1282172,"date":"2021-08-24 21:45:10","modified":"2021-08-24 21:45:24","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":296,"height":356,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase.png","medium-width":217,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase.png","medium_large-width":296,"medium_large-height":356,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase.png","large-width":296,"large-height":356,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase.png","1536x1536-width":296,"1536x1536-height":356,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase.png","2048x2048-width":296,"2048x2048-height":356,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase.png","card_image-width":296,"card_image-height":356,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/enable-geodatabase.png","wide_image-width":296,"wide_image-height":356}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
    This will be part of Step 1 in the workflow outlined above<\/a>. The rest of the steps to create and publish the SubtypeGroupLayer should be followed in the same order.<\/p>\n"},{"acf_fc_layout":"content","content":"
    Conclusion<\/h2>\n
    Hopefully this post helps you better understand what exactly a SubtypeGroupLayer is, what key features it brings, and how you can use it in your own applications.<\/p>\n
    If you would like to play around with the sample apps provided and take a look at the code yourself, you can find them on Github:<\/p>\n
      \n
    1. Load a SubtypeGroupLayer \u2013 Live app<\/a> – code<\/a><\/li>\n
    2. Visualize the data \u2013 Live app<\/a> – code<\/a><\/li>\n
    3. Add unique popups per sublayer \u2013 Live app<\/a> \u2013 code<\/a><\/li>\n
    4. Intro to SubtypeGroupLayer \u2013 Live app<\/a> \u2013 sandbox<\/a><\/li>\n<\/ol>\n"}],"authors":[{"ID":246262,"user_firstname":"Jose","user_lastname":"Banuelos","nickname":"JBanuelos","user_nicename":"jbanuelos","display_name":"Jose Banuelos","user_email":"JBanuelos@esri.com","user_url":"","user_registered":"2021-07-02 18:51:02","user_description":"Jose is a Product Engineer on the ArcGIS API for JavaScript team in Redlands, CA.","user_avatar":""}],"related_articles":[{"ID":1268362,"post_author":"4271","post_date":"2021-06-30 14:19:03","post_date_gmt":"2021-06-30 21:19:03","post_content":"","post_title":"What's New in ArcGIS API for JavaScript (version 4.20)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-version-4-20","to_ping":"","pinged":"","post_modified":"2024-04-12 03:57:47","post_modified_gmt":"2024-04-12 10:57:47","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1268362","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":1274812,"post_author":"5721","post_date":"2021-06-29 23:54:33","post_date_gmt":"2021-06-30 06:54:33","post_content":"","post_title":"What's new in Map Viewer (June 2021)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-map-viewer-june-2021","to_ping":"","pinged":"","post_modified":"2022-01-26 10:34:17","post_modified_gmt":"2022-01-26 18:34:17","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1274812","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1272212,"post_author":"7511","post_date":"2021-07-01 01:01:53","post_date_gmt":"2021-07-01 08:01:53","post_content":"","post_title":"Utility Network is now on ArcGIS JavaScript API 4.20","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"utility-network-is-now-on-arcgis-javascript-api-4-20","to_ping":"","pinged":"","post_modified":"2021-07-02 11:14:20","post_modified_gmt":"2021-07-02 18:14:20","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1272212","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/hero2.png"},"yoast_head":"\nHow to use the SubtypeGroupLayer with the ArcGIS API for JavaScript<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T18:23:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Jose Banuelos\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6ea59888bec0790ef28f9fc49f25e3be\"},\"headline\":\"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript\",\"datePublished\":\"2021-07-09T14:30:20+00:00\",\"dateModified\":\"2024-04-12T18:23:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"4.20\",\"jsapi4\",\"whats new june 2021\"],\"articleSection\":[\"Developers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\",\"name\":\"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-07-09T14:30:20+00:00\",\"dateModified\":\"2024-04-12T18:23:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6ea59888bec0790ef28f9fc49f25e3be\",\"name\":\"Jose Banuelos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/jose-banuelos-466x465.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/jose-banuelos-466x465.jpg\",\"caption\":\"Jose Banuelos\"},\"description\":\"Jose is a Product Engineer on the ArcGIS API for JavaScript team in Redlands, CA.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/jbanuelos\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T18:23:47+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript"},"author":{"name":"Jose Banuelos","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6ea59888bec0790ef28f9fc49f25e3be"},"headline":"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript","datePublished":"2021-07-09T14:30:20+00:00","dateModified":"2024-04-12T18:23:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript"},"wordCount":11,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["4.20","jsapi4","whats new june 2021"],"articleSection":["Developers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript","name":"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-07-09T14:30:20+00:00","dateModified":"2024-04-12T18:23:47+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/subtypegrouplayer-with-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"How to use the SubtypeGroupLayer with the ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6ea59888bec0790ef28f9fc49f25e3be","name":"Jose Banuelos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/jose-banuelos-466x465.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/jose-banuelos-466x465.jpg","caption":"Jose Banuelos"},"description":"Jose is a Product Engineer on the ArcGIS API for JavaScript team in Redlands, CA.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/jbanuelos"}]}},"text_date":"July 9, 2021","author_name":"Jose Banuelos","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/jbanuelos","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/hero2.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":761052,"name":"4.20","slug":"4-20","term_group":0,"term_taxonomy_id":761052,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":760752,"name":"whats new june 2021","slug":"whats-new-june-2021","term_group":0,"term_taxonomy_id":760752,"taxonomy":"post_tag","description":"","parent":0,"count":18,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":441,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":216,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":365,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1282172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/246262"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1282172"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1282172\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1282172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1282172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1282172"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1282172"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1282172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    Feel free to download the symbols from here<\/a> if you would like to bring them into ArcGIS Pro, ArcGIS Online, or Portal as well. If you are new to using web style symbols and would like to know how to publish your own, then click here<\/a> to read an informative blog post by Russell Roberts.
    \n    <\/a><\/p>\n
    The symbology in the data I provided is very simple. This sample takes advantage of some web style symbols I published to ArcGIS Online. These symbols will make it easier for us to identify which marine animal corresponds to each feature. This sample utilizes the WebStyleSymbol<\/a> and sets them as the symbols for the renderer for some of the sublayers.<\/p>\n