{"id":70671,"date":"2016-01-19T10:00:39","date_gmt":"2016-01-19T10:00:39","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/3d-visualization-working-with-icons-lines-and-fill-symbols\/"},"modified":"2019-07-18T15:46:29","modified_gmt":"2019-07-18T22:46:29","slug":"3d-visualization-working-with-icons-lines-and-fill-symbols","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols","title":{"rendered":"3D visualization: working with icons, lines, and fill symbols"},"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":[23771,22941],"tags":[25781,23811,23201,24921,27491,24581,29551],"industry":[],"product":[36831,36601],"class_list":["post-70671","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","category-mapping","tag-3d","tag-3d-visualization","tag-cartographic-design","tag-javascript","tag-jsapi4","tag-smart-mapping","tag-visualvariables","product-js-api-arcgis","product-developers"],"acf":{"short_description":"This is the first post in a three-part series exploring 3D attribute-based visualizations in web applications using the ArcGIS API for Ja...","flexible_content":[{"acf_fc_layout":"content","content":"

This is the first post in a three-part series exploring 3D attribute-based visualizations in web applications using the ArcGIS API for JavaScript version 4.0<\/a>. In this post we’ll primarily discuss working with flat 3D symbols – icons, lines, and fill symbols in a SceneView<\/a>.<\/p>\n

1. Working with icons, lines, and fill symbols
\n2. Working with Objects, paths, and extrusion<\/a>
\n3. Using attributes to represent real-world sizes of features<\/a><\/p>\n

Last week<\/a>, I discussed multivariate mapping using version 3.15 of the ArcGIS JavaScript API. Thanks to visual variables<\/a>, we were able to easily expose some interesting spatial patterns using size, color and opacity. The principles mentioned in that post apply similarly when working with 2D visualization in a MapView<\/a> using the 4.0 API<\/a>.<\/p>\n

Prior to making visualization decisions, we first must understand our data, its geometry type, the number of variables we want to visualize, and how to represent them.<\/p>\n

While the SceneView supports all of the 2D symbol types for rendering data in MapViews (SimpleMarkerSymbol<\/a>, SimpleLineSymbol<\/a>, SimpleFillSymbol<\/a>, etc.), we also have 3D symbols<\/a> at our disposal that give us more customized control over the look and feel of each symbol. This is made possible thanks to symbol layers<\/a>.<\/p>\n

Symbol Layers<\/h2>\n

Version 4.0 of the JavaScript API introduced the concept of symbol layers<\/a> in 3D symbols. Think of the symbol object as a package that contains multiple symbol layers that define the symbol\u2019s appearance. One layer may be an outline, another the fill, etc. The relationship of symbol layers to symbol is similar to the relationship of operational layers to a map. The map is the package that holds the data, and the layers are the individual pieces of the data that make the map a visual representation of geographic phenomena. <\/p>\n

There are four types of 3D symbols that correspond to specific geometry types: PointSymbol3D<\/a> (points), LineSymbol3D<\/a> (lines), PolygonSymbol3D<\/a> (polygons), and MeshSymbol3D<\/a> (meshes). These symbols can only be assigned to features that share their respective geometry type.<\/p>\n

\"Symbol3D<\/a><\/p>\n

Each symbol type has a symbolLayers<\/a> property, which is an array of symbol layers that make up the symbol. All symbols must have at least one symbol layer added to this property. There are various types of symbol layers. See the table below to learn about each:<\/p>\n

\"\"<\/a><\/p>\n

Each symbol layer has a material<\/a> property, which defines the symbol\u2019s color, and a size<\/a> property (with the exception of FillSymbol3DLayer<\/a>) that controls the size of the symbol. <\/p>\n

In most cases, a single symbol layer will be sufficient for a particular symbol. However, you may add multiple symbol layers to create a custom symbol like in the screenshot below. <\/p>\n

CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n

The symbol in the sample above was created with three IconSymbol3DLayers<\/a>. In code, the symbol is created in the following way:<\/p>\n

\r\nvar<\/span> surfaceSym = new<\/span> PointSymbol3D({\r\n   symbolLayers: [\r\n     \/\/wide semi-transparent icon<\/span>\r\n     new<\/span> IconSymbol3DLayer({\r\n       material: { color: [219<\/span>,53<\/span>,53<\/span>, 0.5<\/span>] },\r\n       resource: { primitive: \"circle\"<\/span> },\r\n       size: 20<\/span>\r\n     }),\r\n    \/\/smaller opaque icon centered in transparent icon<\/span>\r\n    new<\/span> IconSymbol3DLayer({\r\n      material: { color: [219<\/span>,53<\/span>,53<\/span>, 1<\/span>] },\r\n      resource: { primitive: \"circle\"<\/span> },\r\n      size: 8<\/span>,\r\n      outline: {\r\n        color: \"white\"<\/span>,\r\n        size: 0.5<\/span>\r\n      }\r\n    }),\r\n    \/\/places an outer ring around the red icons<\/span>\r\n    new<\/span> IconSymbol3DLayer({\r\n      material: { color: [0<\/span>,0<\/span>,0<\/span>, 0<\/span>] },\r\n      resource: { primitive: \"circle\"<\/span> },\r\n      size: 50<\/span>,\r\n      outline: {\r\n        color: \"black\"<\/span>,\r\n        size: 0.5<\/span>\r\n      }\r\n    })\r\n  ]    \r\n});\r\n<\/pre>\n
The following sample takes a similar approach, but symbolizes highways using multiple LineSymbol3DLayers<\/a> in a UniqueValueRenderer<\/a>. <\/p>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n
Billboarded vs draped icons<\/h2>\n
If working with icon symbol layers<\/a>, another consideration when creating 2D-like visualizations in a 3D scene is whether to drape the symbols on the terrain or \u201cbillboard\u201d them. Billboarding allows the symbol to face the user at all times as long as it is visible to the camera. Draping allows the symbol to lie on the surface so that it is \u201cdraped\u201d on the terrain. The earthquake sample referenced below uses draped symbols.<\/p>\n
CLICK HERE TO VIEW LIVE SAMPLE OF DRAPED SYMBOLS<\/b><\/a>
\n\"\"<\/a><\/p>\n
Both options have their benefits and tradeoffs. Draping takes perspective into account so symbols of the same size appear smaller when located further from the camera. This isn\u2019t the case with billboarding where symbols maintain the same screen space as long as they are visible. <\/p>\n
Another limitation with flat symbols is they can be difficult to interpret when the view is tilted no matter if they are billboarded or draped. For that reason you may want to consider using view constraints to keep the user from tilting the view to angles that make the data difficult to understand. However, that decision is up to you as a developer and depends on the purpose of the application and the context of the data.<\/p>\n
Draping and billboarding is controlled in the elevationInfo<\/a> property on the layer. Setting the mode to \u201con-the-ground\u201d drapes the symbol, and setting the mode to \u201cabsolute-height\u201d or \u201crelative-to-ground\u201d billboards it. When billboarding, setting the optional offset helps render each icon optimally.<\/p>\n
\r\nvar<\/span> layer = new<\/span> GraphicsLayer({\r\n  \/\/this billboards the icons<\/span>\r\n  elevationInfo: {\r\n    \/\/setting the mode to \u201con-the-ground\u201d drapes the icons<\/span>\r\n    mode: \"relative-to-ground\"<\/span>,\r\n    offset: 100<\/span>\r\n  }\r\n});\r\n<\/pre>\n
CLICK HERE TO VIEW LIVE SAMPLE OF BILLBOARDED SYMBOLS<\/b><\/a>
\n\"\"<\/a><\/p>\n
Visual Variables<\/h2>\n
As I discussed in the multivariate post from last week<\/a>, visual variables may be used to easily render the size, color, or opacity of each feature based on data values mapped to a continuous ramp of size, color or opacity values.<\/p>\n
The sample below takes the same data from last week\u2019s post and uses visual variables to size and color each icon based on whether or not the majority of adults in each U.S. county attended college. Opacity is determined based on the percentage of the majority group (those who attended at least some college vs. those who didn\u2019t).<\/p>\n
CLICK HERE TO VIEW THE LIVE SAMPLE<\/strong><\/a>
\n\"\"<\/a><\/p>\n
When using IconSymbol3DLayer<\/a>, LineSymbol3DLayer<\/a>, and FillSymbol3DLayer<\/a>, visualVariables<\/a> will render the data in the same way that was demonstrated in last week\u2019s post<\/a>. The rendering changes when the volumetric symbol layers listed in the table above are used. <\/p>\n
Next week I\u2019ll discuss using objects<\/a>, paths<\/a>, and extrusion<\/a> to visualize 2D data with volumetric graphics.<\/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":""}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"\n3D visualization: working with icons, lines, and fill symbols<\/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\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3D visualization: working with icons, lines, and fill symbols\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-18T22:46:29+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"3D visualization: working with icons, lines, and fill symbols\",\"datePublished\":\"2016-01-19T10:00:39+00:00\",\"dateModified\":\"2019-07-18T22:46:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D\",\"3D visualization\",\"cartographic design\",\"JavaScript\",\"jsapi4\",\"smart mapping\",\"visualVariables\"],\"articleSection\":[\"3D Visualization & Analytics\",\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols\",\"name\":\"3D visualization: working with icons, lines, and fill symbols\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2016-01-19T10:00:39+00:00\",\"dateModified\":\"2019-07-18T22:46:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3D visualization: working with icons, lines, and fill symbols\"}]},{\"@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":"3D visualization: working with icons, lines, and fill symbols","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\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols","og_locale":"en_US","og_type":"article","og_title":"3D visualization: working with icons, lines, and fill symbols","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2019-07-18T22:46:29+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"3D visualization: working with icons, lines, and fill symbols","datePublished":"2016-01-19T10:00:39+00:00","dateModified":"2019-07-18T22:46:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols"},"wordCount":9,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D","3D visualization","cartographic design","JavaScript","jsapi4","smart mapping","visualVariables"],"articleSection":["3D Visualization & Analytics","Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols","name":"3D visualization: working with icons, lines, and fill symbols","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2016-01-19T10:00:39+00:00","dateModified":"2019-07-18T22:46:29+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/3d-gis\/3d-gis\/3d-visualization-working-with-icons-lines-and-fill-symbols#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"3D visualization: working with icons, lines, and fill symbols"}]},{"@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":"January 19, 2016","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25781,"name":"3D","slug":"3d","term_group":0,"term_taxonomy_id":25781,"taxonomy":"post_tag","description":"","parent":0,"count":343,"filter":"raw"},{"term_id":23811,"name":"3D visualization","slug":"3d-visualization","term_group":0,"term_taxonomy_id":23811,"taxonomy":"post_tag","description":"","parent":0,"count":46,"filter":"raw"},{"term_id":23201,"name":"cartographic design","slug":"cartographic-design","term_group":0,"term_taxonomy_id":23201,"taxonomy":"post_tag","description":"","parent":0,"count":333,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":24581,"name":"smart mapping","slug":"smart-mapping","term_group":0,"term_taxonomy_id":24581,"taxonomy":"post_tag","description":"","parent":0,"count":81,"filter":"raw"},{"term_id":29551,"name":"visualVariables","slug":"visualvariables","term_group":0,"term_taxonomy_id":29551,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"}],"category_data":[{"term_id":23771,"name":"3D Visualization & Analytics","slug":"3d-gis","term_group":0,"term_taxonomy_id":23771,"taxonomy":"category","description":"","parent":0,"count":694,"filter":"raw"},{"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\/70671","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=70671"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/70671\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=70671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=70671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=70671"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=70671"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=70671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}