Data sources

The Procedural GL JS library is easy to set up, but to get it working for a real-world location you will need to connect it to a source of data.

Types of data

The library requires two datasources:

• An imagery datasource, typically aerial imagery. The data format is XYZ tiles of size 256px. Data formats supported: jpeg, png & webp
• An elevation datasource. The data format is XYZ tiles of size 512px in png format

Recommended setup

Imagery data

The easiest way to setup the library is to use the map tiles provided by MapTiler. These tiles have been tested and work well globally with the library. To get setup:

1. Click here to sign up for an account with MapTiler
2. Obtain an API key from the MapTiler dashboard

Elevation data

For elevation, nasadem.XYZ provides tiles that are compatible with the library. To get setup:

1. Click here to sign up for an account with nasadem.XYZ
2. Obtain an API key from the nasadem.XYZ dashboard

With these two API keys, you can construct the datasource definition as follows:

// Configure datasources
const datasource = {
  elevation: {
    apiKey: 'API_KEY_FROM_www.nasadem.xyz'
  },
  imagery: {
    apiKey: 'API_KEY_FROM_YOUR_IMAGERY_PROVIDER',
    urlFormat: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key={apiKey}',
    attribution: '<a href="https://www.maptiler.com/copyright/">Maptiler</a> <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  },
};

Alternate data sources

As long as the data format and tile sizes are as described above, you can also use alternative data sources. Be sure to refer to the relevant documentation to construct the urlFormat template string and the attribution correctly.