MapsGL

https://www.xweather.com/docs/mapsgl
Admin
MapsGL is a WebGL graphics SDK that enables developers to integrate customizable, vector-based...
Tokens:122,959
Snippets:1,341
Trust Score:9.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Import MapsGL Module

Source: https://www.xweather.com/docs/mapsgl/getting-started

Import the MapsGL module into your Javascript file after installation.

```javascript
import * as mapsgl from '@xweather/mapsgl';
```

--------------------------------

### Install MapsGL NPM Package (NPM)

Source: https://www.xweather.com/docs/mapsgl/getting-started

Use this command to add the MapsGL NPM package to your project using NPM.

```bash
npm install --save @xweather/mapsgl
```

--------------------------------

### Play Animation

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Begins playing the animation. Optionally, specify a position from 0 to 1 to start playback halfway through.

```typescript
play()
```

```typescript
play(0.5)
```

--------------------------------

### Install MapsGL NPM Package (Yarn)

Source: https://www.xweather.com/docs/mapsgl/getting-started

Use this command to add the MapsGL NPM package to your project using Yarn.

```bash
yarn add @xweather/mapsgl
```

--------------------------------

### Go To Date

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Advances the playhead to a specified date within the timeline's start and end date range.

```typescript
goToDate(date: Date)
```

--------------------------------

### Configure Timeline Animation Options

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Provide timeline configuration options within the `animation` object when instantiating a MapController. This example sets animation duration, end delay, and repeat behavior.

```javascript
const controller = new aerisweather.mapsgl.MapboxMapController(map, {
    account: account,
 
    // timeline configuration options are included in the `animation` object
    animation: {
        duration: 2,
        endDelay: 1,
        repeat: true
    }
});
```

--------------------------------

### Add a Basic Circle Layer

Source: https://www.xweather.com/docs/mapsgl/styling/data-driven

This snippet shows how to add a basic circle layer with static styling. It serves as a starting point before implementing data-driven styles.

```javascript
controller.addLayer('earthquakes', {
    type: 'circle',
    source: 'earthquakes',
    paint: {
        fill: {
            color: '#ff0000'
        },
        stroke: {
            color: '#ffffff',
            thickness: 3
        },
        circle: {
            radius: 10
        }
    }
});
```

--------------------------------

### Map State Methods

Source: https://www.xweather.com/docs/mapsgl/reference/map-controller

Methods for getting and setting the map's state, such as its size, center, zoom, bearing, and pitch.

```APIDOC
## getSize

### Description
Returns the map’s container size.

### Method
GET

### Endpoint
MapController.getSize()

### Response
#### Success Response (200)
- **width** (number) - The width of the map container.
- **height** (number) - The height of the map container.

### Response Example
{
  "example": "{ width: 800, height: 600 }"
}
```

```APIDOC
## setSize

### Description
Sets the size of the map’s container. Use this method instead of setting the size on the container DOM element directly as it will perform any necessary map size invalidation and redraws needed depending on the mapping library being used.

### Method
POST

### Endpoint
MapController.setSize(size: { width: number; height: number; })

### Parameters
#### Request Body
- **size** (object) - Required - An object containing the new width and height for the map container.
  - **width** (number) - Required - The new width of the map container.
  - **height** (number) - Required - The new height of the map container.

### Request Example
{
  "example": "{\"width\": 1000, \"height\": 800}"
}
```

```APIDOC
## getCenter

### Description
Returns the map’s geographical center coordinate.

### Method
GET

### Endpoint
MapController.getCenter()

### Response
#### Success Response (200)
- **lat** (number) - The latitude of the map center.
- **lon** (number) - The longitude of the map center.

### Response Example
{
  "example": "{ lat: 34.0522, lon: -118.2437 }"
}
```

```APIDOC
## setCenter

### Description
Sets the map’s geographical center coordinate.

### Method
POST

### Endpoint
MapController.setCenter({ lat: number; lon: number; })

### Parameters
#### Request Body
- **center** (object) - Required - An object containing the latitude and longitude for the new map center.
  - **lat** (number) - Required - The new latitude.
  - **lon** (number) - Required - The new longitude.

### Request Example
{
  "example": "{ lat: 40.7128, lon: -74.0060 }"
}
```

