{"id":1058481,"date":"2021-09-22T14:35:40","date_gmt":"2021-09-22T21:35:40","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1058481"},"modified":"2024-04-12T03:59:00","modified_gmt":"2024-04-12T10:59:00","slug":"cim-symbol-builder","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder","title":{"rendered":"CIM Symbol Builder"},"author":8402,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191,22941],"tags":[96582,717771,757731,757721,761512],"industry":[],"product":[761642,36831],"class_list":["post-1058481","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-arcgis-api-for-javascript","tag-cim","tag-cimsymbol","tag-symbol","tag-whats-new-september-2021","product-platform","product-js-api-arcgis"],"acf":{"short_description":"Use the CIM Symbol Builder to design CIM symbols with a simple user interface and then copy the JSON into your custom web application.","flexible_content":[{"acf_fc_layout":"sidebar","content":"<p><em>This post was originally published in December 2020. In September 2021, the CIM Symbol Builder was updated to add support for lines and polygons and was given a UI refresh. This post has been updated to reflect the most recent version of the CIM Symbol Builder.<\/em><\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"<p>The <a href=\"https:\/\/esri.github.io\/cim-symbol-builder-js\/\">CIM Symbol Builder<\/a> allows you to visually design a point, line, or polygon <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-CIMSymbol.html\">CIM symbol<\/a> and export the symbol to a JSON string for use in a web application built with the <a href=\"https:\/\/js.arcgis.com\">ArcGIS API for JavaScript<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357592,"id":1357592,"title":"cim-symbol-builder","filename":"cim-symbol-builder-1.png","filesize":80428,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/cim-symbol-builder-4","alt":"","author":"10062","description":"","caption":"Use the CIM Symbol Builder to create custom vector symbols.","name":"cim-symbol-builder-4","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:02:15","modified":"2021-09-22 20:02:32","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":930,"height":485,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1.png","medium-width":464,"medium-height":242,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1.png","medium_large-width":768,"medium_large-height":401,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1.png","large-width":930,"large-height":485,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1.png","1536x1536-width":930,"1536x1536-height":485,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1.png","2048x2048-width":930,"2048x2048-height":485,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1-826x431.png","card_image-width":826,"card_image-height":431,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-1.png","wide_image-width":930,"wide_image-height":485}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/cim-symbol-builder-js\/"},{"acf_fc_layout":"content","content":"<p>CIMSymbols are multi-layer vector symbols for features and graphics used throughout the ArcGIS platform. They provide a lot of flexibility so that you can create very elaborate and intricate symbols. Previously, such symbols could only be achieved using pre-generated images rendered as <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-PictureMarkerSymbol.html\">PictureMarkerSymbol<\/a>s.<\/p>\n<p>CIM symbols are rendered based on the definition stored in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-CIMSymbol.html#data\">data<\/a> property. This property is a well-defined JSON string that complies with the <a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMRenderers.md#CIMSymbolReference\">CIM specification<\/a>, which can be difficult to author from scratch. The CIM Symbol Builder can be a handy tool for developers, allowing them to get immediate visual feedback when altering the CIM JSON. It also allows users to create CIM symbols by combining pre-existing symbols and modifying their attributes.<\/p>\n<h2>Select a symbol type<\/h2>\n<p>The ArcGIS API for JavaScript supports point, line, and polygon CIM symbols. Select the symbol type that you want to create from the dropdown to get started.<\/p>\n<p>&nbsp;<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357532,"id":1357532,"title":"Screen Shot 2021-09-22 at 12.42.03 PM","filename":"Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","filesize":46010,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/screen-shot-2021-09-22-at-12-42-03-pm","alt":"","author":"10062","description":"","caption":"","name":"screen-shot-2021-09-22-at-12-42-03-pm","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 19:42:49","modified":"2021-09-22 19:42:49","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":300,"height":153,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","medium-width":300,"medium-height":153,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","medium_large-width":300,"medium_large-height":153,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","large-width":300,"large-height":153,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","1536x1536-width":300,"1536x1536-height":153,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","2048x2048-width":300,"2048x2048-height":153,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","card_image-width":300,"card_image-height":153,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-12.42.03-PM-e1632342014161.png","wide_image-width":300,"wide_image-height":153}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Add a symbol layer<\/h2>\n<p>Start by adding symbol layer(s) from the symbol gallery. Click the <code>Add Symbol Layer<\/code> button and choose a symbol layer from the pre-defined symbols in the Icons, Shapes, Lines, Fills, or Custom categories.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357542,"id":1357542,"title":"Screen Shot 2021-09-21 at 2.28.01 PM","filename":"Screen-Shot-2021-09-21-at-2.28.01-PM.png","filesize":14384,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/screen-shot-2021-09-21-at-2-28-01-pm","alt":"","author":"10062","description":"","caption":"","name":"screen-shot-2021-09-21-at-2-28-01-pm","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 19:44:29","modified":"2021-09-22 19:44:29","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":344,"height":589,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM.png","medium-width":152,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM.png","medium_large-width":344,"medium_large-height":589,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM.png","large-width":344,"large-height":589,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM.png","1536x1536-width":344,"1536x1536-height":589,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM.png","2048x2048-width":344,"2048x2048-height":589,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM-272x465.png","card_image-width":272,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-21-at-2.28.01-PM.png","wide_image-width":344,"wide_image-height":589}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Or you can import your own symbol by adding symbol JSON in the custom tab of the symbol gallery.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357552,"id":1357552,"title":"custom-json","filename":"custom-json.gif","filesize":177320,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/custom-json","alt":"","author":"10062","description":"","caption":"","name":"custom-json","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 19:46:10","modified":"2021-09-22 19:46:10","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1452,"height":765,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json.gif","medium-width":464,"medium-height":244,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json.gif","medium_large-width":768,"medium_large-height":405,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json.gif","large-width":1452,"large-height":765,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json.gif","1536x1536-width":1452,"1536x1536-height":765,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json.gif","2048x2048-width":1452,"2048x2048-height":765,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json-826x435.gif","card_image-width":826,"card_image-height":435,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/custom-json.gif","wide_image-width":1452,"wide_image-height":765}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/cim-symbol-builder-js\/"},{"acf_fc_layout":"content","content":"<p>You can also import a web style from the &#8220;+&#8221; tab.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357562,"id":1357562,"title":"from-webstyle","filename":"from-webstyle.gif","filesize":184055,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/from-webstyle","alt":"","author":"10062","description":"","caption":"","name":"from-webstyle","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 19:46:31","modified":"2021-09-22 19:46:31","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":360,"height":506,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle.gif","medium-width":186,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle.gif","medium_large-width":360,"medium_large-height":506,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle.gif","large-width":360,"large-height":506,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle.gif","1536x1536-width":360,"1536x1536-height":506,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle.gif","2048x2048-width":360,"2048x2048-height":506,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle-331x465.gif","card_image-width":331,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/from-webstyle.gif","wide_image-width":360,"wide_image-height":506}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/cim-symbol-builder-js\/"},{"acf_fc_layout":"content","content":"<h2>Edit symbol layer properties<\/h2>\n<p>Edit the properties of the symbol layers until you have your desired symbol. There are many supported symbol layers in the CIM Symbol Builder &#8211; each will have different properties that can be modified, depending on the symbol type selected.<\/p>\n<p>Marker symbol layers<\/p>\n<ul>\n<li><a href=\"#cimvectormarker\">CIMVectorMarker<\/a><\/li>\n<li><a href=\"#cimpicturemarker\">CIMPictureMarker<\/a><\/li>\n<li><a href=\"#text\">Text<\/a><\/li>\n<\/ul>\n<p>Stroke symbol layers<\/p>\n<ul>\n<li><a href=\"#cimsolidstroke\">CIMSolidStroke<\/a><\/li>\n<li><a href=\"#cimpicturestroke\">CIMPictureStroke<\/a><\/li>\n<\/ul>\n<p>Fill symbol layers<\/p>\n<ul>\n<li><a href=\"#cimsolid-picture-fill\">CIMSolidFill<\/a><\/li>\n<li><a href=\"#cimsolid-picture-fill\">CIMPictureFill<\/a><\/li>\n<li><a href=\"#cimhatchfill\">CIMHatchFill<\/a><\/li>\n<\/ul>\n<h3>Marker symbol layers<\/h3>\n<p><a name=\"cimvectormarker\"><\/a><\/p>\n<p><strong>CIMVectorMarker<\/strong><\/p>\n<p>All of the symbol layers under the &#8220;Icons&#8221; and &#8220;Shapes&#8221; tabs in the pre-defined symbol gallery are <a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMSymbols.md#cimvectormarker\">CIMVectorMarker<\/a> symbol layers. Click on the symbol layer name to access the properties to edit. You will be able to change properties like size, rotation, anchor point, and offset.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357572,"id":1357572,"title":"edit-property-vector-marker","filename":"edit-property-vector-marker.png","filesize":52391,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/edit-property-vector-marker","alt":"","author":"10062","description":"","caption":"Click the symbol layer to edit its associated properties. In this image, we rotate the original symbol by 90 degrees.","name":"edit-property-vector-marker","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 19:51:22","modified":"2021-09-22 19:52:18","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":809,"height":694,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker.png","medium-width":304,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker.png","medium_large-width":768,"medium_large-height":659,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker.png","large-width":809,"large-height":694,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker.png","1536x1536-width":809,"1536x1536-height":694,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker.png","2048x2048-width":809,"2048x2048-height":694,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker-542x465.png","card_image-width":542,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/edit-property-vector-marker.png","wide_image-width":809,"wide_image-height":694}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/cim-symbol-builder-js\/"},{"acf_fc_layout":"content","content":"<p>Using the arrow next to the symbol layer name in the symbol editor, you can expand the layers to get access to embedded layers. From there, you will be able to access additional properties that you can customize, such as the color and opacity of the embedded <a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMSymbols.md#cimsolidfill\">CIMSolidFill<\/a> or <a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMSymbols.md#cimsolidstroke\">CIMSolidStroke<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357602,"id":1357602,"title":"change-color","filename":"change-color.gif","filesize":117129,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/change-color","alt":"","author":"10062","description":"","caption":"","name":"change-color","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:03:00","modified":"2021-09-22 20:03:00","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":266,"height":506,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color.gif","medium-width":137,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color.gif","medium_large-width":266,"medium_large-height":506,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color.gif","large-width":266,"large-height":506,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color.gif","1536x1536-width":266,"1536x1536-height":506,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color.gif","2048x2048-width":266,"2048x2048-height":506,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color-244x465.gif","card_image-width":244,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/change-color.gif","wide_image-width":266,"wide_image-height":506}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/cim-symbol-builder-js\/"},{"acf_fc_layout":"content","content":"<p><a name=\"cimpicturemarker\"><\/a><\/p>\n<p><strong>CIMPictureMarker<\/strong><\/p>\n<p><a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMSymbols.md#cimpicturemarker\">CIMPictureMarker<\/a> allows you to add a picture as a symbol layer in your symbol. We recommend using an image data URI for the URL property of a CIMPictureMarker to avoid any potential cross domain (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CORS\">CORS<\/a>) issues. You can add a CIMPictureMarker symbol from the &#8220;Custom&#8221; tab in the symbol library.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357612,"id":1357612,"title":"picturemarker","filename":"picturemarker.gif","filesize":250870,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/picturemarker","alt":"","author":"10062","description":"","caption":"","name":"picturemarker","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:03:33","modified":"2021-09-22 20:03:33","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":266,"height":506,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker.gif","medium-width":137,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker.gif","medium_large-width":266,"medium_large-height":506,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker.gif","large-width":266,"large-height":506,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker.gif","1536x1536-width":266,"1536x1536-height":506,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker.gif","2048x2048-width":266,"2048x2048-height":506,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker-244x465.gif","card_image-width":244,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/picturemarker.gif","wide_image-width":266,"wide_image-height":506}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><a name=\"text\"><\/a><\/p>\n<p><strong>Text<\/strong><\/p>\n<p>A text layer can be considered as a special type of <a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMSymbols.md#cimvectormarker\">CIMVectorMarker<\/a> layer &#8211; it is an embedded <a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMSymbols.md#cimtextsymbol\">text symbol<\/a> in a <a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMSymbols.md#cimmarkergraphic\">CIMMarkerGraphic<\/a> of a <a href=\"https:\/\/github.com\/Esri\/cim-spec\/blob\/master\/docs\/v2\/CIMSymbols.md#cimvectormarker\">CIMVectorMarker<\/a>. To edit the properties of the text symbol, you must click the CIMMarkerGraphic to access its properties. You can add a text layer from the &#8220;Custom&#8221; tab in the symbol gallery.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357622,"id":1357622,"title":"text-symbol","filename":"text-symbol.png","filesize":25836,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/text-symbol","alt":"","author":"10062","description":"","caption":"Editing the text properties takes place on the CIMMarkerGraphic.","name":"text-symbol","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:04:05","modified":"2021-09-22 20:04:25","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":366,"height":692,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol.png","medium-width":138,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol.png","medium_large-width":366,"medium_large-height":692,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol.png","large-width":366,"large-height":692,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol.png","1536x1536-width":366,"1536x1536-height":692,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol.png","2048x2048-width":366,"2048x2048-height":692,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol-246x465.png","card_image-width":246,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/text-symbol.png","wide_image-width":366,"wide_image-height":692}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/cim-symbol-builder-js\/"},{"acf_fc_layout":"content","content":"<p><strong>Marker symbols within a line or polygon<\/strong><\/p>\n<p>If a marker symbol is added when Line or Polygon is selected as the symbol type, then marker placement properties will appear that will allow you to configure how the marker is placed in the line or polygon symbol.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357632,"id":1357632,"title":"markerPlacement","filename":"markerPlacement.gif","filesize":144332,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/markerplacement","alt":"","author":"10062","description":"","caption":"","name":"markerplacement","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:05:28","modified":"2021-09-22 20:05:28","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":266,"height":506,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement.gif","medium-width":137,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement.gif","medium_large-width":266,"medium_large-height":506,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement.gif","large-width":266,"large-height":506,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement.gif","1536x1536-width":266,"1536x1536-height":506,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement.gif","2048x2048-width":266,"2048x2048-height":506,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement-244x465.gif","card_image-width":244,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/markerPlacement.gif","wide_image-width":266,"wide_image-height":506}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Stroke symbol layers<\/h3>\n<p>There are two types of stroke symbol layers that can be used with a line or polygon symbol: CIMSolidStroke and CIMPictureStroke. These symbol layers will not be visible when added to a point symbol. If added to a polygon symbol, they will display as the outline around the polygon.<br \/>\n<a name=\"cimsolidstroke\"><\/a><br \/>\n<strong>CIMSolidStroke<\/strong><\/p>\n<p>The CIMSolidStroke symbol layer is pretty straightforward \u2013 it creates a stroke symbol of a solid color. You can update the color, opacity, width, cap style, and join style.<\/p>\n<p>&nbsp;<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357642,"id":1357642,"title":"solid-stroke","filename":"solid-stroke.png","filesize":10538,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/solid-stroke","alt":"","author":"10062","description":"","caption":"","name":"solid-stroke","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:07:49","modified":"2021-09-22 20:07:49","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":368,"height":696,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke.png","medium-width":138,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke.png","medium_large-width":368,"medium_large-height":696,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke.png","large-width":368,"large-height":696,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke.png","1536x1536-width":368,"1536x1536-height":696,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke.png","2048x2048-width":368,"2048x2048-height":696,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke-246x465.png","card_image-width":246,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/solid-stroke.png","wide_image-width":368,"wide_image-height":696}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><a name=\"cimpicturestroke\"><\/a><br \/>\n<strong>CIMPictureStroke<\/strong><\/p>\n<p>CIMPictureStroke is similar to the CIMPictureMarker symbol, except it will draw the picture provided continuously along the line.<\/p>\n<p><strong>Geometric Effects<\/strong><\/p>\n<p>Both of these symbol layers support geometric effects, which transform the style of your stroke symbol. To add an effect, scroll down to the bottom of the layer properties panel, select the effect you want from the dropdown, and click \u201cAdd effect\u201d. Once the effect is added, click the down arrow next to the effect name to update the properties. Beneath the properties, you also have the option to delete the effect. You can add multiple effects if you want \u2013 just play around with it and see how it looks!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357652,"id":1357652,"title":"stroke-effect","filename":"stroke-effect.gif","filesize":582290,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/stroke-effect","alt":"","author":"10062","description":"","caption":"","name":"stroke-effect","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:08:57","modified":"2021-09-22 20:08:57","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":266,"height":506,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect.gif","medium-width":137,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect.gif","medium_large-width":266,"medium_large-height":506,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect.gif","large-width":266,"large-height":506,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect.gif","1536x1536-width":266,"1536x1536-height":506,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect.gif","2048x2048-width":266,"2048x2048-height":506,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect-244x465.gif","card_image-width":244,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/stroke-effect.gif","wide_image-width":266,"wide_image-height":506}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h3>Fill symbol layers<\/h3>\n<p>There are three types of fill symbol layers that can be added to a polygon symbol: CIMSolidFill, CIMPictureFill, and CIMHatchFill. These symbol layers will not display for a point or line symbol.<br \/>\n<a name=\"cimsolid-picture-fill\"><\/a><br \/>\n<strong>CIMSolidFill &amp; CIMPictureFill<\/strong><\/p>\n<p>CIMSolidFill will display a solid color inside the polygon graphic. CIMPictureFill will fill the polygon with a picture. These are similar to the other symbol layer types for stroke symbol layers that we just discussed.<br \/>\n<a name=\"cimhatchfill\"><\/a><br \/>\n<strong>CIMHatchFill<\/strong><\/p>\n<p>CIMHatchFill is unique though \u2013 this allows you to define a line symbol that will fill the polygon graphic repeatedly at a defined rotation and separation. You can also update the line symbol by changing the color, width, adding effects, etc.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357662,"id":1357662,"title":"hatch-fill","filename":"hatch-fill.gif","filesize":714106,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/hatch-fill","alt":"","author":"10062","description":"","caption":"","name":"hatch-fill","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:10:11","modified":"2021-09-22 20:10:11","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":266,"height":506,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill.gif","medium-width":137,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill.gif","medium_large-width":266,"medium_large-height":506,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill.gif","large-width":266,"large-height":506,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill.gif","1536x1536-width":266,"1536x1536-height":506,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill.gif","2048x2048-width":266,"2048x2048-height":506,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill-244x465.gif","card_image-width":244,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/hatch-fill.gif","wide_image-width":266,"wide_image-height":506}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Similar to the stroke symbol layers, all fill symbol layer types also support effects.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>View your symbol on the map<\/h2>\n<p>You can test your symbol on the map by clicking the <code>Apply to feature layer<\/code> button. Based on the symbol type you have selected, this will apply the symbol you created to the renderer of the corresponding point, line, or polygon feature layer.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1357672,"id":1357672,"title":"add-to-featurelayer","filename":"add-to-featurelayer.gif","filesize":9213454,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\/add-to-featurelayer","alt":"","author":"10062","description":"","caption":"Since \"polygon\" is the selected feature type, this symbol will be applied to the polygon feature layer in the map.","name":"add-to-featurelayer","status":"inherit","uploaded_to":1058481,"date":"2021-09-22 20:11:55","modified":"2021-09-22 20:12:30","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1200,"height":567,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer.gif","medium-width":464,"medium-height":219,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer.gif","medium_large-width":768,"medium_large-height":363,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer.gif","large-width":1200,"large-height":567,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer.gif","1536x1536-width":1200,"1536x1536-height":567,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer.gif","2048x2048-width":1200,"2048x2048-height":567,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer-826x390.gif","card_image-width":826,"card_image-height":390,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/add-to-featurelayer.gif","wide_image-width":1200,"wide_image-height":567}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/cim-symbol-builder-js\/"},{"acf_fc_layout":"content","content":"<h3>Get the symbol JSON<\/h3>\n<p>Once you are satisfied with the way your symbol looks, you can copy out the symbol JSON to add it to your own app! Use the <code>Get symbol JSON<\/code> button to see the symbol&#8217;s JSON. Then, click the <code>COPY JSON<\/code> button to quickly copy the JSON to your clipboard to use it in your app. The symbol JSON should be applied to the <code>CIMSymbol.data.symbol<\/code> property, like this:<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">\r\n<span style=\"color: #998; font-style: italic;\">\/\/ Modules required: <\/span>\r\n<span style=\"color: #998; font-style: italic;\">\/\/ esri\/symbols\/CIMSymbol<\/span>\r\n\r\n<span style=\"color: #333; font-weight: bold;\">var<\/span> symbol = <span style=\"color: #333; font-weight: bold;\">new<\/span> CIMSymbol({\r\n    data: {\r\n        type: <span style=\"color: #d14;\">\"CIMSymbolReference\"<\/span>,\r\n        symbol: {} <span style=\"color: #998; font-style: italic;\">\/\/ ENTER SYMBOL JSON HERE<\/span>\r\n    }\r\n});\r\n<\/code><\/pre>\n<p>You can test the symbol JSON you created in this\u00a0<a href=\"https:\/\/codepen.io\/annefitz\/pen\/abwVRyE\">Codepen<\/a>. Simply replace the value of <code>pointSymbolJSON<\/code> (line 37), <code>lineSymbolJSON<\/code> (line 38), or <code>polygonSymbolJSON<\/code> (line 39) with your symbol JSON.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Final notes<\/h2>\n<p>In most cases SimpleMarkerSymbol, PictureMarkerSymbol, or other familiar and easy-to-use symbols will satisfy your requirements. However, some of your apps may require elaborate symbols that cannot be rendered with these traditional symbols. That&#8217;s where CIM symbols come in. This article introduces a visual editor for CIM symbols that saves you the effort of learning the CIM spec and editing raw JSON. We can&#8217;t wait to see the awesome symbols that you create using the CIM Symbol Builder!<\/p>\n<p>&nbsp;<\/p>\n"}],"authors":[{"ID":10062,"user_firstname":"Anne","user_lastname":"Fitz","nickname":"Anne Fitz","user_nicename":"afitz","display_name":"Anne Fitz","user_email":"afitz@esri.com","user_url":"","user_registered":"2019-10-15 00:07:57","user_description":"Anne Fitz is a Senior Product Engineer at Esri, working on the ArcGIS Maps SDK for JavaScript and ArcGIS Arcade. Her expertise primarily focuses on dynamic vector symbology (CIM symbols), data visualization, animation, ArcGIS Arcade integration, and widgets.  Anne\u2019s primary goal is to help developers succeed in building geospatial applications, providing them with the tools and knowledge they need to bring their ideas to life. She has been with Esri for over five years.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/2B6A1033-465x465.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"},{"ID":8402,"user_firstname":"Fang","user_lastname":"Li","nickname":"Fang","user_nicename":"fli","display_name":"Fang Li","user_email":"FLi@esri.com","user_url":"","user_registered":"2018-09-24 21:16:12","user_description":"Fang is a product engineer on the ArcGIS API for JavaScript team.","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"}],"related_articles":[{"ID":913801,"post_author":"10062","post_date":"2020-07-24 11:16:29","post_date_gmt":"2020-07-24 18:16:29","post_content":"","post_title":"Create points, lines, and polygons using CIMSymbols","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"create-points-lines-and-polygons-using-cimsymbols","to_ping":"","pinged":"","post_modified":"2020-07-31 09:39:01","post_modified_gmt":"2020-07-31 16:39:01","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=913801","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"4","filter":"raw"},{"ID":1024331,"post_author":"6561","post_date":"2020-10-05 09:00:07","post_date_gmt":"2020-10-05 16:00:07","post_content":"","post_title":"Visualize electoral swing using composite symbols","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"visualize-electoral-swing-using-composite-symbols","to_ping":"","pinged":"","post_modified":"2020-10-02 17:35:07","post_modified_gmt":"2020-10-03 00:35:07","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1024331","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":634052,"post_author":"6751","post_date":"2019-10-11 17:42:04","post_date_gmt":"2019-10-12 00:42:04","post_content":"","post_title":"Reference Size Maps: Learning from the '60s with a new mapping theme","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"reference-size-maps-bringing-back-the-60s","to_ping":"","pinged":"","post_modified":"2024-08-06 15:34:43","post_modified_gmt":"2024-08-06 22:34:43","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=634052","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1353412,"post_author":"4271","post_date":"2021-09-22 14:38:30","post_date_gmt":"2021-09-22 21:38:30","post_content":"","post_title":"What's new in the ArcGIS API for JavaScript (version 4.21)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-the-arcgis-api-for-javascript-version-4-21","to_ping":"","pinged":"","post_modified":"2024-04-12 03:58:39","post_modified_gmt":"2024-04-12 10:58:39","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1353412","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"2","filter":"raw"},{"ID":1353582,"post_author":"10062","post_date":"2021-09-22 14:37:53","post_date_gmt":"2021-09-22 21:37:53","post_content":"","post_title":"Performance improvements in version 4.21 of the ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"performance-improvements-for-jsapi-4-21","to_ping":"","pinged":"","post_modified":"2021-09-22 14:37:33","post_modified_gmt":"2021-09-22 21:37:33","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1353582","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/Screen-Shot-2021-09-22-at-1.16.59-PM.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-builder-banner.png"},"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>CIM Symbol Builder: Create custom symbols with the ArcGIS API for JavaScript<\/title>\n<meta name=\"description\" content=\"Use the CIM Symbol Builder to design CIM symbols with a simple user interface and then copy the JSON into your custom web application.\" \/>\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\/js-api-arcgis\/developers\/cim-symbol-builder\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CIM Symbol Builder\" \/>\n<meta property=\"og:description\" content=\"Use the CIM Symbol Builder to design CIM symbols with a simple user interface and then copy the JSON into your custom web application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\" \/>\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=\"2024-04-12T10:59:00+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\/js-api-arcgis\/developers\/cim-symbol-builder#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\"},\"author\":{\"name\":\"Fang Li\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/89bbef8a1831905b9df22d16ebc575ae\"},\"headline\":\"CIM Symbol Builder\",\"datePublished\":\"2021-09-22T21:35:40+00:00\",\"dateModified\":\"2024-04-12T10:59:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\"},\"wordCount\":3,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS API for JavaScript\",\"CIM\",\"CIMSymbol\",\"symbol\",\"what's new september 2021\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\",\"name\":\"CIM Symbol Builder: Create custom symbols with the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-09-22T21:35:40+00:00\",\"dateModified\":\"2024-04-12T10:59:00+00:00\",\"description\":\"Use the CIM Symbol Builder to design CIM symbols with a simple user interface and then copy the JSON into your custom web application.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CIM Symbol Builder\"}]},{\"@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\/89bbef8a1831905b9df22d16ebc575ae\",\"name\":\"Fang Li\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&d=blank&r=g\",\"caption\":\"Fang Li\"},\"description\":\"Fang is a product engineer on the ArcGIS API for JavaScript team.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/fli\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CIM Symbol Builder: Create custom symbols with the ArcGIS API for JavaScript","description":"Use the CIM Symbol Builder to design CIM symbols with a simple user interface and then copy the JSON into your custom web application.","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\/js-api-arcgis\/developers\/cim-symbol-builder","og_locale":"en_US","og_type":"article","og_title":"CIM Symbol Builder","og_description":"Use the CIM Symbol Builder to design CIM symbols with a simple user interface and then copy the JSON into your custom web application.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T10:59:00+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\/js-api-arcgis\/developers\/cim-symbol-builder#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder"},"author":{"name":"Fang Li","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/89bbef8a1831905b9df22d16ebc575ae"},"headline":"CIM Symbol Builder","datePublished":"2021-09-22T21:35:40+00:00","dateModified":"2024-04-12T10:59:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder"},"wordCount":3,"commentCount":1,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS API for JavaScript","CIM","CIMSymbol","symbol","what's new september 2021"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder","name":"CIM Symbol Builder: Create custom symbols with the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-09-22T21:35:40+00:00","dateModified":"2024-04-12T10:59:00+00:00","description":"Use the CIM Symbol Builder to design CIM symbols with a simple user interface and then copy the JSON into your custom web application.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"CIM Symbol Builder"}]},{"@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\/89bbef8a1831905b9df22d16ebc575ae","name":"Fang Li","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&d=blank&r=g","caption":"Fang Li"},"description":"Fang is a product engineer on the ArcGIS API for JavaScript team.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/fli"}]}},"text_date":"September 22, 2021","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/cim-symbol-builder","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-builder-banner.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":96582,"name":"ArcGIS API for JavaScript","slug":"arcgis-api-for-javascript","term_group":0,"term_taxonomy_id":96582,"taxonomy":"post_tag","description":"","parent":0,"count":58,"filter":"raw"},{"term_id":717771,"name":"CIM","slug":"cim","term_group":0,"term_taxonomy_id":717771,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"},{"term_id":757731,"name":"CIMSymbol","slug":"cimsymbol","term_group":0,"term_taxonomy_id":757731,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":757721,"name":"symbol","slug":"symbol","term_group":0,"term_taxonomy_id":757721,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":761512,"name":"what's new september 2021","slug":"whats-new-september-2021","term_group":0,"term_taxonomy_id":761512,"taxonomy":"post_tag","description":"","parent":0,"count":27,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":426,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2703,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":215,"filter":"raw"},{"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":363,"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\/1058481","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\/8402"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1058481"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1058481\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1058481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1058481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1058481"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1058481"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1058481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}