{"id":79711,"date":"2017-10-04T08:00:30","date_gmt":"2017-10-04T08:00:30","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/speed-up-your-javascript-development-with-autocasting\/"},"modified":"2020-01-29T01:50:21","modified_gmt":"2020-01-29T09:50:21","slug":"speed-up-your-javascript-development-with-autocasting","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/mapping\/speed-up-your-javascript-development-with-autocasting","title":{"rendered":"Speed up your JavaScript development with autocasting"},"author":7011,"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":[549072,24921,27491,31291,31301],"industry":[],"product":[36831,36601],"class_list":["post-79711","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-esrirdzurich","tag-javascript","tag-jsapi4","tag-renderers","tag-symbology","product-js-api-arcgis","product-developers"],"acf":{"short_description":"In the 4.5 release of the ArcGIS API for JavaScript, autocasting support was expanded to all renderers, symbols, and symbol layers. This ...","flexible_content":[{"acf_fc_layout":"content","content":"

In the 4.5 release<\/a> of the ArcGIS API for JavaScript, autocasting<\/a> support was expanded to all renderers<\/a>, symbols<\/a>, and symbol layers<\/a>. This means that symbols and renderers can be created programmatically without importing their modules. All you need to do is create a simple object, specify the symbol type, and set the desired properties; then the API will autocast the object to its proper class. The samples in the API documentation<\/a> were updated to consistently follow this new pattern, which cleans up the lists of required modules quite nicely.<\/p>\n

Let’s look at an example where we set a renderer with a 3D symbol, labels, and callouts on a FeatureLayer<\/a>:<\/p>\n

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

To achieve this prior to 4.5 we needed to import six modules for the renderer, symbol, symbol layer, label symbol, text symbol layer, and the callout. The full list of required module imports looks like this:<\/p>\n

require<\/span>([\r\n  \"esri\/WebScene\"<\/span>,\r\n  \"esri\/views\/SceneView\"<\/span>,\r\n  \"esri\/layers\/FeatureLayer\"<\/span>,\r\n\r\n  \"esri\/renderers\/SimpleRenderer\"<\/span>,\r\n  \"esri\/symbols\/PointSymbol3D\"<\/span>,\r\n  \"esri\/symbols\/IconSymbol3DLayer\"<\/span>,\r\n  \"esri\/symbols\/LabelSymbol3D\"<\/span>,\r\n  \"esri\/symbols\/TextSymbol3DLayer\"<\/span>,\r\n  \"esri\/symbols\/callouts\/LineCallout3D\"<\/span>,\r\n\r\n  \"dojo\/domReady!\"<\/span>\r\n], function<\/span>(\r\n  WebScene, SceneView, FeatureLayer,\r\n  SimpleRenderer, PointSymbol3D, IconSymbol3DLayer, \r\n  LabelSymbol3D, TextSymbol3DLayer, LineCallout3D\r\n){\r\n  \/\/ use modules here<\/span>\r\n});\r\n<\/pre>\n
With this new workflow, you don’t need to import modules for the renderers and the symbols. So in the example above, you only need to import the WebScene, SceneView and FeatureLayer:<\/p>\n
require<\/span>([\r\n  \"esri\/WebScene\"<\/span>,\r\n  \"esri\/views\/SceneView\"<\/span>,\r\n  \"esri\/layers\/FeatureLayer\"<\/span>,\r\n\r\n  \"dojo\/domReady!\"<\/span>\r\n], function<\/span>(\r\n  WebScene, SceneView, FeatureLayer\r\n){\r\n  \/\/ use modules here<\/span>\r\n});\r\n<\/pre>\n
But how do we actually define the renderer and symbol objects without the required modules? We do this by specifying their type in a JavaScript object, just like in the example below:<\/p>\n
\"\"<\/a><\/p>\n
If you want to play with the examples yourself, here’s the code snippet<\/a> for using classes and here’s the code snippet<\/a> for using types. These snippets were derived from the Point styles for cities<\/a> sample in the documentation.<\/p>\n
Similarly, you can now autocast all geometries<\/a> added to graphics<\/a>. For example, instead of importing esri\/geometry\/Polyline<\/code><\/a> when manually creating a line, you can skip the import and do the following:<\/p>\n
var<\/span> polylineGraphic = new<\/span> Graphic({\r\n  geometry: {\r\n    type: \"polyline\"<\/span>, \/\/ autocasts as new Polyline()<\/span>\r\n    paths: [\r\n      [-0.178<\/span>, 51.48791<\/span>, 0<\/span>],\r\n      [-0.178<\/span>, 51.48791<\/span>, 1000<\/span>]\r\n    ]\r\n  },\r\n  symbol: {\r\n    type: \"simple-line\"<\/span>, \/\/ autocasts as SimpleLineSymbol()<\/span>\r\n    color: [226<\/span>, 119<\/span>, 40<\/span>],\r\n    width: 4<\/span>\r\n  }\r\n});\r\n<\/pre>\n
When specifying object types is required<\/h2>\n
For many properties, you don’t need to specify the type of object to autocast since the API already knows the expected type. For example, you don’t need to set a type property in an object representing SimpleMarkerSymbol.outline<\/a> because the expected type for the outline of a simple marker (and all other symbols) is SimpleLineSymbol<\/a>.<\/p>\n
However, renderer, symbol, symbol layer, and geometry objects are usually passed as values to polymorphic properties, meaning the API doesn’t know how to autocast the object unless the type is explicitly specified. The snippet below demonstrates both scenarios in context:<\/p>\n
layer.renderer = {\r\n  \/\/ type must be specified since <\/span>\r\n  \/\/ 1 of 3 renderer types could be applied here<\/span>\r\n  type: \"simple\"<\/span>,  \r\n  symbol: {\r\n    \/\/ the type must also be specified for symbol properties of a renderer<\/span>\r\n    \/\/ since 1 of 10 symbol types could be used<\/span>\r\n    type: \"simple-marker\"<\/span>,  \r\n    outline: {\r\n      \/\/ Specifying type for outlines is not necessary <\/span>\r\n      \/\/ since `simple-line` is the only expected type<\/span>\r\n      style: \"dash-dot\"<\/span>,\r\n      color: [ 255<\/span>, 128<\/span>, 45<\/span> ]\r\n    }\r\n  }\r\n};\r\n<\/pre>\n
So how do you know the value of the type property for any given scenario? There are number of ways to find the required type value. You can…<\/p>\n
The Add Graphics to SceneView<\/a> and Intro to Graphics<\/a> samples were updated to follow the autocasting pattern.<\/p>\n