```APIDOC
## getBounds

### Description
Returns the map’s visible geographical bounds.

### Method
GET

### Endpoint
MapController.getBounds()

### Response
#### Success Response (200)
- **north** (number) - The northernmost latitude of the bounds.
- **west** (number) - The westernmost longitude of the bounds.
- **east** (number) - The easternmost longitude of the bounds.
- **south** (number) - The southernmost latitude of the bounds.

### Response Example
{
  "example": "{ north: 34.33, west: -118.50, east: -117.90, south: 33.80 }"
}
```

```APIDOC
## getZoom

### Description
Returns the map’s current zoom level.

### Method
GET

### Endpoint
MapController.getZoom()

### Response
#### Success Response (200)
- **zoom** (number) - The current zoom level of the map.

### Response Example
{
  "example": "10"
}
```

```APIDOC
## setZoom

### Description
Sets the map’s current zoom level.

### Method
POST

### Endpoint
MapController.setZoom(zoom: number)

### Parameters
#### Request Body
- **zoom** (number) - Required - The new zoom level for the map.

### Request Example
{
  "example": "12"
}
```

```APIDOC
## getBearing

### Description
Returns the map’s current rotational bearing, if supported. A bearing of `0` orients the map so that north is up.

### Method
GET

### Endpoint
MapController.getBearing()

### Response
#### Success Response (200)
- **bearing** (number) - The current bearing of the map in degrees.

### Response Example
{
  "example": "45"
}
```

```APIDOC
## getPitch

### Description
Returns the map’s current pitch/tilt, if supported.

### Method
GET

### Endpoint
MapController.getPitch()

### Response
#### Success Response (200)
- **pitch** (number) - The current pitch/tilt of the map in degrees.

### Response Example
{
  "example": "30"
}
```

```APIDOC
## getFov

### Description
Returns the map camera’s current field-of-view.

### Method
GET

### Endpoint
MapController.getFov()

### Response
#### Success Response (200)
- **fov** (number) - The current field-of-view of the map camera in degrees.

### Response Example
{
  "example": "60"
}
```

```APIDOC
## getUnits

### Description
Returns the current units of measurement for the map.

### Method
GET

### Endpoint
MapController.getUnits()

### Response
#### Success Response (200)
- **units** (MapUnits) - An object containing the current units of measurement for the map.

### Response Example
{
  "example": "{ temperature: 'F', speed: 'mph', pressure: 'inHg', distance: 'mi', height: 'ft', snowfall: 'in', direction: 'deg', time: 'h', rate: 'in/h', concentration: 'ppm', ratio: '%' }"
}
```

```APIDOC
## setUnits

### Description
Sets one or more units of measurement for the map. This will trigger a redraw of the map to update any measurements or displayed data values that are affected by the new units.

### Method
POST

### Endpoint
MapController.setUnits(units: Partial<MapUnits>)

### Parameters
#### Request Body
- **units** (object) - Required - An object containing one or more units to set on the map. The object should contain one or more of the following keys: `temperature`, `speed`, `pressure`, `distance`, `height`, `precipitation`, `snowfall`, `direction`, `time`, `rate`, `concentration`, `ratio`.

### Request Example
{
  "example": "{ temperature: 'C', speed: 'km/h' }"
}
```

```APIDOC
## setUnitsForSystem

### Description
Sets the units of measurement for the map to the default units for the specified system. If you want to control individual units, use `custom` instead.

### Method
POST

### Endpoint
MapController.setUnitsForSystem(system: 'metric' | 'imperial' | 'custom')

### Parameters
#### Request Body
- **system** (string) - Required - The system of measurement to set the map units to. The following systems are supported: `metric`, `imperial`, `custom`.

### Request Example
{
  "example": "'imperial'"
}
```

```APIDOC
## toggleFullscreen

### Description
Toggles the fullscreen state of the map. Use this method instead of any native method the third-party mapping library provides in order for MapsGL controls, like the data inspector or legend, to accompany the map when in fullscreen.

### Method
POST

### Endpoint
MapController.toggleFullscreen()

### Response
#### Success Response (200)
- **void** - This method does not return a value.

```

--------------------------------

### Add Fill Layer with Stroke and Data-Driven Color

