Giter Site home page Giter Site logo

Binary tiles about all-transit HOT 2 OPEN

kylebarron avatar kylebarron commented on September 26, 2024
Binary tiles

from all-transit.

Comments (2)

kylebarron avatar kylebarron commented on September 26, 2024

Let's try to use protobuf. Essentially you want a binary file that has:

{
  positions: [x1, y1, x2, y2, x3, y3, ...],
  timestamps: [t1, t2, t3, t4, ...],
  startIndices: [0, 2, 5, 8, ...]
}

The positions includes all coordinates for all lines in the tile; similarly the timestamps includes all timestamps for all lines in the tile. The startIndices is what allows deck.gl to keep track of which coordinates are a single line.

See: https://deck.gl/#/documentation/deckgl-api-reference/layers/path-layer?section=use-binary-attributes

which specifically talks about how to use binary attributes with the PathLayer, and presumably it's the same with the TripsLayer.

from all-transit.

kylebarron avatar kylebarron commented on September 26, 2024

Something like this seems like it would work but I got a few errors, from malformed data?

getTileData: ({ x, y, z }) =>
  fetch(`${baseurl}/${z}/${x}/${y}.pbf`)
    .then(response => {
      if (response.status === 200) {
        return response.arrayBuffer();
      }
      return null;
    })
    .then(buffer => {
      if (buffer) {
        const pbf = new Protobuf(buffer);
        const obj = ScheduleTile.read(pbf);
        console.log(obj);

        const data = {
          length: obj.startIndices.slice(-1)[0],
          startIndices: new Uint16Array(obj.startIndices), // this is required to render the paths correctly!
          attributes: {
            getPath: {
              value: new Float32Array(obj.positions),
              size: 2
            },
            getTimestamps: {
              value: new Float32Array(obj.timestamps),
              size: 1
            }
          }
        };
        console.log(data);
        return data;
      }
      return {
        length: 0,
        startIndices: new Uint16Array(0),
        positions: new Float32Array(0),
        timestamps: new Float32Array(0)
      };
    }),

from all-transit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.