{"id":483252,"date":"2023-03-28T08:33:08","date_gmt":"2023-03-28T15:33:08","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=483252"},"modified":"2023-03-28T10:40:29","modified_gmt":"2023-03-28T17:40:29","slug":"interactive-legend","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/mapping\/interactive-legend","title":{"rendered":"Create simple filter apps with Interactive Legend"},"author":6111,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37101,22941],"tags":[39371,759832,42611,401302,345572],"industry":[],"product":[760042,36551],"class_list":["post-483252","blog","type-blog","status-publish","format-standard","hentry","category-announcements","category-mapping","tag-announcement","tag-arcgis-instant-apps","tag-configurable-apps","tag-whats-new-june-2019","tag-whats-new-march-2019","product-instant-apps","product-arcgis-online"],"acf":{"short_description":"Use the Interactive Legend to provide a simple way to filter your map.","flexible_content":[{"acf_fc_layout":"content","content":"

Legends help your audience recognize and understand data that is displayed on a map. Interactive Legend<\/a> is a map-based Instant App<\/a> that allows you to explore feature layers in the map by\u00a0interacting with the legend<\/strong>.<\/p>\n

This article will illustrate how to choose the best configuration options to craft an engaging experience for your audience and introduces some helpful tools like the ability to take screenshots.<\/p>\n

To use this app, you will need a web map with a feature layer using one of the supported drawing styles, see Supported Drawing Styles<\/strong> below for the details.<\/p>\n

You can use the interactive legend to emphasize a specific category or set of categories to gain a deeper understanding of the data and how its distributed over space through a simple user interface.<\/p>\n

For example, the Global Power Generation referenced below shows the distribution of different types of power generation used around the world. The Interactive Legend app allows you to explore this data to ask and answer questions in an interactive way. Using the legend, you can click on the Hydro primary fuel category. This allows you to understand the distribution of Hydro power generation and click on individual map features to find out more about a specific plant.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1888442,"id":1888442,"title":"powerplants","filename":"powerplants-1.png","filesize":359078,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/mapping\/interactive-legend\/powerplants-2","alt":"Interactive legend app filtered to show only hydro power plants","author":"6941","description":"","caption":"","name":"powerplants-2","status":"inherit","uploaded_to":483252,"date":"2023-03-28 15:06:56","modified":"2023-03-28 15:07:25","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":780,"height":381,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1.png","medium-width":464,"medium-height":227,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1.png","medium_large-width":768,"medium_large-height":375,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1.png","large-width":780,"large-height":381,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1.png","1536x1536-width":780,"1536x1536-height":381,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1.png","2048x2048-width":780,"2048x2048-height":381,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1.png","card_image-width":780,"card_image-height":381,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/powerplants-1.png","wide_image-width":780,"wide_image-height":381}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Visualization Modes<\/strong><\/h2>\n

When configuring the app, you can enable layer effects. Use layer effects<\/strong> to differentiate between features included and excluded in the legend selections. You can choose how features are emphasized and de-emphasized when a filter is applied from a list of paired layer effects.\u00a0 These effects include options like drop shadow, blur, and bloom. These effects are grouped based on your basemap map color. If using a light basemaps, effects that are best seen on light backgrounds are selected and the same with dark basemaps. These effects all use the client-side filtering capabilities. Handling this filtering on the client, produces a much smoother interactive experience than making the requests to the server.<\/p>\n

In the example below, the app displays where spacecrafts have landed when they return to earth. The landing sites are categorized by project. When Apollo is selected in the interactive legend,\u00a0a bloom effect to those features and all other landing sites are grayed out, moving the visual focus to the Apollo landing sites.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1888452,"id":1888452,"title":"Spacecraft landing","filename":"Spacecraft-landing.png","filesize":550254,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/mapping\/interactive-legend\/spacecraft-landing","alt":"Spacecraft landing sites with bloom effect applies to all Apollo landing sites","author":"6941","description":"","caption":"","name":"spacecraft-landing","status":"inherit","uploaded_to":483252,"date":"2023-03-28 15:08:39","modified":"2023-03-28 15:09:20","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":780,"height":553,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing.png","medium-width":368,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing.png","medium_large-width":768,"medium_large-height":544,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing.png","large-width":780,"large-height":553,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing.png","1536x1536-width":780,"1536x1536-height":553,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing.png","2048x2048-width":780,"2048x2048-height":553,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing-656x465.png","card_image-width":656,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Spacecraft-landing.png","wide_image-width":780,"wide_image-height":553}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Layout Options<\/h2>\n

Recently Interactive Legend added a new layout option and a new refreshed look. In addition to the default, floating legend, a second layout option has been added to the app. The side panel layout option docks the legend on either side of the map. This helps provide more room when a legend contains a large amount of content. One big advantage of this layout is it does not overlap with the map and provides a larger area to view and interact with the legend.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1889002,"id":1889002,"title":"powerplants","filename":"powerplants.png","filesize":1164806,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/mapping\/interactive-legend\/powerplants-3","alt":"Legend located in left side panel","author":"6941","description":"","caption":"","name":"powerplants-3","status":"inherit","uploaded_to":483252,"date":"2023-03-28 17:36:32","modified":"2023-03-28 17:36:49","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":1920,"height":1022,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants.png","medium-width":464,"medium-height":247,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants.png","medium_large-width":768,"medium_large-height":409,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants.png","large-width":1920,"large-height":1022,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants-1536x818.png","1536x1536-width":1536,"1536x1536-height":818,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants.png","2048x2048-width":1920,"2048x2048-height":1022,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants-826x440.png","card_image-width":826,"card_image-height":440,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/powerplants.png","wide_image-width":1920,"wide_image-height":1022}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

