{"id":325812,"date":"2018-09-27T11:10:50","date_gmt":"2018-09-27T18:10:50","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=325812"},"modified":"2018-09-27T12:08:45","modified_gmt":"2018-09-27T19:08:45","slug":"navigation-with-gamepad-support","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support","title":{"rendered":"Improved map and scene navigation with gamepad support"},"author":8402,"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":[238922,27491,27851],"industry":[],"product":[36831],"class_list":["post-325812","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-gamepad","tag-jsapi4","tag-navigation","product-js-api-arcgis"],"acf":{"short_description":"Use gamepad for an improved map and scene navigation experience.","flexible_content":[{"acf_fc_layout":"content","content":"

At the 2018 User Conference, we demonstrated a prototype of the Gamepad support integration in the ArcGIS API for JavaScript Road Ahead session. We showed how easy it could be to navigate with\u00a0a Xbox One controller and fly through a WebScene in a fun and new way. To our great surprise, a lot of you expressed interest and inquiries in this new feature. Today, we are proud to announce that with the release of the ArcGIS API for JavaScript 4.9<\/a>, gamepad navigation is enabled by default in MapView<\/a> and SceneView<\/a>.<\/p>\n

Gamepads are better known as an essential accessory to a home gaming console and less so as a computer peripheral. Many modern gamepads can be used on desktop computers thanks to the adoption of technological standards like USB and Bluetooth and the general availability of device drivers. \u00a0Since 2015 the W3C has been gradually evolving an API for web developers to access gamepad devices.\u00a0 Today, all modern browsers support the draft W3C\u2019s gamepad specification<\/a>.<\/p>\n

Gamepads are often ergonomically designed for extended use, don\u2019t require a flat surface, and have sufficient buttons and sticks to be used exclusively of other peripherals.\u00a0 For these same reasons we believe that our users will find this gadget indispensable in some scenarios.\u00a0 Below are some examples where a gamepad might be advantageous.<\/p>\n

Example 1:\u00a0New building proposal<\/h2>\n

\"\"<\/p>\n

The above demo shows you how you can showcase a new building proposal by giving a smooth 360 degree view of the proposed buildings using a gamepad. You can quickly descend to the surface and walk around the buildings, or ascend to the sky to get a holistic view of the buildings with the surroundings.<\/p>\n

Example 2:\u00a0Underground navigation<\/h2>\n

<\/p>\n

This above demo shows you an underground navigation among a city sewage system using a gamepad. It allows you to follow the sewage path fast and smoothly.<\/p>\n

Example 3:\u00a0Flight simulation<\/h2>\n

<\/p>\n

Or you might just want to have a simulated flight through your favorite national park. You can now easily do this with a 3D scene and a gamepad or 3D mouse. The gamepad’s control configuration should be very familiar to anyone that has previously flown an aircraft on a gaming console.<\/p>\n

Can I use my gamepad from home?<\/h2>\n

Currently, we only support 3DConnexions<\/a> devices and standard gamepads<\/a> that follow the W3C standard with a layout similar to the image below. A standard gamepad has at least 16 buttons and two sticks.<\/p>\n

<\/p>\n

The most popular gamepads are those associated with the Xbox and PlayStation game consoles, like XBox 360 controller<\/a> and Dual Shock4(PS 4 controller)<\/a>. They are recognized by most computers as standard gamepads. They can be connected to computers via USB or Bluetooth and will be automatically detected and enabled in your application built with ArcGIS JavaScript API 4.9. We don’t currently support non-standard gamepads, like Switch controllers, that do not follow the W3C standard above. The only non-standard gamepads supported by the JavaScript API are the\u00a03DConnexion devices<\/a>.<\/p>\n

How do I change the user experience?<\/h2>\n

Changing the user experience can be done through the properties of the\u00a0 view.navigation.gamepad<\/code> object. The gamepad<\/code> object is an instance of the GamepadSettings<\/a> Class. It allows you to change gamepad experience like flying mode<\/a> and tilt direction<\/a>.<\/p>\n

For example, the default SceneView navigation mode is “pan” which maintains a constant altitude while panning and looking around. To have more of a flying sensation you can switch to the “zoom” mode as demonstrated below. This will provide you a flight simulator (or superman) feel.<\/p>\n

\r\nview.navigation.gamepad.mode = \"zoom\";\r\n\u00a0\r\n<\/code><\/pre>\n
What is the future of gamepad support?<\/h2>\n
The W3C Gamepad API is still draft and as such support across browsers may not be equivalent.\u00a0 Please refer to GamepadInputDevice<\/a> for a list of gamepad\/OS combinations that we have found to be reliable. If your device is not currently supported, then please don’t hesitate to let us know.<\/p>\n
Future releases will likely provide support for gamepad events.\u00a0 These events provide a convenient way to subscribe to button and stick interactions. For example, pressing a button to perform an identify or iterate through scene bookmarks. In the meantime, button and stick properties can be accessed via the native gamepad<\/a> object.\u00a0 To access this object:<\/p>\n
\r\nvar nativeGamepadDevice = view.navigation.gamepad.device.native;\r\n\u00a0\r\n<\/code><\/pre>\n
 <\/p>\n
This blog shares some common use cases of using gamepad navigation in apps built with ArcGIS JavaScript API 4.9. We are confident that you will find other use cases where gamepad usage is advantageous or simply fun! We invite you to try out gamepad navigation on our samples or your favorite 2d or 3d map or scene and send us your feedback. We are eager to know your experience (good or bad) and how we can make it better.<\/p>\n"}],"authors":[{"ID":8402,"user_firstname":"Fang","user_lastname":"Li","nickname":"Fang","user_nicename":"fli","display_name":"Fang Li","user_email":"FLi@esri.com","user_url":"","user_registered":"2018-09-24 21:16:12","user_description":"Fang is a product engineer on the ArcGIS API for JavaScript team.","user_avatar":""},{"ID":8412,"user_firstname":"Richie","user_lastname":"Carmichael","nickname":"Richie Carmichael","user_nicename":"rcarmichael","display_name":"Richie Carmichael","user_email":"rcarmichael@esri.com","user_url":"","user_registered":"2018-09-25 23:16:29","user_description":"Richie is a software developer on the ArcGIS API for JavaScript team.","user_avatar":""}],"related_articles":[{"ID":320782,"post_author":"4271","post_date":"2018-09-27 10:23:08","post_date_gmt":"2018-09-27 17:23:08","post_content":"","post_title":"ArcGIS API 4.9 for JavaScript: What\u2019s new (September 2018)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"jsapi-4-9","to_ping":"","pinged":"","post_modified":"2018-10-01 16:14:00","post_modified_gmt":"2018-10-01 23:14:00","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=320782","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\/09\/New-Project-1.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/gamepad_banner.png"},"yoast_head":"\nImproved map and scene navigation with gamepad support<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Improved map and scene navigation with gamepad support\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support\" \/>\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=\"2018-09-27T19:08:45+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\/js-api-arcgis\/mapping\/navigation-with-gamepad-support#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support\"},\"author\":{\"name\":\"Fang Li\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/89bbef8a1831905b9df22d16ebc575ae\"},\"headline\":\"Improved map and scene navigation with gamepad support\",\"datePublished\":\"2018-09-27T18:10:50+00:00\",\"dateModified\":\"2018-09-27T19:08:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"Gamepad\",\"jsapi4\",\"Navigation\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support\",\"name\":\"Improved map and scene navigation with gamepad support\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-09-27T18:10:50+00:00\",\"dateModified\":\"2018-09-27T19:08:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Improved map and scene navigation with gamepad support\"}]},{\"@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\/89bbef8a1831905b9df22d16ebc575ae\",\"name\":\"Fang Li\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&d=blank&r=g\",\"caption\":\"Fang Li\"},\"description\":\"Fang is a product engineer on the ArcGIS API for JavaScript team.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/fli\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Improved map and scene navigation with gamepad support","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\/navigation-with-gamepad-support","og_locale":"en_US","og_type":"article","og_title":"Improved map and scene navigation with gamepad support","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-09-27T19:08:45+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\/js-api-arcgis\/mapping\/navigation-with-gamepad-support#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support"},"author":{"name":"Fang Li","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/89bbef8a1831905b9df22d16ebc575ae"},"headline":"Improved map and scene navigation with gamepad support","datePublished":"2018-09-27T18:10:50+00:00","dateModified":"2018-09-27T19:08:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["Gamepad","jsapi4","Navigation"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support","name":"Improved map and scene navigation with gamepad support","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-09-27T18:10:50+00:00","dateModified":"2018-09-27T19:08:45+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Improved map and scene navigation with gamepad support"}]},{"@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\/89bbef8a1831905b9df22d16ebc575ae","name":"Fang Li","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5f77e9bce41484d6a3b6626b440e7704ba0e93ca8688752c347c582c1f4de6c?s=96&d=blank&r=g","caption":"Fang Li"},"description":"Fang is a product engineer on the ArcGIS API for JavaScript team.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/fli"}]}},"text_date":"September 27, 2018","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/navigation-with-gamepad-support","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/gamepad_banner.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":238922,"name":"Gamepad","slug":"gamepad","term_group":0,"term_taxonomy_id":238922,"taxonomy":"post_tag","description":"","parent":0,"count":1,"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":27851,"name":"Navigation","slug":"navigation","term_group":0,"term_taxonomy_id":27851,"taxonomy":"post_tag","description":"","parent":0,"count":9,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2698,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"}],"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\/325812","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\/8402"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=325812"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/325812\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=325812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=325812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=325812"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=325812"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=325812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}