Source: https://www.xweather.com/docs/mapsgl/advanced/layers

This example shows how to add a fill layer with both a data-driven fill color and a solid black stroke color. This enhances clarity for adjacent features.

```javascript
controller.addLayer('alerts-fill', {
    type: 'fill',
    source: 'alerts',
    paint: {
        fill: {
            color: {
                property: 'COLOR'
            }
        },
        stroke: {
            color: '#000'
        }
    }
});
```

--------------------------------

### Initialize Map and Controller

Source: https://www.xweather.com/docs/mapsgl/examples/custom-radar-colorscale

Sets up the Mapbox map and the AerisWeather MapsGL controller. Requires Mapbox access token and Aeris account credentials.

```javascript
mapboxgl.accessToken = 'MAPBOX_TOKEN';
            const map = new mapboxgl.Map({
                container: document.getElementById('map'),
                style: 'mapbox://styles/mapbox/light-v9',
                center: [-93, 40],
                zoom: 4
            });

            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
```

--------------------------------

### Example GeoJSON Data Source

Source: https://www.xweather.com/docs/mapsgl/advanced/sources

This is an example of a GeoJSON FeatureCollection representing earthquake data. It includes geometry and properties like magnitude, timestamp, and location.

```json
{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                -117.7805,
                38.1714
            ]
        },
        "properties": {
            "report": {
                "id": "nn00838438",
                "timestamp": 1651863279,
                "dateTimeISO": "2022-05-06T11:54:39-07:00",
                "updatedTimestamp": 1651863515,
                "updatedDateTimeISO": "2022-05-06T11:58:35-07:00",
                "mag": 1.7,
                "type": "mini",
                "depthKM": 1.7,
                "depthMI": 1.06,
                "region": "37 km SE of Mina, Nevada",
                "location": "37 km SE of Mina, Nevada"
            },
            "loc": {
                "long": -117.7805,
                "lat": 38.1714
            }
        }
    }]
});
```

--------------------------------

### Initialize Google Map and MapsGL Controller

Source: https://www.xweather.com/docs/mapsgl/examples/google-maps

This snippet shows how to create a Google Maps instance and then initialize the MapsGL controller with your account credentials. It also demonstrates adding weather layers such as radar and alerts with custom opacity.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Using MapsGL with Google Maps</title>
    <meta name="description" content="Use MapsGL with a Google Maps map." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.48&key=AIzaSyBMLZqyvFMBswrOxbVwHTpcasy7e1BkASE" defer></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.js"></script>
 
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
 
    <script>
        window.addEventListener('load', () => {
 
            // Create the Google Maps map instance
            const map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 40, lng: -85.5 },
                zoom: 4,
                mapId: 'GOOGLE_MAP_ID'
            });
 
            // Set up the MapsGL account
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
 
            // Create the Google Maps map controller
            const controller = new aerisweather.mapsgl.GoogleMapController(map, { account });
 
            controller.on('load', () => {
                // Do stuff, like add weather layers
                controller.addWeatherLayer('radar');
                controller.addWeatherLayer('alerts-outline', {
                    paint: {
                        opacity: 0.5
                    }
                });
            });
        });
    </script>
 
</body>
</html>
```

--------------------------------

### Set Timeline Start Date Using Relative Time

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Updates the timeline start date by calculating it from a relative time string (e.g., '-2hours', '1day').

```typescript
setStartDateUsingRelativeTime(relativeDate: string, relativeTo: Date)
```

--------------------------------

### Set Timeline Start Date Using Offset

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Updates the timeline start date by applying a time offset to a relative date. Defaults to the current time if no relative date is provided.

```typescript
setStartDateUsingOffset(offset: number, relativeTo: Date)
```

--------------------------------

### Create Mapbox GL Map Controller

Source: https://www.xweather.com/docs/mapsgl/getting-started/map-controller

Set up your Mapbox access token, create a Mapbox map instance, and then initialize the MapboxMapController with your map and account details.

```javascript
// create the Mapbox map instance
mapboxgl.accessToken = 'MAPBOX_TOKEN';
const map = new mapboxgl.Map({
    container: document.getElementById('map'),
    style: 'mapbox://styles/mapbox/light-v11',
    center: [-74.5, 40],
    zoom: 3
});
map.addControl(new mapboxgl.NavigationControl(), 'bottom-left');
 
