{"id":156611,"date":"2018-04-24T07:00:01","date_gmt":"2018-04-24T07:00:01","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=156611"},"modified":"2018-04-23T23:12:30","modified_gmt":"2018-04-23T23:12:30","slug":"build-3d-web-apps-with-your-2d-data","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data","title":{"rendered":"Build 3D web apps with your 2D data"},"author":6561,"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":[25771,25781,23791,24921,27491],"industry":[],"product":[36831,36601],"class_list":["post-156611","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-2d","tag-3d","tag-3d-analysis","tag-javascript","tag-jsapi4","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Are you reluctant to build 3D web apps because you don't have 3D data? Look no further than the 2D data sources already available to you.","flexible_content":[{"acf_fc_layout":"content","content":"<p>I recently had a conversation with a GIS professional responsible for assessing the feasibility of developing utility and energy projects in the southwestern United States. Knowing this, I asked him two questions: <\/p>\n"},{"acf_fc_layout":"blockquote","content":"<p><em><strong>Me:<\/strong> Does your organization build 3D web apps? <\/em><\/p>\n<p><strong>Him:<\/strong> No. <\/p>\n<p><em><strong>Me:<\/strong> Do you have a use-case or desire for building 3D apps?<\/em><\/p>\n<p><strong>Him:<\/strong> Absolutely, but I don\u2019t have 3D data\u2026<\/p>\n<p><em><strong>Me:<\/strong> You don\u2019t need 3D data to build 3D apps. You can get started with what you already have.<\/em><\/p>\n"},{"acf_fc_layout":"content","content":"<p>At the 2018 <a href=\"http:\/\/www.esri.com\/events\/devsummit\">Esri Developer Summit<\/a> in Palm Springs, <a href=\"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich\/\">Raluca Nicola<\/a> and I presented on this very topic: <a href=\"http:\/\/proceedings.esri.com\/library\/userconf\/devsummit18\/papers\/dev-int-170.pdf\">you don\u2019t need 3D data to get started with 3D apps<\/a>! In fact, many of you can take your existing data and get started today using the <a href=\"https:\/\/developers.arcgis.com\/javascript\/\">ArcGIS API for JavaScript<\/a> (JS API).<\/p>\n<h2>Building an airspace encroachment analysis app<\/h2>\n<p>The case this user posed involved displaying <a href=\"https:\/\/ais-faa.opendata.arcgis.com\/datasets\/0c6899de28af447c801231ed7ba7baa6_0?geometry=-118.045%2C31.838%2C-103.038%2C37.499&#038;mapSize=map-maximizee\">Military Training Routes<\/a> (MTRs) in a 3D view and using that data to visually represent whether proposed energy or development projects, particularly wind farms, are at risk for encroaching on them. An MTR is airspace reserved for military training, and must be kept clear from any interference. <a href=\"https:\/\/www.reuters.com\/article\/us-sweden-windpower-military\/in-sweden-wind-farms-and-warplanes-battle-for-airspace-idUSKBN1HP1CK\">MTR encroachment has been a hot topic lately<\/a> since wind turbines have been <a href=\"https:\/\/www.nytimes.com\/interactive\/2018\/04\/23\/business\/energy-environment\/big-windmills.html\">designed to be larger and more powerful<\/a> in recent years.<\/p>\n<p>In 2D maps an MTR is commonly represented as a line or a polygon. In reality it is a volume, similar to a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Cuboid\">cuboid<\/a>, defined by a set length (a), width (b), and height (c).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":157261,"id":157261,"title":"cuboid","filename":"cuboid-1.png","filesize":3699,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/cuboid-2","alt":"","author":"6561","description":"","caption":"MTRs are better represented as cuboids, rather than 2D polygons.","name":"cuboid-2","status":"inherit","uploaded_to":156611,"date":"2018-04-19 17:09:10","modified":"2018-04-19 17:09: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":400,"height":300,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","thumbnail-width":213,"thumbnail-height":160,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","medium-width":348,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","medium_large-width":400,"medium_large-height":300,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","large-width":400,"large-height":300,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","1536x1536-width":400,"1536x1536-height":300,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","2048x2048-width":400,"2048x2048-height":300,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","card_image-width":400,"card_image-height":300,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/cuboid-1.png","wide_image-width":400,"wide_image-height":300}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The project proposals this user deals with largely focus on wind farms. So the goal of the 3D app would be to visualize the MTRs in 3D; plot the locations of proposed wind turbines, visualizing them as 3D models; and assess whether the turbines are at risk for encroaching on MTRs based on their height, which can be modified in the app.<\/p>\n<p>Multiple risk levels could be defined to classify whether a project proposal has potential for interfering with designated MTR airspace. For prototypical purposes, the user indicated the app should determine encroachment in one of three risk zones, each 100 feet apart from one another, expanding vertically and horizontally from the MTRs.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":157611,"id":157611,"title":"MTR overview","filename":"MTR-overview.png","filesize":21325,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/mtr-overview","alt":"","author":"6561","description":"","caption":"Project proposals must not interfere with reserved MTR airspace, so a risk assessment must be performed when a project is proposed.","name":"mtr-overview","status":"inherit","uploaded_to":156611,"date":"2018-04-19 17:54:54","modified":"2018-04-19 17:55:50","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":680,"height":509,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","thumbnail-width":213,"thumbnail-height":159,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","medium-width":349,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","medium_large-width":680,"medium_large-height":509,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","large-width":680,"large-height":509,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","1536x1536-width":680,"1536x1536-height":509,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","2048x2048-width":680,"2048x2048-height":509,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","card_image-width":621,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/MTR-overview.png","wide_image-width":680,"wide_image-height":509}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>I acquired a subset of my colleague\u2019s MTR data, which was represented as polygons. This data contain a number of attributes, including the elevations (relative to the terrain) of the bottom and top of each MTR. With that polygon layer, which contained attributes representing vertical measurements, and a CSV file containing fictional wind turbine locations, I was able to create the following proof of concept in a matter of just a few hours.<\/p>\n<p>To see how it works, <a href=\"https:\/\/ekenes.github.io\/conferences\/ds-2018\/3d-viz-2d-data\/demos\/mtr\/\">open the app<\/a> and click the download icon in the top right corner of the view. Then drag and drop the CSV into the view. The height of the turbines is automatically read from the CSV and used to determine their risk for encroachment. The color of the MTRs is updated to reflect the risk the turbines pose at the given height. Notice that you can alter the height of the turbines to re-run the analysis.<\/p>\n"},{"acf_fc_layout":"storymap","title":"Airspace encroachment analysis","description":"","static":false,"storymap_url":"<a href=\"https:\/\/ekenes.github.io\/conferences\/ds-2018\/3d-viz-2d-data\/demos\/mtr\/\">https:\/\/ekenes.github.io\/conferences\/ds-2018\/3d-viz-2d-data\/demos\/mtr\/<\/a>"},{"acf_fc_layout":"content","content":"<p>Turbines are imperceptibly small at the initial startup location so you may need to zoom a few times toward to the purple point symbols to see them. You can also click the &#8220;Zoom to turbines&#8221; button (icon with four arrows pointing inward) in the top left corner of the view to zoom to their locations. <\/p>\n<p>As you navigate to the turbine locations, you will notice they are rendered with 3D symbology based on their indicated height. As you change the height of the proposed project, the height of the turbines will likewise change to reflect how they would appear in the real world in relation to the MTRs and the surrounding elevation.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":157161,"id":157161,"title":"turbine-resize","filename":"turbine-resize.gif","filesize":1278110,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/turbine-resize","alt":"","author":"6561","description":"","caption":"Turbine symbols can be resized to run a new analysis.","name":"turbine-resize","status":"inherit","uploaded_to":156611,"date":"2018-04-19 16:28:24","modified":"2018-04-19 16:29:41","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":374,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","thumbnail-width":213,"thumbnail-height":124,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","medium-width":447,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","medium_large-width":640,"medium_large-height":374,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","large-width":640,"large-height":374,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","1536x1536-width":640,"1536x1536-height":374,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","2048x2048-width":640,"2048x2048-height":374,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","card_image-width":640,"card_image-height":374,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbine-resize.gif","wide_image-width":640,"wide_image-height":374}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>How the app works<\/h2>\n<p>There are three aspects of the JS API used in this application that allow us to render 2D data with 3D symbology in 3D space:<\/p>\n<ul>\n<li><strong>Extrude polygons<\/strong> based on real-world measurements<\/li>\n<li><strong>Offset features in vertical space<\/strong> using attribute fields<\/li>\n<li><strong>Draw 2D points with 3D realistic symbology<\/strong> scaled to real-world size<\/li>\n<\/ul>\n<h2>Extrude polygons<\/h2>\n<p>Polygons can be extruded using an <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-ExtrudeSymbol3DLayer.html\">ExtrudeSymbol3DLayer<\/a> in a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-PolygonSymbol3D.html\">PolygonSymbol3D<\/a>. The following snippet will extrude all polygons in the layer based on a fixed height of 1000 meters.<\/p>\n<pre><code\r\n style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\">\r\nlayer.renderer = {\r\n  type: <span\r\n style=\"color: #d14;\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span\r\n style=\"color: #d14;\">\"polygon-3d\"<\/span>,\r\n    symbolLayers: [{\r\n      type: <span\r\n style=\"color: #d14;\">\"extrude\"<\/span>,\r\n      size: <span\r\n style=\"color: #008080;\">1000<\/span>,  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ meters by default<\/span>\r\n      material: {\r\n        color: [ <span\r\n style=\"color: #008080;\">43<\/span>,<span\r\n style=\"color: #008080;\">123<\/span>,<span\r\n style=\"color: #008080;\">255<\/span>,<span\r\n style=\"color: #008080;\">0.5<\/span> ]\r\n      }\r\n    }]\r\n  },\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":157011,"id":157011,"title":"1000ft-constant","filename":"1000ft-constant.png","filesize":36496,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/1000ft-constant","alt":"","author":"6561","description":"","caption":"All polygons are extruded by a constant 1000 ft.","name":"1000ft-constant","status":"inherit","uploaded_to":156611,"date":"2018-04-19 15:30:19","modified":"2018-04-19 15:30:59","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":939,"height":464,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","thumbnail-width":213,"thumbnail-height":105,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","medium-width":464,"medium-height":229,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","medium_large-width":768,"medium_large-height":380,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","large-width":939,"large-height":464,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","1536x1536-width":939,"1536x1536-height":464,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","2048x2048-width":939,"2048x2048-height":464,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","card_image-width":826,"card_image-height":408,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/1000ft-constant.png","wide_image-width":939,"wide_image-height":464}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>But we want to extrude the height of each area based on a real-world value since heights will vary depending on the MTR. This is accomplished with the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-Renderer.html#RealWorldSize\">real world size visual variable<\/a>, which is set directly on the layer&#8217;s renderer. If we had a height field, we could simply reference the field name in the visual variable and the JS API would handle the extrusion based on values in that field. <\/p>\n<pre><code\r\n style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\">\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ extrude features based on field value<\/span>\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ using a size visual variable<\/span>\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> mtrHeight = {\r\n  type: <span\r\n style=\"color: #d14;\">\"size\"<\/span>,\r\n  field: <span\r\n style=\"color: #d14;\">\"heightField\"<\/span>,\r\n  valueUnit: <span\r\n style=\"color: #d14;\">\"feet\"<\/span>\r\n};\r\n\r\nrenderer.visualVariables = [ mtrHeight ];\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n<p>The MTR dataset, however, has two fields that can help us determine the height of each zone: <code>elvnumcl<\/code> (elevation ceiling) and <code>elvnumflr<\/code> (elevation floor). We can use <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/arcade\/index.html\">Arcade<\/a> in the size visual variable to take the difference between those two values, allowing us extrude based on the actual height of each zone. <\/p>\n<pre><code\r\n style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\">\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ extrude features based on Arcade expression<\/span>\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> mtrHeight = {\r\n  type: <span\r\n style=\"color: #d14;\">\"size\"<\/span>,\r\n  valueExpression: <span\r\n style=\"color: #d14;\">\"$feature.elvnumcl - $feature.elvnumflr\"<\/span>,\r\n  valueUnit: <span\r\n style=\"color: #d14;\">\"feet\"<\/span>\r\n};\r\n<\/code><\/pre>\n<p>For example, if the elevation of the ceiling of the zone is 30,000 feet and the floor elevation is 12,000 feet, then the extrusion value will be 18,000 feet.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":157301,"id":157301,"title":"extrusion-arcade","filename":"extrusion-arcade.png","filesize":242839,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/extrusion-arcade","alt":"","author":"6561","description":"","caption":"The height of extruded features vary because they are based on attribute values representing real-world heights.","name":"extrusion-arcade","status":"inherit","uploaded_to":156611,"date":"2018-04-19 17:14:53","modified":"2018-04-19 17:15:12","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":1100,"height":764,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","thumbnail-width":213,"thumbnail-height":148,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","medium-width":376,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","medium_large-width":768,"medium_large-height":533,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","large-width":1100,"large-height":764,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","1536x1536-width":1100,"1536x1536-height":764,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","2048x2048-width":1100,"2048x2048-height":764,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","card_image-width":670,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/extrusion-arcade.png","wide_image-width":1100,"wide_image-height":764}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Offset features in vertical space<\/h2>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-FeatureLayer.html#elevationInfo\">elevationInfo<\/a> property of the layer indicates where the features should be drawn in vertical space. If geometries have z-values, then they are placed at those absolute locations by default. Understanding the configurations of the <code>elevationInfo<\/code> property is essential when creating 3D apps with 2D data sources. When I say &#8220;2D&#8221;, I specifically refer to <strong>features that don\u2019t have z-values in the geometry object<\/strong>.<\/p>\n<p>In the MTR data, the elevation floor attribute indicates the altitude, or number of feet above the ground (not sea level), at which the bottom of the MTR resides. Since this value is relative to the ground, we\u2019ll use the <code>relative-to-ground<\/code> mode, setting the offset to the <code>elvnumflr<\/code> value.<\/p>\n<pre><code\r\n style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\">\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ vertically offset features based on elevation<\/span>\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ or z-value stored in data attribute<\/span>\r\n\r\nlayer.elevationInfo = {\r\n  mode: <span\r\n style=\"color: #d14;\">\"relative-to-ground\"<\/span>,\r\n  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ other values: absolute height | on-the-ground | relative-to-scene<\/span>\r\n  featureExpressionInfo: {\r\n    expression: <span\r\n style=\"color: #d14;\">\"$feature.elvnumflr\"<\/span>\r\n  },\r\n  unit: <span\r\n style=\"color: #d14;\">\"feet\"<\/span>\r\n};\r\n<\/code><\/pre>\n<p>Check out the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/scene-elevationinfo\/index.html\">Elevation options sample<\/a> to become acquainted with all the options available to you in this powerful configuration setting.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":157291,"id":157291,"title":"elevationInfo-arcade","filename":"elevationInfo-arcade.png","filesize":338156,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/elevationinfo-arcade","alt":"","author":"6561","description":"","caption":"2D features are vertically offset based on elevation values found in layer attributes, not geometries.","name":"elevationinfo-arcade","status":"inherit","uploaded_to":156611,"date":"2018-04-19 17:14:03","modified":"2018-04-19 19:52: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":1322,"height":920,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","thumbnail-width":213,"thumbnail-height":148,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","medium-width":375,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","medium_large-width":768,"medium_large-height":534,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","large-width":1322,"large-height":920,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","1536x1536-width":1322,"1536x1536-height":920,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","2048x2048-width":1322,"2048x2048-height":920,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","card_image-width":668,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/elevationInfo-arcade.png","wide_image-width":1322,"wide_image-height":920}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Draw 2D points with 3D realistic symbology<\/h2>\n<p>Now that the MTRs render at their appropriate locations, let\u2019s add the wind turbines to the map and style them with realistic 3D symbology.<\/p>\n<p>The ability to render 2D points with complex 3D models is one of my favorite parts of the ArcGIS API for JavaScript. The API has <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-web-style-symbols\/index.html\">hundreds of symbols available<\/a> that can be drawn in your app with just a few lines of code. The realistic symbology is defined with the API\u2019s <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-WebStyleSymbol.html\">WebStyleSymbol<\/a> class. To use a web style symbol, simply search the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-web-style-symbols\/index.html#street-scene\">Esri Web Style Symbols reference page<\/a> and indicate the style and symbol name of the model you wish to use. You can even copy and paste the snippet used to construct the symbol directly from that page to your app.<\/p>\n"},{"acf_fc_layout":"content","content":"<p>For example, to render the points with a construction crane model, paste the following code to the symbol of the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-CSVLayer.html#renderer\">CSVLayer renderer<\/a>.<\/p>\n<pre><code\r\n style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\">\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ render points using a 3D model<\/span>\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ of a construction crane in a web style <\/span>\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ provided out-of-the box by the JS API<\/span>\r\n\r\ncsvLayer.renderer = {\r\n  type: <span\r\n style=\"color: #d14;\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span\r\n style=\"color: #d14;\">\"web-style\"<\/span>,\r\n    name: <span\r\n style=\"color: #d14;\">\"Tower_Crane\"<\/span>,\r\n    styleName: <span\r\n style=\"color: #d14;\">\"EsriRealisticTransportationStyle\"<\/span>\r\n  },\r\n  visualVariables: [{\r\n    type: <span\r\n style=\"color: #d14;\">\"size\"<\/span>,\r\n    field: <span\r\n style=\"color: #d14;\">\"total_ht\"<\/span>,  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ crane height in feet<\/span>\r\n    axis: <span\r\n style=\"color: #d14;\">\"height\"<\/span>,\r\n    valueUnit: <span\r\n style=\"color: #d14;\">\"feet\"<\/span>\r\n  }]\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":157681,"id":157681,"title":"crane-symbol","filename":"crane-symbol-1.png","filesize":28124,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/crane-symbol-2","alt":"","author":"6561","description":"","caption":"Hundreds of web styles are provided by the JS API out of the box, including this tower crane model.","name":"crane-symbol-2","status":"inherit","uploaded_to":156611,"date":"2018-04-19 18:21:54","modified":"2018-04-23 19:13:27","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":605,"height":500,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","thumbnail-width":213,"thumbnail-height":176,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","medium-width":316,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","medium_large-width":605,"medium_large-height":500,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","large-width":605,"large-height":500,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","1536x1536-width":605,"1536x1536-height":500,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","2048x2048-width":605,"2048x2048-height":500,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","card_image-width":563,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/crane-symbol-1.png","wide_image-width":605,"wide_image-height":500}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Since the JS API doesn\u2019t have a wind turbine symbol, we can publish our own to ArcGIS Online and consume it in the app. See the <a href=\"https:\/\/pro.arcgis.com\/en\/pro-app\/help\/sharing\/overview\/share-a-web-style.htm\">Share a web style documentation<\/a> on how to accomplish this. My colleague <a href=\"https:\/\/www.esri.com\/arcgis-blog\/author\/russroberts\/\">Russell Roberts<\/a> and I found <a href=\"https:\/\/www.turbosquid.com\/3d-models\/free-wind-turbine-3d-model\/642388\">this free wind turbine 3D model symbol<\/a> after doing a search on Google. We downloaded it and published it to ArcGIS Online using ArcGIS Pro. It took no more than five minutes from the start of the search to actually using the model in my app.<\/p>\n<p>Use the same <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-Renderer.html#RealWorldSize\">RealWorldSize<\/a> visual variable to scale the symbol based on its height in the real world. You can use Arcade to scale the model to custom heights based on user input.<\/p>\n<pre><code\r\n style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\">\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ render points using a 3D model<\/span>\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ of a wind turbine published from ArcGIS Pro<\/span>\r\n\r\ncsvLayer.renderer = {\r\n  type: <span\r\n style=\"color: #d14;\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span\r\n style=\"color: #d14;\">\"web-style\"<\/span>,\r\n    styleUrl: <span\r\n style=\"color: #d14;\">\"https:\/\/www.arcgis.com\/sharing\/rest\/content\/items\/635f270120664b6fa510ff5dd2ba099a\/data\"<\/span>,\r\n    name: <span\r\n style=\"color: #d14;\">\"Turbines\"<\/span>\r\n  },\r\n  visualVariables: [{\r\n    type: <span\r\n style=\"color: #d14;\">\"size\"<\/span>,\r\n    field: <span\r\n style=\"color: #d14;\">\"total_ht\"<\/span>,\r\n    axis: <span\r\n style=\"color: #d14;\">\"height\"<\/span>,\r\n    valueUnit: <span\r\n style=\"color: #d14;\">\"feet\"<\/span>\r\n  }]\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":157091,"id":157091,"title":"turbines-csv","filename":"turbines-csv.png","filesize":43468,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/turbines-csv","alt":"","author":"6561","description":"","caption":"Even though the CSV file contains 2D data points, we can represent them with more complex 3D models using a simple API.","name":"turbines-csv","status":"inherit","uploaded_to":156611,"date":"2018-04-19 15:47:17","modified":"2018-04-19 15:48: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":780,"height":600,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","thumbnail-width":213,"thumbnail-height":164,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","medium-width":339,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","medium_large-width":768,"medium_large-height":591,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","large-width":780,"large-height":600,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","1536x1536-width":780,"1536x1536-height":600,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","2048x2048-width":780,"2048x2048-height":600,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","card_image-width":605,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/turbines-csv.png","wide_image-width":780,"wide_image-height":600}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>3D client-side analysis<\/h2>\n<p>For the purposes of this application, simply rendering 2D data in 3D is not enough. Performing an encroachment analysis is what ties the two data sources together and makes this app useful. We can perform an encroachment analysis client-side using the JS API&#8217;s <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-geometry-geometryEngine.html\">geometry engine<\/a> and simple math with the elevation attributes. <\/p>\n<p>The analysis will be executed in a custom function set to the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-UniqueValueRenderer.html#field\">field property<\/a> of the renderer. This will allow us to analyze each MTR in relation to the project and shade them with a different color depending on the assessed risk level for encroachment.<\/p>\n<p>While this is presented as a 3D encroachment analysis, it\u2019s important to realize that we aren\u2019t performing complicated 3D operations such as 3D buffer and intersect. Rather, we create several 2D buffers around the project points, then we check two conditions: <\/p>\n<p>1. Do any of the 2D buffers intersect an MTR?<br \/>\n2. Is the height of the project plus the buffer distance greater than the lower elevation value of the MTR? <\/p>\n<p>If both conditions are <code>true<\/code>, then the appropriate risk level is returned.<\/p>\n<pre><code\r\n style=\"display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; -webkit-text-size-adjust: none;\">\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ get geometry from layer and height from UI<\/span>\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> projectGeometry = { <span\r\n style=\"color: #998; font-style: italic;\">\/* geom object *\/<\/span> };\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> height = <span\r\n style=\"color: #008080;\">300<\/span>;\r\n\r\n<span\r\n style=\"color: #333; font-weight: bold;\">const<\/span> riskLevels = {\r\n  low: <span\r\n style=\"color: #008080;\">300<\/span>,\r\n  medium: <span\r\n style=\"color: #008080;\">200<\/span>,\r\n  high: <span\r\n style=\"color: #008080;\">100<\/span>\r\n};\r\n\r\n<span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> riskLevelBuffers = {};\r\n<span\r\n style=\"color: #998; font-style: italic;\">\/\/ buffering outside of renderer function to improve performance<\/span>\r\n<span\r\n style=\"color: #333; font-weight: bold;\">for<\/span> (<span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> level <span\r\n style=\"color: #333; font-weight: bold;\">in<\/span> riskLevels){\r\n  riskLevelBuffers[level] = geometryEngine.geodesicBuffer(projectGeometry, riskLevels[level], <span\r\n style=\"color: #d14;\">\"feet\"<\/span>);\r\n}\r\n\r\n<span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> classifyFeatures = <span\r\n><span\r\n style=\"color: #333; font-weight: bold;\">function<\/span> (<span\r\n>graphic<\/span>)<\/span>{\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> ceilingValue = graphic.attributes.elvnumcl;\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> floorValue = graphic.attributes.elvnumflr;\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> geom = graphic.geometry;\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> minRestriction = floorValue;\r\n\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> risk = <span\r\n style=\"color: #d14;\">\"none\"<\/span>;  <span\r\n style=\"color: #998; font-style: italic;\">\/\/ none | low | medium | high<\/span>\r\n\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">for<\/span> (<span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> level <span\r\n style=\"color: #333; font-weight: bold;\">in<\/span> riskLevels){\r\n    <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> bufferValue = riskLevels[level];\r\n    <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> heightRisk = height &gt;= (floorValue - bufferValue);\r\n    <span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> xyRisk = geometryEngine.intersects(geom, riskLevelBuffers[level]);\r\n    risk = heightRisk &amp;&amp; xyRisk ? level : risk;\r\n  }\r\n\r\n  <span\r\n style=\"color: #333; font-weight: bold;\">return<\/span> risk;\r\n}\r\n\r\n<span\r\n style=\"color: #333; font-weight: bold;\">let<\/span> renderer = {\r\n  type: <span\r\n style=\"color: #d14;\">\"unique-value\"<\/span>,\r\n  field: classifyFeatures,\r\n  uniqueValueInfos: [ \r\n    <span\r\n style=\"color: #998; font-style: italic;\">\/\/ set high, medium, low colors here<\/span>\r\n  ]\r\n};\r\n\r\nlayer.renderer = renderer;\r\n<\/code><\/pre>\n<p>For example, suppose the 200ft buffer intersects an MTR polygon. If the elevation of the lower bound of the same MTR is within 200 feet of that buffer, then the project location is at \u201cmedium\u201d risk for encroachment. If just one of those conditions is false, there is no risk for encroachment.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":157341,"id":157341,"title":"evaluating-encroachment","filename":"evaluating-encroachment-1.png","filesize":52176,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\/evaluating-encroachment-2","alt":"","author":"6561","description":"","caption":"The project must intersect the MTR in 2D (horizontal) space AND in vertical space for there to be risk for encroachment.","name":"evaluating-encroachment-2","status":"inherit","uploaded_to":156611,"date":"2018-04-19 17:22:45","modified":"2018-04-19 17:22:58","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":1271,"height":482,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","thumbnail-width":213,"thumbnail-height":81,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","medium-width":464,"medium-height":176,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","medium_large-width":768,"medium_large-height":291,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","large-width":1271,"large-height":482,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","1536x1536-width":1271,"1536x1536-height":482,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","2048x2048-width":1271,"2048x2048-height":482,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","card_image-width":826,"card_image-height":313,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/evaluating-encroachment-1.png","wide_image-width":1271,"wide_image-height":482}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Summary<\/h2>\n<p>Hopefully, you now have a sense of how powerful 3D can be for helping your users better understand problems relevant to vertical geography. For example, I could have performed the same analysis and a similar visualization in a 2D app. However, the 2D version of the app would fail to convey the actual space each MTR occupies in the real world. How would you gain any sense of depth without the third dimension? <\/p>\n<p>Also, I hope you walk away inspired with ideas you can use to get started with 3D, even when you are restricted to only using 2D data. With 2D data, you can extrude, use 3D models, and place features in 3D space. You can even attempt 3D analyses. No, we didn\u2019t create \u201creal\u201d 3D buffers and perform a true 3D intersection on that buffer. But we did find a solution that is pretty close and will work for similar use cases. Check out the additional samples below, for more examples of building 3D apps with 2D data.<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-buildings-3d\/index.html\">Extrude building footprints based on real world heights<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-trees-realistic\/index.html\">Thematic visualization with realistic 3D symbols<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-webstylesymbol\/index.html\">Visualize features with realistic WebStyleSymbols<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/scene-elevationinfo\/index.html\">Elevation options<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-label-callout\/index.html\">Using callout lines with labels<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/scene-local\/index.html\">Create a local scene<\/a> (Render data below the ground)<\/li>\n<\/ul>\n<p>So get started, and give 3D a try! <\/p>\n"}],"authors":[{"ID":6561,"user_firstname":"Kristian","user_lastname":"Ekenes","nickname":"Kristian Ekenes","user_nicename":"kekenes","display_name":"Kristian Ekenes","user_email":"KEkenes@esri.com","user_url":"https:\/\/github.com\/ekenes","user_registered":"2018-03-02 00:18:32","user_description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":70711,"post_author":"6561","post_date":"2016-02-01 11:11:21","post_date_gmt":"2016-02-01 11:11:21","post_content":"","post_title":"3D visualization: Using attributes to represent real-world sizes of features","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"3d-visualization-using-attributes-to-represent-real-world-sizes-of-features","to_ping":"","pinged":"","post_modified":"2018-03-26 21:07:44","post_modified_gmt":"2018-03-26 21:07:44","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features\/","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\/04\/turbines-card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/02\/SunGlint_Banner.jpg"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build 3D web apps with your 2D data<\/title>\n<meta name=\"description\" content=\"Are you reluctant to build 3D web apps because you don&#039;t have 3D data? Look no further than the 2D data sources already available to you.\" \/>\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\/build-3d-web-apps-with-your-2d-data\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build 3D web apps with your 2D data\" \/>\n<meta property=\"og:description\" content=\"Are you reluctant to build 3D web apps because you don&#039;t have 3D data? Look no further than the 2D data sources already available to you.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\" \/>\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\/build-3d-web-apps-with-your-2d-data#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Build 3D web apps with your 2D data\",\"datePublished\":\"2018-04-24T07:00:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"2D\",\"3D\",\"3D Analysis\",\"JavaScript\",\"jsapi4\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\",\"name\":\"Build 3D web apps with your 2D data\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-04-24T07:00:01+00:00\",\"description\":\"Are you reluctant to build 3D web apps because you don't have 3D data? Look no further than the 2D data sources already available to you.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build 3D web apps with your 2D data\"}]},{\"@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\/5469f723fbfb78138efbb1da56e6aa9b\",\"name\":\"Kristian Ekenes\",\"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\/2021\/10\/ekenes-zurich-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"caption\":\"Kristian Ekenes\"},\"description\":\"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.\",\"sameAs\":[\"https:\/\/github.com\/ekenes\",\"https:\/\/www.linkedin.com\/in\/kristian-ekenes\/\",\"https:\/\/x.com\/kekenes\"],\"gender\":\"male\",\"jobTitle\":\"Principal Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build 3D web apps with your 2D data","description":"Are you reluctant to build 3D web apps because you don't have 3D data? Look no further than the 2D data sources already available to you.","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\/build-3d-web-apps-with-your-2d-data","og_locale":"en_US","og_type":"article","og_title":"Build 3D web apps with your 2D data","og_description":"Are you reluctant to build 3D web apps because you don't have 3D data? Look no further than the 2D data sources already available to you.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data","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\/build-3d-web-apps-with-your-2d-data#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Build 3D web apps with your 2D data","datePublished":"2018-04-24T07:00:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["2D","3D","3D Analysis","JavaScript","jsapi4"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data","name":"Build 3D web apps with your 2D data","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-04-24T07:00:01+00:00","description":"Are you reluctant to build 3D web apps because you don't have 3D data? Look no further than the 2D data sources already available to you.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/build-3d-web-apps-with-your-2d-data#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Build 3D web apps with your 2D data"}]},{"@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\/5469f723fbfb78138efbb1da56e6aa9b","name":"Kristian Ekenes","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\/2021\/10\/ekenes-zurich-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","caption":"Kristian Ekenes"},"description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","sameAs":["https:\/\/github.com\/ekenes","https:\/\/www.linkedin.com\/in\/kristian-ekenes\/","https:\/\/x.com\/kekenes"],"gender":"male","jobTitle":"Principal Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes"}]}},"text_date":"April 24, 2018","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/02\/SunGlint_Banner.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25771,"name":"2D","slug":"2d","term_group":0,"term_taxonomy_id":25771,"taxonomy":"post_tag","description":"","parent":0,"count":6,"filter":"raw"},{"term_id":25781,"name":"3D","slug":"3d","term_group":0,"term_taxonomy_id":25781,"taxonomy":"post_tag","description":"","parent":0,"count":342,"filter":"raw"},{"term_id":23791,"name":"3D Analysis","slug":"3d-analysis","term_group":0,"term_taxonomy_id":23791,"taxonomy":"post_tag","description":"","parent":0,"count":20,"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"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"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":362,"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\/156611","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\/6561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=156611"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/156611\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=156611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=156611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=156611"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=156611"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=156611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}