Davao Coffee Crawler

• 

  navigate through participating shops

• 

  shop information & recommended blends

Inspiration

The Davao Coffee Crawl 2023; it is a month long celebration of local coffee shops here in Davao City. This is celebrate at the month October, wherein October 1 is also celebrated as the international coffee day.

The participating coffee shops are grouped into 2 sets (9 coffee shops each) and the goal is to visit each coffee shops. Try their recommended & signature coffees made from their specialty beans, and receive limited edition merch.

What it does

To supplement this event, I've created the Davao Coffee Crawler. This crawler aims to help the participating coffee lovers by visualizing the coffee shops in an interactive 3D map. An optimized route is also displayed, which connects all 9 coffee shops of a given set.

Aside from being a medium for Travel & Local Discovery, Davao Coffee Crawler is also a medium for Commerce as we're promoting the store & their recommended specialty blends.

How we built it

I've built it with the help of the Photorealistic 3D Tiles to get the 3D data and Cesium as the renderer. After I've setup the renderer with the 3D tiles from google maps tiles API, I've used Places, Maps Elevation, and Routes API to get the coffee shop data. To properly display the markers on a 3D globe, we need the coffee shop's geometry and elevation. For the path that connects all the coffee shops in a set, we need a polyline with an optimizeWaypointOrder enabled.

Challenges we ran into

setting up renderers

learning 3D concepts such as latlng in xyz & radians form, Camera's heading, pitch, range, roll

exhausting quotas in development

renderer's mobile behavior

Accomplishments that we're proud of

An interactive 3D map of Davao City with coffee shops as the main stars

Visual paths and markers for the coffee shops

A sweeping camera effect to highlight the magnitude of the event around the city

A camera jump effect when a coffee shop is selected

What we learned

Map related APIs

3D map renderers

Terrain behavior

2D vs 3D map render

concepts of 3D Maps

working with 3D objects

What's next for Davao Coffee Crawler

Since this is an annual event every october and its now on its 3rd year, I plan to maintain this crawler for future coffee crawl events.

Get user's current location and generate a path to a selected coffee shop

Add other coffee shops data to support Davao's coffee scene

Built With

• angular.js
• cesium
• firebase
• material-3
• photorealistic-3d-tiles