Development of a Web-Browser Based Interface for 3D Data—A Case Study of a Plug-in Free Approach for Visualizing Energy Modelling Results

  • Jochen WendelEmail author
  • Syed Monjur Murshed
  • Akila Sriramulu
  • Alexandru Nichersu
Part of the Lecture Notes in Geoinformation and Cartography book series (LNGC)


This research explores the usage of freely available open-source resources for the deployment of a plug-in free web-application interface for 3D geospatial data to visualize energy related modelling and simulation results. Such plug-in free web mapping applications will be essential for future cartographic web applications as forthcoming web browsers will no longer support the usage and installation of those plug-ins used in the past. As a proof of concept, a 3D city model of the city of Karlsruhe in Germany consisting of over 87,000 buildings is used as a case study. This data set was compiled using OpenStreetMap data and outputs from energy simulation models. The CityGML format is used for data storage of this multi-domain data set. In order to ensure independence from browser plug-ins, HTML5 and freely available JavaScript libraries are used for the creation of this application. Multiple analytical cartographic and geospatial functions such as cartographic classification, attribute selection, descriptive statistics, spatial buffer analysis and the retrieval of modelling results from a PostgreSQL and PostGIS data infrastructure are implemented in this interface. This paper further discusses some case studies, future enhancement opportunities of the proposed interface and experiences gathered during the interface development process that would help other cartographers and GIScientists in developing future native 3D web mapping applications.


3D web mapping Geovisualization WebGL Web mapping API Energy analysis 



