VillageLIVE: Database and Website

· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · | Data Personalization

For this final I tackled building a database and website to host VillageLIVE.


Village like is…

web-and-database-dragged-2

That works like this:

web-and-database-dragged-3

A large part of the VillageLIVE concept is dependant on being able to recieve, store and retreive user submited memories of the west village. So, while we are still int he prototype stages wiht the app development I though I should go ahead and start buildinga database.


I used Sam’s boilerplate to get started building out the functionality, using heroku and MongoDB:

web-and-database-dragged-5

And sent it out to some trusted sources to start collection submissions.


Once the database was working I decided that I wanted to build a more exciting interaction around it. And also use it as a way to simulate some of the functionality of the app.  While thinking about how how to do this I decided I should also use this as an opportunity to really flesh out the mission and presentation of the project as a whole. Why not build a full website?


So I can up with a few designs and by building out the basic structure using bootstrap, html and css.

web-and-database-dragged-6

Once I had the basic layout and design I turned my focus toward the data base.


I knew I wanted to lay things out on a simple map. Maybe something like this:

map

and move it away from google maps.


So I turned to mapbox studio to attempt my own design.


I experimented with the mapbox, d3 and leaflet libraries and ultimately ended up using Leaflet.js to draw the map. I found it to be the most intuitive to use and was simple in the way that I needed it to be. Getting started was easy and it played nicely with mapbox studio.


web-and-database-dragged-7


This is where I ended up:

screen-shot-2016-12-08-at-11-44-28-am


I chose to bring in both the database dataset and a separate json file of info about the videos we were using in the AR application. I wanted to create two separate layers of data on the map that could be toggled in and out of view – similar to the UX we imagined for the app experience.


Luckily creating layers in Leaflet is pretty simple:

web-and-database-dragged-8

But I did run into some hiccups along the way as I wasn’t sure how to parse my data correctly. I ended up pushing each dataset into a its own FeatureGroup(); – an array of sorts – and using these to draw and remove data from the map using buttons I created separately and another tutorial I found.


HERE IS THE FINAL PRODUCT!


GITHUB CAN BE FOUND HERE.

 


No Comments

Leave a comment