{"id":1085351,"date":"2020-12-17T10:54:20","date_gmt":"2020-12-17T18:54:20","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1085351"},"modified":"2020-12-18T14:56:31","modified_gmt":"2020-12-18T22:56:31","slug":"whats-new-in-the-arcgis-api-for-javascript-version-4-18","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18","title":{"rendered":"What’s New in the ArcGIS API for JavaScript (version 4.18)"},"author":4271,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37101],"tags":[96582,24921,27491,23221,757481],"industry":[],"product":[36831,36601],"class_list":["post-1085351","blog","type-blog","status-publish","format-standard","hentry","category-announcements","tag-arcgis-api-for-javascript","tag-javascript","tag-jsapi4","tag-web-mapping","tag-whats-new-december-2020","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Learn about the latest updates including ES modules, cluster queries, layer effects, improved transparency and underground navigation, and more. ","flexible_content":[{"acf_fc_layout":"content","content":"

Goodbye 2020, hello version 4.18 of ArcGIS API for JavaScript! The development team has been hard at work building many enhancements that are frankly game changers in both 2D and 3D apps. In addition, we have removed IE11 and Edge Legacy support with this release.<\/p>\n

Let\u2019s have a look at some of the new capabilities that you can now start building into your apps…<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1090291,"id":1090291,"title":"es-modules3","filename":"es-modules3-1.png","filesize":89094,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/es-modules3-2","alt":"","author":"4271","description":"","caption":"","name":"es-modules3-2","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 19:59:26","modified":"2020-12-16 19:59:26","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":1791,"height":341,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1.png","medium-width":464,"medium-height":88,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1.png","medium_large-width":768,"medium_large-height":146,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1.png","large-width":1791,"large-height":341,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1-1536x292.png","1536x1536-width":1536,"1536x1536-height":292,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1.png","2048x2048-width":1791,"2048x2048-height":341,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1-826x157.png","card_image-width":826,"card_image-height":157,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/es-modules3-1.png","wide_image-width":1791,"wide_image-height":341}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

If you use the ArcGIS API for JavaScript with a third-party framework such as Angular or React or create custom builds of the API, this process just got easier. ES modules is a new option for consuming the API, which enables simplified code and seamless integration with modern frameworks and build tools.<\/p>\n

To get started, you\u2019ll install a new NPM package\u00a0@arcgis\/core<\/a>\u00a0and then you can use native imports like this:<\/p>\n

import<\/span> WebMap from<\/span> \u2018@arcgis\/core\/WebMap\u2019;\r\nimport<\/span> MapView from<\/span> \u2018@arcgis\/core\/views\/MapView\u2019;\r\n<\/code><\/pre>\n
Should You Migrate to ES Modules?<\/strong><\/p>\n
If you aren\u2019t integrating with a framework or creating custom builds of the API, there is no need to migrate to the new ES Modules. The AMD modules (which is the alternative \u2013 and original – way that the API can be consumed) will continue to be available alongside the ES modules for the foreseeable future. Both formats have the same capabilities because they are built from the same code base.<\/p>\n
Visit\u00a0Introduction to tooling<\/a>\u00a0to learn how to use the new modules and learn whether you should migrate.<\/p>\n
Query clustered features<\/h2>\n
You can query features from clusters to get access to the underlying features represented by a cluster. This allows you to do the following:<\/p>\n
    \n
  1. Query statistics for the clustered features.<\/li>\n
  2. Display the visible extent of a cluster’s features.<\/li>\n
  3. Calculate and display the\u00a0convex hull<\/a>\u00a0for clustered features.<\/li>\n
  4. Display the features belonging to a cluster.<\/li>\n<\/ol>\n"},{"acf_fc_layout":"image","image":{"ID":1091161,"id":1091161,"title":"clustering-optimized","filename":"clustering-optimized.gif","filesize":1152373,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/clustering-optimized","alt":"","author":"4271","description":"","caption":"","name":"clustering-optimized","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 23:10:25","modified":"2020-12-16 23:10:25","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":1020,"height":512,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized.gif","medium-width":464,"medium-height":233,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized.gif","medium_large-width":768,"medium_large-height":386,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized.gif","large-width":1020,"large-height":512,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized.gif","1536x1536-width":1020,"1536x1536-height":512,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized.gif","2048x2048-width":1020,"2048x2048-height":512,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized-826x415.gif","card_image-width":826,"card_image-height":415,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/clustering-optimized.gif","wide_image-width":1020,"wide_image-height":512}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-query\/index.html"},{"acf_fc_layout":"content","content":"
    Layer effects<\/h2>\n
    You can now apply\u00a0Effects<\/a>\u00a0to\u00a0all layers\u00a0in 2D MapViews, either to features that meet filter criteria or across an entire layer. This powerful capability allows you to apply\u00a0css filter-like functions<\/a>\u00a0to layers to enhance the cartographic quality of your maps.<\/p>\n
    Applying an effect selectively based on filter criteria via\u00a0FeatureEffect<\/a>\u00a0was released in version 4.11. This release<\/em> introduces the ability to apply an effect across an entire layer, and introduces the new effect types – bloom, drop-shadow and blur. Let\u2019s explore each of these!<\/p>\n
    Blur<\/strong>
    \nThe\u00a0blur\u00a0effect applies a\u00a0    Gaussian blur<\/a> to the layer and it makes it look out of focus or blurry. One use for it is to soften a layer underneath a reference layer, or other layers of importance, so the features above it can stand out more clearly. You can also use it to visualize uncertainty to non-discrete boundaries like habitat boundaries.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1090351,"id":1090351,"title":"blur-effect-layer2","filename":"blur-effect-layer2.png","filesize":600620,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/blur-effect-layer2","alt":"","author":"4271","description":"These maps show historic (blue) and current (red) Grizzly Bear habitat ranges. The map on the right uses a blur layer effect to indicate uncertainty or fuzziness to the boundaries.","caption":"These maps show historic (blue) and current (red) Grizzly Bear habitat ranges. On the right, blur layer effect is used to indicate fuzziness\/uncertainty on the boundaries.","name":"blur-effect-layer2","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 20:11:21","modified":"2020-12-16 20:20:22","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":1267,"height":615,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2.png","medium-width":464,"medium-height":225,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2.png","medium_large-width":768,"medium_large-height":373,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2.png","large-width":1267,"large-height":615,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2.png","1536x1536-width":1267,"1536x1536-height":615,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2.png","2048x2048-width":1267,"2048x2048-height":615,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2-826x401.png","card_image-width":826,"card_image-height":401,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/blur-effect-layer2.png","wide_image-width":1267,"wide_image-height":615}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/?search=effect"},{"acf_fc_layout":"content","content":"
    Bloom<\/strong>
    \nThis effect produces fringes of light extending from the borders of bright areas in a layer. You can add glow to your layers when mapping fires, volcanic eruptions, night lights, or to put an electric highlight on features you want to draw attention to (like in the updated     sample<\/a> that shows New York building footprints by construction year). You can combine multiple effects in a layer, and use effects on any number of layers in a map. In the below map, active fire locations have a bloom effect while the smoke layer has several effects including blur for a fuzzy boundary.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1092411,"id":1092411,"title":"active-fires-optimized","filename":"active-fires-optimized.gif","filesize":1200293,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/active-fires-optimized","alt":"","author":"4271","description":"","caption":"","name":"active-fires-optimized","status":"inherit","uploaded_to":1085351,"date":"2020-12-17 17:48:26","modified":"2020-12-17 17:48:26","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":700,"height":359,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized.gif","medium-width":464,"medium-height":238,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized.gif","medium_large-width":700,"medium_large-height":359,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized.gif","large-width":700,"large-height":359,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized.gif","1536x1536-width":700,"1536x1536-height":359,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized.gif","2048x2048-width":700,"2048x2048-height":359,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized.gif","card_image-width":700,"card_image-height":359,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/active-fires-optimized.gif","wide_image-width":700,"wide_image-height":359}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/ycabon\/full\/MWjmdBN"},{"acf_fc_layout":"content","content":"
    Drop shadow<\/strong>
    \nThis effect is useful when you want some features to stand out from the rest of the features on a busy map. For example, you can apply this effect to your labels (reference layer) to make them legible.<\/p>\n
    The following screenshots show the same map, with and without effects. On the right, drop-shadow is applied to features that intersect boundaries of London boroughs while blur and (reduced)brightness effects are used to deemphasize features do not meet this criteria. The map (inspired by\u00a0this tweet<\/a>) shows the overall index of multiple deprivation<\/a> in 2019 experienced by people living in the Greater London area.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1087971,"id":1087971,"title":"drop-shadow","filename":"drop-shadow.png","filesize":564742,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/drop-shadow","alt":"","author":"4271","description":"","caption":"","name":"drop-shadow","status":"inherit","uploaded_to":1085351,"date":"2020-12-15 23:19:31","modified":"2020-12-15 23:39:19","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":1980,"height":849,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow.png","medium-width":464,"medium-height":199,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow.png","medium_large-width":768,"medium_large-height":329,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow.png","large-width":1920,"large-height":823,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow-1536x659.png","1536x1536-width":1536,"1536x1536-height":659,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow.png","2048x2048-width":1980,"2048x2048-height":849,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow-826x354.png","card_image-width":826,"card_image-height":354,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/drop-shadow-1920x823.png","wide_image-width":1920,"wide_image-height":823}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/?search=effect"},{"acf_fc_layout":"content","content":"
    Since some effects like\u00a0drop-shadow\u00a0and\u00a0blur\u00a0are sensitive to scale, we also enhanced the Effect API to make effects scale-dependent.<\/p>\n
    Learn more by exploring the\u00a0samples<\/a>\u00a0that take advantage of these effects which can really transform your map and the overall experience of your app. You can also dig a little deeper by reading about each of the effects<\/a>.<\/p>\n
    Elevation profile widget\u00a0(beta)<\/h2>\n
    Create elevation profile charts using the new ElevationProfile<\/a> widget, available in both MapView and SceneView. Interactively draw or select existing lines in your map or scene to compare heights for terrain but also 3D objects such as buildings. The chart is computed using the ground’s elevation and provides additional statistics along the line. Customize the widget by toggling its visible elements and adjusting labels and line colors.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1088781,"id":1088781,"title":"3d-elevation-profile","filename":"3d-elevation-profile.gif","filesize":1455604,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/3d-elevation-profile","alt":"Elevation profile widget","author":"9302","description":"","caption":"Interactively create elevation profile charts for terrain and 3D objects.","name":"3d-elevation-profile","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 10:34:56","modified":"2020-12-16 13:13:09","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":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-elevation-profile.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-elevation-profile\/index.html"},{"acf_fc_layout":"content","content":"
    3D web editing<\/h2>\n
    Earlier this year we introduced 3D feature layer editing. This effort continues in the latest release by adding support for new layer types and interactive helpers.<\/p>\n
    Edit attributes in scene layers<\/strong>
    \nYou can now update the attributes of 3D object SceneLayers using existing     Editor<\/a> widget workflows or programmatically calling applyEdits()<\/a>. Edits are applied to the associated feature layer but taken into account and rendered by the API until the I3S cache is updated. This approach is consistent with how other products such as ArcGIS Pro<\/a> treat scene layer edits.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1088821,"id":1088821,"title":"3d-sl-attribute-editing","filename":"3d-sl-attribute-editing.png","filesize":137144,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/3d-sl-attribute-editing","alt":"","author":"9302","description":"","caption":"Edit SceneLayer attributes using existing Editor workflows","name":"3d-sl-attribute-editing","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 10:38:53","modified":"2020-12-16 13:20:08","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":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing.png","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing.png","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing.png","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing.png","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-sl-attribute-editing.png","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-editor-3d-scenelayer\/index.html"},{"acf_fc_layout":"content","content":"
    Self-snapping\u00a0<\/strong>
    \nWhen interactively modifying line and polygon geometries the new     self snapping<\/a> capability helps you draw precise geometries with geometric constraints such as parallel lines and right angles when editing feature layers in 3D scenes. Enable self snapping through the new SketchViewModel.snappingOptions<\/a> property and toggle it during a draw operation.<\/p>\n
    This is the first step towards enabling full feature snapping in both 2D and 3D editing workflows. This support will be expanded incrementally over subsequent releases.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1088811,"id":1088811,"title":"3d-self-snapping","filename":"3d-self-snapping.gif","filesize":1782425,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/3d-self-snapping","alt":"","author":"9302","description":"","caption":"Self snapping helps you draw parallel lines and right angles.","name":"3d-self-snapping","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 10:37:49","modified":"2020-12-16 13:21:35","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":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-self-snapping.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sketch-3d\/index.html"},{"acf_fc_layout":"content","content":"
    Context-aware navigation<\/h2>\n
    Interactive zooming, panning and rotating in underground scenes or viewpoints with large tilt has greatly improved. Navigation used to jump when the input device pointed at the horizon or simply the background for scenes with no visible ground. A new context-aware navigation takes visible objects into account to better predict the area of interest. You will notice a steadier navigation experience, especially when moving around and towards subsurface pipelines and earthquakes for example.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1088791,"id":1088791,"title":"3d-context-aware-navigation","filename":"3d-context-aware-navigation.gif","filesize":1874594,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/3d-context-aware-navigation","alt":"","author":"9302","description":"","caption":"Context-aware navigation no longer requires clicking exactly on features to move the camera.","name":"3d-context-aware-navigation","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 10:37:09","modified":"2020-12-16 13:14: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":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-context-aware-navigation.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.arcgis.com\/home\/webscene\/viewer.html?webscene=65ea7fdeaa1847d08ae1444ecb701669"},{"acf_fc_layout":"content","content":"
    Order-independent transparency<\/h2>\n
    The previous approach assured that the front-most transparent surface and any opaque features behind are always rendered. Depending on the camera position, other transparent features in the back were selectively visible, causing them to flicker when navigating.<\/p>\n
    A new order-independent transparency (OIT)<\/a> makes sure all transparent objects are rendered independently of the camera. This is useful when visualizing large volumetric symbology covering other transparent features. Scenes with semi-transparent 3D WebStyles<\/a> or transparent icon symbology like the Firefly style also benefit from this improved transparency.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1088831,"id":1088831,"title":"3d-transparency","filename":"3d-transparency.png","filesize":98116,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/3d-transparency","alt":"","author":"9302","description":"","caption":"Order-independent transparency renders all transparent objects.","name":"3d-transparency","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 10:39:02","modified":"2020-12-16 13:25:37","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":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency.png","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency.png","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency.png","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency.png","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-transparency.png","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
    Mars and Moon\u00a0support<\/h2>\n
    It is safe to say that the API covers new grounds in this latest release. Use SceneView to explore imagery and elevation layers of the Moon and Mars but also feature layers containing mapped information about these astronomical bodies. Atmosphere and physical dimensions used in interactive tools such as measurements are automatically adjusted when loading a layer with a supported extraterrestrial coordinate system<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1088951,"id":1088951,"title":"3d-mars","filename":"3d-mars-1.png","filesize":181772,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/3d-mars-2","alt":"","author":"9302","description":"","caption":"Explore Mars imagery and terrain with the latest 3D ArcGIS API for JavaScript.","name":"3d-mars-2","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 14:07:32","modified":"2020-12-16 14:07:38","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":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1.png","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1.png","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1.png","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1.png","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-1.png","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/mars\/index.html"},{"acf_fc_layout":"content","content":"
    Vector Symbol Builder<\/h2>\n
    You can symbolize your graphics and features using CIMSymbols<\/a> which are multi-layer vector symbols that display crisp at any scale. These symbols are powerful because you can design your own custom CIMSymbol using one or more\u00a0symbol layers, and even update individual symbol layers dynamically based on application logic and attribute data. To aid in the process of creating custom symbols, we introduced a CIM Symbol Builder<\/a>. This app provides an environment where you can design CIM symbols with a simple user interface, copy the JSON of the symbol, and use it in a web application built with the API. Learn more about this tool in the recent CIM Symbol Builder blog<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1087981,"id":1087981,"title":"cim-symbol-builder","filename":"cim-symbol-builder.png","filesize":27754,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/cim-symbol-builder-2","alt":"","author":"4271","description":"","caption":"","name":"cim-symbol-builder-2","status":"inherit","uploaded_to":1085351,"date":"2020-12-15 23:21:02","modified":"2020-12-15 23:21: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":800,"height":479,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder.png","medium-width":436,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder.png","medium_large-width":768,"medium_large-height":460,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder.png","large-width":800,"large-height":479,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder.png","1536x1536-width":800,"1536x1536-height":479,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder.png","2048x2048-width":800,"2048x2048-height":479,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder-777x465.png","card_image-width":777,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/cim-symbol-builder.png","wide_image-width":800,"wide_image-height":479}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/cim-builder\/"},{"acf_fc_layout":"content","content":"
    Sketch widget: selection<\/h2>\n
    The\u00a0Sketch<\/a>\u00a0widget got a lot of love this release. In addition to some performance and visual quality improvements, we added two new selection tools:\u00a0rectangle-selection\u00a0and\u00a0lasso-selection. The end user can use these tools to select one or more graphics and rotate, scale, move, or delete all selected graphics at once. In an upcoming release, we will enable the same capability in the editor widget.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1088001,"id":1088001,"title":"default-selection-sketch","filename":"default-selection-sketch.png","filesize":4050,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/default-selection-sketch","alt":"","author":"4271","description":"","caption":"","name":"default-selection-sketch","status":"inherit","uploaded_to":1085351,"date":"2020-12-15 23:22:18","modified":"2020-12-15 23:22: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":372,"height":51,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch-213x51.png","thumbnail-width":213,"thumbnail-height":51,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch.png","medium-width":372,"medium-height":51,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch.png","medium_large-width":372,"medium_large-height":51,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch.png","large-width":372,"large-height":51,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch.png","1536x1536-width":372,"1536x1536-height":51,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch.png","2048x2048-width":372,"2048x2048-height":51,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch.png","card_image-width":372,"card_image-height":51,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/default-selection-sketch.png","wide_image-width":372,"wide_image-height":51}},"image_position":"left-center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/sketch-geometries\/index.html"},{"acf_fc_layout":"content","content":"
    End of IE11\/Edge Legacy support<\/h2>\n
    Support for Internet Explorer 11 and Edge Legacy for use with the ArcGIS API for JavaScript was deprecated as of version 4.16. Version 4.17 was the last release with support for these browsers. This means that apps built with 4.18 (and beyond) will not function in IE11\/Edge Legacy. See our updated\u00a0System Requirements<\/a>\u00a0page and the\u00a0Why is Esri ending support for Internet Explorer 11?<\/a>\u00a0blog to learn more.<\/p>\n
    Get the full scoop\u2026<\/h2>\n
    There are many more updates in this release such as the ability to use custom print layouts, ImageryLayer enhancements such as identify, and custom websocket support for stream layers in 3D scenes. Make sure you check out the release notes<\/a> and play with the samples<\/a> to get a feel for this release!<\/p>\n
    We wish happiness and health to our developer community in the new year!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1090571,"id":1090571,"title":"sparkler","filename":"sparkler-scaled.jpg","filesize":554844,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-scaled.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\/sparkler","alt":"","author":"4271","description":"","caption":"","name":"sparkler","status":"inherit","uploaded_to":1085351,"date":"2020-12-16 20:40:32","modified":"2020-12-16 20:40:32","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1903,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-scaled.jpg","medium-width":351,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-scaled.jpg","medium_large-width":768,"medium_large-height":571,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-scaled.jpg","large-width":1453,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-1536x1142.jpg","1536x1536-width":1536,"1536x1536-height":1142,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-2048x1523.jpg","2048x2048-width":2048,"2048x2048-height":1523,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-625x465.jpg","card_image-width":625,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/sparkler-1453x1080.jpg","wide_image-width":1453,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
    Lego photo by Elodie Oudot<\/a> and sparkler photo by Jamie Street<\/a> on Unsplash<\/a><\/em><\/p>\n"}],"authors":[{"ID":4271,"user_firstname":"Julie","user_lastname":"Powell","nickname":"Julie Powell","user_nicename":"julie-powell","display_name":"Julie Powell","user_email":"julie_powell@esri.com","user_url":"","user_registered":"2018-03-02 00:15:51","user_description":"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. \r\nJulie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets.","user_avatar":""},{"ID":9302,"user_firstname":"Arno","user_lastname":"Fiva","nickname":"Arno Fiva","user_nicename":"afiva","display_name":"Arno Fiva","user_email":"afiva@esri.com","user_url":"http:\/\/js.arcgis.com","user_registered":"2019-03-26 21:36:58","user_description":"Developer Evangelist at the Esri R&D Center Z\u00fcrich, creating 3D web apps using the ArcGIS Maps SDK for JavaScript.","user_avatar":""}],"related_articles":[{"ID":1058481,"post_author":"8402","post_date":"2021-09-22 14:35:40","post_date_gmt":"2021-09-22 21:35:40","post_content":"","post_title":"CIM Symbol Builder","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"cim-symbol-builder","to_ping":"","pinged":"","post_modified":"2024-04-12 03:59:00","post_modified_gmt":"2024-04-12 10:59:00","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1058481","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/3d-mars-card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/mars-banner-2.jpg"},"yoast_head":"\nWhat's New in the ArcGIS API for JavaScript (version 4.18)<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What's New in the ArcGIS API for JavaScript (version 4.18)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\" \/>\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=\"2020-12-18T22:56:31+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\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\"},\"author\":{\"name\":\"Julie Powell\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3ef71df36f6aacca26eb2c7f65f15e88\"},\"headline\":\"What’s New in the ArcGIS API for JavaScript (version 4.18)\",\"datePublished\":\"2020-12-17T18:54:20+00:00\",\"dateModified\":\"2020-12-18T22:56:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\"},\"wordCount\":10,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS API for JavaScript\",\"JavaScript\",\"jsapi4\",\"Web Mapping\",\"What's new December 2020\"],\"articleSection\":[\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\",\"name\":\"What's New in the ArcGIS API for JavaScript (version 4.18)\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2020-12-17T18:54:20+00:00\",\"dateModified\":\"2020-12-18T22:56:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What’s New in the ArcGIS API for JavaScript (version 4.18)\"}]},{\"@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\/3ef71df36f6aacca26eb2c7f65f15e88\",\"name\":\"Julie Powell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png\",\"caption\":\"Julie Powell\"},\"description\":\"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets.\",\"sameAs\":[\"https:\/\/x.com\/JuliePowellGIS\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/julie-powell\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What's New in the ArcGIS API for JavaScript (version 4.18)","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\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18","og_locale":"en_US","og_type":"article","og_title":"What's New in the ArcGIS API for JavaScript (version 4.18)","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2020-12-18T22:56:31+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\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18"},"author":{"name":"Julie Powell","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3ef71df36f6aacca26eb2c7f65f15e88"},"headline":"What’s New in the ArcGIS API for JavaScript (version 4.18)","datePublished":"2020-12-17T18:54:20+00:00","dateModified":"2020-12-18T22:56:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS API for JavaScript","JavaScript","jsapi4","Web Mapping","What's new December 2020"],"articleSection":["Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18","name":"What's New in the ArcGIS API for JavaScript (version 4.18)","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2020-12-17T18:54:20+00:00","dateModified":"2020-12-18T22:56:31+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"What’s New in the ArcGIS API for JavaScript (version 4.18)"}]},{"@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\/3ef71df36f6aacca26eb2c7f65f15e88","name":"Julie Powell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png","caption":"Julie Powell"},"description":"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets.","sameAs":["https:\/\/x.com\/JuliePowellGIS"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/julie-powell"}]}},"text_date":"December 17, 2020","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-version-4-18","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/12\/mars-banner-2.jpg","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":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":23221,"name":"Web Mapping","slug":"web-mapping","term_group":0,"term_taxonomy_id":23221,"taxonomy":"post_tag","description":"","parent":0,"count":28,"filter":"raw"},{"term_id":757481,"name":"What's new December 2020","slug":"whats-new-december-2020","term_group":0,"term_taxonomy_id":757481,"taxonomy":"post_tag","description":"","parent":0,"count":20,"filter":"raw"}],"category_data":[{"term_id":37101,"name":"Announcements","slug":"announcements","term_group":0,"term_taxonomy_id":37101,"taxonomy":"category","description":"","parent":0,"count":1964,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"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\/1085351","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\/4271"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1085351"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1085351\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1085351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1085351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1085351"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1085351"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1085351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Review the ES modules<\/a> guide topic for the complete steps necessary for using ES modules. There are also sample apps<\/a> available that demonstrate the core concepts for integrating the modules with various frameworks and tools.<\/p>\n