Building Conversation
Language used: JavaScript/jQuery, Python, SQL, CSS, HTML, Jinja
Building Conversation X Harvard serves as an online platform to explore, engage, and discuss the campus and buildings of Harvard University. Its main page is a map, by default centered on Harvard Square, that users can navigate by clicking and dragging to move around or scrolling to zoom in and out. Buildings shaded in crimson are owned by Harvard, and users can click on any of those to pull up an info box with images, information, and past user questions and comments about a given building.
On a building’s pop-up page, users can submit questions, answers, or comments by typing in the relevant text field and clicking submit. Once they have done so, they can reload the page to see their submission displayed. This feature allows users to converse amongst themselves about the campus—learning from one another and discovering new ways of seeing familiar places.
Users also have the option of editing the information displayed for each building; to do so, they click the edit icon in the upper right-hand corner of the page. On the editing page that then appears, users can edit the information and its formatting using HTML code. They can also upload and format photos by copying and pasting a URL and using HTML to format it. Of course, not all users are expected to know HTML and so the editing window is designed to allow basic text editing by even those without technical knowledge. This editing feature is designed to crowdsource knowledge about the Harvard campus, turning this app into a living repository of information about Harvard’s buildings.
Before the website could be implemented, I parsed a large amount of data (json and HTML) with python from https://api.cs50.io/map/buildings, https://map.harvard.edu/, and ArcGIS data to set up the geojson file and sql database.
The SQL database has the same building ids as the geojson so the data could be cross referenced. Right now the geojson data is created and stored on GitHub and accessed via an URL.
This was the easiest and cleanest way to link it to Leaflet to create the shapes on the map.
Many things were done with JavaScript because I wanted to provide a smooth user experience using a dynamic interface.
For example, using the modal on the homepage prevented me from using Jinja because the HTML has to be changed dynamically every time a new building is clicked on.
So I had to work around with JavaScript/jQuery to search via Flask and to change the page.
For the edit feature, I embedded a rich text editor so that the users can edit the format of the description text.
