{"id":179331,"date":"2012-08-15T23:44:19","date_gmt":"2012-08-16T06:44:19","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=179331"},"modified":"2018-12-18T10:32:15","modified_gmt":"2018-12-18T18:32:15","slug":"making-your-pop-up-pop","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop","title":{"rendered":"Making Your Pop-up Pop!"},"author":5081,"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":[23241,29091,24921,28061,32701],"industry":[],"product":[36551,36601],"class_list":["post-179331","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-best-practices","tag-html","tag-javascript","tag-pop-ups","tag-ui-ux","product-arcgis-online","product-developers"],"acf":{"short_description":"Want to make a beautiful pop-up to match your map or website? With a little elbow grease, CSS, and a keen eye for design, it\u2019s easy.","flexible_content":[{"acf_fc_layout":"content","content":"<div id=\"attachment_19290\" class=\"wp-caption alignnone\">\n<p><a href=\"http:\/\/blogs.esri.com\/esri\/arcgis\/files\/2012\/08\/1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-19290 \" src=\"http:\/\/blogs.esri.com\/esri\/arcgis\/files\/2012\/08\/1-300x203.png\" alt=\"The default pop-up theme (left) and the themed pop-up (right)\" width=\"300\" height=\"203\" \/><\/a><\/p>\n<p class=\"wp-caption-text\">The default pop-up theme (left) and the themed pop-up (right)<\/p>\n<\/div>\n<p>Want to make a beautiful pop-up to match your map or website? With a little elbow grease, CSS, and a keen eye for design, it\u2019s easy. Here\u2019s how you can skin the ArcGIS API for JavaScript pop-up widget.<\/p>\n<p>The\u00a0<a href=\"http:\/\/help.arcgis.com\/en\/webapi\/javascript\/arcgis\/help\/jsapi_start.htm#jsapi\/popup.htm\">pop-up widget<\/a>\u00a0provides an attractive user interface for displaying information about a feature or set of features on a map. In this post, I\u2019ll be showing how to improve the default popup style (shown at above left) using my own color scheme and icons (shown at upper right).<\/p>\n<p>Before we get started, you can view the\u00a0<a href=\"http:\/\/servicesbeta.esri.com\/demos\/skinning-the-popup\/\">finished pop-up style<\/a>\u00a0or\u00a0<a href=\"http:\/\/www.arcgis.com\/home\/item.html?id=34f1578118e84f37912fa312412fea2e\">grab the code<\/a>.<\/p>\n<p>You haven\u2019t created it yet, but you need to name your masterpiece theme. The theme name will be assigned as a CSS class. I\u2019ve named my custom theme \u201cmodernGrey,\u201d but you can define your own like \u201cblueSteel\u201d or \u201cmagnum\u201d. Make sure it doesn\u2019t have any spaces or symbols.<\/p>\n<p>Next, we need to create a style sheet for the new pop-up styles and link it in the head of our HTML document we\u2019ll be embedding that killer webmap in.<\/p>\n<p><code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/modernGrey.css\"&gt;<\/code><\/p>\n<p>Grab the CSS that the pop-up widget uses from the\u00a0<a href=\"http:\/\/serverapi.arcgisonline.com\/jsapi\/arcgis\/3.1\/js\/esri\/dijit\/css\/Popup.css\">API URL<\/a>. The CSS from the API is minified to reduce file size. You can make it readable by using a site like\u00a0<a href=\"http:\/\/www.cleancss.com\/css-beautify\/\">cleancss<\/a>.<\/p>\n<div id=\"attachment_19292\" class=\"wp-caption alignnone\">\n<p><a href=\"http:\/\/blogs.esri.com\/esri\/arcgis\/files\/2012\/08\/2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-19292\" src=\"http:\/\/blogs.esri.com\/esri\/arcgis\/files\/2012\/08\/2-300x189.png\" alt=\"Converting minimized CSS into beautiful CSS\" width=\"300\" height=\"189\" \/><\/a><\/p>\n<p class=\"wp-caption-text\">Converting minimized CSS into beautiful CSS<\/p>\n<\/div>\n<p>Then, you can paste the formatted code into a new empty CSS file. This CSS will let you easily recognize what styles are being applied so you can identify the ones you need to overwrite without having to use a browser\u2019s DOM inspector.<\/p>\n<p>Now we\u2019re ready to start styling with CSS.<\/p>\n<p>In my \u201cmodernGrey.css\u201d style-sheet, I can copy all the selectors that I would like to modify without their properties and paste them into my modernGrey.css. I need to add my \u201cmodernGrey\u201d class to the selector, so that each of my style-sheet\u2019s selectors overwrites the default ones.<\/p>\n<p><code>.esriPopup.modernGrey {<br \/>\n\/\/ Put styles here!<br \/>\n}<\/code><\/p>\n<p>I can add all the attributes and their properties to the selectors to give my style the look and feel I want. \u00a0To easily create multi browser compatible CSS gradients, rounded corners, shadows and text-shadows,\u00a0<a href=\"http:\/\/css3generator.com\/\">CSS3Generator.com<\/a>\u00a0is a great resource.\u00a0<a href=\"http:\/\/ajaxload.info\/\">Ajax-load.info<\/a>\u00a0can help you create an animated GIF image to match your pop-up.<\/p>\n<div id=\"attachment_19295\" class=\"wp-caption alignnone\">\n<p><a href=\"http:\/\/blogs.esri.com\/esri\/arcgis\/files\/2012\/08\/3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-19295\" src=\"http:\/\/blogs.esri.com\/esri\/arcgis\/files\/2012\/08\/3-300x155.png\" alt=\"Styled pop-up\" width=\"300\" height=\"155\" \/><\/a><\/p>\n<p class=\"wp-caption-text\">Styled pop-up<\/p>\n<\/div>\n<p><code>.esriPopup.modernGrey {<br \/>\n-webkit-box-shadow: 1px 1px 3px #dbdbdb;<br \/>\nbox-shadow: 1px 1px 3px #dbdbdb;<br \/>\n-webkit-border-radius: 2px;<br \/>\nborder-radius: 2px;<br \/>\nfont-family: Arial, Helvetica, sans-serif;<br \/>\nfont-size: 12px;<br \/>\nline-height: 16px;<br \/>\n}<\/code><\/p>\n<p>The pop-up also uses images for icons and each tail of the popup. These images are combined into one image called a sprite. The advantages of having them in a sprite are the reduced file size and once one is loaded, all of the images are already cached in the browser. You\u2019ll likely want to modify the pop-up\u2019s sprite image to match your new theme\u2019s CSS as well.<\/p>\n<p>You may just want to simply change the hue\/saturation of the icons with a program like Adobe Photoshop.<\/p>\n<div id=\"attachment_19296\" class=\"wp-caption alignnone\">\n<p><a href=\"http:\/\/blogs.esri.com\/esri\/arcgis\/files\/2012\/08\/4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-19296\" src=\"http:\/\/blogs.esri.com\/esri\/arcgis\/files\/2012\/08\/4-300x209.png\" alt=\"Adjusting the color of the arrow icon in the image sprite\" width=\"300\" height=\"209\" \/><\/a><\/p>\n<p class=\"wp-caption-text\">Adjusting the color of the arrow icon in the image sprite<\/p>\n<\/div>\n<p>You can open the\u00a0<a href=\"http:\/\/servicesbeta.esri.com\/demos\/skinning-the-popup\/images\/popup.png\">popup.png<\/a>\u00a0sprite in your favorite image editor and change what you need or create your own unique sprite.<\/p>\n<p>If you change the size, layout, or position of an image inside of the sprite, you\u2019ll need to adjust the CSS positioning as well.<\/p>\n<p><code>.esriPopup.modernGrey .titleButton.prev {<br \/>\nbackground-position: 0 -224px;<br \/>\n}<\/code><\/p>\n<p>Now we need to use JavaScript to tell our map about our cool new theme.<\/p>\n<p>Create your popup Dijit and assign it to a variable. I\u2019ve configured my pop-up with the highlight symbol disabled. Make sure to assign it to a variable that you can access a few lines later.<\/p>\n<p><code>var customPopup = new esri.dijit.Popup({<br \/>\nfillSymbol: false,<br \/>\nhighlight: false,<br \/>\nlineSymbol: false,<br \/>\nmarkerSymbol: false<br \/>\n}, dojo.create(\"div\"));<\/code><\/p>\n<p>Then, we need to apply the theme to the variable\u2019s DOM node (Document Object Model) as a class name, so the styles we create will get applied to this node.<\/p>\n<p><code>dojo.addClass(customPopup.domNode, \"modernGrey\");<\/code><\/p>\n<p>Lastly, when creating our map, we need to set the map options to use our custom pop-up instead of the default.<\/p>\n<p><code>var mapDeferred = esri.arcgis.utils.createMap(webmap, \"map\", {<br \/>\nmapOptions: {<br \/>\ninfoWindow: customPopup, \/\/ Use our popup<br \/>\nslider: true<br \/>\n}<br \/>\n});<\/code><\/p>\n<p>Other examples of styled pop-ups include the Public Gallery template in\u00a0<a href=\"http:\/\/www.arcgis.com\/apps\/PublicGallery\/map.html?group=1d1f24e8556642f49448f1c88b5a571b&amp;webmap=302281ee8e06443e93484b06896c5c14&amp;theme=redTheme\">red<\/a>,\u00a0<a href=\"http:\/\/www.arcgis.com\/apps\/PublicGallery\/map.html?group=1d1f24e8556642f49448f1c88b5a571b&amp;webmap=302281ee8e06443e93484b06896c5c14&amp;theme=blueTheme\">blue<\/a>\u00a0and\u00a0<a href=\"http:\/\/www.arcgis.com\/apps\/PublicGallery\/map.html?group=1d1f24e8556642f49448f1c88b5a571b&amp;webmap=302281ee8e06443e93484b06896c5c14&amp;theme=greenTheme\">green<\/a>.<\/p>\n<p>Applying a fresh coat of paint to the pop-up goes a long way but don\u2019t forget about the content inside. Refer to the recent\u00a0<a href=\"http:\/\/blogs.esri.com\/esri\/arcgis\/2012\/08\/13\/designing-web-map-pop-ups\/\">Designing web map pop-ups<\/a>\u00a0blog post for tips on how to display content within a pop-up.<\/p>\n<p>Happy styling!<\/p>\n<p><a href=\"http:\/\/help.arcgis.com\/en\/webapi\/javascript\/arcgis\/help\/jshelp_start.htm#jshelp\/intro_agspopup.htm\">Create Popups<\/a>\u00a0|\u00a0<a href=\"http:\/\/help.arcgis.com\/en\/webapi\/javascript\/arcgis\/help\/jshelp_start.htm#jshelp\/intro_customizepopup.htm\">Customize Popups<\/a><\/p>\n"}],"authors":[{"ID":5081,"user_firstname":"Matt","user_lastname":"Driscoll","nickname":"driskull","user_nicename":"mattdriscoll","display_name":"Matt Driscoll","user_email":"MDriscoll@esri.com","user_url":"https:\/\/github.com\/driskull","user_registered":"2018-03-02 00:16:43","user_description":"As a Software Engineer on the ArcGIS JavaScript API Team, I focus on building mapping widgets that provide a great user experience, are well designed and accessible to all users. Feel free to contact me at mdriscoll@esri.com with questions related to the JavaScript API, Widgets, TypeScript, and development tools. https:\/\/js.arcgis.com\/","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/a319ee8e1e10b75757b838b84909f7931825c40968d3fc436e46a02407655e2c?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/a319ee8e1e10b75757b838b84909f7931825c40968d3fc436e46a02407655e2c?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Making Your Pop-up Pop!<\/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\/arcgis-online\/mapping\/making-your-pop-up-pop\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making Your Pop-up Pop!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop\" \/>\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=\"2018-12-18T18:32:15+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\/arcgis-online\/mapping\/making-your-pop-up-pop#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop\"},\"author\":{\"name\":\"Matt Driscoll\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/d2bd92c85009a123f5f673e4d1a7fb16\"},\"headline\":\"Making Your Pop-up Pop!\",\"datePublished\":\"2012-08-16T06:44:19+00:00\",\"dateModified\":\"2018-12-18T18:32:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"Best Practices\",\"HTML\",\"JavaScript\",\"pop-ups\",\"UI\/UX\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop\",\"name\":\"Making Your Pop-up Pop!\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2012-08-16T06:44:19+00:00\",\"dateModified\":\"2018-12-18T18:32:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Making Your Pop-up Pop!\"}]},{\"@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\/d2bd92c85009a123f5f673e4d1a7fb16\",\"name\":\"Matt Driscoll\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a319ee8e1e10b75757b838b84909f7931825c40968d3fc436e46a02407655e2c?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a319ee8e1e10b75757b838b84909f7931825c40968d3fc436e46a02407655e2c?s=96&d=blank&r=g\",\"caption\":\"Matt Driscoll\"},\"description\":\"As a Software Engineer on the ArcGIS JavaScript API Team, I focus on building mapping widgets that provide a great user experience, are well designed and accessible to all users. Feel free to contact me at mdriscoll@esri.com with questions related to the JavaScript API, Widgets, TypeScript, and development tools. https:\/\/js.arcgis.com\/\",\"sameAs\":[\"https:\/\/github.com\/driskull\",\"https:\/\/www.linkedin.com\/in\/driscollm\/\",\"https:\/\/x.com\/driskull\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/mattdriscoll\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Making Your Pop-up Pop!","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\/arcgis-online\/mapping\/making-your-pop-up-pop","og_locale":"en_US","og_type":"article","og_title":"Making Your Pop-up Pop!","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-12-18T18:32:15+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\/arcgis-online\/mapping\/making-your-pop-up-pop#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop"},"author":{"name":"Matt Driscoll","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/d2bd92c85009a123f5f673e4d1a7fb16"},"headline":"Making Your Pop-up Pop!","datePublished":"2012-08-16T06:44:19+00:00","dateModified":"2018-12-18T18:32:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop"},"wordCount":4,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["Best Practices","HTML","JavaScript","pop-ups","UI\/UX"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop","name":"Making Your Pop-up Pop!","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2012-08-16T06:44:19+00:00","dateModified":"2018-12-18T18:32:15+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/making-your-pop-up-pop#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Making Your Pop-up Pop!"}]},{"@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\/d2bd92c85009a123f5f673e4d1a7fb16","name":"Matt Driscoll","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a319ee8e1e10b75757b838b84909f7931825c40968d3fc436e46a02407655e2c?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a319ee8e1e10b75757b838b84909f7931825c40968d3fc436e46a02407655e2c?s=96&d=blank&r=g","caption":"Matt Driscoll"},"description":"As a Software Engineer on the ArcGIS JavaScript API Team, I focus on building mapping widgets that provide a great user experience, are well designed and accessible to all users. Feel free to contact me at mdriscoll@esri.com with questions related to the JavaScript API, Widgets, TypeScript, and development tools. https:\/\/js.arcgis.com\/","sameAs":["https:\/\/github.com\/driskull","https:\/\/www.linkedin.com\/in\/driscollm\/","https:\/\/x.com\/driskull"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/mattdriscoll"}]}},"text_date":"August 15, 2012","author_name":"Matt Driscoll","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/mattdriscoll","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Online","tag_data":[{"term_id":23241,"name":"Best Practices","slug":"best-practices","term_group":0,"term_taxonomy_id":23241,"taxonomy":"post_tag","description":"","parent":0,"count":57,"filter":"raw"},{"term_id":29091,"name":"HTML","slug":"html","term_group":0,"term_taxonomy_id":29091,"taxonomy":"post_tag","description":"","parent":0,"count":12,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":28061,"name":"pop-ups","slug":"pop-ups","term_group":0,"term_taxonomy_id":28061,"taxonomy":"post_tag","description":"","parent":0,"count":39,"filter":"raw"},{"term_id":32701,"name":"UI\/UX","slug":"ui-ux","term_group":0,"term_taxonomy_id":32701,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2692,"filter":"raw"}],"product_data":[{"term_id":36551,"name":"ArcGIS Online","slug":"arcgis-online","term_group":0,"term_taxonomy_id":36551,"taxonomy":"product","description":"","parent":0,"count":2428,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=arcgis-online","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/179331","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\/5081"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=179331"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/179331\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=179331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=179331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=179331"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=179331"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=179331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}