The authors would like to extend sincere gratitude towards the two anonymous reviewers for improving the paper. Furthermore, the authors would like to thank their colleagues at EIFER and EDF SINETICS for valuable support during the implementation process as well as EDF for funding this research.


  1. Autodesk Ecotect Analysis (2010) Training packages, demo toolkit, CFD analysis, air flow rateGoogle Scholar
  2. Bahu JM, Koch A, Kremers E, Murshed SM (2014) Towards a 3D spatial Urban energy modelling approach. Int J 3-D Inf Model (IJ3DIM) 3(3):1–16Google Scholar
  3. Barth A, Felt AP, Saxena P, Boodman A (2010) Protecting browsers from extension vulnerabilities. In: NDSS 2010 FebGoogle Scholar
  4. Bell D (2005) Software engineering for students. Pearson Education, New YorkGoogle Scholar
  5. Brewer CA, Buttenfield BP (2007) Framing guidelines for multi-scale map design using databases at multiple resolutions. Cartography Geogr Inf Sci 34(1):3–15CrossRefGoogle Scholar
  6. Bostock M (2011) d3—A javascript visualization library for HTML and SVG. Accessed 15 May 2015
  7. Butler H, Daly M, Doyle A, Gillies S, Schaub T, Schmidt C (2008) The GeoJSON format specification. Rapp Tech 67Google Scholar
  8. Deslauriers M (2015) Drawing lines is hard. Accessed 20 Dec 2015
  9. Dix A, Finlay J, Abowd GD, Beale R (2004) Human-computer interaction. Pearson Prentice Hall, HarlowGoogle Scholar
  10. Döllner J, Kolbe T, Liecke F, Sgouros T, Teichmann K (2006) The virtual 3D city model of Berlin—managing, integrating and communicating complex Urban information. In: 25th international symposium on Urban data management UDMS. Aalborg, DenmarkGoogle Scholar
  11. Giovannini L, Pezzi S, Di Staso U, Prandi F, de Amicis R (2014) Large-scale assessment and visualization of the energy performance of buildings with ecomaps-project SUNSHINE: smart Urban services for higher energy efficiency. DATA 170–177Google Scholar
  12. Goetz M, Zipf A (2012) OpenStreetMap in 3D detailed insights on the current situation in germany. In: City, proceedings of the AGILE 2012 international conference on geographic information science. Avignon, pp 24–27Google Scholar
  13. Goodchild MF (1991) The technological setting of GIS. In: Geographical information systems: principles and applications (1st ed), vol 1, pp 45–54Google Scholar
  14. Grünbaum B, Shephard GC (1990) Rotation and winding numbers for planar polygons and curves. Trans Am Math Soc 322(1):169–187CrossRefGoogle Scholar
  15. Harrower M, Brewer CA (2003) an online tool for selecting colour schemes for maps. Cartographic J 40(1):27–37CrossRefGoogle Scholar
  16. Huber H, Schickler W, Hinz S, Baumgartner A (2003) Fusion of Lidar data and aerial imagery for automatic reconstruction of building surfaces. In: Proceedings of the 2nd GRSS/ISPRS joint workshop on data fusion and remote sensing over urban areas. Berlin, pp 82–86Google Scholar
  17. Jenny B, Šavrič B, Liem J (2015) Real-time raster projection for web maps. Int J Digital Earth 1–15Google Scholar
  18. Lavoué G, Chevalier L, Dupont F (2013) Streaming compressed 3D data on the web using JavaScript and WebGL. In: Proceedings of the 18th international conference on 3D web technology (pp 19–27). ACMGoogle Scholar
  19. Ledermann F, Gartner G (2015) Mapmap. js: a data-driven web mapping API for thematic cartography. Rev Bras Cartografia 5:67/5Google Scholar
  20. Liang YE (2010) JavaScript testing beginner’s guide test and debug JavaScript the easy way. Packt Pub, BirminghamGoogle Scholar
  21. McNamara R, McCormack J, Jouppi NP (2000) Prefiltered antialiased lines using half-plane distance functions. In: Proceedings of the ACM SIGGRAPH/EUROGRAPHICS workshop on graphics hardware, pp 77–85Google Scholar
  22. Ming W (2008) A 3D web GIS system based on VRML and X3D. In: Genetic and evolutionary computing, 2008. WGEC’08. Second international conference on (pp 197–200). IEEEGoogle Scholar
  23. Mr. Doob (2010) three.js—JavaScript 3D library. three.js—JavaScript 3D library. Accessed 14 June 2015
  24. Neumann A, Winter AM (2001) Time for SVG—towards high quality interactive web-maps. Int Cartographic Assoc. (2001 Aug 6)Google Scholar
  25. Nouvel R, Zirak M, Dastageeri H, Coors V, Eicker U (2014) Urban energy analysis based on 3D city model for national scale applications. In: IBPSA Germany conference, vol 8Google Scholar
  26. Peterson MP (2015) Evaluating mapping APIs. In: Modern trends in cartography. Springer, pp 183–197Google Scholar
  27. Raghothama J, Meijer S (2015) Gaming, urban planning and transportation design process. In: Planning support systems and smart cities. Springer, pp 297–312Google Scholar
  28. Resch B, Wohlfahrt R, Wosniok C (2014) Web-based 4D visualization of marine geo-data using WebGL. Cartography Geogr Inf Sci 41(3):235–247CrossRefGoogle Scholar
  29. Saed S, Wendel J (2015) Estimating heating energy consumption and CO2 production—a novel modeling approach. In: Proceedings of the 14th international conference on computers in urban planning and urban management. CambridgeGoogle Scholar
  30. Sandvik B (2013) Showing GPS tracks in 3D with three.js and d3.js. Thematic Mapping Blog. Accessed 11 May 2015
  31. Slocum TA, McMaster RB, Kessler FC, Howard HH (2009) Thematic cartography and geovisualization. Prentice Hall, New JerseyGoogle Scholar
  32. Simons A, Nichersu A (2014) Development of a CityGML infrastructure for the implementation of an energy demand method with different data sources. GIScience 2014. Vienena, Austria. (25th September 2014)Google Scholar
  33. Suderaraman P (2013) Practical Ext JS 4, 1st edn. Apress, New YorkCrossRefGoogle Scholar
  34. Sutherland A (2012) asutherland/d3. GitHub. Accessed 7 Dec 2015
  35. Soltani A, Canty S, Mayo Q, Thomas L, Hoofnagle CJ (2010) Flash cookies and privacy. In AAAI spring symposium: intelligent information privacy management, Vol 2010, pp 158–163Google Scholar
  36. Thiele A, Wurth MM, Hinz S, Even M (2013) Extraction of building shape from TanDEM-X Data. International archives of the photogrammetry. Remote Sens Spat Inf Sci XL-1/W1:345–350Google Scholar
  37. Wendel J, Nicerhsu A (2015) An open-source data infrastructure for storage, analysis and visualization of city energy geospatial data. Energy, science and technology 2015. Book of abstracts, EST, energy science technology, international conference & exhibition. Karlsruhe, Germany. (20–22 May 2015)Google Scholar
  38. Wieland M, Nichersu A, Murshed S M, Wendel J (2015) Computing solar radiation on CityGML building data. In: 18th AGILE international conference on geographic informaton science 2015. Lisbon, Portugal. (9th June 2015)Google Scholar
  39. Zipf A (2010) Heidelberg-3D. Accessed 18 Dec 2015

Copyright information

© Springer International Publishing Switzerland 2016

Authors and Affiliations

  • Jochen Wendel
    • 1
    Email author
  • Syed Monjur Murshed
    • 1
  • Akila Sriramulu
    • 2
  • Alexandru Nichersu
    • 1
  1. 1.European Institute for Energy Research (EIFER)KarlsruheGermany
  2. 2.Karlsruhe University of Applied SciencesKarlsruheGermany

Personalised recommendations