{"id":680842,"date":"2019-12-23T11:09:25","date_gmt":"2019-12-23T19:09:25","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=680842"},"modified":"2020-01-29T03:24:28","modified_gmt":"2020-01-29T11:24:28","slug":"showcase-your-bim-data-in-the-building-viewer","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer","title":{"rendered":"Showcase your BIM data in the Building Viewer"},"author":7781,"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,22841,430202],"tags":[25781,30371,332622,549072,24921],"industry":[],"product":[36831],"class_list":["post-680842","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","category-local-government","category-real-estate","tag-3d","tag-bim","tag-building-scene-layer","tag-esrirdzurich","tag-javascript","product-js-api-arcgis"],"acf":{"short_description":"Leverage your BIM data to showcase the architecture, floors and interiors of a building, in an engaging intuitive website: the Building Viewer","flexible_content":[{"acf_fc_layout":"content","content":"

Introduction<\/h2>\n

BIM building models can contain millions of features. This data is used during the building design, construction, validation and decision-making processes. But what happens when the construction has finished? Such rich and detailed data can be very valuable, but at the same time difficult to interact with for non-professional users.<\/p>\n

In this article we will explain how to leverage your existing BIM data to engage users and visitors of a building to discover the architecture, explore the different floors, and even navigate and visualize the rooms and spaces, in a simple and intuitive website: the Building Viewer.<\/em><\/p>\n

See the Building Viewer running here: https:\/\/esri.github.io\/building-viewer<\/a><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":681012,"id":681012,"title":"Building Viewer","filename":"building-viewer.png","filesize":223792,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\/building-viewer","alt":"Building Viewer web site configured with Turanga Library building","author":"7781","description":"","caption":"Building Viewer web site configured with Turanga Library building","name":"building-viewer","status":"inherit","uploaded_to":680842,"date":"2019-12-13 17:47:26","modified":"2019-12-13 17:48:18","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":1392,"height":1057,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer.png","medium-width":344,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer.png","medium_large-width":768,"medium_large-height":583,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer.png","large-width":1392,"large-height":1057,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer.png","1536x1536-width":1392,"1536x1536-height":1057,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer.png","2048x2048-width":1392,"2048x2048-height":1057,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-612x465.png","card_image-width":612,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer.png","wide_image-width":1392,"wide_image-height":1057}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

But before we go into details on how this web site works, let\u2019s take a step back to learn about the technology that makes it possible\u2026<\/p>\n

Building Scene\u00a0Layer<\/h2>\n

Building scene layer is the latest data type added to the ArcGIS platform. This new layer allows you to visualize BIM building data, coming from Autodesk Revit, in an efficient and performant manner, on the web. This new capability opens tremendous possibilities of creating rich user experiences, in a thin client, combining BIM data with GIS.<\/p>\n

Building scene layers not only represent the shape of a building, but all the different parts that compose the exterior and interior of the model: walls, windows, doors, electrical and plumbing fixtures and even furniture. These accurate representations of building assets are useful in many use cases, ranging from architecture and building design, to construction control and monitoring, and spaces and asset management.<\/p>\n

You can use the Scene Viewer<\/a> in ArcGIS Online to mash up your building scene layer published from ArcGIS Pro<\/a> together with a city model, streets, transportation and utilities data for example. Save the visualization as a web scene, share with colleagues or with the public, and explore this data on the web, even on a phone.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":681052,"id":681052,"title":"Building Scene Layer tools","filename":"bsl-slice-tool.gif","filesize":1765565,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\/bsl-slice-tool","alt":"Animation of Scene Viewer slice tool and popup used with a building scene layer","author":"7781","description":"","caption":"Scene Viewer slice tool and popup used with a building scene layer","name":"bsl-slice-tool","status":"inherit","uploaded_to":680842,"date":"2019-12-13 18:03:36","modified":"2019-12-13 18:04:21","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":734,"height":540,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool.gif","medium-width":355,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool.gif","medium_large-width":734,"medium_large-height":540,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool.gif","large-width":734,"large-height":540,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool.gif","1536x1536-width":734,"1536x1536-height":540,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool.gif","2048x2048-width":734,"2048x2048-height":540,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool-632x465.gif","card_image-width":632,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/bsl-slice-tool.gif","wide_image-width":734,"wide_image-height":540}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

