Tangerine Development

Sometimes you don't start out a project with an obvious path to completion, but rather with a overwhelming amount of data and no obvious way to present it to the public. This project for the New Mexico Museum of Natural History is one of the latter, which made it a great experience in prototyping that resulted in a great final product.

The very first version of this project was something that I made for the museum when I was first learning JavaScript as a museum employee five years ago. It is a very simple interactive where you can click on a volcano icon and then be directed to another page on the website to read more. The museum had just recently received money to update their volcano exhibit and wanted to make a version of this to go inside the exhibit hall. During brainstorming sessions, I found out that the curator (Dr. Larry Crumpler) had painstakingly mapped out all of the volcanic regions and all of the volcanic vents and had it all in KML format! I realized the smartest way to display the data would be to use the Google Maps API, allowing for plotting, coloring, panning, zooming, and more. It is also fairly flexible in display, and whatever customization isn't part of the regular API you can totally hack with CSS. The tricky part was trying to combine the map layers with the website data from the original version and have that still be intuitive and seamless.

The four stages of the Land of Volcanoes UI. 1 - Version from 2015, 2 - putting in all the data just to plot it and try it out, 3 - Narrowing it down and attempting to make it look good, 4 - Hiring a real designer.

In order to make it work, I used Vue for the UI elements like the attract screen and the Google Maps API for plotting the KML data. Drupal has a module where you can export items as JSON data which I used to export all of the volcano pages so they could be loaded inside the application. I went through and attached each volcano from the website to one subset of the data.

After we had functionality where we wanted it, we hired Haley Wakefield who I've worked with on a few different projects. She was able to take the existing functionality and make it much more intuitive and beautiful.

One of the most fun parts of this project to build was the attract screen. I came up with a way of retiling it every time it runs with an incredible collection of the curator's photography.

A short clip of the Land of Volcanoes attract screen doing its thing.

The grid is regenerated every time the program times out with different image sizes and layouts. Certain parts of the grid are blocked off to make space for the title, and the images are animated with CSS rather than JavaScript, so the code performs very well even after a long period of time.