To update your Interactive Legend app, navigate to the Interactive Legend section and select Side panel. Directly below the Side panel selection is the location to choose the side of the app it will appear on.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1888482,"id":1888482,"title":"configlayout","filename":"configlayout.png","filesize":132596,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/mapping\/interactive-legend\/configlayout","alt":"Configuration panel option to choose layout.","author":"6941","description":"","caption":"","name":"configlayout","status":"inherit","uploaded_to":483252,"date":"2023-03-28 15:12:07","modified":"2023-03-28 15:12:28","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":625,"height":608,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout.png","medium-width":268,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout.png","medium_large-width":625,"medium_large-height":608,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout.png","large-width":625,"large-height":608,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout.png","1536x1536-width":625,"1536x1536-height":608,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout.png","2048x2048-width":625,"2048x2048-height":608,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout-478x465.png","card_image-width":478,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/configlayout.png","wide_image-width":625,"wide_image-height":608}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Interactive Legend has a new look with some new functionality as well.\u00a0The button style and the ability to collapse individual sections of the legend have been updated to make it easier to interact with the app.\u00a0 There are no settings required to be enabled to use this functionality.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1888492,"id":1888492,"title":"collapsegif","filename":"collapsegif.gif","filesize":2413066,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/mapping\/interactive-legend\/collapsegif","alt":"Legend elements collapsing","author":"6941","description":"","caption":"","name":"collapsegif","status":"inherit","uploaded_to":483252,"date":"2023-03-28 15:17:29","modified":"2023-03-28 15:20:07","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":1280,"height":720,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif.gif","large-width":1280,"large-height":720,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif.gif","1536x1536-width":1280,"1536x1536-height":720,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif.gif","2048x2048-width":1280,"2048x2048-height":720,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif-826x465.gif","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/collapsegif.gif","wide_image-width":1280,"wide_image-height":720}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Time Filters<\/strong><\/h2>\n

In addition to filtering features by the legend you can also use a time slider to filter features on the map.\u00a0 The time slider option is available when the map contains a time-enabled layers. Located in the Interactive > Modify section of the configuration panel, the time filter setting enables the time slider with settings to set start and end date, with increments.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1888512,"id":1888512,"title":"timefilter1","filename":"timefilter1.png","filesize":9323,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/mapping\/interactive-legend\/timefilter1","alt":"","author":"6941","description":"","caption":"","name":"timefilter1","status":"inherit","uploaded_to":483252,"date":"2023-03-28 15:21:17","modified":"2023-03-28 15:21:36","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":356,"height":393,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1.png","medium-width":236,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1.png","medium_large-width":356,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1.png","large-width":356,"large-height":393,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1.png","1536x1536-width":356,"1536x1536-height":393,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1.png","2048x2048-width":356,"2048x2048-height":393,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1.png","card_image-width":356,"card_image-height":393,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/timefilter1.png","wide_image-width":356,"wide_image-height":393}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Using the legend and time filter, map features be explored in a more granular and focused way, providing deeper insights into the patterns and trends present. In this example<\/a> of crime data in San Francisco, the map is filtered to show two types of crimes over a 3-month period.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1889032,"id":1889032,"title":"timefitler2","filename":"timefitler2.png","filesize":1728301,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/mapping\/interactive-legend\/timefitler2-2","alt":"Time filter","author":"6941","description":"","caption":"","name":"timefitler2-2","status":"inherit","uploaded_to":483252,"date":"2023-03-28 17:39:59","modified":"2023-03-28 17:40:18","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":1920,"height":937,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2.png","medium-width":464,"medium-height":226,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2.png","medium_large-width":768,"medium_large-height":375,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2.png","large-width":1920,"large-height":937,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2-1536x750.png","1536x1536-width":1536,"1536x1536-height":750,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2.png","2048x2048-width":1920,"2048x2048-height":937,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2-826x403.png","card_image-width":826,"card_image-height":403,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/timefitler2.png","wide_image-width":1920,"wide_image-height":937}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Additional Options<\/h2>\n

The primary purpose of the Interactive Legend app is to enable your audience to explore the map by emphasizing different classifications data. But you might want to include other things to support the message of your map.\u00a0 For example, enable an introduction panel to help introduce the topic of the map.\u00a0Interactive Legend includes these additional options:<\/p>\n