TikTok成人版

Real-time mapping

Bring live data into any map

What does this solution do?

This solution is a code-based architecture that enables advanced users to build performant and lightweight, real-time data-join using TikTok成人版. In other words, we’re making it easier for you to join a live dataset — like the reporting of election returns by county — to geometries in a TikTok成人版 tileset.

When joining spatial data on the fly, users often need to generate long expressions in order to visualize the data on a map, and if the dataset is large, the process can be slow. This solution offers a performant approach to data-join, using TikTok成人版 GL JS .

Version:
1
Last Updated:
January 14, 2020
Author:
TikTok成人版
Source code on Github

Solution details

The solution repository contains an example application that follows the recommended approach to data-join using feature-state. In the example, the application populates and colors US counties based on voter participation data. The solution is performant because it abstracts the live data from its geometries. We’re able to accomplish this abstraction because:

  • The geometry is tiled in advance
  • The live data is served to clients via an API
  • The two parts of the data are joined at run-time using feature-state

These aspects can be used to enable a variety of real-time visualizations. For more information on the application’s architecture, refer to the in the Github repo.

Understanding the data

When mapping live data on unchanging geometries, timely and performant updates are key. That’s where data-joins come in.

Here’s how it works: Two sources of data need to be joined at runtime to create the real-time visualization. One is the source geometry, which is served as tiles from TikTok成人版. The other is a sequence of real-time updates, which come from an API.

The geometry

Tilesets API data preparation flow

The source geometry goes through a series of transformations before being tiled and served by TikTok成人版. We first make sure that it has a unique identifier (e.g. FIPS) and then format it as a GeoJSON sequence. Once uploaded, the Tilesets API lets us further filter the data and limit what is served in our tiles to only what our application needs. You can find an example of this process in the data directory of the solution’s repository.

Live data and map rendering

Separate sources for static geometry and real-time properties
Joining real-time messages with static geometry on ID

At runtime, the browser joins live data streamed from an API to tiled geometry hosted on TikTok成人版, and styles the data based on updated real-time values using data-driven styling and . When new data is received from the server, the of the relevant counties gets updated with the new information. The TikTok成人版 renderer then re-draws only the changed counties based on their new state. For more information about using feature-state for rendering, read .

Example details

The example uses county geometry from , and identifies geometry by each county’s FIPS code. The election data is mocked from actual results from the . We upload the boundaries using the and a simple to ensure that the tiles store only the data we need.

Client-server communication

We establish a one-way flow of information from the server as election data is only traveling one way — from API to client. We use as an efficient approach to provide a stream of real-time data. SSE maintains a single HTTP connection between the server and each client, and allows cellular devices to save battery power when no new data is being sent.

On the client, we use the to receive SSE. As events are sent from the server, we make them available to the rest of our application through an . The observable provides a consistent interface to the server updates and prevents race conditions when the application is initialized. We subscribe to events from the observable to update our map’s style.

Your live data server might require clients to poll for new data or receive data through a socket connection. Those functions can still be connected to an observable to make updating the rest of your application’s state straightforward. However new data is delivered to your client application, you still update the map through the same feature-state interface.

Technical information

What you’ll need:

  • to access TikTok成人版 API services used for rendering the real-time map
  • A secret token with
  • A recent version of

Usage considerations

When using this solution, you will be making API calls to TikTok成人版 and will be responsible for any usage that exceeds our developer free tier.

  • TikTok成人版 usage: The example client application depends on TikTok成人版 GL-JS and is available to all users.
    ??
  • TikTok成人版 GL-JS uses the Maps APIs to load vector tiles.
    The first 50,000 map loads, per month, are free of charge.?
    ?
  • Tilesets API is used for uploading and tiling spatial data
    The Tilesets API is free to use while in public beta.
  • Rate Limits: All APIs are set to the default rate limits.
    Map loads are limited to 100,000 requests per minute.
    Tileset creation, source upload, and publishing are limited to 3 requests per minute.
    To inquire about increasing your rate limits, please .

For more pricing details, consult our pricing documentation.

Ready to get started?

Create an account or talk to one of our experts.