{"id":72481,"date":"2016-06-22T06:30:35","date_gmt":"2016-06-22T06:30:35","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/play-in-the-javascript-symbol-playground\/"},"modified":"2018-05-11T18:13:25","modified_gmt":"2018-05-11T18:13:25","slug":"play-in-the-javascript-symbol-playground","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground","title":{"rendered":"Play in the JavaScript symbol playground"},"author":6561,"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":[24921,31281,31291,31301,29401],"industry":[],"product":[36831,36601],"class_list":["post-72481","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-javascript","tag-playground","tag-renderers","tag-symbology","tag-web","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Version 3.15 of the ArcGIS API for JavaScript introduced a convenient new app called the Symbol Playground to help developers create symb...","flexible_content":[{"acf_fc_layout":"content","content":"<p>Version 3.15 of the ArcGIS API for JavaScript introduced a convenient new app called the <a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/samples\/playground\/\">Symbol Playground<\/a> to help developers create symbology for visualizing features in web applications. This app helps improve the experience for designing, coding, and ultimately understanding symbols and how they work in the API.<\/p>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/samples\/playground\/\">symbol playground<\/a> becomes handy for developers that need to make slight programmatic changes to symbols representing a layer&#8217;s features or stand-alone graphics in a web application. When it comes to rendering default symbology for a web layer, it is best practice to allow the GIS specialist, or whoever manages GIS data for your organization, to design the visualization for each layer in <a href=\"https:\/\/www.esri.com\/software\/arcgis\/arcgis-for-desktop\">ArcGIS for Desktop<\/a> or <a href=\"https:\/\/www.arcgis.com\/features\/index.html\">ArcGIS Online<\/a> and save the rendering information to the service. This allows the same data to be visualized consistently when consumed by other applications in the ArcGIS Platform, whether it&#8217;s ArcGIS Pro, ArcGIS Runtime, ArcGIS Online, or a custom web app built on the ArcGIS API for JavaScript. If the data needs to be visualized differently from the drawing information defined in the service, then you may find the symbol playground helpful.<\/p>\n<p>Watch the video below to learn more about the symbol playground and how it works.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=TxiPfYBMMBQ\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-64806 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2016\/06\/Screen-Shot-2016-06-17-at-4.02.32-PM.png\" alt=\"\" width=\"550\" height=\"309\" \/><\/a><\/p>\n<p>For many, creating the best looking symbol for features in a web application has been a tedious effort of trial and error by making slight modifications to code, refreshing the webpage, making more tweaks to the symbol and going back and forth until the symbol looks just right. Others opt to use the <a href=\"http:\/\/www.arcgis.com\/home\/webmap\/viewer.html?useExisting=1\">ArcGIS Online map viewer<\/a> symbology tools to first design the symbol, then transfer the values to code.<\/p>\n<p>Both approaches can be time consuming and inefficient. The <a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/samples\/playground\/\">Symbol Playground<\/a> provides a happy marriage between these two workflows where the developer or GIS specialist can design the symbol with the help of simple UI and a map, and copy and paste either the JavaScript or JSON representing the symbol to the application.<\/p>\n<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/3\/samples\/playground\/index.html\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-64797 noIMGBackground\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2016\/06\/playground-app.png\" alt=\"\" width=\"1226\" height=\"751\" \/><\/a><\/p>\n<p>This playground app generates symbols for web applications using the 3.x versions of the ArcGIS API for JavaScript. A second symbol playground app will be available at the 4.1 version of the API to provide the same experience for designing both 2D and 3D symbols for web applications that use the 4.0 and later versions of the API.<\/p>\n"}],"authors":[{"ID":6561,"user_firstname":"Kristian","user_lastname":"Ekenes","nickname":"Kristian Ekenes","user_nicename":"kekenes","display_name":"Kristian Ekenes","user_email":"KEkenes@esri.com","user_url":"https:\/\/github.com\/ekenes","user_registered":"2018-03-02 00:18:32","user_description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"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>Play in the JavaScript symbol playground<\/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\/mapping\/mapping\/play-in-the-javascript-symbol-playground\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Play in the JavaScript symbol playground\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground\" \/>\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-05-11T18:13:25+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\/mapping\/mapping\/play-in-the-javascript-symbol-playground#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Play in the JavaScript symbol playground\",\"datePublished\":\"2016-06-22T06:30:35+00:00\",\"dateModified\":\"2018-05-11T18:13:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"JavaScript\",\"playground\",\"renderers\",\"symbols and symbology\",\"web\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground\",\"name\":\"Play in the JavaScript symbol playground\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2016-06-22T06:30:35+00:00\",\"dateModified\":\"2018-05-11T18:13:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Play in the JavaScript symbol playground\"}]},{\"@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\/5469f723fbfb78138efbb1da56e6aa9b\",\"name\":\"Kristian Ekenes\",\"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\/10\/ekenes-zurich-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"caption\":\"Kristian Ekenes\"},\"description\":\"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.\",\"sameAs\":[\"https:\/\/github.com\/ekenes\",\"https:\/\/www.linkedin.com\/in\/kristian-ekenes\/\",\"https:\/\/x.com\/kekenes\"],\"gender\":\"male\",\"jobTitle\":\"Principal Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Play in the JavaScript symbol playground","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\/mapping\/mapping\/play-in-the-javascript-symbol-playground","og_locale":"en_US","og_type":"article","og_title":"Play in the JavaScript symbol playground","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-05-11T18:13:25+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\/mapping\/mapping\/play-in-the-javascript-symbol-playground#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Play in the JavaScript symbol playground","datePublished":"2016-06-22T06:30:35+00:00","dateModified":"2018-05-11T18:13:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground"},"wordCount":6,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["JavaScript","playground","renderers","symbols and symbology","web"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground","name":"Play in the JavaScript symbol playground","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2016-06-22T06:30:35+00:00","dateModified":"2018-05-11T18:13:25+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/play-in-the-javascript-symbol-playground#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Play in the JavaScript symbol playground"}]},{"@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\/5469f723fbfb78138efbb1da56e6aa9b","name":"Kristian Ekenes","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\/10\/ekenes-zurich-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","caption":"Kristian Ekenes"},"description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","sameAs":["https:\/\/github.com\/ekenes","https:\/\/www.linkedin.com\/in\/kristian-ekenes\/","https:\/\/x.com\/kekenes"],"gender":"male","jobTitle":"Principal Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes"}]}},"text_date":"June 22, 2016","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"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":31281,"name":"playground","slug":"playground","term_group":0,"term_taxonomy_id":31281,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":31291,"name":"renderers","slug":"renderers","term_group":0,"term_taxonomy_id":31291,"taxonomy":"post_tag","description":"","parent":0,"count":9,"filter":"raw"},{"term_id":31301,"name":"symbols and symbology","slug":"symbology","term_group":0,"term_taxonomy_id":31301,"taxonomy":"post_tag","description":"","parent":0,"count":194,"filter":"raw"},{"term_id":29401,"name":"web","slug":"web","term_group":0,"term_taxonomy_id":29401,"taxonomy":"post_tag","description":"","parent":0,"count":17,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2716,"filter":"raw"}],"product_data":[{"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":364,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":772,"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\/72481","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\/6561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=72481"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/72481\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=72481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=72481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=72481"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=72481"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=72481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}