Jingyi Li | Center for Architectural Conservation

I worked for CAC as a summer intern from May to August. I worked on two tasks during the summer: conducting hydrology analysis for Wupatki & Tuzigoot and completing the PAHO website.

I used ArcGIS pro and other GIS softwares taught in ENVS570 Modeling Geographical Space for the hydrology analysis for Wupa and Tuzigoot.  The PAHO website requires skills mostly in front-end web development like coding in HTML, CSS and Javascript as well as using open-sourced libraries and frameworks like Leaflet JS, mapbox, Cesium JS, etc.. I took MUSA611 Javascript for Designers and Planners to develop the skills of programming for web.

From the hydrology analysis project, I learned how to use HEC-RAS to do micro-level hydrological modeling , which is different than ArcGIS pro as a software applied to macro-scale hydrology analysis. I also became proficient in the workflow of editing report in InDesign during the project.

For the PAHO website project, I had the chance to use the skills I learned from MUSA611 to create the webpage by front-end coding. Although the website is host on Google Site, developers can still embed a full-page code to customize features and interactivity of each of the webpages. I used Leaflet JS and Mapbox to create interactive maps to present the location of Pennsylvania Hospital. I used Cesium JS to visualize the evolution of the hospital building in 3D, with which also comes a set of 3D global tiles. Esri Storymap was used to create the contextual and site history. Storymap is easier to use than coding from scratch because Esri offers built-in nice layout and styles on their website.

The most time consuming part would have to be the photo gallery. The Google Site default template does allow enlarging and downloading of the images, so I actually coded the gallery up in HTML, CSS and vanilla Javascript. Grid layout in CSS provides flexibility to create image card layout when images are in different direction and size. Lazy loading now have become built-in with HTML to allow easy access of the optimization of the image loading performance.

One thing remains unsolved is the CORS errors given by chrome. Coding on the server side, although not possible if hosting Website on Google site, can solve the problem, however, solutions on the client side may still exists to allow fetching data from cross-sourced server.

Other technologies and tools are used for the website such as PDF embed, Bootstrap for easy and quick layout, Sketch fab, Meshlab and Cloud Compare for processing and animating point clouds. I also found it beneficial to learn about the project itself through working on its web presentation.