{"id":615322,"date":"2019-10-10T13:08:41","date_gmt":"2019-10-10T20:08:41","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=615322"},"modified":"2019-10-10T13:08:41","modified_gmt":"2019-10-10T20:08:41","slug":"measure-once-with-the-new-measurement-widget","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget","title":{"rendered":"Measure Once with the new Measurement Widget"},"author":7451,"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":[38851,27491,27761,258412],"industry":[],"product":[36831,36601],"class_list":["post-615322","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-developers","tag-jsapi4","tag-measure","tag-widget","product-js-api-arcgis","product-developers"],"acf":{"short_description":"New at version 4.13 of the ArcGIS API for JavaScript: the Measurement Widget. Works in 2D MapViews and 3D SceneViews.","flexible_content":[{"acf_fc_layout":"content","content":"

At versions 4.6 and 4.7, we introduced the distance and area measurement widgets in 3D. At version 4.10, we introduced distance and area measurement widgets in 2D.<\/p>\n

Now at version 4.13, we introduce the<\/strong> Measurement widget<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":620562,"id":620562,"title":"Measuring Gillette Stadium","filename":"Measure_Foxborough_2D_and_3D.jpg","filesize":311353,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\/measure_foxborough_2d_and_3d","alt":"Measuring Gillette Stadium, Foxborough, MA","author":"7451","description":"Measuring Gillette Stadium, Foxborough, MA","caption":"Measuring Gillette Stadium (clockwise from top-left: 2D Distance, 2D Area, 3D Area, 3D DirectLine)","name":"measure_foxborough_2d_and_3d","status":"inherit","uploaded_to":615322,"date":"2019-10-01 20:08:54","modified":"2019-10-01 21:45:27","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":1221,"height":1405,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D.jpg","medium-width":227,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D.jpg","medium_large-width":768,"medium_large-height":884,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D.jpg","large-width":939,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D.jpg","1536x1536-width":1221,"1536x1536-height":1405,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D.jpg","2048x2048-width":1221,"2048x2048-height":1405,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D-404x465.jpg","card_image-width":404,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D-939x1080.jpg","wide_image-width":939,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/10\/Measure_Foxborough_2D_and_3D.jpg"},{"acf_fc_layout":"content","content":"

The Measurement widget<\/a> combines the functionality from all the existing measurement widgets. This widget allows developers to configure the UI to best match their specific requirements. Developers can add whatever measurement tools they need, and style them however they want.<\/p>\n

This means that developing with the Measurement widget is more involved than just creating a new widget instance and adding it to the view (although you can do that too, for example in this 3D area app<\/a> and this 2D distance app<\/a>). The developer gets to decide the container, the button styling, the available measurement tools, and the available measurement unit(s).<\/p>\n

Here is a code snippet showing how we create a div element for the widget and style the three buttons. The buttons are sourced from our Calcite theme, and a list of options can be found on the Esri Icon Font (Calcite theme)<\/a> guide page.<\/p>\n

<html<\/span>><\/span>\r\n<body<\/span>><\/span>\r\n  <div<\/span> id<\/span>=\"toolbarDiv\"<\/span> class<\/span>=\"esri-component esri-widget\"<\/span>><\/span>\r\n    <div<\/span>\r\n      id<\/span>=\"distance\"<\/span>\r\n      class<\/span>=\"esri-widget--button esri-interactive esri-icon-measure-line\"<\/span>\r\n      title<\/span>=\"Distance Measurement Tool\"<\/span>\r\n    ><\/span><\/div<\/span>><\/span>\r\n    <div<\/span>\r\n      id<\/span>=\"area\"<\/span>\r\n      class<\/span>=\"esri-widget--button esri-interactive esri-icon-measure-area\"<\/span>\r\n      title<\/span>=\"Area Measurement Tool\"<\/span>\r\n    ><\/span><\/div<\/span>><\/span>\r\n    <div<\/span>\r\n      id<\/span>=\"clear\"<\/span>\r\n      class<\/span>=\"esri-widget--button esri-interactive esri-icon-trash\"<\/span>\r\n      title<\/span>=\"Clear Measurements\"<\/span>\r\n    ><\/span><\/div<\/span>><\/span>\r\n  <\/div<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
We do this by calling a function that will check the value of the view (2D or 3D) and then assign the activeTool<\/code> property on the Measurement widget to either: area<\/code>, distance<\/code>, or direct-line<\/code>. The distance<\/code> value only applies to 2D, and the direct-line<\/code> value only applies to 3D.<\/p>\n
You can see how useful the Measurement widget is for developers who want to have control over both the UI and UX of measuring, and over which measurement tools (e.g. which of the four existing measurement widgets) to make available to the end user.<\/p>\n
The code snippet below demonstrates the logic for the distance button:<\/p>\n
const<\/span> distanceButton = document<\/span>.getElementById(\"distance\"<\/span>);\r\n\r\n\/\/ Set-up event handlers for button<\/span>\r\ndistanceButton.addEventListener(\"click\"<\/span>, function<\/span>() {\r\n  distanceMeasurement();\r\n});\r\n\r\n\/\/ Calls the appropriate DistanceMeasurement2D or <\/span>\r\n\/\/ DirectLineMeasurement3D depending on the view<\/span>\r\nfunction<\/span> distanceMeasurement<\/span>() {\r\n  const<\/span> type = activeView.type;\r\n  measurement.activeTool = type.toUpperCase() === \"2D\"<\/span> ? \"distance\"<\/span> : \"direct-line\"<\/span>;\r\n  distanceButton.classList.add(\"active\"<\/span>);\r\n  areaButton.classList.remove(\"active\"<\/span>);\r\n}\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
Another useful aspect of the new Measurement widget is it’s ability to persist measurement graphics until they are cleared or the view is changed\/refreshed. For example, if a user creates a line (distance<\/code> or direct-line<\/code>) measurement, then switches to make an area measurement, the user can then toggle the activeTool<\/code> back to the previous tool to see the line measurement, and vice versa.<\/p>\n
Measurement Upgrades<\/strong><\/p>\n
In addition to adding a new Measurement widget, we also made some upgrades to measurement widgets in general at version 4.13<\/a>.<\/p>\n
The mode<\/code> property has been removed from the AreaMeasurement2D<\/a> and DistanceMeasurement2D<\/a> widgets and their respective ViewModels. This property allowed users to define the type of measurement (e.g. planar or geodesic) either programmatically or in the widget UI. Now the 2D measuring experience is similar to 3D.<\/p>\n
The widgets will compute areas and perimeters geodetically for geographic coordinate systems and web mercator. For projected coordinate systems (other than web mercator), computations are performed planimetrically for distances up to the threshold distance defined by the geodesicDistanceThreshold<\/a> property of the widget’s ViewModel. Distances beyond the threshold are performed geodetically.<\/p>\n"},{"acf_fc_layout":"content","content":"
Conclusion<\/strong><\/p>\n
Measuring with the ArcGIS API for JavaScript<\/a> has come a long way over the past seven releases. We have all the functionality at 4x that we have at 3x, and we will continue to improve and enhance the experience at 4x. We greatly appreciate all the feedback we’ve received, and look forward to seeing all the amazing apps you make in the future.<\/p>\n"}],"authors":[{"ID":7451,"user_firstname":"Noah","user_lastname":"Sager","nickname":"Noah Sager","user_nicename":"noah-sager","display_name":"Noah Sager","user_email":"NSager@esri.com","user_url":"https:\/\/www.noahsager.net\/","user_registered":"2018-03-21 18:21:19","user_description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","user_avatar":""}],"related_articles":[{"ID":614592,"post_author":"7451","post_date":"2019-10-10 10:31:14","post_date_gmt":"2019-10-10 17:31:14","post_content":"","post_title":"What's New in ArcGIS API for JavaScript (October 2019)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-october-2019","to_ping":"","pinged":"","post_modified":"2019-10-10 10:31:14","post_modified_gmt":"2019-10-10 17:31:14","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=614592","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":613182,"post_author":"7641","post_date":"2019-10-01 22:07:17","post_date_gmt":"2019-10-02 05:07:17","post_content":"","post_title":"What's new in ArcGIS Online (October 2019)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-arcgis-online-october-2019","to_ping":"","pinged":"","post_modified":"2021-09-02 08:08:01","post_modified_gmt":"2021-09-02 15:08:01","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=613182","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":356102,"post_author":"7451","post_date":"2018-12-13 12:30:58","post_date_gmt":"2018-12-13 20:30:58","post_content":"","post_title":"Measure Twice with the new 2D Measurement Widgets","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"measure-twice-with-the-new-2d-measurement-widgets","to_ping":"","pinged":"","post_modified":"2018-12-13 12:30:58","post_modified_gmt":"2018-12-13 20:30:58","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=356102","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/measure_blog_card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/measure_blog_wide5.jpg"},"yoast_head":"\nMeasure Once with the new Measurement Widget<\/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\/mapping\/measure-once-with-the-new-measurement-widget\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Measure Once with the new Measurement Widget\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\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\/mapping\/measure-once-with-the-new-measurement-widget#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\"},\"author\":{\"name\":\"Noah Sager\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\"},\"headline\":\"Measure Once with the new Measurement Widget\",\"datePublished\":\"2019-10-10T20:08:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"Developers\",\"jsapi4\",\"Measure\",\"widget\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\",\"name\":\"Measure Once with the new Measurement Widget\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-10-10T20:08:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Measure Once with the new Measurement Widget\"}]},{\"@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\/31358cd525c152696fcd5fe96f49e068\",\"name\":\"Noah Sager\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g\",\"caption\":\"Noah Sager\"},\"description\":\"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.\",\"sameAs\":[\"https:\/\/www.noahsager.net\/\",\"https:\/\/www.linkedin.com\/in\/noah-sager\",\"https:\/\/x.com\/noashx\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Measure Once with the new Measurement Widget","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\/mapping\/measure-once-with-the-new-measurement-widget","og_locale":"en_US","og_type":"article","og_title":"Measure Once with the new Measurement Widget","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","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\/mapping\/measure-once-with-the-new-measurement-widget#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget"},"author":{"name":"Noah Sager","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068"},"headline":"Measure Once with the new Measurement Widget","datePublished":"2019-10-10T20:08:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget"},"wordCount":7,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["Developers","jsapi4","Measure","widget"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget","name":"Measure Once with the new Measurement Widget","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-10-10T20:08:41+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Measure Once with the new Measurement Widget"}]},{"@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\/31358cd525c152696fcd5fe96f49e068","name":"Noah Sager","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g","caption":"Noah Sager"},"description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","sameAs":["https:\/\/www.noahsager.net\/","https:\/\/www.linkedin.com\/in\/noah-sager","https:\/\/x.com\/noashx"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager"}]}},"text_date":"October 10, 2019","author_name":"Noah Sager","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/measure_blog_wide5.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":38851,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":38851,"taxonomy":"post_tag","description":"","parent":0,"count":78,"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":27761,"name":"Measure","slug":"measure","term_group":0,"term_taxonomy_id":27761,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":258412,"name":"widget","slug":"widget","term_group":0,"term_taxonomy_id":258412,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"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":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"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\/615322","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\/7451"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=615322"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/615322\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=615322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=615322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=615322"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=615322"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=615322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The GIF below shows the functionality mentioned above, combined with the Measurement widget’s clear() method<\/a>. The clear() method immediately removes all measurement widgets and associated graphics.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":615402,"id":615402,"title":"Measurement widget in 2D","filename":"2D_measures-1.gif","filesize":675803,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\/2d_measures-2","alt":"Measurement widget in 2D","author":"7451","description":"Measurement widget in 2D","caption":"Measurement widget sample (click for live app)","name":"2d_measures-2","status":"inherit","uploaded_to":615322,"date":"2019-09-27 18:40:36","modified":"2019-09-27 20:13:43","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":1073,"height":603,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1.gif","large-width":1073,"large-height":603,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1.gif","1536x1536-width":1073,"1536x1536-height":603,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1.gif","2048x2048-width":1073,"2048x2048-height":603,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1-826x465.gif","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_measures-1.gif","wide_image-width":1073,"wide_image-height":603}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-measurement\/index.html"},{"acf_fc_layout":"content","content":"
In the GIF below, the app loads the Measurement widget to roughly calculate the area of Australia in 2D. Then the view switches to 3D and a similar action is performed. This is done by watching for changes to the view, then using the appropriate measurement tool using the activeTool<\/a> property.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":615732,"id":615732,"title":"2D Measure to 3D Measure","filename":"2D_3D_measures_Australia.gif","filesize":1152899,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-once-with-the-new-measurement-widget\/2d_3d_measures_australia","alt":"2D Measure to 3D Measure","author":"7451","description":"2D Measure to 3D Measure","caption":"Measurement widget app with Stamen Watercolor (click for live app)","name":"2d_3d_measures_australia","status":"inherit","uploaded_to":615322,"date":"2019-09-27 21:33:09","modified":"2019-09-27 21:33:50","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":1009,"height":632,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia.gif","medium-width":417,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia.gif","medium_large-width":768,"medium_large-height":481,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia.gif","large-width":1009,"large-height":632,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia.gif","1536x1536-width":1009,"1536x1536-height":632,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia.gif","2048x2048-width":1009,"2048x2048-height":632,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia-742x465.gif","card_image-width":742,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/09\/2D_3D_measures_Australia.gif","wide_image-width":1009,"wide_image-height":632}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/noashx.github.io\/blog\/watercolor_measurement_widget.html"},{"acf_fc_layout":"content","content":"