As a developer, the ArcGIS API for JavaScript<\/a> allows you to build richer, more focused user experiences around the BuildingSceneLayer<\/a>, together with the available layers, widgets and tools.<\/p>\n

Turanga public\u00a0library<\/h2>\n

Public buildings like government or administration buildings, commercial buildings or large office campuses, once construction has finished, can now reuse their BIM engineering datasets and obtain an added value from these existing models. A great example of a public building that recently open the doors after construction is the new Turanga public library<\/a> in Christchurch (New Zealand).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":681062,"id":681062,"title":"Turanga Library","filename":"turanga-library.jpg","filesize":110358,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\/turanga-library","alt":"Photo of Turanga Library facade","author":"7781","description":"","caption":"Turanga Library (photo by Charl Scheepers)","name":"turanga-library","status":"inherit","uploaded_to":680842,"date":"2019-12-13 18:06:20","modified":"2019-12-13 18:07:04","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1000,"height":687,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library.jpg","medium-width":380,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library.jpg","medium_large-width":768,"medium_large-height":528,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library.jpg","large-width":1000,"large-height":687,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library.jpg","1536x1536-width":1000,"1536x1536-height":687,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library.jpg","2048x2048-width":1000,"2048x2048-height":687,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library-677x465.jpg","card_image-width":677,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/turanga-library.jpg","wide_image-width":1000,"wide_image-height":687}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Once we saw the BIM model, combined with the rich information available about the library, we agreed it would be the perfect use case to drive our app design. We worked together with the Christchurch City Council<\/a> to publish the data to ArcGIS Online and the development started. We would like to take the opportunity to thank the City Council for openly collaborating with us and for sharing their BIM model data as Creative Commons (CC BY 4.0), you were super helpful!<\/p>\n

Let\u2019s now look into the Building Viewer design and implementation\u2026<\/p>\n

Building Viewer<\/h2>\n

The Building Viewer is designed to show a building from multiple perspectives: an overview of the building, a floor level visualization and a birds-eye view of the building together with its surroundings. Each section shows additional information like photos, opening hours or informational text and links.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":681082,"id":681082,"title":"Building Viewer sections","filename":"building-viewer-sections.png","filesize":447391,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\/building-viewer-sections","alt":"Screenshot of the three sections of Building Viewer","author":"7781","description":"","caption":"Building Viewer sections","name":"building-viewer-sections","status":"inherit","uploaded_to":680842,"date":"2019-12-13 18:08:40","modified":"2019-12-13 18:09:25","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":2438,"height":600,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections.png","medium-width":464,"medium-height":114,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections.png","medium_large-width":768,"medium_large-height":189,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections.png","large-width":1920,"large-height":473,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections-1536x378.png","1536x1536-width":1536,"1536x1536-height":378,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections-2048x504.png","2048x2048-width":2048,"2048x2048-height":504,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections-826x203.png","card_image-width":826,"card_image-height":203,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-sections-1920x473.png","wide_image-width":1920,"wide_image-height":473}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

The ArcGIS API for JavaScript is used to display and interact with the building and surroundings in each of the sections. Let\u2019s explore them in more detail:<\/p>\n

1.<\/strong> The overview<\/strong> presents the building from the outside, a set of stored points of view to explore the architecture as well as some general information. Viewers can also freely zoom in around to get a closer look at the building details.<\/p>\n

