{"id":76291,"date":"2017-03-28T05:00:32","date_gmt":"2017-03-28T05:00:32","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/take-advantage-of-the-javascript-symbol-playground\/"},"modified":"2018-05-11T18:12:56","modified_gmt":"2018-05-11T18:12:56","slug":"take-advantage-of-the-javascript-symbol-playground","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground","title":{"rendered":"Take advantage of 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":[27491,31281,31291,31301,26521],"industry":[],"product":[36831,36601],"class_list":["post-76291","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-jsapi4","tag-playground","tag-renderers","tag-symbology","tag-visualization","product-js-api-arcgis","product-developers"],"acf":{"short_description":"The 4.3 release of the ArcGIS API for JavaScript introduced an app called the Symbol Playground. Its purpose is to provide an environment...","flexible_content":[{"acf_fc_layout":"content","content":"

The 4.3 release of the ArcGIS API for JavaScript<\/a> introduced an app called the Symbol Playground<\/a>. Its purpose is to provide an environment where you can design 2D or 3D symbols<\/a> with a simple user interface, copy the code used to create the symbol, and paste it into a custom web application built with the JavaScript API. <\/p>\n

This can be a handy tool for developers, allowing them to get immediate visual feedback when altering symbol properties. It is also helpful for the more geographically-inclined analyst who is getting started with web development and unfamiliar with writing code for creating visualizations with the JavaScript API.<\/p>\n

The Symbol Playground<\/a> can also be used to answer the following questions: What does the default SimpleMarkerSymbol (or any other symbol) look like? What values can I use for each symbol property? <\/p>\n

Where to find it<\/h1>\n

The Symbol Playground<\/a> is located in the visualization samples of the ArcGIS API for JavaScript sample code documentation. You can gain quick access to it by searching for “playground” on the samples page.<\/p>\n

\"\"<\/a><\/p>\n

Try it out<\/h1>\n

Open the Symbol Playground<\/a> and select any symbol type to get started. 2D symbols are listed first, followed by 3D symbols. For the purposes of this post, select SimpleMarkerSymbol<\/strong><\/a> to see the properties of that symbol type. A user interface opens exposing all the default properties of the symbol on the right; input elements are provided for adjusting the values of those properties. <\/p>\n

\"\"<\/a><\/p>\n

Notice that as you select new shapes, colors, sizes, angles, etc., the symbol of the example feature in the view to the left automatically updates. Change the basemap to one that closely resembles the basemap in your app. This helps you to pick optimal colors for each symbol that work best for your application. Also, take note that below the input elements for adjusting property values, you can see the code required to create the desired symbol automatically update with each property change.<\/p>\n

\"\"<\/a><\/p>\n

Once you are done designing the symbol, you can copy the code to the clipboard and paste it directly into your app.<\/p>\n

\"\"<\/a><\/p>\n

The playground also provides options for copying the code snippet within the context of the require<\/code> statement or in the ArcGIS JSON format<\/a> used by the REST API.<\/p>\n

\"\"<\/a><\/p>\n

As you familiarize yourself with the Symbol Playground, you will gain familiarity with the code structure of each symbol type and how they differ in 2D and 3D implementations. For example, to create a 3D symbol you must always first add at least one symbol layer<\/a> to the symbol. It is the properties of the symbol layer that will drive the visualization of the 3D symbol.<\/p>\n

\"\"<\/a><\/p>\n

The playground allows you to view the realistic 3D WebStyleSymbol resources<\/a> available in the API. These include dozens of pre-made symbols that may be used to add realistic elements to web scenes.<\/p>\n

\"\"<\/a><\/p>\n

So try it out! Use the Symbol Playground to create custom symbols for your apps. Use it to explore the properties available to you. Use it to familiarize yourself with the object specifications of various symbols.<\/p>\n

When not to use the Symbol Playground<\/h1>\n

The ArcGIS API for JavaScript is just a part of a larger platform that allows you to create web maps and layers that can be shared, viewed, and analyzed consistently across a suite of desktop, mobile, and web apps built with ArcGIS. The ArcGIS Online map viewer<\/a> and scene viewer<\/a> already provide environments for designing symbols that can be used to represent geographic data in web apps. When workflows allow for using ArcGIS Online for those purposes, then it should be used. The Symbol Playground is intended to be a tool for programmatically altering symbol property values when apps require they be changed dynamically based on user input or some other behavior.<\/p>\n

In short, if you don’t need to create the symbols in code then don’t! Create your visualizations with ArcGIS Online or ArcGIS Pro and use the playground for those cases when visualizations need custom tweaking on an app-by-app basis.<\/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":""}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"\nTake advantage of 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\/take-advantage-of-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=\"Take advantage of the JavaScript symbol playground\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-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:12:56+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\/take-advantage-of-the-javascript-symbol-playground#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Take advantage of the JavaScript symbol playground\",\"datePublished\":\"2017-03-28T05:00:32+00:00\",\"dateModified\":\"2018-05-11T18:12:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"jsapi4\",\"playground\",\"renderers\",\"symbols and symbology\",\"Visualization\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground\",\"name\":\"Take advantage of the JavaScript symbol playground\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2017-03-28T05:00:32+00:00\",\"dateModified\":\"2018-05-11T18:12:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Take advantage of 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":"Take advantage of 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\/take-advantage-of-the-javascript-symbol-playground","og_locale":"en_US","og_type":"article","og_title":"Take advantage of the JavaScript symbol playground","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-05-11T18:12:56+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\/take-advantage-of-the-javascript-symbol-playground#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Take advantage of the JavaScript symbol playground","datePublished":"2017-03-28T05:00:32+00:00","dateModified":"2018-05-11T18:12:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground"},"wordCount":7,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["jsapi4","playground","renderers","symbols and symbology","Visualization"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground","name":"Take advantage of the JavaScript symbol playground","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2017-03-28T05:00:32+00:00","dateModified":"2018-05-11T18:12:56+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/take-advantage-of-the-javascript-symbol-playground#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Take advantage of 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":"March 28, 2017","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":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"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":26521,"name":"Visualization","slug":"visualization","term_group":0,"term_taxonomy_id":26521,"taxonomy":"post_tag","description":"","parent":0,"count":45,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"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":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"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\/76291","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=76291"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/76291\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=76291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=76291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=76291"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=76291"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=76291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}