![Page 1: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/1.jpg)
Kristian EkenesRaluca Nicola
Practical Guide for Building a 3D Web App from 2D Data
![Page 2: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/2.jpg)
Kristian Ekenes Raluca Nicola
Product Engineer JS API
Zurich, Switzerland
Data visualization, 3D
Product Engineer JS API
Redlands, California
Data visualization, Smart Mapping, Arcade
![Page 3: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/3.jpg)
You will learn
![Page 4: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/4.jpg)
how to create city visualizations
using polygon extrusion and web styles
![Page 5: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/5.jpg)
how to visualize scientific data
using z values from attributes
![Page 6: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/6.jpg)
and some other examples
![Page 7: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/7.jpg)
City visualizations
15 min 20 min
Marine data analysis
Other visualizations
15 min
![Page 8: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/8.jpg)
Cities in Romania – using OSM dataParis – using open data
City visualizations
![Page 9: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/9.jpg)
Resources
• OpenStreetMap – building footprints & trees
• Open Data portals – building footprints
• ESRI basemaps & elevation services
• ESRI Web Styles
ArcGIS API forJavaScript
![Page 10: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/10.jpg)
Building footprint extrusion
10 meters
![Page 11: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/11.jpg)
Building footprint extrusion
$feature.Height
![Page 12: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/12.jpg)
3D models – WebStyleSymbols
![Page 13: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/13.jpg)
3D models - glTF
![Page 14: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/14.jpg)
Scaled 3D models
![Page 15: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/15.jpg)
Earthquakevisualization
![Page 16: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/16.jpg)
Marine data analysis
![Page 17: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/17.jpg)
100
0
![Page 18: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/18.jpg)
![Page 19: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/19.jpg)
Documentationsamples
![Page 20: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/20.jpg)
Swiss National ParkHiking app
![Page 21: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/21.jpg)
Terrain visualizationUsing contour lines
![Page 22: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/22.jpg)
Low poly mapA low poly map of Switzerland
![Page 23: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/23.jpg)
ResourcesArcGIS API for JavaScript SDK samples: https://developers.arcgis.com/javascript/latest/sample-code/index.html?search=webstyle
Making the leap to 3D - http://www.esri.com/esri-news/arcuser/fall-2017/making-the-leap-to-web-3d (ArcUser article)
Visualize large feature datasets in 3D with ArcGIS API for JavaScript - https://www.esri.com/arcgis-blog/products/js-api-arcgis/3d-gis/visualize-large-feature-datasets-in-3d-with-arcgis-api-for-javascript/
![Page 24: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/24.jpg)
Resources
Romania in 3D -https://github.com/RalucaNicola/JSAPI_demos/romania-3D Visualization of Paris -https://github.com/RalucaNicola/JSAPI_demos/extrude-buildings-paris Ocean salinity visualization – https://github.com/ekenes/esri-ts-samples/tree/master/visualization/emu/3dHiking app – https://github.com/RalucaNicola/hiking-app
![Page 25: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/25.jpg)
![Page 26: Practical Guide for Building a 3D Web App From 2D Dataproceedings.esri.com/library/userconf/devsummit19/papers/DevSummitPS... · Kristian Ekenes. Raluca Nicola. Practical Guide for](https://reader031.vdocuments.site/reader031/viewer/2022013019/5e11d487a7ff6533137451b4/html5/thumbnails/26.jpg)
Complete answersand select “Submit”
Scroll down to find the feedback section
Select the session you attended
Download the Esri Events app and find your event
Please Take Our Survey on the App