In the JavaScript API, to load the BIM model and surrounding buildings, we will use a web scene, created with the Scene Viewer, using the WebScene<\/a> class.<\/p>\n

    var<\/span> scene = new<\/span> WebScene({\r\n        portalItem: {\r\n            id: \"affa021c2d61fe1057...\"<\/span> \/\/ ID of the Web Scene on arcgis.com<\/span>\r\n        }\r\n    });\r\n<\/code><\/pre>\n
    <button<\/span> onclick<\/span>={view.goTo(slide.viewpoint)}<\/span>><\/span>{slide.title}<\/button<\/span>><\/span>\r\n<\/code><\/pre>\n
 <\/p>\n
2. Floor by floor<\/strong> section takes users inside the building, on a top-down view to easily navigate through the interior spaces. Icons indicate locations like staircases, emergency exits or vending machine locations, as along with some embedded photos of interior areas.<\/p>\n
    buildingLayer.filters = [{\r\n        filterBlocks: [\r\n        {\r\n            title: \"floor\"<\/span>,\r\n            filterMode: { type: \"solid\"<\/span> },\r\n            filterExpression: \"BldgLevel = 3\"<\/span>\r\n        }\r\n        ]\r\n    }];\r\n<\/code><\/pre>\n
 <\/p>\n
3.<\/strong> Surroundings <\/strong>is a section that brings together GIS information and BIM information in one view. In this case users can explore car park, transportation options and some nearby points of interest.<\/p>\n
The web scene can also contain other GIS layers, and this section is simply a representation of such layers along with some points of interest that are enabled or disabled on click.<\/p>\n
    view.map.layers.forEach(layer => {\r\n        <button<\/span> onclick<\/span>={layer.visible<\/span> = true<\/span>}><\/span>layer.title<\/button<\/span>><\/span>\r\n    });\r\n<\/code><\/pre>\n
Head to the GitHub repository<\/a> to find out more or continue reading. In the next section we\u2019ll go over how to configure the source code with your own data and to even extend the application with custom sections.<\/p>\n
Set up your own Building Viewer<\/h2>\n
We had a lot of fun configuring the Building Viewer with the Turanga library, but we would like you to use it with your own buildings. Hence, we open sourced the code on GitHub and wrote a few easy steps in the readme to get started: https:\/\/github.com\/Esri\/building-viewer\/<\/a><\/p>\n
 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":687822,"id":687822,"title":"github-building-viewer","filename":"github.png","filesize":61514,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\/github","alt":"","author":"7781","description":"","caption":"","name":"github","status":"inherit","uploaded_to":680842,"date":"2019-12-23 11:54:18","modified":"2019-12-23 11:54:35","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":1200,"height":798,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github.png","medium-width":392,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github.png","medium_large-width":768,"medium_large-height":511,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github.png","large-width":1200,"large-height":798,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github.png","1536x1536-width":1200,"1536x1536-height":798,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github.png","2048x2048-width":1200,"2048x2048-height":798,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github-699x465.png","card_image-width":699,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/github.png","wide_image-width":1200,"wide_image-height":798}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
To configure your own version of the Building Viewer start by cloning the repo<\/a> on your computer. The code ships with all the tools you will need to start and display it locally. You will just need to install the dependencies, compile TypeScript and then run the package\u2019s script called `server`.<\/p>\n
There are two main aspects required configure your version of the viewer:<\/p>\n
A)<\/strong> The web scene<\/p>\n
The web scene contains all content, layers and viewpoints. Use the ArcGIS online scene viewer to create your scene with the main building scene layer, surrounding buildings, additional layers and slides (viewpoints). When creating the scene, it is important to follow the Building Viewer naming conventions for layers and slides.<\/p>\n
For example, the layer with a name starting with \u201cBuilding:\u201d is the only required layer in your web scene and represents the main building. Whereas a layer with a name starting with \u201cCity model:\u201d is an optional layer in your scene that shows the surroundings. You can read about the naming conventions in more detail here: https:\/\/github.com\/Esri\/building-viewer\/blob\/master\/docs\/NameConventions.md<\/a><\/p>\n
B)<\/strong> The configuration file `src\/config.tsx<\/em>`<\/p>\n
This file is the central point for configuring the content and the sections. Once you have created the web scene described in the step above, replace the existing webscene ID with your own.<\/p>\n
    let<\/span> websceneId = \"YOUR WEBSCENE ID HERE\"<\/span>;  \r\n<\/code><\/pre>\n
Then notice that in this file the 3 sections of the viewer are created and configured. You will have to adjust the sections configuration to match your building and the information you would like to display on your website.<\/p>\n
    let<\/span> sections = [\r\n        new<\/span> HomeSection({ \r\n            content: \"\"<\/span>,\r\n            timetable: {}\r\n        }),\r\n        new<\/span> FloorsSection({\r\n            floors: []\r\n        }),\r\n        new<\/span> SurroundingsSection({})\r\n    ];\r\n<\/code><\/pre>\n
Once the config.tsx<\/em> file with the web scene and sections is ready, most of the additional configuration will happen in your scene. For example, if you would like to change the title of the home page go back to your scene and change its title. Change the website background color? Change the scene\u2019s Ground<\/em>\u00a0color and remove the basemap<\/em>.<\/p>\n
We have just explored the configuration, but if you are familiar with sass style and our API, you will quickly be able to also change the colors, the renderers and create your own sections. The possibilities are endless! We are now waiting for your creativity\u2026<\/p>\n"},{"acf_fc_layout":"content","content":"
Summary<\/h2>\n
From our side, we feel like we have only scratched the surface of the possibilities offered by building scene layers. This year we released a first set of tools and widgets that make use of the data and layers and we will keep adding more. Please stay tuned!<\/p>\n
And as said, the Building Viewer website is available as an open source project on GitHub so that you can configure it with your data and make it your own, just go here and download or clone the repository: https:\/\/www.github.com\/Esri\/building-viewer\/<\/a><\/p>\n
We hope to see your own version of the building viewer with buildings from cities around the world!<\/p>\n"}],"authors":[{"ID":7781,"user_firstname":"Javier","user_lastname":"Gutierrez","nickname":"javier_gutierrez","user_nicename":"javier_gutierrez","display_name":"Javier Gutierrez","user_email":"javier_gutierrez@esri.com","user_url":"","user_registered":"2018-04-12 08:51:56","user_description":"Lead Product Engineer at Esri R&D Center Zurich","user_avatar":""},{"ID":10372,"user_firstname":"Yannik","user_lastname":"Messerli","nickname":"YMesserli","user_nicename":"ymesserli","display_name":"Yannik Messerli","user_email":"YMesserli@esri.com","user_url":"","user_registered":"2019-12-23 14:35:46","user_description":"","user_avatar":""}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-card.png","wide_image":false},"yoast_head":"\nShowcase your BIM data in the Building Viewer<\/title>\n<meta name=\"description\" content=\"Leverage your BIM data to engage users and visitors of a building to discover the architecture, floors, and interiors in a simple and intuitive website.\" \/>\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\/showcase-your-bim-data-in-the-building-viewer\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Showcase your BIM data in the Building Viewer\" \/>\n<meta property=\"og:description\" content=\"Leverage your BIM data to engage users and visitors of a building to discover the architecture, floors, and interiors in a simple and intuitive website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\" \/>\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=\"2020-01-29T11:24:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2019\/12\/building-viewer-card.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:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-card.png\" \/>\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\/showcase-your-bim-data-in-the-building-viewer#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\"},\"author\":{\"name\":\"Javier Gutierrez\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/b68a724bde2d6ae6376e682da33b103d\"},\"headline\":\"Showcase your BIM data in the Building Viewer\",\"datePublished\":\"2019-12-23T19:09:25+00:00\",\"dateModified\":\"2020-01-29T11:24:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D\",\"BIM\",\"building scene layer\",\"EsriRDZurich\",\"JavaScript\"],\"articleSection\":[\"3D Visualization & Analytics\",\"Local Government\",\"Real Estate\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\",\"name\":\"Showcase your BIM data in the Building Viewer\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-12-23T19:09:25+00:00\",\"dateModified\":\"2020-01-29T11:24:28+00:00\",\"description\":\"Leverage your BIM data to engage users and visitors of a building to discover the architecture, floors, and interiors in a simple and intuitive website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Showcase your BIM data in the Building Viewer\"}]},{\"@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\/b68a724bde2d6ae6376e682da33b103d\",\"name\":\"Javier Gutierrez\",\"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\/2019\/12\/javi-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/javi-213x200.png\",\"caption\":\"Javier Gutierrez\"},\"description\":\"Lead Product Engineer at Esri R&D Center Zurich\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jgtrez\/\",\"https:\/\/x.com\/gutdev\"],\"url\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Showcase your BIM data in the Building Viewer","description":"Leverage your BIM data to engage users and visitors of a building to discover the architecture, floors, and interiors in a simple and intuitive website.","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\/showcase-your-bim-data-in-the-building-viewer","og_locale":"en_US","og_type":"article","og_title":"Showcase your BIM data in the Building Viewer","og_description":"Leverage your BIM data to engage users and visitors of a building to discover the architecture, floors, and interiors in a simple and intuitive website.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2020-01-29T11:24:28+00:00","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2019\/12\/building-viewer-card.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/building-viewer-card.png","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\/showcase-your-bim-data-in-the-building-viewer#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer"},"author":{"name":"Javier Gutierrez","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/b68a724bde2d6ae6376e682da33b103d"},"headline":"Showcase your BIM data in the Building Viewer","datePublished":"2019-12-23T19:09:25+00:00","dateModified":"2020-01-29T11:24:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D","BIM","building scene layer","EsriRDZurich","JavaScript"],"articleSection":["3D Visualization & Analytics","Local Government","Real Estate"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer","name":"Showcase your BIM data in the Building Viewer","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-12-23T19:09:25+00:00","dateModified":"2020-01-29T11:24:28+00:00","description":"Leverage your BIM data to engage users and visitors of a building to discover the architecture, floors, and interiors in a simple and intuitive website.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Showcase your BIM data in the Building Viewer"}]},{"@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\/b68a724bde2d6ae6376e682da33b103d","name":"Javier Gutierrez","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\/2019\/12\/javi-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/12\/javi-213x200.png","caption":"Javier Gutierrez"},"description":"Lead Product Engineer at Esri R&D Center Zurich","sameAs":["https:\/\/www.linkedin.com\/in\/jgtrez\/","https:\/\/x.com\/gutdev"],"url":""}]}},"text_date":"December 23, 2019","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/showcase-your-bim-data-in-the-building-viewer","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":342,"filter":"raw"},{"term_id":30371,"name":"BIM","slug":"bim","term_group":0,"term_taxonomy_id":30371,"taxonomy":"post_tag","description":"","parent":0,"count":66,"filter":"raw"},{"term_id":332622,"name":"building scene layer","slug":"building-scene-layer","term_group":0,"term_taxonomy_id":332622,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":549072,"name":"EsriRDZurich","slug":"esrirdzurich","term_group":0,"term_taxonomy_id":549072,"taxonomy":"post_tag","description":"","parent":0,"count":96,"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":687,"filter":"raw"},{"term_id":22841,"name":"Local Government","slug":"local-government","term_group":0,"term_taxonomy_id":22841,"taxonomy":"category","description":"","parent":0,"count":557,"filter":"raw"},{"term_id":430202,"name":"Real Estate","slug":"real-estate","term_group":0,"term_taxonomy_id":430202,"taxonomy":"category","description":"","parent":0,"count":21,"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\/680842","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\/7781"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=680842"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/680842\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=680842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=680842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=680842"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=680842"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=680842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can read more about configuring the sections and even creating your own custom section here: https:\/\/github.com\/Esri\/building-viewer\/blob\/master\/docs\/Sections.md<\/a><\/p>\n
There is of course a lot more to discover in the source code. The website is built in Typescript<\/a> and JSX<\/a>, using SASS<\/a> and it is a great example of how to leverage the ArcGIS API for JavaScript in a modern and interactive way.<\/p>\n
The icons displayed in this section are also part of the layers in the web scene, and together with the building, the data gets filtered based on the selected floor. This is an example of a BuildingSceneLayer filter<\/a>:<\/p>\n
The web scene also contains Slides<\/a> which are used to create the viewpoints, using the slide text as the button title and slide camera as the location.<\/p>\n