{"id":452352,"date":"2021-09-02T14:26:54","date_gmt":"2021-09-02T21:26:54","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&p=452352"},"modified":"2021-09-21T15:06:49","modified_gmt":"2021-09-21T22:06:49","slug":"sync-2d-and-3d-maps-in-arcgis-experience-builder","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/sync-2d-and-3d-maps-in-arcgis-experience-builder","title":{"rendered":"Sync 2D and 3D Maps in ArcGIS Experience Builder"},"content":{"rendered":"","protected":false},"author":1172,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[425582,10392],"tags":[475742,4381,425592],"arcwatch_issues":[475562],"class_list":["post-452352","arcwatch","type-arcwatch","status-publish","format-standard","hentry","category-arcgis-experience-builder","category-arcgis-online","tag-2d-and-3d-maps","tag-apps","tag-arcgis-experience-builder","arcwatch_issues-october-2021","arcwatch_sections-tech-time"],"acf":{"short_description":"Esri technology evangelist Bern Szukalski shows you how to sync 2D and 3D maps in ArcGIS Experience Builder using triggers and actions.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"You can quickly create and deliver responsive web experiences\u2014without writing any code\u2014using ArcGIS Experience Builder<\/a>, available in ArcGIS Online<\/a> and ArcGIS Enterprise<\/a>. Experiences can include web pages, web apps, or mobile apps that contain 2D and 3D maps, text, and media. You can focus on one type of content or combine and link many types of content to create a complete experience and destination for your audience.\r\n\r\nTo start, you can use templates built into ArcGIS Experience Builder or create your own from scratch. You can then drag, position, and configure components such as maps, images, text, and tools. You can add triggers and actions to make widgets work together\u2014within a single app or across multiple apps and pages. You can leverage all your existing content from ArcGIS Online or ArcGIS Enterprise too. (For more information, read \"ArcGIS Experience Builder Overview and Concepts\" <\/a>in ArcGIS Blog<\/em>.)\r\n\r\nIn this Tech Time tip, you will learn how to sync 2D and 3D maps using triggers and actions. You can\u00a0view\u00a0the completed experience<\/a>\u00a0and follow along by using a partially completed\u00a0tutorial template<\/a>.\r\n\r\nInteractions between widgets in Experience Builder can be configured using triggers and actions. Triggers drive actions in widgets. (See\u00a0Add actions to widgets<\/a>.)\r\n\r\nIn this tip, triggers and actions will be used to sync the extent of two maps: a 2D web map and a 3D web scene. Follow these steps to create a simple synced 2D\/3D experience.\r\n\r\nStep 1:<\/strong> Open the\u00a0sample Web Experience Template<\/a>\u00a0and sign in with your ArcGIS credentials."},{"acf_fc_layout":"image","image":455742,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 2:<\/strong>\u00a0Click\u00a0Create Web Experience<\/strong>. This creates a new web experience from the tutorial template."},{"acf_fc_layout":"image","image":455752,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 3:<\/strong> Examine the sample Web Experience Template.\r\n\r\nThe template includes side-by-side Map widgets that contain a 2D web map and 3D web scene. Click each Map Widget on the screen or select each one from the page outline in the side panel to view their settings in the settings panel."},{"acf_fc_layout":"image","image":455772,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Click\u00a0Live view\u00a0from the Experience Builder toolbar to explore the maps. Note that the maps pan and zoom independently. In the following steps, you will configure the settings for both map widgets to sync them. Remember to turn off Live view when finished.\r\n\r\nStep 4:<\/strong> Select the\u00a0Map 1\u00a0Map widget.\r\n\r\nMap 1 is the Map widget on the left side of the screen. It uses the 2D Portland web map. Click the widget to select it, or select it from the Outline panel to display the current settings."},{"acf_fc_layout":"image","image":455782,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 5:<\/strong> In the settings panel on the right, click the\u00a0Action\u00a0tab, then click\u00a0Add a trigger."},{"acf_fc_layout":"image","image":455802,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 6:<\/strong>\u00a0You will use a change in the extent of Map 1 to trigger an action in Map 2. Click the\u00a0Extent Changes<\/strong>\u00a0trigger."},{"acf_fc_layout":"image","image":455822,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 7:<\/strong>\u00a0Select\u00a0Map 2.\r\n\r\nThis sets Map 2 as the target widget when a change in extent occurs in Map 1."},{"acf_fc_layout":"image","image":455832,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 8:<\/strong> Select\u00a0Zoom to\u00a0as the action for Map 2 when the trigger occurs."},{"acf_fc_layout":"image","image":455852,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"The\u00a0Action\u00a0panel for Map 1 should show the following:\u00a0Extent Changes\u00a0is the trigger,\u00a0Map 2\u00a0is the target, and the Map 2 action is\u00a0Zoom to."},{"acf_fc_layout":"image","image":455862,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Test your app by turning on\u00a0Live view\u00a0from the Experience Builder toolbar. Remember to turn off Live view when finished."},{"acf_fc_layout":"image","image":455882,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Note that Map 2 zooms when Map 1 is zoomed, but not the opposite.\r\n\r\nStep 9:<\/strong> To complete syncing both maps, repeat steps 4 through 8 above, using Extent Changes as the trigger and Map 1 as the target.\r\n\r\nWhen finished, the Action panel for Map 2 should show the following:\u00a0Extent Changes\u00a0is the trigger,\u00a0Map 1\u00a0is the target, and the Map 1 action is\u00a0Zoom to."},{"acf_fc_layout":"image","image":455892,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Use\u00a0Live view\u00a0to test your settings. Click\u00a0the Save <\/strong>button and then\u00a0Publish<\/strong> when finished. You can use the template to build your own synced map experience by substituting two maps of your own in the Map widgets.\r\n\r\nFor more information, visit the following web pages:\r\n