{"id":1280912,"date":"2021-07-08T07:39:37","date_gmt":"2021-07-08T14:39:37","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1280912"},"modified":"2021-07-08T23:49:02","modified_gmt":"2021-07-09T06:49:02","slug":"feature-selection-styles-in-web-scenes","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes","title":{"rendered":"Feature selection styles in web scenes: the defaults and beyond"},"author":7011,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23771],"tags":[23811,24921],"industry":[],"product":[36831],"class_list":["post-1280912","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","tag-3d-visualization","tag-javascript","product-js-api-arcgis"],"acf":{"short_description":"In this blog post we look into three different styles for feature selection in a webscene.","flexible_content":[{"acf_fc_layout":"content","content":"

When a user selects a feature in a web scene it is necessary to provide some visual cues. In this blog we\u2019ll look into three visual styles that you can use to highlight selected features in a web scene. ArcGIS API for JavaScript provides out-of-the-box functionality for the first two styles. We’ll use the highlight options on the SceneView<\/a> to set a halo and\/or a fill on the selected feature. The last style uses the client side 3D geometry<\/a> to build a bounding box around the feature. Here we\u2019ll mainly show examples of highlighting buildings, but you can apply these styles to any other 3D features.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"content","content":"

Style 1 – Use color to tint the feature<\/h2>\n

The most simple thing that we can do when a user selects a feature is to apply a color on top of it. Traditionally at Esri, the default highlight color is cyan because it’s very bright and it’s not commonly used in basemaps or thematic data styling. Even though cyan is a default color for highlights, ArcGIS API for JavaScript allows us to change it. Let\u2019s look at the following map displaying buildings of San Francisco. When you hover over a building, it applies an orange tint over the building. Try it out!<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/codepen.io\/ralucanicola\/full\/xxdGaVO<\/a>"},{"acf_fc_layout":"content","content":"

 <\/p>\n

How does it work?\u00a0<\/strong><\/p>\n

We set options like color and opacity globally on the view:<\/p>\n

\r\nconst<\/span> view = new<\/span> SceneView({\r\n  container: \"viewDiv\"<\/span>,\r\n  map: map,\r\n  highlightOptions: {\r\n    color: new<\/span> Color([255<\/span>, 153<\/span>, 0<\/span>]),\r\n    fillOpacity: 0.6<\/span>,\r\n    haloOpacity: 0<\/span>\r\n  }\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
You can look at the code in this codepen: https:\/\/codepen.io\/ralucanicola\/pen\/xxdGaVO<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"
Style 2 – Display a halo around the feature<\/h2>\n
When the features already have textures or a color representing attribute values, we might not want to apply another color on top of it. The best way to highlight in this case is by adding a halo around the selected feature.<\/p>\n
How does it work?<\/strong><\/p>\n
This style is similar to Style 1, using the default highlight and setting the options on the view. We specify opacity: 0<\/code>\u00a0for the fillOpacity<\/code><\/a>. We leave the haloColor<\/code> and the haloOpacity<\/code> to the default values. Notice that we also set shadow highlight options to color the shadow of the selected building.<\/p>\n
Here are the highlight options for this style:<\/p>\n
\r\nconst<\/span> view = new<\/span> SceneView({\r\n  container: \"viewDiv\"<\/span>,\r\n  map: map,\r\n  environment: {\r\n    lighting: {\r\n      directShadowsEnabled: true<\/span>\r\n    }\r\n  },\r\n  highlightOptions: {\r\n    fillOpacity: 0.1<\/span>,\r\n    shadowColor: new<\/span> Color(\"cyan\"<\/span>),\r\n    shadowOpacity: 0.3<\/span>\r\n  }\r\n});\r\n<\/code><\/pre>\n
<\/h2>\n
Style 3 – Display the bounding box of the feature<\/h2>\n
This type of feature highlight is not very common in the GIS world, but you can see it sometimes in games (often coupled with animations and glow effects). It’s a style that works nicely for some web maps, but it should probably not be the default in a general mapping application.<\/p>\n
How does it work? <\/strong><\/p>\n
For this style we use the Mesh geometry<\/a> to create the bounding box around the selected building. When the user clicks on the building, we query the layer view for the 3D extent<\/a> and the associated feature layer for the footprint. Using this information we build a volume around the building. By setting the bottom vertices colors to be fully opaque and the top vertex colors to be fully transparent, we can get a nice smooth transition in opacity from top to bottom.<\/p>\n
Here is the code if you want to go into the details of how we built it: https:\/\/codepen.io\/arnofiva\/pen\/jOmrPzj<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1289722,"id":1289722,"title":"","filename":"building-highlight.gif","filesize":1157944,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes\/building-highlight","alt":"Highlight buildings using a mesh geometry","author":"9302","description":"","caption":"Highlight buildings using a mesh geometry","name":"building-highlight","status":"inherit","uploaded_to":1280912,"date":"2021-07-09 06:45:50","modified":"2021-07-09 06:48:08","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/building-highlight.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/arnofiva\/pen\/jOmrPzj"},{"acf_fc_layout":"content","content":"
If the scene layer doesn\u2019t have an associated feature layer, then we can use the extent of the building. The extent is always aligned north though, so this might cause some misalignment of the 3D bounding box with the building itself. Here is an example that uses just the extent of the building: https:\/\/codepen.io\/ralucanicola\/pen\/xxdZZmE<\/a>.<\/p>\n
On a final note, have a look at the animations that our colleague Hugo<\/a> added to the bounding box: https:\/\/codepen.io\/ralucanicola\/pen\/XWRXjOm<\/a>.<\/p>\n
There are many more styles out there for feature selection. We’d love to hear what you like to use!<\/p>\n
Raluca and Arno<\/p>\n"}],"authors":[{"ID":7011,"user_firstname":"Raluca","user_lastname":"Nicola","nickname":"Raluca Nicola","user_nicename":"raluca_zurich","display_name":"Raluca Nicola","user_email":"RNicola@esri.com","user_url":"https:\/\/raluca-nicola.net\/","user_registered":"2018-03-02 00:19:07","user_description":"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.","user_avatar":""},{"ID":9302,"user_firstname":"Arno","user_lastname":"Fiva","nickname":"Arno Fiva","user_nicename":"afiva","display_name":"Arno Fiva","user_email":"afiva@esri.com","user_url":"http:\/\/js.arcgis.com","user_registered":"2019-03-26 21:36:58","user_description":"Developer Evangelist at the Esri R&D Center Z\u00fcrich, creating 3D web apps using the ArcGIS Maps SDK for JavaScript.","user_avatar":""}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/Screenshot-2021-07-05-at-16.08.11.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/banner-3.jpg"},"yoast_head":"\nFeature selection styles in web scenes: the defaults and beyond<\/title>\n<meta name=\"description\" content=\"In this blog post we look into three different styles for feature selection in a webscene.\" \/>\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\/3d-gis\/feature-selection-styles-in-web-scenes\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Feature selection styles in web scenes: the defaults and beyond\" \/>\n<meta property=\"og:description\" content=\"In this blog post we look into three different styles for feature selection in a webscene.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes\" \/>\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=\"2021-07-09T06:49:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-05-at-16.08.11.png\" \/>\n\t<meta property=\"og:image:width\" content=\"826\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/3d-gis\/feature-selection-styles-in-web-scenes#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes\"},\"author\":{\"name\":\"Raluca Nicola\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4\"},\"headline\":\"Feature selection styles in web scenes: the defaults and beyond\",\"datePublished\":\"2021-07-08T14:39:37+00:00\",\"dateModified\":\"2021-07-09T06:49:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes\"},\"wordCount\":10,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D visualization\",\"JavaScript\"],\"articleSection\":[\"3D Visualization & Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes\",\"name\":\"Feature selection styles in web scenes: the defaults and beyond\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-07-08T14:39:37+00:00\",\"dateModified\":\"2021-07-09T06:49:02+00:00\",\"description\":\"In this blog post we look into three different styles for feature selection in a webscene.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Feature selection styles in web scenes: the defaults and beyond\"}]},{\"@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\/e8fe39abb687cde59f7f1296fbfb24a4\",\"name\":\"Raluca Nicola\",\"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\/2018\/04\/7VkWXsZ3_400x400.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg\",\"caption\":\"Raluca Nicola\"},\"description\":\"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.\",\"sameAs\":[\"https:\/\/raluca-nicola.net\/\",\"https:\/\/www.linkedin.com\/in\/raluca-nicola-cartography\/\",\"https:\/\/x.com\/nicolaraluk\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Feature selection styles in web scenes: the defaults and beyond","description":"In this blog post we look into three different styles for feature selection in a webscene.","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\/3d-gis\/feature-selection-styles-in-web-scenes","og_locale":"en_US","og_type":"article","og_title":"Feature selection styles in web scenes: the defaults and beyond","og_description":"In this blog post we look into three different styles for feature selection in a webscene.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2021-07-09T06:49:02+00:00","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2021\/07\/Screenshot-2021-07-05-at-16.08.11.png","type":"image\/png"}],"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\/3d-gis\/feature-selection-styles-in-web-scenes#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes"},"author":{"name":"Raluca Nicola","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4"},"headline":"Feature selection styles in web scenes: the defaults and beyond","datePublished":"2021-07-08T14:39:37+00:00","dateModified":"2021-07-09T06:49:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D visualization","JavaScript"],"articleSection":["3D Visualization & Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes","name":"Feature selection styles in web scenes: the defaults and beyond","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-07-08T14:39:37+00:00","dateModified":"2021-07-09T06:49:02+00:00","description":"In this blog post we look into three different styles for feature selection in a webscene.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Feature selection styles in web scenes: the defaults and beyond"}]},{"@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\/e8fe39abb687cde59f7f1296fbfb24a4","name":"Raluca Nicola","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\/2018\/04\/7VkWXsZ3_400x400.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg","caption":"Raluca Nicola"},"description":"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.","sameAs":["https:\/\/raluca-nicola.net\/","https:\/\/www.linkedin.com\/in\/raluca-nicola-cartography\/","https:\/\/x.com\/nicolaraluk"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich"}]}},"text_date":"July 8, 2021","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/feature-selection-styles-in-web-scenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/07\/banner-3.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"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":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"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":686,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"}],"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\/1280912","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\/7011"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1280912"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1280912\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1280912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1280912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1280912"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1280912"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1280912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In this app we listen for events on click<\/code> to detect the feature that was selected by the user. Here is the code for the application: https:\/\/codepen.io\/ralucanicola\/pen\/dyWGGpX<\/a>.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/codepen.io\/ralucanicola\/full\/dyWGGpX<\/a>"},{"acf_fc_layout":"content","content":"
To detect what feature is currently under the mouse cursor we\u2019ll listen for pointer-move<\/code> events on the view. On each pointer move we run a hitTest<\/a> against the view to retrieve the features in the buildings layer that are currently under the mouse.<\/p>\n