// create an Account instance with our AerisWeather account access keys
const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
 
// create a MapboxMapController instance and provide the above `map` and `account` instances
const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
```

--------------------------------

### Update Timeline with Relative Time Methods

Source: https://www.xweather.com/docs/mapsgl/getting-started/animating-data

Instantiate a MapboxMapController and update its timeline start and end dates using relative time strings. The end date can be calculated relative to the start date.

```javascript
// create a map controller using a Mapbox map instance
const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });

controller.on('load', () => {

    // set the start time to 3 days ago
    controller.timeline.setStartDateUsingRelativeTime('-3 days');

    // set the end time to 12 hours later than the new start time
    controller.timeline.setEndDateUsingRelativeTime('12 hours', controller.timeline.startDate);

});
```

--------------------------------

### Initialize Leaflet Map and MapsGL Controller

Source: https://www.xweather.com/docs/mapsgl/examples/leaflet

Sets up a Leaflet map and integrates it with MapsGL using a LeafletMapController. Requires Leaflet and MapsGL SDKs. Ensure to replace 'CLIENT_ID' and 'CLIENT_SECRET' with your actual credentials.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Using MapsGL with Leaflet</title>
    <meta name="description" content="Use MapsGL with a Leaflet map." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.js"></script>
 
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
 
    <script>
        window.addEventListener('load', () => {
 
            // Create the Leaflet map instance
            const map = L.map('map').setView([40, -85.5], 4);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
 
            // Set up the MapsGL account
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
 
            // Create the Leaflet map Controller
            const controller = new aerisweather.mapsgl.LeafletMapController(map, { account });
 
            controller.on('load', () => {
                // Do stuff, like add weather layers
                controller.addWeatherLayer('radar');
                controller.addWeatherLayer('alerts-outline', {
                    paint: {
                        opacity: 0.5
                    }
                });
            });
        });
    </script>
 
</body>
</html>
```

--------------------------------

### Initialize MapLibre Map with Globe Projection and MapsGL

Source: https://www.xweather.com/docs/mapsgl/examples/maplibre-globe

Sets up a MapLibre map instance, configures it for globe projection, and initializes MapsGL with an account and controller. This is the primary setup for using MapsGL with a globe view.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Using MapsGL with Maplibre globe projection</title>
    <meta name="description" content="Use MapsGL with a Maplibre globe." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <script src="https://unpkg.com/maplibre-gl@v5.0.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@v5.0.0/dist/maplibre-gl.css" rel="stylesheet" />
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.js"></script>
    <script src="./xweather.js"></script>
 
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
        background: #0B0B19;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
 
    <script>
        window.addEventListener('load', () => {
 
            // Create the Maplibre map instance
            const map = new maplibregl.Map({
                container: 'map',
                style: 'https://api.maptiler.com/maps/streets-v2/style.json?key=xPFh2vaprBPmtXaXWp9y',
                center: [12, 30],
                zoom: 2
            });
 
            // Set projection to globe
            map.on('style.load', () => {
				map.setProjection({
					type: 'globe',
				});
			});
 
            // Set up the MapsGL account
            const account = new aerisweather.mapsgl.Account(XweatherTokens.api.id, XweatherTokens.api.secret);
 
            // Create the Maplibre map Controller
            const controller = new aerisweather.mapsgl.MaplibreMapController(map, { account });
 
            controller.on('load', () => {
 
                // Find the Maplibre layer id to insert base weather layers before
                let beforeLayerId;
                const layers = controller.map.getStyle().layers;
                layers.forEach((layer) => {
                    if (layer.type === 'line' && !beforeLayerId) {
                        if (/border/i.test(layer.id)) {
                            beforeLayerId = layer.id;
                        }
                    }
                });
 
                controller.addWeatherLayer('satellite-geocolor', {}, beforeLayerId);
                controller.addWeatherLayer('lightning-strikes-pulse', {}, beforeLayerId);
            });
        });
    </script>
 
