{"id":913801,"date":"2020-07-24T11:16:29","date_gmt":"2020-07-24T18:16:29","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=913801"},"modified":"2020-07-31T09:39:01","modified_gmt":"2020-07-31T16:39:01","slug":"create-points-lines-and-polygons-using-cimsymbols","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-points-lines-and-polygons-using-cimsymbols","title":{"rendered":"Create points, lines, and polygons using CIMSymbols"},"author":10062,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[717771,38851,27491,31301,667481],"industry":[],"product":[36831],"class_list":["post-913801","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-cim","tag-developers","tag-jsapi4","tag-symbology","tag-whats-new-june-2020","product-js-api-arcgis"],"acf":{"short_description":"Use CIMSymbols in the ArcGIS API for JavaScript to create custom vector point, line, and polygon symbols.","flexible_content":[{"acf_fc_layout":"content","content":"

As of the 4.16 release<\/a>, the ArcGIS API for JavaScript now supports point, line and polygon CIM symbols<\/a> in 2D MapViews<\/a>. CIM symbols are high-quality, scalable vector symbols for displaying features and graphics that are precisely displayed at any zoom level without blurriness. The best thing about CIM symbols is that they are completely customizable. They can incorporate multiple symbol layers and can be updated dynamically.<\/p>\n

Quick links:
\nWhat is CIM<\/a> | How is CIM used<\/a> | Examples<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":946201,"id":946201,"title":"Screen Shot 2020-07-24 at 10.25.09 AM","filename":"Screen-Shot-2020-07-24-at-10.25.09-AM-scaled.png","filesize":1661730,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-points-lines-and-polygons-using-cimsymbols\/screen-shot-2020-07-24-at-10-25-09-am","alt":"CIM lines and polygons","author":"10062","description":"","caption":"Some examples of lines and polygons you can create in the ArcGIS API for JavaScript using the CIMSymbol class.","name":"screen-shot-2020-07-24-at-10-25-09-am","status":"inherit","uploaded_to":913801,"date":"2020-07-24 17:28:06","modified":"2020-07-24 18:07:35","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":2560,"height":1475,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-scaled.png","medium-width":453,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-scaled.png","medium_large-width":768,"medium_large-height":443,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-scaled.png","large-width":1874,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-1536x885.png","1536x1536-width":1536,"1536x1536-height":885,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-2048x1180.png","2048x2048-width":2048,"2048x2048-height":1180,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-807x465.png","card_image-width":807,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-24-at-10.25.09-AM-1875x1080.png","wide_image-width":1875,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/annelfitz.github.io\/blog\/CIM\/lines-and-polygons.html"},{"acf_fc_layout":"content","content":"

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

What is “CIM”?<\/h2>\n

CIM<\/a> is the Esri Cartographic Information Model, which is a map content specification used to persist and transfer cartographic descriptions of GIS datasets. CIM is already being used to create symbology in ArcGIS Pro, so we wanted to bring that advanced symbology to the ArcGIS API for JavaScript. To learn more about CIM and how it works, check out the CIM Specification<\/a>.<\/a><\/p>\n

How is CIM used in the ArcGIS API for JavaScript?<\/h2>\n

CIMSymbol<\/h3>\n

A CIMSymbol<\/a> is created by setting the CIMSymbolReference<\/a> JSON on the CIMSymbol.data<\/code> property. While there are examples for how to create CIM symbols in the API Reference<\/a> and Sample Code<\/a> in the ArcGIS API for JavaScript documentation, the bulk of the documentation lies within the CIM Specification<\/a>.<\/p>\n

\/\/ require([\"esri\/symbols\/CIMSymbol\"], function(CIMSymbol)<\/span>\r\nconst<\/span> cimSymbol = new<\/span> CIMSymbol({\r\n   data: {\r\n      type: \"CIMSymbolReference\"<\/span>,\r\n      symbol: {\r\n         type: \"CIMLineSymbol\"<\/span>,\r\n         symbolLayers: [{ ... }]\r\n      },\r\n      primitiveOverrides: [{ ... }]\r\n   }\r\n});<\/code><\/pre>\n
CIMSymbol.data.symbol<\/strong><\/p>\n
symbolLayers<\/code> are the building blocks of CIM symbols, they combine to make rich graphical depictions. There are three main types of symbol layers (similar to the simple symbols provided in the API): CIMMarker, CIMStroke, and CIMFill. A SimpleLineSymbol in the API would be equivalent to a CIMSolidStroke<\/a> symbol layer, a SimpleFillSymbol would be equivalent to CIMSolidFill<\/a>, and so on. CIMSymbol is unique because you can combine symbol layers to create custom symbols. For example, you could create a CIMLineSymbol with a CIMSolidStroke and CIMMarker symbol to place markers along a line.<\/p>\n
Note<\/strong>: CIMLineSymbol<\/a>\u00a0and\u00a0CIMPolygonSymbol<\/a>\u00a0are not currently supported in a 3D\u00a0SceneView<\/a>.<\/em><\/p>\n
CIMSymbol.data.primitiveOverrides<\/strong><\/p>\n
The primitiveOverrides<\/a><\/code> property on CIMSymbolReference allows you to use an Arcade<\/a> expression to override specific properties on the symbol.<\/p>\n
WebStyleSymbols<\/h3>\n
WebStyleSymbols<\/a> contain a library of pre-defined 2D CIM symbols that you can conveniently reference in your apps. Visit the Esri Web Style Symbols (2D)<\/a> guide page to see what WebStyleSymbols are currently available in the JavaScript API. The CIM JSON is available for each WebStyleSymbol in the guide page.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":942651,"id":942651,"title":"Screen Shot 2020-07-21 at 1.11.48 PM","filename":"Screen-Shot-2020-07-21-at-1.11.48-PM.png","filesize":74813,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-points-lines-and-polygons-using-cimsymbols\/screen-shot-2020-07-21-at-1-11-48-pm","alt":"WebStyleSymbol to CIM","author":"10062","description":"","caption":"Using the Web Style Symbol (2D) guide page, you can easily copy the CIM JSON for the symbol.","name":"screen-shot-2020-07-21-at-1-11-48-pm","status":"inherit","uploaded_to":913801,"date":"2020-07-21 20:12:01","modified":"2020-07-21 20:13:02","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":1628,"height":1174,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM.png","medium-width":362,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM.png","medium_large-width":768,"medium_large-height":554,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM.png","large-width":1498,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM-1536x1108.png","1536x1536-width":1536,"1536x1536-height":1108,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM.png","2048x2048-width":1628,"2048x2048-height":1174,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM-645x465.png","card_image-width":645,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-21-at-1.11.48-PM-1498x1080.png","wide_image-width":1498,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-web-style-symbols-2d\/"},{"acf_fc_layout":"content","content":"
<\/a><\/p>\n
Let’s see the CIMSymbol in action!<\/h2>\n
Now that we’ve learned more about what CIM is and how it’s used in the ArcGIS API for JavaScript, let’s see what it looks like when we use CIM symbols in an application.<\/p>\n
Arrows along a line<\/h3>\n
Let’s say we want to symbolize one-way streets, using arrows to designate the direction of traffic flow. Previously, this would be incredibly difficult to accomplish, but now (as of the 4.16 release), we can create a CIMLineSymbol with two symbol layers – a stroke symbol layer to show the location of the streets, and another symbol layer to place arrow markers on top of the line. Let’s take a look at what that looks like:<\/p>\n
CIMSymbol.data = {\r\n   type: \"CIMSymbolReference\"<\/span>,\r\n   symbol: {\r\n      type: \"CIMLineSymbol\"<\/span>,\r\n      symbolLayers: [\r\n        {\r\n           \/\/ black 1px line symbol<\/span>\r\n           type: \"CIMSolidStroke\"<\/span>,\r\n           enable: true<\/span>,\r\n           width: 1<\/span>,\r\n           color: [0<\/span>, 0<\/span>, 0<\/span>, 255<\/span>]\r\n        },\r\n        {\r\n           \/\/ arrow symbol<\/span>\r\n           type: \"CIMVectorMarker\"<\/span>,\r\n           enable: true<\/span>,\r\n           size: 5<\/span>,\r\n           markerPlacement: {\r\n              \/\/ places same size markers along the line<\/span>\r\n              type: \"CIMMarkerPlacementAlongLineSameSize\"<\/span>, \r\n              endings: \"WithMarkers\"<\/span>,\r\n              placementTemplate: [19.5<\/span>] \/\/ determines space between each arrow<\/span>\r\n           },\r\n           frame: {\r\n              xmin: -5<\/span>,\r\n              ymin: -5<\/span>,\r\n              xmax: 5<\/span>,\r\n              ymax: 5<\/span>\r\n           },\r\n           markerGraphics: [\r\n              {\r\n                 type: \"CIMMarkerGraphic\"<\/span>,\r\n                 geometry: {\r\n                    rings: [\r\n                      [\r\n                        [-8<\/span>, -5.47<\/span>],\r\n                        [-8<\/span>, 5.6<\/span>],\r\n                        [1.96<\/span>, -0.03<\/span>],\r\n                        [-8<\/span>, -5.47<\/span>]\r\n                      ]\r\n                    ]\r\n                 },\r\n                 symbol: {\r\n                    \/\/ black fill for the arrow symbol<\/span>\r\n                    type: \"CIMPolygonSymbol\"<\/span>,\r\n                    symbolLayers: [\r\n                       {\r\n                          type: \"CIMSolidFill\"<\/span>,\r\n                          enable: true<\/span>,\r\n                          color: [0<\/span>, 0<\/span>, 0<\/span>, 255<\/span>]\r\n                       }\r\n                    ]\r\n                 }\r\n              }\r\n           ]\r\n        }\r\n      ]\r\n   }\r\n}\r\n<\/code><\/pre>\n
The resulting symbology on the layer will look like this:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":941241,"id":941241,"title":"Screen Shot 2020-07-17 at 10.36.38 AM","filename":"Screen-Shot-2020-07-17-at-10.36.38-AM.png","filesize":209864,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-points-lines-and-polygons-using-cimsymbols\/screen-shot-2020-07-17-at-10-36-38-am","alt":"CIM arrows along a line","author":"10062","description":"","caption":"A CIMSymbol is used to represent traffic flow as a black line with an arrow head.","name":"screen-shot-2020-07-17-at-10-36-38-am","status":"inherit","uploaded_to":913801,"date":"2020-07-17 17:36:39","modified":"2020-07-23 17:52:02","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":2008,"height":1100,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM.png","medium-width":464,"medium-height":254,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM.png","medium_large-width":768,"medium_large-height":421,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM.png","large-width":1920,"large-height":1052,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM-1536x841.png","1536x1536-width":1536,"1536x1536-height":841,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM.png","2048x2048-width":2008,"2048x2048-height":1100,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM-826x452.png","card_image-width":826,"card_image-height":452,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-10.36.38-AM-1920x1052.png","wide_image-width":1920,"wide_image-height":1052}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/cim-line-arrows\/index.html"},{"acf_fc_layout":"content","content":"
More examples<\/h3>\n
COVID-19 Cases over 14 Days<\/a>:\u00a0<\/strong>This app creates a CIMPointSymbol for each county based on the number of COVID-19 cases reported in the past 14 days. The size and geometry of the CIMSymbol is determined based on the number of COVID-19 cases, creating an interesting “spike” visualization highlighting regions with the largest outbreaks.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":941451,"id":941451,"title":"Screen Shot 2020-07-17 at 11.34.31 AM","filename":"Screen-Shot-2020-07-17-at-11.34.31-AM-e1595011669152.png","filesize":953386,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-e1595011669152.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/create-points-lines-and-polygons-using-cimsymbols\/screen-shot-2020-07-17-at-11-34-31-am","alt":"Covid-19 CIM","author":"10062","description":"","caption":"This app uses CIMSymbols to show the number of COVID-19 cases per 1k people in the past 14 days.","name":"screen-shot-2020-07-17-at-11-34-31-am","status":"inherit","uploaded_to":913801,"date":"2020-07-17 18:45:56","modified":"2020-07-17 18:47: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":1000,"height":605,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-e1595011669152.png","medium-width":431,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-e1595011669152.png","medium_large-width":768,"medium_large-height":465,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-e1595011669152.png","large-width":1000,"large-height":605,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-1536x930.png","1536x1536-width":1536,"1536x1536-height":930,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-e1595011669152.png","2048x2048-width":1000,"2048x2048-height":605,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-768x465.png","card_image-width":768,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/07\/Screen-Shot-2020-07-17-at-11.34.31-AM-1784x1080.png","wide_image-width":1784,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/annelfitz.github.io\/blog\/CIM\/covid19.html"},{"acf_fc_layout":"content","content":"
Lake Tahoe – Tahoe Rim Trail<\/a>:<\/strong> This app uses CIM symbols in several different ways.<\/p>\n
The\u00a0symbol<\/a><\/code>\u00a0property on CIMSymbolReference can be of type CIMPointSymbol, CIMLineSymbol, CIMPolygonSymbol, or CIMTextSymbol. Each symbol is made up of one or more\u00a0symbolLayers<\/a><\/code>. CIMTextSymbol<\/a> is an exception\u2014it has native properties but no symbol layers.<\/p>\n