Trailscape

Inspiration

The inspiration for this app comes from a sample google maps project: https://cloud.google.com/blog/products/maps-platform/how-two-developers-reached-new-heights-with-google-maps-platform

I found it very interesting how they documented a beautiful hike along the mountains and felt that it would be nice if others could share similar experiences. Taking detailed 360 images and building a website would be hard for the average user though, so I wanted to make a website that would double as a tool to create posts, as well as to view posts shared by other people.

As someone who enjoys hiking, as well as photography, I find that the normal social media experience doesn't convey enough information. Images are fine, but they don't have any context. All this information can be encoded in the image however, and we just choose not to use it. This includes information about the location, camera, and even the software used to save the file.

What it does

Trailscape allows users to upload images to the website and recreate a trip / hike / adventure on Google Maps. It creates a unique URL that can then be shared with friends, who can also view it. Users are allowed to edit titles and captions for each image, as well as edit metadata such as GPS location of each image and the timestamp. However, to take things up a notch, the app will automatically fetch this data from the file if present, making for a seamless experience.

Feel free to try it out for yourself using the links below. The URL with the post ID will show a sample post that I created, and you can create and share your own posts with the other URL. Please do not spam either URL. For proof of concept, I have made it without many restrictions. However, after reaching a preset limit of requests the app will force stop itself.

How I built it

The app was built in Vue.js. The backend is express running on Google Firebase Functions. These functions access Google Cloud Storage buckets to save and retrieve images, as well as editing the Firestore to save metadata on titles, captions, timestamps, and coordinates for each image.

The frontend used the Google Maps API and the Directions API. When images with coordinates are loaded in by the user or the backend, it creates a route by using the image timestamps to figure out waypoint order. Lastly, some frontend JavaScript/CSS/HTML displays the images and map in a pretty way. Check out the video to see more features in action!

Challenges I ran into

CORS. Enough said.

Jokes aside, one big issue that I think everyone runs into is CORS issues and I was not the exception. Google firebase and Google Cloud Storage both have security measures and this meant learning the IAM policies, HTTPS request structure, and how the SDK authenticates my app.

Another issue I ran into was multipart form data HTTP requests. In order send the images to the firebase function (which then stores it in the google cloud storage bucket), I had to send the file in multiple parts. However, this was not working and the file kept on giving an error when I tried to view it in my cloud console. When I tried to send a buffer of the files, the request became too large. The workaround I did was encoding each file in base64, sending multiple requests to the backend, and then decoding it before uploading to the bucket. In order to debug this, I was comparing raw image data between files on notepad, which ended up taking a while.

Additionally, choosing the services and APIs to use was tricky as well. Originally, the edit view would be on Google Maps and the post view would be using Mapbox. Mapbox API came with its own range of issues as well, but the distinct feature was 3D terrain, which really stands out on mountains or hiking areas. However, Google Maps satellite images had much better color close up, and the https://www.google.com/maps website had a really nice 3D view. I believe that if the google maps API allowed for 3D views, it would be beneficial to many projects similar to mine. In the meantime though, I have looked at multiple alternatives and for a proof of concept that renders well on most computers, Google Maps works.

Accomplishments that I'm proud of

I am really proud of being able to finish this hackathon to begin with. All of the backend technologies I worked with were new to me, and I didn't have much experience with HTTP requests aside from JSON data. Being able to showcase a publicly hosted website that works is also really nice.

What I learned

I learnt a lot about Google Services. Even thought this was a Google Maps hackathon, I learnt more about Firebase, Firestore, Cloud Functions, and Cloud storage. Being able to authenticate all of these services through a central location with a single API key was also very helpful, and having so many users allows for (relatively) quick debugging though online searching.

What's next for Trailscape

There is a lot that can be improved with Trailscape before it is ready for actual use on social media. For one, the entire backend would be reworked to handle a lot more traffic and concurrent requests. User authentication would also show users their previous posts instead of having to save the link that the website puts out. Again for sake of testing and demo, this feature has not been implemented in yet.

I think the rendering itself could be a big improvement. I discussed earlier how I originally planned to use Mapbox for a more detailed view, as Google Maps API doesn't allow for the same 3D view that the website version gives. This has been something that is highly requested on forums as well, and hopefully it is implemented in soon. Having that level of detail would make the app almost feel like VR where you can go on the same trip or hike that someone else went on. Any Google Maps developers reading this, please implement these features in soon!

Trailscape is also not compatible with mobile views, yet. The biggest challenge a user would have right now is exporting images from phone to the computer, and then uploading it. Geotag information and other EXIF data doesn't always export over and that is why I had to add in the manual edit feature. I used the following link: https://www.thexifer.net/ in order to edit in the metadata manually. However, the images on my phone do show the metadata so hopefully a mobile version would be much nicer.

Being able to share to different social media accounts would also be useful. An app version could do this easily with intents, and the web version could redirect to a social media page such as Twitter or Facebook. Being able to customize the posts themselves would be nice too, such as adding videos or 360 degree images.

The core concept of Trailscape is to visualize an experience better. A simple collection of images is just a collage. However, adding the routes and directions transforms it into a detailed view of the trip that would be great to share with others.