</body>
</html>
```

--------------------------------

### Default Timeline Configuration

Source: https://www.xweather.com/docs/mapsgl/getting-started/animating-data

Defines the default start and end times for the map's timeline. The start time is set to two hours before the current time, and the end time is the current time.

```javascript
{
    start: new Date(Date.now() - 2 * 3600 * 1000),
    end: 0
}
```

--------------------------------

### setStartDateUsingRelativeTime

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Updates the timeline start date using a relative time string.

```APIDOC
## setStartDateUsingRelativeTime

### Description
Updates the timeline start date by calculating the date using a relative time string, such as `-2hours` or `1day`.

### Parameters
#### Path Parameters
- `relativeDate` (string) - Required - Relative date string from which to calculate the start date. Format should be in the form `{offset}{units}`, where `offset` is a positive or negative number and `units` is one of the following: `seconds`, `minutes`, `hours`, `days`, `weeks`, `months` or `years`.
- `relativeTo` (Date) - Optional - Date from which to apply the `offset` to. Default value is `new Date()`.
```

--------------------------------

### HTML Structure and Map Initialization

Source: https://www.xweather.com/docs/mapsgl/examples/custom-lightning-shader

Sets up the HTML page, includes necessary Mapbox GL JS and Aeris MapsGL SDK libraries, and initializes a Mapbox map instance. It also configures the Aeris MapsGL controller with account credentials.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Custom lightning symbols using a shader</title>
    <meta name="description" content="Use a custom WebGL fragment shader to create a custom effect for lightning strike data." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.js"></script>
 
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
 
    <script>
    window.addEventListener('load', () => {
 
        mapboxgl.accessToken = 'MAPBOX_TOKEN';
        const map = new mapboxgl.Map({
            container: document.getElementById('map'),
            style: 'mapbox://styles/mapbox/dark-v9',
            center: [-73.961, 31.984],
            zoom: 2
        });
 
        const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
        const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
        controller.on('load', () => {
            controller.addWeatherLayer('lightning-strikes', {
                type: 'symbol',
                paint: {
                    symbol: {
                        shader: `
        #extension GL_OES_standard_derivatives : enable
 
        precision mediump float;
 
        uniform vec2 resolution;
        uniform float dpr;
        uniform float time;
 
        varying vec2 vUv;
        varying vec2 vPosition;
        varying float vFactor;
        varying float vRandom;
 
        float rand(float x) {
            return fract(sin(x)*75154.32912);
        }
 
        float rand3d(vec3 x) {
            return fract(375.10297 * sin(dot(x, vec3(103.0139,227.0595,31.05914))));
        }
 
        float noise(float x) {
        float i = floor(x);
        float a = rand(i), b = rand(i+1.);
        float f = x - i;
            return mix(a,b,f);
        }
 
        float perlin(float x) {
            float r=0.,s=1.,w=1.;
            for (int i=0; i<6; i++) {
                s *= 2.0;
                w *= 0.5;
                r += w * noise(s*x);
            }
            return r;
        }
 
        float noise3d(vec3 x) {
            vec3 i = floor(x);
            float i000 = rand3d(i+vec3(0.,0.,0.)), i001 = rand3d(i+vec3(0.,0.,1.));
            float i010 = rand3d(i+vec3(0.,1.,0.)), i011 = rand3d(i+vec3(0.,1.,1.));
            float i100 = rand3d(i+vec3(1.,0.,0.)), i101 = rand3d(i+vec3(1.,0.,1.));
            float i110 = rand3d(i+vec3(1.,1.,0.)), i111 = rand3d(i+vec3(1.,1.,1.));
            vec3 f = x - i;
            return mix(mix(mix(i000,i001,f.z), mix(i010,i011,f.z), f.y),
                mix(mix(i100,i101,f.z), mix(i110,i111,f.z), f.y), f.x);
        }
 
        float perlin3d(vec3 x) {
            float r = 0.0;
            float w = 1.0, s = 1.0;
            for (int i=0; i<5; i++) {
                w *= 0.5;
                s *= 2.0;
                r += w * noise3d(s * x);
            }
            return r;
        }
 
        #define COL1 vec4(0, 0, 0, 0) / 255.0
        #define COL2 vec4(235, 241, 245, 255) / 255.0
 
        #define SIZE 100
        #define FLASH_POWER .8
        #define RADIUS .001
        #define SPEED .0018
        #define SEED
 
        void main() {
            vec2 pos = vUv;
 
            float dist = length(2.0 * pos - 1.0) * 2.0;
            float x = time + 0.1;
 
            float m = 0.2 + 0.2 * vFactor; // max duration of strike
            float i = floor(x/m);
            float f = x/m - i;
            float k = vFactor; // frequency of strikes
            float n = noise(i);
            float t = ceil(n-k); // occurrence
            float d = max(0., n-k) / (1.-k); // duration
            float o = ceil(t - f - (1. - d)); // occurrence with duration
 
            float fx = 4.;
            if (o == 1.) {
                fx += 10. * vFactor;
            }
 
            fx = max(4., fx);
            float g = fx / (dist * (10. + 20.)) * FLASH_POWER;
 
            // smooth out edges to avoid fading extending beyond the symbol's bounds

```

--------------------------------

### Initialize Map and Add Temperatures Layer

Source: https://www.xweather.com/docs/mapsgl/examples/temps-draw-range

Sets up the Mapbox map, initializes the AerisWeather MapsGL controller, adds a legend, and then adds the temperatures weather layer. This is the initial setup before interactive controls are applied.

```javascript
mapboxgl.accessToken = 'MAPBOX_TOKEN';
        const map = new mapboxgl.Map({
            container: document.getElementById('map'),
            style: 'mapbox://styles/mapbox/light-v9',
            center: [-80, 39],
            zoom: 2
        });

        const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
        const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });

        controller.addLegendControl('#legend');

        const rangeMin = document.getElementById('rangeMin');
        const rangeMax = document.getElementById('rangeMax');

        rangeMin.nextElementSibling.textContent = `${rangeMin.value}°F`;
        rangeMax.nextElementSibling.textContent = `${rangeMax.value}°F`;

        controller.on('load', () => {
            const tempsLayer = controller.addWeatherLayer('temperatures');

            rangeMin.addEventListener('input', () => {
                const valueEl = rangeMin.nextElementSibling;
                valueEl.textContent = `${rangeMin.value}°F`;

                // Update the min draw range in degrees Celsius (since the data is in Celsius)
                tempsLayer.setPaintProperty('sample.drawRange.min', aerisweather.mapsgl.units.FtoC(parseInt(rangeMin.value)));
            });
            rangeMax.addEventListener('input', () => {
                const valueEl = rangeMax.nextElementSibling;
                valueEl.textContent = `${rangeMax.value}°F`;

                // Update the max draw range in degrees Celsius (since the data is in Celsius)
                tempsLayer.setPaintProperty('sample.drawRange.max', aerisweather.mapsgl.units.FtoC(parseInt(rangeMax.value)));
            });
        });
