{"id":661772,"date":"2019-11-20T04:33:44","date_gmt":"2019-11-20T12:33:44","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=661772"},"modified":"2021-05-11T05:02:14","modified_gmt":"2021-05-11T12:02:14","slug":"fast-flexible-and-fun-the-new-pop-up-experience-in-the-next-generation-map-viewer-beta","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/fast-flexible-and-fun-the-new-pop-up-experience-in-the-next-generation-map-viewer-beta","title":{"rendered":"Fast, flexible and fun: The new pop-up experience in the next generation Map Viewer"},"author":6981,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[33371,28061],"industry":[],"product":[36551],"class_list":["post-661772","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-map-viewer","tag-pop-ups","product-arcgis-online"],"acf":{"short_description":"Pop-ups have a new look and flexible new authoring experience. Check it out in the Map Viewer","flexible_content":[{"acf_fc_layout":"content","content":"

Overview<\/h3>\n

Pop-ups have long been a cornerstone of great web maps; they have allowed users to create maps that can be consistently experienced just about everywhere in ArcGIS.\u00a0 Over the past few years, we\u2019ve been envisioning and building the next generation of pop-ups, and with Map Viewer you get a peek into that future experience.<\/p>\n

For those of you configuring pop-ups in ArcGIS Pro, there are parts of the authoring experience that will feel familiar, but with fewer restrictions.\u00a0 More freedom is really at the heart of these changes; we want to give map authors more flexibility over how content is displayed in pop-ups.<\/p>\n

In addition to adding more flexibility, we want to make it easier to try out new ideas.\u00a0 If you have a pop-up open while you are customizing it, you will see instant results as you make changes.\u00a0 These dynamic updates allow you to quickly test out new ideas and see the impact they have on the actual look and feel of the pop-up.<\/p>\n

So, what has changed?<\/h3>\n

Rather than thinking about pop-ups as a series of exclusive choices, we\u2019ve taken the approach of allowing you to mix and match different types of content as you see fit.<\/p>\n

For example, previously if you wanted to show a list of fields and some rich text together it wasn\u2019t possible to have both.\u00a0 At least not without constructing your own table through the Custom Attribute Display<\/em>, which was time-consuming and painful to manage, especially when showing many attributes.\u00a0 Now when creating your pop-up, you can add in different content elements as you see fit. Do you want your pop-up to start with a nice rich image at the top? Or maybe you don\u2019t want your attachments to be stuck at the bottom… No problem.<\/p>\n

Let\u2019s walk through a quick example.<\/p>\n

Given that winter is upon us (at least for some of us), let\u2019s use live traffic\/road-condition cameras as an example.\u00a0 The Ministry of Transportation Ontario makes traffic cameras<\/a> available in ArcGIS Online through its Hub site.\u00a0 Out of the box here\u2019s what the pop-up looks like:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":661812,"id":661812,"title":"B21_1.jpg","filename":"B21_1.jpg.png","filesize":31930,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/fast-flexible-and-fun-the-new-pop-up-experience-in-the-next-generation-map-viewer-beta\/b21_1-jpg","alt":"Image showing existing pop-up style","author":"6981","description":"","caption":"","name":"b21_1-jpg","status":"inherit","uploaded_to":661772,"date":"2019-11-20 12:10:56","modified":"2019-11-20 12:13:56","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":554,"height":660,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg.png","medium-width":219,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg.png","medium_large-width":554,"medium_large-height":660,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg.png","large-width":554,"large-height":660,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg.png","1536x1536-width":554,"1536x1536-height":660,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg.png","2048x2048-width":554,"2048x2048-height":660,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg-390x465.png","card_image-width":390,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_1.jpg.png","wide_image-width":554,"wide_image-height":660}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

While all that information is potentially useful to someone when looking at the map, in an ideal world the current image from the traffic camera would be the most important and useful information for your everyday citizen who wants to understand current road conditions.\u00a0 Using the new flexible content options in the new Map Viewer\u2019s pop-up authoring experience, we can spruce this up a bit and help make the pop-up instantly useful to users.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":661822,"id":661822,"title":"b21_2.jpg","filename":"b21_2.jpg.png","filesize":170739,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/fast-flexible-and-fun-the-new-pop-up-experience-in-the-next-generation-map-viewer-beta\/b21_2-jpg","alt":"image showing the new pop-up experience","author":"6981","description":"","caption":"","name":"b21_2-jpg","status":"inherit","uploaded_to":661772,"date":"2019-11-20 12:11:01","modified":"2019-11-20 12:14: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":636,"height":902,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg.png","medium-width":184,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg.png","medium_large-width":636,"medium_large-height":902,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg.png","large-width":636,"large-height":902,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg.png","1536x1536-width":636,"1536x1536-height":902,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg.png","2048x2048-width":636,"2048x2048-height":902,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg-328x465.png","card_image-width":328,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/b21_2.jpg.png","wide_image-width":636,"wide_image-height":902}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Pretty big difference, right? We\u2019re now letting the current conditions of the road shine, along with its status. And we\u2019ve put the more detailed information towards the end since it\u2019s not always going to be useful to everyone.\u00a0 Lastly, we\u2019ve added a link at the end to report a problem with the camera.\u00a0 Let\u2019s open the pop-up configuration pane and to see what\u2019s going on.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":661832,"id":661832,"title":"B21_3","filename":"B21_3.png","filesize":14558,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/fast-flexible-and-fun-the-new-pop-up-experience-in-the-next-generation-map-viewer-beta\/b21_3","alt":"pop-up configuration panel","author":"6981","description":"","caption":"","name":"b21_3","status":"inherit","uploaded_to":661772,"date":"2019-11-20 12:11:05","modified":"2019-11-20 12:15:17","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":566,"height":753,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3.png","medium-width":196,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3.png","medium_large-width":566,"medium_large-height":753,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3.png","large-width":566,"large-height":753,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3.png","1536x1536-width":566,"1536x1536-height":753,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3.png","2048x2048-width":566,"2048x2048-height":753,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3-350x465.png","card_image-width":350,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_3.png","wide_image-width":566,"wide_image-height":753}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

In the pane above you\u2019ll notice separate content (Image, Text, Attributes) elements. Each one of those content elements makes up the pop-up that you saw earlier.\u00a0\u00a0 Here\u2019s how the different content types map to what you see in the pop-up.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":661842,"id":661842,"title":"B21_4","filename":"B21_4.png","filesize":194572,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/fast-flexible-and-fun-the-new-pop-up-experience-in-the-next-generation-map-viewer-beta\/b21_4","alt":"diagram showing how pop-up elements relate to the pop-up","author":"6981","description":"","caption":"","name":"b21_4","status":"inherit","uploaded_to":661772,"date":"2019-11-20 12:11:08","modified":"2019-11-20 12:15:51","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":1087,"height":941,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4.png","medium-width":301,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4.png","medium_large-width":768,"medium_large-height":665,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4.png","large-width":1087,"large-height":941,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4.png","1536x1536-width":1087,"1536x1536-height":941,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4.png","2048x2048-width":1087,"2048x2048-height":941,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4-537x465.png","card_image-width":537,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_4.png","wide_image-width":1087,"wide_image-height":941}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Another change to be aware of is that the Configure Attributes option has been moved outside of the pop-up configuration to its own panel.\u00a0 From there you can quick-filter your attributes, configure formatting (dates and numbers), and set the attribute alias\/label.\u00a0 This change was done to better reflect that these settings can apply to more than just the pop-up configuration (such as labeling and tables, both coming in future updates).\u00a0 \u00a0Stay tuned for future updates as we have some more features planned here to make your life easier.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":661852,"id":661852,"title":"B21_5","filename":"B21_5-e1574252501436.png","filesize":27965,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-e1574252501436.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/fast-flexible-and-fun-the-new-pop-up-experience-in-the-next-generation-map-viewer-beta\/b21_5","alt":"configure attributes panel","author":"6981","description":"","caption":"","name":"b21_5","status":"inherit","uploaded_to":661772,"date":"2019-11-20 12:11:13","modified":"2019-11-20 12:16:22","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":561,"height":508,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-e1574252501436-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-e1574252501436-288x261.png","medium-width":288,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-e1574252501436.png","medium_large-width":561,"medium_large-height":508,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-e1574252501436.png","large-width":561,"large-height":508,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-e1574252501436.png","1536x1536-width":561,"1536x1536-height":508,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-e1574252501436.png","2048x2048-width":561,"2048x2048-height":508,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-e1574252501436-514x465.png","card_image-width":514,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/B21_5-433x1080.png","wide_image-width":433,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

The little things that save you time<\/h3>\n

While flexible pop-up content is a big step forward, there are several smaller improvements worth calling out that help you move quickly and change your mind when creating new pop-ups.<\/p>\n