{"id":356102,"date":"2018-12-13T12:30:58","date_gmt":"2018-12-13T20:30:58","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=356102"},"modified":"2018-12-13T12:30:58","modified_gmt":"2018-12-13T20:30:58","slug":"measure-twice-with-the-new-2d-measurement-widgets","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets","title":{"rendered":"Measure Twice with the new 2D Measurement Widgets"},"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":[27491,27761,258412],"industry":[],"product":[36831,36601],"class_list":["post-356102","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-jsapi4","tag-measure","tag-widget","product-js-api-arcgis","product-developers"],"acf":{"short_description":"At version 4.10 of the ArcGIS API for JavaScript you can measure distances, perimeters, and areas in 2D. ","flexible_content":[{"acf_fc_layout":"content","content":"

At\u00a0version 4.6 of the ArcGIS API for JavaScript, we introduced the DirectLineMeasurement3D<\/a> widget.\u00a0This widget calculates and displays the 3D distance between two points. At\u00a0version 4.7, we introduced the AreaMeasurement3D<\/a> widget. This\u00a0widget calculates and displays the area and perimeter of a polygon.<\/p>\n

But what about 2D?<\/p>\n

Now at version 4.10<\/a>, we are proud to release two new measurement widgets: the\u00a0AreaMeasurement2D<\/a> widget and the\u00a0DistanceMeasurement2D<\/a> widget. You can see them in action with the\u00a0Measurement in 2D sample<\/a>.<\/p>\n

The\u00a0AreaMeasurement2D\u00a0widget calculates and displays the area and perimeter of a polygon. The DistanceMeasurement2D widget calculates and displays the distance between two or more points. Both widgets work with geodesic<\/a> and planar<\/a> coordinate systems, on Earth and extraterrestrial bodies.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":364392,"id":364392,"title":"Measuring in 2D","filename":"measuring_2D-copy.gif","filesize":732495,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\/measuring_2d-copy","alt":"","author":"7451","description":"","caption":"Measuring in 2D","name":"measuring_2d-copy","status":"inherit","uploaded_to":356102,"date":"2018-11-27 22:53:10","modified":"2018-11-27 22:53:42","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":640,"height":323,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","thumbnail-width":213,"thumbnail-height":107,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","medium-width":464,"medium-height":234,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","medium_large-width":640,"medium_large-height":323,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","large-width":640,"large-height":323,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","1536x1536-width":640,"1536x1536-height":323,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","2048x2048-width":640,"2048x2048-height":323,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","card_image-width":640,"card_image-height":323,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/measuring_2D-copy.gif","wide_image-width":640,"wide_image-height":323}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-measurement-2d\/index.html"},{"acf_fc_layout":"content","content":"

Widget usage<\/h3>\n

Like most widgets, you can use them immediately by adding them to the current view. Note that both of these widgets can only be used in a\u00a0MapView<\/a>. Here is an example:<\/p>\n"},{"acf_fc_layout":"content","content":"

require<\/span>([\"esri\/widgets\/AreaMeasurement2D\"<\/span>, \"esri\/widgets\/DistanceMeasurement2D\"<\/span>], \r\n  function<\/span>(AreaMeasurement2D, DistanceMeasurement2D) {\r\n\r\n  \/\/ To add the AreaMeasurement2D widget to your map<\/span>\r\n  var<\/span> areaMeasurementWidget = new<\/span> AreaMeasurement2D({\r\n    view: view\r\n  });\r\n  view.ui.add(areaMeasurementWidget, \"top-right\"<\/span>);\r\n\r\n  \/\/ To add the DistanceMeasurement2D widget to the map<\/span>\r\n  var<\/span> distanceMeasurementWidget = new<\/span> DistanceMeasurement2D({\r\n    view: view\r\n  });\r\n  view.ui.add(distanceMeasurementWidget, \"top-right\"<\/span>);\r\n\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
One benefit to this interactive approach to measuring is the ability to adjust measurements on the fly. There are two ways to do this. The first is the ability to undo<\/code>\u00a0and redo<\/code>\u00a0measurements using keyboard shortcuts when the measurement is still active (before double-clicking to finish the measurement).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":366412,"id":366412,"title":"UndoRedo","filename":"UndoRedo.png","filesize":6473,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\/undoredo","alt":"","author":"7451","description":"","caption":"","name":"undoredo","status":"inherit","uploaded_to":356102,"date":"2018-11-30 20:46:47","modified":"2018-11-30 20:46:47","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":671,"height":202,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","thumbnail-width":213,"thumbnail-height":64,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","medium-width":464,"medium-height":140,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","medium_large-width":671,"medium_large-height":202,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","large-width":671,"large-height":202,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","1536x1536-width":671,"1536x1536-height":202,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","2048x2048-width":671,"2048x2048-height":202,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","card_image-width":671,"card_image-height":202,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.png","wide_image-width":671,"wide_image-height":202}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
The second is the ability to drag any measurement point and change its location (after double-clicking to finish the measurement). This updates the graphic as well as the measurement label<\/a>.<\/p>\n
Here is an example of how that looks with the DistanceMeasurement2D widget (same principle applies for the\u00a0AreaMeasurement2D\u00a0widget):<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":366432,"id":366432,"title":"UndoRedo","filename":"UndoRedo.gif","filesize":794152,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\/undoredo-2","alt":"","author":"7451","description":"","caption":"Interactive Measurements","name":"undoredo-2","status":"inherit","uploaded_to":356102,"date":"2018-11-30 21:16:07","modified":"2018-11-30 21:16:30","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":600,"height":301,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","thumbnail-width":213,"thumbnail-height":107,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","medium-width":464,"medium-height":233,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","medium_large-width":600,"medium_large-height":301,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","large-width":600,"large-height":301,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","1536x1536-width":600,"1536x1536-height":301,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","2048x2048-width":600,"2048x2048-height":301,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","card_image-width":600,"card_image-height":301,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/UndoRedo.gif","wide_image-width":600,"wide_image-height":301}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-measurement-2d\/index.html"},{"acf_fc_layout":"content","content":"
One last item worth mentioning is that when the unit<\/code>\u00a0is set to metric<\/strong> or imperial<\/strong>, the measurement label is expressed in a logical metric or imperial unit. For example, at large scales (zoomed in) the metric unit will be expressed in meters, but at small scales (zoomed out) it will automatically change to kilometers.<\/p>\n
Widget properties and methods<\/h3>\n
Now let’s take a brief dive into the properties and methods of the widgets and explore them in more detail.<\/p>\n
The AreaMeasurement2D<\/a>\u00a0widget calculates and displays the area and perimeter of a polygon. By default, the\u00a0mode<\/a> used to calculate the area and perimeter is set to auto<\/code>.\u00a0 This means that when the perimeter is less than 100 km, the mode<\/a>\u00a0is\u00a0planar<\/code>. When the perimeter is greater than or equal to 100 km, the mode<\/a>\u00a0is\u00a0geodesic<\/code>.\u00a0 This threshold value can be modified by setting the geodesicDistanceThreshold<\/a> property on the AreaMeasurement2DViewModel. Also,\u00a0the\u00a0mode<\/a>\u00a0can be set by the user in the UI of the widget, or by the developer in the code. Behind the scenes, we use the geometryEngine<\/a> to perform the appropriate measurement calculations.<\/p>\n
Similar to its 3D counterpart, you can define the default\u00a0measure unit<\/a> for the\u00a0AreaMeasurement2D\u00a0widget, or define the set of\u00a0measurement unit options<\/a> available to the user. All possible unit<\/code>\u00a0values are listed in the measure unit<\/a>\u00a0property; custom units that are not listed are not supported. Here are a couple of code snippets that illustrate this functionality:<\/p>\n"},{"acf_fc_layout":"content","content":"
\/\/ To create the AreaMeasurement2D widget that displays area in square miles<\/span>\r\nvar<\/span> measurementWidget = new<\/span> AreaMeasurement2D({\r\n  view: view,\r\n  unit: \"square-miles\"<\/span>\r\n});\r\n\r\n\/\/ To display the current measurement unit<\/span>\r\nconsole<\/span>.log(\"Current unit: \"<\/span>, measurementWidget.unit);\r\n\r\n\/\/ To create the AreaMeasurement2D widget that displays area in common US units<\/span>\r\nvar<\/span> measurementWidget = new<\/span> AreaMeasurement2D({\r\n  view: view,\r\n  unitOptions: [\"square-inches\"<\/span>, \"square-feet\"<\/span>, \"square-yards\"<\/span>, \"square-miles\"<\/span>]\r\n});\r\n\r\n\/\/ To display the available units to the console<\/span>\r\nconsole<\/span>.log(\"All units: \"<\/span>, measurementWidget.unitOptions.join(\", \"<\/span>));\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
Looking Ahead<\/h3>\n
Future releases will consider a number of new features and enhancements for measuring in both 2D and 3D. Stay tuned for a “smarter” widget, and more options for customization. Until then, happy measuring!<\/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":69281,"post_author":"6561","post_date":"2015-09-16 04:00:02","post_date_gmt":"2015-09-16 04:00:02","post_content":"","post_title":"GeometryEngine part 2: Measurement","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"geometryengine-part-2-measurement","to_ping":"","pinged":"","post_modified":"2023-03-15 14:57:23","post_modified_gmt":"2023-03-15 21:57:23","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/geometryengine-part-2-measurement\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":363902,"post_author":"4271","post_date":"2018-12-13 10:06:06","post_date_gmt":"2018-12-13 18:06:06","post_content":"","post_title":"What's New in ArcGIS API 4.10 for JavaScript (December 2018)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-4-10-december-2018","to_ping":"","pinged":"","post_modified":"2019-04-01 11:50:41","post_modified_gmt":"2019-04-01 18:50:41","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=363902","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":363542,"post_author":"7641","post_date":"2018-12-06 04:13:02","post_date_gmt":"2018-12-06 12:13:02","post_content":"","post_title":"What's New in ArcGIS Online (December 2018)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-arcgis-online-december-2018","to_ping":"","pinged":"","post_modified":"2021-04-18 23:25:11","post_modified_gmt":"2021-04-19 06:25:11","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=363542","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/DistanceMeasurement2D_blog.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/11\/Measurement_Blog_Background_stretched.png"},"yoast_head":"\nMeasure Twice with the new 2D Measurement Widgets<\/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-twice-with-the-new-2d-measurement-widgets\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Measure Twice with the new 2D Measurement Widgets\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\" \/>\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-twice-with-the-new-2d-measurement-widgets#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\"},\"author\":{\"name\":\"Noah Sager\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\"},\"headline\":\"Measure Twice with the new 2D Measurement Widgets\",\"datePublished\":\"2018-12-13T20:30:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"jsapi4\",\"Measure\",\"widget\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\",\"name\":\"Measure Twice with the new 2D Measurement Widgets\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-12-13T20:30:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Measure Twice with the new 2D Measurement Widgets\"}]},{\"@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 Twice with the new 2D Measurement Widgets","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-twice-with-the-new-2d-measurement-widgets","og_locale":"en_US","og_type":"article","og_title":"Measure Twice with the new 2D Measurement Widgets","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets","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-twice-with-the-new-2d-measurement-widgets#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets"},"author":{"name":"Noah Sager","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068"},"headline":"Measure Twice with the new 2D Measurement Widgets","datePublished":"2018-12-13T20:30:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["jsapi4","Measure","widget"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets","name":"Measure Twice with the new 2D Measurement Widgets","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-12-13T20:30:58+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/measure-twice-with-the-new-2d-measurement-widgets#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Measure Twice with the new 2D Measurement Widgets"}]},{"@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":"December 13, 2018","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\/2018\/11\/Measurement_Blog_Background_stretched.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"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":2698,"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":765,"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\/356102","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=356102"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/356102\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=356102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=356102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=356102"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=356102"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=356102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The exact same options are present with the\u00a0DistanceMeasurement2D widget.\u00a0By default, the\u00a0mode<\/a> used to calculate the area and perimeter is set to auto<\/code>.\u00a0 This means that when the distance is less than 100 km, the default\u00a0mode<\/a>\u00a0is\u00a0planar<\/code>. When the distance is greater than or equal to 100 km, the default\u00a0mode<\/a>\u00a0is\u00a0geodesic<\/code>.\u00a0 The threshold value can be modified by setting the geodesicDistanceThreshold<\/a> property on the DistanceMeasurement2DViewModel.<\/p>\n"},{"acf_fc_layout":"content","content":"
Both widgets are designed to be interactive drawing tools that return labeled measurements. For measuring specific features programmatically, we recommend using the appropriate\u00a0geometryEngine<\/a> methods (e.g. geodesicLength<\/a>).<\/p>\n