```

--------------------------------

### setStartDateUsingOffset

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Updates the timeline start date by applying a time offset to a relative date.

```APIDOC
## setStartDateUsingOffset

### Description
Updates the timeline start date by applying the specified time offset to the relative date. If no relative date is provided, then the current time and date will be used.

### Parameters
#### Path Parameters
- `offset` (number) - Required - Time offset, in seconds, from the `relativeTo`.
- `relativeTo` (Date) - Optional - Date from which to apply the `offset` to. Default value is `new Date()`.
```

--------------------------------

### Initialize Mapbox GL JS and MapsGL

Source: https://www.xweather.com/docs/mapsgl/getting-started

Set up an interactive map instance with Mapbox GL JS and initialize the MapsGL SDK with your access keys and a map controller.

```javascript
import mapboxgl from 'mapbox-gl';
import * as mapsgl from '@xweather/mapsgl';

import 'mapbox-gl/dist/mapbox-gl.css';

/**
 * Load the MapsGL styles.
 */
import '@xweather/mapsgl/dist/mapsgl.css';

// set access token for mapping library as needed
mapboxgl.accessToken = 'MAPBOX_TOKEN';

/**
 * Create your map instance.
 */
const map = new mapboxgl.Map({
    projection: 'mercator' as any,
    container: document.getElementById('map'),
    style: 'mapbox://styles/mapbox/light-v11',
    center: [-74.5, 40],
    zoom: 3,
    projection: 'mercator'
});

/**
 * Set up your AerisWeather account and access keys for the SDK.
 */
