{"id":561822,"date":"2019-07-08T06:28:22","date_gmt":"2019-07-08T13:28:22","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=561822"},"modified":"2020-01-29T01:40:29","modified_gmt":"2020-01-29T09:40:29","slug":"code-snippets-arcgis-api-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/mapping\/code-snippets-arcgis-api-javascript","title":{"rendered":"Useful code snippets for ArcGIS API for JavaScript"},"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":[43161,549072,24921],"industry":[],"product":[36831,36601],"class_list":["post-561822","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-developer","tag-esrirdzurich","tag-javascript","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Discover how to use code snippets to speed up your ArcGIS API for JavaScript web app development.","flexible_content":[{"acf_fc_layout":"content","content":"

If you\u2019re creating web applications with ArcGIS API for JavaScript then you probably ran into those situations where you couldn\u2019t remember how to set that UniqueValueRenderer<\/a>. So you went to the documentation, copy pasted the example code and then customized it for your data. In this blog post we want to show you a workflow where you make use of code snippets to avoid having to leave the editor and also to write less code (we created a plugin with code snippets for Visual Studio Code, but you can actually create your own code snippets for any other editor).<\/p>\n

Another workflow where code snippets come in handy, is when debugging. Besides setting breakpoints and pausing on exceptions (we mainly use Google Chrome for debugging), you can also get access to the view, navigate the layers in your map, get the camera position in 3D or figure out when everything was loaded with just a few code snippets in the console.<\/p>\n

So let\u2019s get started!<\/p>\n"},{"acf_fc_layout":"content","content":"

Development code snippets<\/h2>\n

These are the code snippets that you use during development, representing boilerplate code, a verbose syntax that you can never remember, or maybe just a simple syntax that you have to repeat over and over again in your code (ok, that might be subject to some refactoring if you have to repeat it that often\u2026).<\/p>\n

So let me show you an example. Something I can never remember is the code for adding labels in 3D. Instead of having to memorize all the properties that I need to set on the LabelClass<\/a> and then type them, I can just type a prefix like labeling3d<\/code>, press Tab<\/code> and the code snippet will show up with placeholders for my custom values:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":561902,"id":561902,"title":"code snippets vscode","filename":"code-vscode.gif","filesize":964564,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/mapping\/code-snippets-arcgis-api-javascript\/code-vscode","alt":"code snippets vscode","author":"7011","description":"How to work with code snippets in Visual Studio Code.","caption":"How to work with code snippets in Visual Studio Code.","name":"code-vscode","status":"inherit","uploaded_to":561822,"date":"2019-07-08 12:30:39","modified":"2019-07-08 12:58: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":1000,"height":696,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode.gif","medium-width":375,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode.gif","medium_large-width":768,"medium_large-height":535,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode.gif","large-width":1000,"large-height":696,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode.gif","1536x1536-width":1000,"1536x1536-height":696,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode.gif","2048x2048-width":1000,"2048x2048-height":696,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode-668x465.gif","card_image-width":668,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/code-vscode.gif","wide_image-width":1000,"wide_image-height":696}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Visual Studio Code is very popular among web developers (most of us in the ArcGIS API for JavaScript team use it), so Kelly and I thought we should create an extension for VSCode with all these code snippets that we use quite often.<\/p>\n

Aaand there it is: ?ArcGIS API for JavaScript Snippets VSCode Extension<\/a> ?<\/p>\n

How to use it? In VSCode, go to Extensions, search for arcgis api for javascript<\/code> and press the install button. Check out the list of code snippets that we added there. In your app, type in the prefix of the code snippet you want to add and press Tab<\/code>\u00a0. That should create the code snippet with the placeholders just like in the animated gif above.<\/p>\n

You can have a look at all the snippets in the Github repository<\/a>. If you want to suggest code snippets to us, please create an issue or open up a pull request. If you want to learn how to create your own code snippets, but not necessarily add them to our extension then read more about it in this VSCode tutorial<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"

Code snippets for the browser console<\/h2>\n

Sometimes a layer doesn\u2019t show up in the app or you\u2019d like to get that nice viewpoint to reuse it somewhere else, or maybe you even want to change things interactively (light settings, quality mode, etc.) just to try things out. That\u2019s when these code snippets are useful. And for those that use Google Chrome for debugging, you can even store these code snippets in the developer tools in the Snippets<\/code> tab.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":561922,"id":561922,"title":"chrome-snippets","filename":"chrome-snippets.gif","filesize":849637,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/mapping\/code-snippets-arcgis-api-javascript\/chrome-snippets","alt":"chrome snippets","author":"7011","description":"Storing and running code snippets in Google Chrome developer tools. This code snippet prints the camera position.","caption":"Storing and running code snippets in Google Chrome developer tools. This code snippet prints the camera position.","name":"chrome-snippets","status":"inherit","uploaded_to":561822,"date":"2019-07-08 12:37:12","modified":"2019-07-08 13:53:44","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":697,"height":601,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets.gif","medium-width":303,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets.gif","medium_large-width":697,"medium_large-height":601,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets.gif","large-width":697,"large-height":601,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets.gif","1536x1536-width":697,"1536x1536-height":601,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets.gif","2048x2048-width":697,"2048x2048-height":601,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets-539x465.gif","card_image-width":539,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/07\/chrome-snippets.gif","wide_image-width":697,"wide_image-height":601}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

The most useful code snippet is the one for getting access to the view. That will grant you super powers, like access to the layers and their views and so on:<\/p>\n

\r\n  const<\/span> view = require<\/span>(\"esri\/views\/View\"<\/span>).views.getItemAt(0<\/span>);\r\n\r\n  <\/code><\/pre>\n
Now you can for example display all the layers in your map with their corresponding index:<\/p>\n
\r\n  view.map.allLayers.forEach((layer, index) => {\r\n    console<\/span>.log(`${index}<\/span> -> ${layer.title}<\/span>`<\/span>);\r\n  });\r\n\r\n  <\/code><\/pre>\n
If a layer doesn’t display, you can get access to it and check if the LayerView was created successfully:<\/p>\n
\r\n  const<\/span> layer = view.map.allLayers.getItemAt(index);\r\n\r\n  view.whenLayerView(layer)\r\n    .then((layerView) => console<\/span>.log(layerView))\r\n    \/\/ if there were problems with the layerview, you'll get an error here<\/span>\r\n    .catch(console<\/span>.error);\r\n\r\n  <\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
And that\u2019s about it! As a summary, in this blog post we presented:<\/p>\n
You can explore more code snippets like this in this file<\/a>. If you want to learn how to add them to the Snippets<\/code> section in Chrome developer tools, you will probably find this tutorial<\/a> useful. A similar environment for Mozilla Firefox is Scratchpad. You can learn more about it here<\/a>.<\/p>\n