esri / c-through

A prototype for interactive 3D urban planning analysis on the web based on the ArcGIS Javascript API 4.3.

c-through

C-Through is a prototype for interactive 3D urban planning analysis on the web based on the ArcGIS JS API 4.13. The application visualizes and analysis 3D features according to user preferences and makes it possible to select and filter specific buildings, floors and units by attributes for further investigation. Charts and statistics are available according to selection and filtering. The application was implemented in the scope of an internship at Esri R&D Zurich and initially featured data from three locations: Zurich, Vancouver and Dubai. Those datasets are not publicly available.

View it live

The following demo application shows imaginary buildings and usage data. Its purpose is to give access to the code base and to show how the application was implemented with the ArcGIS JS API. To learn more about the background and data processing as well as details and challenges about the implementation, review the following resources:

• ArcGIS Blogpost
• Explanatory Video

Instructions

1. Fork and then clone the repo.
2. Run and try the sample.

The application is designed in a way that it can also be used for other locations or datasets. The following steps need to be done in order to use the application with your own data:

1. Create a multipatch dataset that contains the following attributes for each feature:

• building id (int)
• floor level (int)
• usage type (string)
• area (float)

2. Publish the dataset on either ArcGIS Portal or ArcGIS Online: Scene Layer publishing tutorial for ArcGIS Online (beta)

3. Create a webscene and load the scene layer that you have published in step 2

4. Change the following properties of the settings_demo object in the app.js file of the application:

• url-property: change to your Portal URL (or ArcGIS Online)
• webscene-property: fill in the portal item ID of the webscene
• usagename-property: change to attribute name containing usage type
• floorname / OIDname / buildingIDname / areaname: respectively

5. Before deploying the application in production, make sure you are in possession of all required licenses.

Resources

The following APIs have been used to create this application:

• ArcGIS JS API 4.13
• Esri Calcite Web
• amCharts
• noUISlider

Disclaimer

This demo version of c-through is not maintained. There is no support available for deployment or development of the application.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2017 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

c-through's Issues

"l" forgotten in "value" in applyRenderer.js line 187

hello, thank you for the nice code, I just wanted to tell you that there is a little mistake that creates a wrong visualization when you click on the histogram for area.
Have a nice day :)

Lower slider starts off-screen?

Its late, so forgive me if this is a basic one, but when I open either your demo site or a fork on my own web server, the lower right controls appear outside of the initial viewport and not aligned to the bottom of the scene. Is this an easy fix? Would like to show this at an upcoming 3D conference.

Image for README

How to fork and try the sample?

Hello, I would like to try this repo, the instructions say:
1. Fork and then clone the repo.
2. Run and try the sample.

I tried setup it on: apache, node, and arcgis web appbuilder (developer edition). However, none of they work for me.
In apache (httpd) an error occurs when index.html require the file app/welcome.js

<script>
  require(["c-through/welcome",  "dojo/domReady!"],function(Welcome){
    var welcome = new Welcome();
    welcome.init();    
  });
</script>

Help me please @lisastaehli.

Recommended Number of Features

Looking for some best practise in how many buildings we could realistically serve up to a browser with this template and it still perform ok. Notice in your screenshot you have a fairly large scene, but the demo is just a few buildings.

SceneLayer queries are not available without companion feature layer

If I create a scene package from Pro and upload to an ArcGIS Online account, tweak the settings in your app, the side panel fails to load with the following reported in the browser console:

"SceneLayer queries are not available without companion feature layer"

I assume there is not an easy workaround to getting this to work via ArcGIS Online using scene packages?

I also tried publishing a multipatch scene to ArcGIS Enterprise, but ran into problems (post on GeoNet)

Migrating to ArcGIS API for JavaScript 4.7

Aside from modifying the versioning of javascript library, CSS, etc... url's from 4.3 --> 4.7

The "then()" just needs to be modified to "when()" in order for the app to run upon migration.
So just modify line 70 from:

// wait until view is loaded
this.view.then(function () {

to:

// wait until view is loaded
this.view.when(function () {

App will migrate seamlessly from version 2.3 to 2.7 and can now support edge rendering, measurements and other new functionality 2.7 provides.

Highlight when clicking on charts in "city"-mode does not work properly

When clicking on a data item in the pie (usage) or bar (area) chart, only environment settings (shadow, lighting) are changed, but highlights do not adapt.