const account = new mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');

/**
 * Create a map controller that corresponds to the selected mapping library, passing in
 * your `map` and `account` instances.
 */
const controller = new mapsgl.MapboxMapController(map, { account });

/**
 * Add functionality and data to your map once the controller's `load` event has been triggered.
 */
controller.on('load', () => {
    // do stuff, like add weather layers
    controller.addWeatherLayer('temperatures');
});
```

--------------------------------

### Timeline Range Change Event

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Triggered when the start or end date of the timeline changes.

```typescript
range:change
```

--------------------------------

### Initialize InteractiveMapApp with MapsGL Weather Layers

Source: https://www.xweather.com/docs/mapsgl/getting-started/using-js-sdk

Use this snippet to set up an InteractiveMapApp, load the MapsGL SDK, and configure weather layers including radar, satellite, and various conditions. Ensure you replace 'CLIENT_ID', 'CLIENT_SECRET', and 'MAPBOX_TOKEN' with your actual credentials.

```javascript
window.addEventListener('load', () => {
    const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
 
    aeris.apps().then((apps) => {
        const app = new apps.InteractiveMapApp('#map', {
            map: {
                strategy: 'mapbox',
                center: { lat: 40, lon: -90 },
                zoom: 4,
                map: {
                    accessToken: 'MAPBOX_TOKEN'
                }
            },
            panels: {
                layers: {
                    buttons: [{
                        id: 'satellite',
                        value: 'satellite:75',
                        title: 'Satellite'
                    }]
                }
            }
        });
 
        app.on('ready', () => {
 
            // load in MapsGL sdk and set up relevant layer controls
            aeris.mapsgl(app, {
                layers: [{
                    title: 'Radar', value: 'radar', options: {
                        animation: {
                            interval: 12
                        }
                    }
                }, { 
                    title: 'Conditions',
                    buttons: [
                        { title: 'Temperatures', value: 'temperatures' },
                        { title: 'Temp Change', value: 'temp-change', segments: [
                            { title: 'Past 24 hours', value: 'temperatures-24hr-change' },
                            { title: 'Past 1 hour', value: 'temperatures-1hr-change' },
                        ] },
                        { title: 'Winds', value: 'winds', segments: [
                            { title: 'Particles', value: 'wind-particles' },
                            { title: 'Fill', value: 'wind-speeds' },
                            { title: 'Arrows', value: 'wind-dir' },
                            { title: 'Barbs', value: 'wind-barbs' }
                        ] },
                        { title: 'Dew Point', value: 'dew-points' },
                        { title: 'Humidity', value: 'humidity' },
                        { title: 'Feels Like', value: 'feels-like' },
                        { title: 'Heat Index', value: 'heat-index' },
                        { title: 'Wind Chill', value: 'wind-chill' },
                        { title: 'Surface Pressure', value: 'pressure', segments: [
                            { title: 'Fill', value: 'pressure-msl' },
                            { title: 'Contours', value: 'pressure-msl-contour' },
                        ] },
                        { title: 'Visibility', value: 'visibility' },
                    ]
                }]
            }).then(({ controller, mapsgl }) => {
 
                // add the MapsGL legend control
                controller.addLegendControl(app.$el, { width: 300 });
 
                // add the MapsGL data inspector control
                controller.addDataInspectorControl();
 
                // add Tropical module from the Javascript SDK
                aeris.modules().then((modules) => {
                    app.modules.add(modules.groups.Tropical);
                });
 
            });
        });
    });
});
```

--------------------------------

### Initialize MapsGL with Custom Earthquake Shader

Source: https://www.xweather.com/docs/mapsgl/examples/custom-earthquake-shader

Sets up a MapsGL map and adds an earthquake layer with a custom fragment shader for unique symbol styling. Ensure MAPBOX_TOKEN, CLIENT_ID, and CLIENT_SECRET are replaced with valid credentials.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Custom earthquake symbols using a shader</title>
    <meta name="description" content="Use a custom WebGL fragment shader to apply unique and animated visual effects to earthquake data." />
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.js"></script>
 
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
 
    <script>
    window.addEventListener('load', () => {
 
        mapboxgl.accessToken = 'MAPBOX_TOKEN';
        const map = new mapboxgl.Map({
            container: document.getElementById('map'),
            style: 'mapbox://styles/mapbox/light-v9',
            center: [124.091, 26.232],
            zoom: 2
        });
 
        const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
        const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
        controller.on('load', () => {
            controller.addWeatherLayer('earthquakes', {
                type: 'symbol',
                source: 'earthquakes',
                paint: {
                    symbol: {
                        shader: "
            // https://www.shadertoy.com/view/ldycR3
            #extension GL_OES_standard_derivatives : enable
 
            precision mediump float;
 
            uniform vec2 resolution;
            uniform float dpr;
            uniform float time;
 
            varying vec2 vUv;
            varying vec2 vPosition;
            varying float vFactor;
            varying float vRandom;
 
            float saturate(float x) {
            return clamp(x, 0.0, 1.0);
            }
 
            vec3 hsb2rgb(in vec3 c) {
            vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0,
                        0.0,
                        1.0);
            rgb = rgb*rgb*(3.0-2.0*rgb);
            return c.z * mix( vec3(1.0), rgb, c.y);
            }
 
            void main() {
            vec2 pos = vUv;
            float t = time;
 
            float dist = length(2.0 * pos - 1.0) * 2.0;
            vec2 p = vec2(dist);
 
            float r = length(p) * 0.9;
            vec3 color = hsb2rgb(vec3(0.03, 0.7, 0.6));
 
            float a = pow(r, 3.0);
            float b = sin(r * 1.8 - 1.6);
            float c = sin(r - 0.010);
            float s = sin(a - t * 2.0 + b) * c;
 
            color *= abs(1.0 / (s * 1.8)) - 0.01;
 
            float d = length(2.0 * pos - 1.0);
            // float delta = fwidth(d);
            float alpha = 1.0 - d;
            // alpha *= min(1.0, 0.2 + vFactor);
 
            gl_FragColor = vec4(color, alpha);
            gl_FragColor.rgb *= gl_FragColor.a;
            }
                        ",
                        animated: true,
                        pitchWithMap: true,
                        // blending: 2,
                        size: (data) => {
                            const mag = Math.max(data.report?.mag || 1);
                            const size = 20 + 100 * (mag / 10);
                            return { width: size, height: size };
                        }
                    }
                }
            });
        });
 
    });
    </script>
 
</body>
</html>
```

