A Pack, Some JSON, Firebase, and Mapbox

Making Packs
1

Unlike many platforms, I’m often amazed at the progress I can make with relatively complicated integrations. As you look at these images, bear in mind that 100% of the data and content is managed in Coda tables.

The objective for this latest Coda project was to capture a bunch of location data for an analytics project at Stream It, organize it through collaboration with a partner, and then present it in an easy-to-navigate map. The tools for this include:

  • Coda (of course)
  • A lot of location data including lat/lng, images, descriptions, tasks at each location
  • A custom pack
  • Firebase
  • MapBox

I can’t really show too much about this project because of confidentiality restrictions, but I can share the approach.

image
image1736×1078 79 KB

One key requirement; the map had to be real-time. For this reason, I chose a Firebase real-time database which makes it possible to keep update latency to minimum when changes are made in Coda.

image
image1920×1500 225 KB

As you can see, Coda makes it very easy to frame in the MapBox map and the latest canvas features make it possible to add some nice usability touches. And MapBox 3D and terrain features also allow users to get perspectives using some clever views.

Ensuring Firebase is updated in real-time is the job of a custom Pack that pushes any changed JSON data into the database. The pack receives the JSON data from Coda based on formulas that generate the necessary GeoJSON payloads. For example:

image
image750×666 28.6 KB

When presented with many dimensions and requirements for information management and collaboration, Coda is the one tool that seems to leap at the chance to unify the team and the process that helps them work through their work.

10 Likes
2

:raised_hands: This is so cool.

I like the model of using a Pack to push out to an outside visualization source, that’s then iframed back in. Great way to handle using Packs for complex UI stuff.

2 Likes
3

+1 to that! Very nicely done, and thanks for sharing this story with the community. How was the process of integrating Packs with Firebase? How “real time” are you able to achieve? AKA, how long after you change data in Coda is it reflected in the map?

1 Like
4

A breeze actually because this is a fire-and-forget integration; no need to wait for a response since it’s just a one-way sync of GeoJSON data. This example shows how to do it without any security context, but that’s also simple work with Firebase.

//
// update firebase
//
async function updateFirebase(nodePath, payload, context)
{
  let apiUrl = "https://...firebaseio.com/" + nodePath + ".json";

  const response = await context.fetcher.fetch( {
    url     : apiUrl,
    method  : 'PUT',
    headers : {
      "Content-Type" : "application/json",
      "Accept" : "application/json; charset=UTF-8"
    },
    body : payload
  });
  console.log(response);
  return response;
}
2 Likes
5

The latency appears to be less than one second. I have not been able to actually see the latency either. Once I change a field value in Coda, by the time I look at the map, the updates are already there.

3 Likes