--------------------------------

### Reset Animation

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Stops the animation if playing and resets the playhead to its original starting position.

```typescript
reset()
```

--------------------------------

### Go To Position

Source: https://www.xweather.com/docs/mapsgl/reference/timeline

Advances the playhead to a specified position between 0 (start) and 1 (end) of the timeline.

```typescript
goTo(position: number)
```

--------------------------------

### Initialize MapsGL with Mapbox GL

Source: https://www.xweather.com/docs/mapsgl/examples/mapbox

Set up a Mapbox GL map and initialize MapsGL with your account credentials. The MapsGL controller listens for the map's 'load' event to add weather layers.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Using MapsGL with Mapbox GL</title>
    <meta name="description" content="Use MapsGL with a Mapbox GL map." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
 
    <link href="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/1.9.0/aerisweather.mapsgl.js"></script>
 
 
    <style>
    body, html {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
        width: 100%;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
 
    <script>
        window.addEventListener('load', () => {
 
            // Create the Mapbox map instance
            mapboxgl.accessToken = 'MAPBOX_TOKEN';
            const map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/light-v11',
                center: [-85.5, 40],
                zoom: 3,
                projection: 'mercator'
            });
 
            // Set up the MapsGL account
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
 
            // Create the Mapbox map Controller
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
 
            controller.on('load', () => {
                // Do stuff, like add weather layers
                controller.addWeatherLayer('radar');
                controller.addWeatherLayer('alerts-outline', {
                    paint: {
                        opacity: 0.5
                    }
                });
            });
        });
    </script>
 
</body>
</html>
```

--------------------------------

### Get a map layer

Source: https://www.xweather.com/docs/mapsgl/reference/map-controller

Retrieves a map layer by its identifier. Returns undefined if the layer does not exist.

```typescript
getLayer(id: string): WebGLLayer
```
Tokens:
Raw