### Install Example Project Dependencies

Source: https://www.xweather.com/docs/maps-ui-sdk/getting-started

Installs all the necessary dependencies for the example project using Yarn. This command should be run after navigating to the 'example' directory.

```bash
> yarn install
```

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

### Run Example Project in Development Mode

Source: https://www.xweather.com/docs/maps-ui-sdk/getting-started

Starts the example project in development mode using the 'yarn dev' command. This allows you to see the SDK in action and make changes locally.

```bash
> yarn dev
```

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

### Navigate to Example Directory

Source: https://www.xweather.com/docs/maps-ui-sdk/getting-started

Changes the current directory to the 'example' folder within the downloaded or cloned maps-ui-sdk repository. This is necessary to set up and run the example project.

```bash
> cd ./example
```

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

### Configure Environment Variables for Example Project

Source: https://www.xweather.com/docs/maps-ui-sdk/getting-started

Sets up the environment variables required for the example project by renaming '.env.template' to '.env' and filling in the Xweather MapsGL ID, Secret, and Mapbox public access token.

```bash
VITE_MAPBOX_KEY=''
VITE_MAPSGL_ID=''
VITE_MAPSGL_SECRET=''
```

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

### Complete WeatherBlox Integration Example (HTML/JavaScript)

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

This comprehensive example demonstrates the entire process of integrating WeatherBlox into an HTML page. It includes including assets, setting up the DOM target, configuring the client, initializing the library, setting up a forecast component, adding event handlers, and rendering the view.

```html
<!-- Step 1: Include the WeatherBlox stylesheet and script assets -->
<link href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css" rel="stylesheet"/>
<script src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.js"></script>
 
<!-- Step 2: Create a DOM target where the WeatherBlox view will be rendered -->
<div id="wxblox"></div>

<script>
 
// Step 3: Within a <script> tag block, configure the AerisWeather client with your Weather API access keys and custom options
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

// Step 4: Set up an event handler to be notified when the WeatherBlox library has fully loaded and initialized:
aeris.on('ready', () => {

    // Step 5: Within your "ready" event handler, setup your desired components:
    const widget = new aeris.wxblox.views.Forecast('#widget');

    // Step 6: Add any desired event listeners/handlers for your view instance:
    widget.on('load:start', function(e) {
        console.log('load started');
    });
    widget.on('load:done', function(e) {
        console.log('load done');
    });
    widget.on('render:before', function(e) {
        console.log('before render');
    });
    widget.on('render:after', function(e) {
        console.log('after render');
    });

    // Step 7: Render the view by calling `load()` on your widget, passing any additional API request parameters:
    widget.load({
        p: '98109'
    });

});
 
</script>
```

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

### Setup Xweather SDK in Swift Application Delegate

Source: https://www.xweather.com/docs/ios-sdk/getting-started/setup

This code snippet demonstrates how to import the AerisWeatherKit and initialize the Xweather SDK with your API keys within the `application:didFinishLaunchingWithOptions:` method of your application delegate. Ensure you replace '__CLIENT_ID__' and '__CLIENT_SECRET__' with your actual credentials.

```swift
import AerisWeatherKit

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
 
 AerisWeather.start(withApiKey: "__CLIENT_ID__", secret: "__CLIENT_SECRET__")
 
 window = UIWindow(frame: UIScreen.mainScreen().bounds)
 window?.backgroundColor = UIColor.whiteColor()
 window?.makeKeyAndVisible()
 
 return true
}
```

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

### Import Xweather SDK Stylesheets

Source: https://www.xweather.com/docs/javascript-sdk/getting-started/module-usage

Provides examples for importing the SDK's CSS or SASS files into your project. This is necessary if you are using the SDK's built-in views and require styling.

```javascript
// import the pre-compiled CSS
import '@aerisweather/javascript-sdk/dist/styles/styles.css';
```

```javascript
// or, import the raw SASS, which requires a CSS compiler in your build process
import '@aerisweather/javascript-sdk/dist/styles/sass/styles.scss';
```

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

### Context Providers Setup Example (React)

Source: https://www.xweather.com/docs/maps-ui-sdk

Illustrates the setup of context providers within the SDK for managing and sharing state between components without prop drilling. This pattern facilitates component communication and state access via hooks.

```jsx
<SettingsProvider>
  <MapsGLMapControllerProvider>
    <MapsGLLayersProvider>
      <MapsGLLayersControl />
      <MapsGLTimelineControl />
    </MapsGLLayersProvider>
  </MapsGLMapControllerProvider>
</SettingsProvider>
```

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

### Basic Timeline Setup (React)

Source: https://www.xweather.com/docs/maps-ui-sdk/components/timeline

Demonstrates a simple Timeline component setup with essential playback controls and a track with a scrubber and time progress indicator. This serves as a foundational example for integrating the Timeline component.

```jsx
<Timeline
  startDate={new Date('2023-7-09')}
  endDate={new Date('2024-7-11')}
  currentDate={new Date()}
  onPlay={handlePlay}
  onPause={handlePause}
  onPositionChange={handlePositionChange}
>
  <Timeline.Container>
    <Timeline.AnimationControl />
    <Timeline.Track>
      <Timeline.Scrubber>
        <Timeline.TimeProgressIndicator />
      </Timeline.Scrubber>
    </Timeline.Track>
  </Timeline.Container>
</Timeline>
```

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

### Initialize Mapbox Map with MapsGL SDK (JavaScript)

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

This comprehensive example demonstrates setting up a Mapbox map and integrating the Xweather MapsGL SDK. It includes including necessary libraries, setting up the HTML structure, initializing Mapbox with access tokens, configuring the MapsGL account, and creating a MapboxMapController to add weather layers.

```javascript
<link href="https://api.mapbox.com/mapbox-gl-js/v3.5.0/mapbox-gl.css" rel="stylesheet" />
<script defer src="https://api.mapbox.com/mapbox-gl-js/v3.5.0/mapbox-gl.js"></script>

<link href="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.css" rel="stylesheet" />
<script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.js"></script>

<style>
    html, body {
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100vh;
    }
</style>

<div id="map"></div>

<script>

window.addEventListener('load', () => {

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

    /**
     * Create your map instance.
     */
    const map = new mapboxgl.Map({
        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 aerisweather.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 aerisweather.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');
    });

});

</script>
```

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

### Setup Xweather Module Project with Shell Script

Source: https://www.xweather.com/docs/javascript-sdk/map-modules/creating-map-modules

This command initiates the setup process for a new Xweather map module project. It navigates into the starter project directory and executes a shell script that prompts for project details, installs dependencies using yarn, and configures the project files.

```shell
cd aeris-js-module-starter; sh setup.sh
```

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

### Install Xweather Maps UI SDK using Yarn

Source: https://www.xweather.com/docs/maps-ui-sdk/getting-started

Installs the Xweather Maps UI SDK package using the Yarn package manager. This is the first step to integrate the SDK into your project.

```bash
yarn add @xweather/maps-ui-sdk
```

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

### Install Xweather JavaScript SDK using Yarn or NPM

Source: https://www.xweather.com/docs/javascript-sdk/getting-started/module-usage

Instructions for installing the AerisWeather JavaScript SDK using either Yarn or NPM package managers. This is the first step to integrating the SDK into your project.

```bash
yarn add @aerisweather/javascript-sdk
```

```bash
npm install @aerisweather/javascript-sdk
```

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

### Fetch Current Weather Data using AerisWeather SDK

Source: https://www.xweather.com/docs/javascript-sdk/getting-started/module-usage

An example of how to use the initialized AerisWeather instance to fetch current weather observations for a specific place. It demonstrates making an API request and processing the response.

```javascript
aeris.api().endpoint('observations').place('seattle,wa').get().then((result) => {
     var data = result.data.ob;
     console.log(`The current weather is ${data.weatherPrimary.toLowerCase()} and ${data.tempF} degrees.`);
});
```

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

### Set Up WeatherBlox Component (JavaScript)

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

Instantiate a WeatherBlox component, such as `Forecast`, and specify the DOM element where it should be rendered using a CSS selector. This example shows how to set up a forecast widget.

```javascript
const widget = new aeris.wxblox.views.Forecast('#widget');
```

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

### Include Xweather SDK and Initialize in JavaScript

Source: https://www.xweather.com/docs/javascript-sdk/getting-started/script-usage

This snippet demonstrates how to include the Xweather JavaScript SDK and its stylesheet from a CDN. It then shows how to initialize the SDK with your client ID and secret, and fetch current weather observations for a specified location.

```html
<script src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">

<div id="obs"></div>

<script>

    window.onload = function() {

        /**
         * STEP 2
         * Set your account access keys when the page and scripts have loaded.
         */
        const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

        /**
         * STEP 3
         * Start using the library by accessing the available convenience methods on your `AerisWeather` instance.
         */
        aeris.api().endpoint('observations').place('seattle,wa').get().then((result) => {
             const data = result.data.ob;
             document.getElementById('obs').innerHTML = `The current weather is ${data.weatherPrimary.toLowerCase()} and ${data.tempF} degrees.`;
        });

    };
</script>
```

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

### Basic API Request with Credentials

Source: https://www.xweather.com/docs/weather-api/getting-started/authentication

This example demonstrates a basic request to the Xweather API for place data, including the required client ID and client secret for authentication. It shows how to append these credentials as query parameters.

```http
https://data.api.xweather.com/places/98109?client_id={client_id}&client_secret={client_secret}
```

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

### Timeline Component Example (React)

Source: https://www.xweather.com/docs/maps-ui-sdk/components/timeline

Demonstrates the integration and usage of the Timeline component and its sub-components within a React application. It shows how to set up the timeline with start and end dates, current date, position, and event handlers.

```jsx
import { Timeline } from '@xweather/maps-ui-sdk';

const TimelineExample = () => (
  <Timeline
    startDate={new Date('2024-01-01')}
    endDate={new Date('2024-12-31')}
    currentDate={new Date()}
    position={0.5}
    onPlay={handlePlay}
    onPause={handlePause}
    onPositionChange={handlePositionChange}
  >
    <Timeline.Container>
      <Timeline.AnimationControl />
      <Timeline.Track>
        <Timeline.Scrubber>
          <Timeline.TimeProgressIndicator />
        </Timeline.Scrubber>
        <Timeline.Ticks>
          {(tick) => (
            <Timeline.Tick tick={tick} />
          )}
        </Timeline.Ticks>
      </Timeline.Track>
    </Timeline.Container>
  </Timeline>
);

```

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

### Integrate MapsGL SDK and Weather Layers with InteractiveMapApp (JavaScript)

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

This example demonstrates how to initialize an InteractiveMapApp using the MapsGL SDK. It includes setting up the map, adding satellite and radar layers, and configuring various weather condition layers such as temperatures, winds, and pressure. It also shows how to add a legend and data inspector control, and integrate the Tropical module.

```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 AerisWeather SDK with API Keys

Source: https://www.xweather.com/docs/javascript-sdk/getting-started/module-usage

Shows how to initialize the AerisWeather SDK by providing your application's client ID and client secret. This step is crucial for authenticating your requests to the Aeris API.

```javascript
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
```

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

### Leaflet Integration Example

Source: https://www.xweather.com/docs/maps/getting-started/map-tiles

Example usage of the Xweather Raster Maps API with the Leaflet mapping library to display map tiles.

```APIDOC
## Leaflet Integration

### Description
Demonstrates how to integrate Xweather Raster Maps with Leaflet to display base maps and overlays.

### Code Example 1: OSM Base Map with Xweather Radar Overlay
```javascript
var map = L.map('aerismap').setView([44.96, -93.27], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
L.tileLayer('https://maps.api.xweather.com/[client_id]_[client_key]/radar/{z}/{x}/{y}/current.png', {
    subdomains: '1234',
    attribution: '&copy;Xweather',
}).addTo(map);
```

### Code Example 2: Xweather Maps Layers as Base and Overlays
```javascript
var map = L.map('aerismap').setView([44.96, -93.27], 5);
L.tileLayer('https://maps.api.xweather.com/[client_id]_[client_key]/flat,radar,admin/{z}/{x}/{y}/current.png', {
    subdomains: '1234',
    attribution: '&copy;Xweather',
}).addTo(map);
```
```

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

### Google Maps Integration Example

Source: https://www.xweather.com/docs/maps/getting-started/map-tiles

Example usage of the Xweather Raster Maps API with the Google Maps JavaScript API to display map tiles.

```APIDOC
## Google Maps Integration

### Description
Demonstrates how to integrate Xweather Raster Maps with Google Maps to display map tiles as an overlay.

### Code Example
```javascript
<script>
var gmap;

function initMap() {
    gmap = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 44.96, lng: -93.27},
        zoom: 5
    });
    var radar = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            return ['https://maps.api.xweather.com/[client_id]_[client_key]/radar/',
                zoom, '/', coord.x, '/', coord.y, '/current.png'].join('');
        },
        tileSize: new google.maps.Size(256, 256)
    });
    gmap.overlayMapTypes.push(radar);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap" async defer></script>
```
```

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

### Add AerisWeather Pod using CocoaPods

Source: https://www.xweather.com/docs/ios-sdk/getting-started/installation

This snippet shows how to add the base AerisWeatherKit.framework and its core dependencies to your project's Podfile. Ensure CocoaPods is installed and configured correctly before running 'pod install'.

```ruby
pod 'AerisWeather'
```

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

### AerisMapView Initialization and Setup (Android)

Source: https://www.xweather.com/docs/android-sdk/api/AerisMap/com/aerisweather/aeris/maps/AerisMapView

Essential methods for initializing and setting up the AerisMapView. The `init` method must be called to properly configure the map, and the constructor allows for initial setup with context, attributes, saved state, and map type.

```java
AerisMapView(android.content.Context context, android.util.AttributeSet attrs, android.os.Bundle savedInstanceState, AerisMapView.AerisMapType type)
void init(com.google.android.gms.maps.GoogleMap googleMap)
```

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

### Example Xweather Radar Tile Request

Source: https://www.xweather.com/docs/maps/getting-started/map-tiles

This example demonstrates a specific tile request for the latest radar image. It specifies the zoom level, tile coordinates (x and y), and the 'current' time offset for the PNG format.

```URL
https://maps.api.xweather.com/[client_id]_[client_secret]/radar/8/41/23/current.png
```

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

### Initialize BatchBuilder and Set Place - Android

Source: https://www.xweather.com/docs/android-sdk/getting-started/batch-requests

Demonstrates the initial setup for a batch request using the Xweather Android SDK. It involves creating a BatchBuilder instance and setting the global place parameter for the requests. This is a prerequisite for adding individual endpoints.

```java
//create the batch builder object
BatchBuilder builder = new BatchBuilder();

//set the place
builder.addGlobalParameter(place);
```

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

### Initialize Maplibre Map and Add MapsGL Weather Layers (HTML/JavaScript)

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

This example shows how to set up a MapLibre map and then use the MapsGL SDK to add weather layers like radar and alerts. It requires the MapLibre GL JS library and the MapsGL SDK. The output is a web page displaying a map with weather overlays.

```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</title>
    <meta name="description" content="Use MapsGL with a Maplibre map." />
    <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/latest/aerisweather.mapsgl.css" rel="stylesheet" />
    <script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/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 Maplibre map instance
            const map = new maplibregl.Map({
                container: 'map',
                style: 'https://api.maptiler.com/maps/streets-v2/style.json?key=xPFh2vaprBPmtXaXWp9y',
                center: [-85.5, 40],
                zoom: 3
            });
 
            // Set up the MapsGL account
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
 
            // Create the Maplibre map Controller
            const controller = new aerisweather.mapsgl.MaplibreMapController(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>
```

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

### AerisMapsEngine Initialization and Configuration

Source: https://www.xweather.com/docs/android-sdk/api/AerisMap/com/aerisweather/aeris/maps/AerisMapsEngine

Provides methods for initializing and configuring the AerisMapsEngine.

```APIDOC
## AerisMapsEngine Initialization and Configuration

### Description
Methods for initializing and configuring the AerisMapsEngine.

### Method
- `getInstance(android.content.Context context)`
- `initConfig(android.content.Context context)`
- `initMarkerDrawable(AerisMarkerType type, int resDrawable)`

### Parameters
#### getInstance
- **context** (android.content.Context) - Required - Context to use fetching initialize variables.

#### initConfig
- **context** (android.content.Context) - Required - Context to use.

#### initMarkerDrawable
- **type** (AerisMarkerType) - Required - The marker type.
- **resDrawable** (int) - Required - ID of the drawable.

### Response
#### Success Response (200)
- `getInstance`: Returns an instance of the AerisMapsEngine singleton.
- `initConfig`: void (no return value).
- `initMarkerDrawable`: void (no return value).

#### Response Example
```json
{
  "getInstance": "AerisMapsEngine instance"
}
```
```

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

### Update SDK Version using CocoaPods

Source: https://www.xweather.com/docs/ios-sdk/getting-started/installation

This command updates the Xweather iOS SDK to the latest version available through CocoaPods. Run this command in the root directory of your project where the Podfile is located.

```shell
pod update
```

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

### Example of Inflating a TextView

Source: https://www.xweather.com/docs/android-sdk/api/AerisMap/com/aerisweather/aeris/maps/AerisMarkerWindow

Demonstrates how to inflate a TextView from an XML layout file, typically used within the getView() method of AerisMarkerWindow.

```java
TextView view = (TextView) inflater.inflate(
 		R.layout.some_layout,
 		null);

```

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

### Initialize AerisMapView and AerisAmp in Java

Source: https://www.xweather.com/docs/android-sdk/getting-started/weather-maps

This Java code initializes the AerisMapView and AerisAmp components within an Android Fragment. It handles map view creation, API key setup, and fetching available map layers.

```java
package com.example.fragment

public class MyMapFragment extends Fragment implements
        OnAerisMapLongClickListener, AerisCallback, ObservationsTaskCallback,
        OnAerisMarkerInfoWindowClickListener, RefreshInterface, OnMapReadyCallback

{
    private LocationHelper m_locHelper;
    private Marker m_marker;
    private TemperatureWindowAdapter m_infoAdapter;
    private static final int REQUEST_PERMISSIONS = 0;
    LayoutInflater m_inflater;
    ViewGroup m_container;
    Bundle m_savedInstanceState;
    GoogleMap m_googleMap;
    protected AerisMapView m_aerisMapView;
    private AerisMapOptions m_mapOptions = null;
    private AerisAmp m_aerisAmp;
    private boolean m_isMapReady = false;
    private boolean m_isAmpReady = false;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        m_inflater = inflater;
        m_container = container;
        m_savedInstanceState = savedInstanceState;

        View view = inflater.inflate(R.layout.fragment_interactive_maps, container, false);
        AerisMapContainerView mapContainer = (AerisMapContainerView) view.findViewById(R.id.mapView);
        m_aerisMapView = mapContainer.getAerisMapView();
        m_aerisMapView.onCreate(savedInstanceState);

        //create an instance of the AerisAmp class
        m_aerisAmp = new AerisAmp(getString(R.string.aerisapi_client_id), getString(R.string.aerisapi_client_secret));

        //start the task to get the Raster Maps layers
        try
        {
            //get all the possible layers, then get permissions from the API and generate a list of permissible layers

            new AerisAmpGetLayersTask(new GetLayersTaskCallback(), m_aerisAmp).execute().get();
        }
        catch (Exception ex)
        {
            String s = ex.getMessage();

            //if the task fails, keep going without Raster Maps layers
        }
        return view;
    }

```

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

### AerisGoogleInfoAdapter Constructor and Methods (Java)

Source: https://www.xweather.com/docs/android-sdk/api/AerisMap/com/aerisweather/aeris/maps/AerisGoogleInfoAdapter

This snippet shows the constructor and key methods of the AerisGoogleInfoAdapter class. It includes methods for adding/removing adapters, and retrieving/handling info window content for map markers.

```Java
public class AerisGoogleInfoAdapter
extends Object
implements com.google.android.gms.maps.GoogleMap.InfoWindowAdapter
{
    public AerisGoogleInfoAdapter()
    // Adapter for grabbing the necessary tiles for up to date casts on the Map.

    public void addAdapter​(AerisMarkerWindow adapter)

    public void removeAdapter​(AerisMarkerWindow adapter)

    public android.view.View getInfoContents​(com.google.android.gms.maps.model.Marker marker)
    // Specified by: getInfoContents in interface com.google.android.gms.maps.GoogleMap.InfoWindowAdapter

    public void infoAdapterClicked​(com.google.android.gms.maps.model.Marker marker)

    public android.view.View getInfoWindow​(com.google.android.gms.maps.model.Marker marker)
    // Specified by: getInfoWindow in interface com.google.android.gms.maps.GoogleMap.InfoWindowAdapter
}
```

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

### Timeline Initializers

Source: https://www.xweather.com/docs/mapsgl-apple-sdk/api/latest/documentation/mapsglmaps/timeline

Details on how to initialize a new Timeline instance.

```APIDOC
## Initializers

### `init(id: String, startDate: Date, endDate: Date)`

Initializes a new timeline with the specified ID, start date, and end date.
```

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

### Integrate Timeline Components with Provider (React)

Source: https://www.xweather.com/docs/maps-ui-sdk/examples/custom-timeline-control

Combines the previously created TimelineContainer, TimelineControls, and TimelineTrack components within the Timeline.Provider. This setup initializes the timeline with start and end dates, current date, and defines handlers for playback and position changes.

```javascript
const CustomTimeline = () => {
    const [currentDate, setCurrentDate] = useState(new Date());
    const startDate = subHours(new Date(), 2);
    const endDate = addHours(new Date(), 2);
 
    const handlePlay = () => {
        // Start your animation
    };
 
    const handlePause = () => {
        // Pause your animation
    };
 
    const handlePositionChange = (position) => {
        // Update animation position
    };
 
    return (
        <Timeline.Provider
            startDate={startDate}
            endDate={endDate}
            currentDate={currentDate}
            onPlay={handlePlay}
            onPause={handlePause}
            onPositionChange={handlePositionChange}
        >
            <TimelineContainer>
                <TimelineControls />
                <TimelineTrack />
            </TimelineContainer>
        </Timeline.Provider>
    );
};

```

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

### Display MapViewer with Navigation Controls (JavaScript)

Source: https://www.xweather.com/docs/weatherblox/views/map-viewer

This example demonstrates how to initialize and display a MapViewer component. It configures the initial map location and data layers, and sets up navigation controls for changing layers and zoom regions. The `load()` method is called to render the map.

```javascript
const view = new aeris.wxblox.views.MapViewer('#wxblox', {
    map: {
    loc: 'austin,tx',
        data: ['radar']
    },
    controls: {
        layers: [{
            value: 'radar',
            title: 'Radar'
        },{
            value: 'satellite',
            title: 'Satellite'
        },{
            value: 'alerts',
            title: 'Advisories'
        },{
            value: 'temperatures,clip-us-flat',
            title: 'Temps'
        }],
        regions: [{
            zoom: 7,
            title: 'Local'
        },{
            zoom: 5,
            title: 'Regional'
        },{
            region: 'us',
            title: 'National'
        }]
    }
});
view.load();
```

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

### Get Animation Start Offset

Source: https://www.xweather.com/docs/javascript-sdk/api/classes/timeline

Retrieves the current start offset of the animation in milliseconds relative to now.

```typescript
startOffset(): number
```

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

### Get Animation Start Date

Source: https://www.xweather.com/docs/javascript-sdk/api/classes/timeline

Retrieves the current start date of the animation as a Date object.

```typescript
startDate(): Date
```

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

### General Methods

Source: https://www.xweather.com/docs/javascript-sdk/api/classes/searchfield

Documentation for general methods like setIndex and setSize that might apply to various components.

```APIDOC
## setIndex

### Description
Sets the index for a component.

### Method
N/A (Method call)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
* **index** (number) - Required - The index value to set.

### Request Example
```javascript
// Example usage:
// component.setIndex(5);
```

### Response
#### Success Response (200)
Void (no return value).

#### Response Example
```json
// No return value
```

## setSize

### Description
Sets the size (width and height) for a component.

### Method
N/A (Method call)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
* **width** (number) - Required - The desired width.
* **height** (number) - Required - The desired height.

### Request Example
```javascript
// Example usage:
// component.setSize(200, 100);
```

### Response
#### Success Response (200)
Void (no return value).

#### Response Example
```json
// No return value
```
```

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

### Basic Xweather API Request - Javascript

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

Fetches weather observations for Seattle, WA using the Xweather API. It decodes the JSON response and displays current weather conditions or an error message. Requires a valid client ID and secret. This example assumes a browser environment.

```javascript
fetch('https://data.api.xweather.com/observations/seattle,wa?client_id=CLIENT_ID&client_secret=CLIENT_SECRET')
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      const ob = data.response.ob;
      console.log(`The current weather in Seattle is ${ob.weather.toLowerCase()} with a temperature of ${ob.tempF}.`);
    } else {
      console.error(`An error occurred: ${data.error.description}`);
    }
  })
  .catch(error => console.error('Fetch error:', error));
```

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

### ChatGPT MCP Connector Setup

Source: https://www.xweather.com/docs/mcp-server/agents/chatgpt

Steps to configure the Xweather MCP connector within ChatGPT's Developer Mode.

```APIDOC
## ChatGPT MCP Connector Setup

### Description
This section outlines the process for setting up the Xweather MCP connector within ChatGPT. It requires a ChatGPT Plus or Pro subscription and enabling Developer Mode.

### Method
N/A (Configuration Steps)

### Endpoint
N/A (Configuration Steps)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

## MCP Server URL Configuration

### Description
Details on configuring the MCP Server URL, including options for No Authentication and OAuth.

### Method
N/A (Configuration Step)

### Endpoint
N/A (Configuration Step)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```
https://mcp.api.xweather.com/mcp?api_key=XWEATHER_API_KEY
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

## Troubleshooting

### Description
Common issues and their resolutions when using the Xweather MCP connector with ChatGPT.

### Method
N/A (Troubleshooting)

### Endpoint
N/A (Troubleshooting)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Initialize MapboxMapController and Add Weather Layers in Kotlin

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

This snippet demonstrates how to initialize the MapboxMapController with Xweather account credentials and add weather layers (Temperatures and WindParticles) to the map once it's loaded. It requires Mapbox SDK setup and Xweather account access keys.

```kotlin
package com.example.basicmapsglproject

import android.os.Bundle
import android.view.ViewTreeObserver
import androidx.appcompat.app.AppCompatActivity
import com.example.basicmapsglproject.databinding.ActivityMainBinding
import com.mapbox.maps.MapLoadedCallback
import com.mapbox.maps.Style
import com.mapbox.maps.extension.style.layers.properties.generated.ProjectionName
import com.mapbox.maps.extension.style.projection.generated.projection
import com.mapbox.maps.extension.style.projection.generated.setProjection
import com.xweather.mapsgl.config.weather.account.XweatherAccount
import com.xweather.mapsgl.map.mapbox.MapboxMapController
import com.xweather.mapsgl.style.ParticleDensity
import com.xweather.mapsgl.style.ParticleTrailLength
import com.xweather.mapsgl.config.weather.WeatherService

class MainActivity : AppCompatActivity() {

    private lateinit var mapController: MapboxMapController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        // Set up your Xweather account and access keys for the SDK
        var xweatherAccount = XweatherAccount(
            getString(R.string.xweather_client_id),
            getString(R.string.xweather_client_secret)
        )

        var binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        var mapView = binding.mapView

        // Add functionality and data to your map once the controller's `load` event has been triggered:
        val mapLoadedCallback = MapLoadedCallback { 
            // Add a Raster Layer:
            mapController.addWeatherLayer(WeatherService.Temperatures(mapController.service))
         
            // Add a Particle Layer:
            mapController.addWeatherLayer(WeatherService.WindParticles(mapController.service))

            //If you do not need to add any customizations, you can simply add a layer using the LayerCode:
             mapController.addWeatherLayer(LayerCode.TEMPERATURES)
        }

        binding.mapView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                binding.mapView.viewTreeObserver.removeOnGlobalLayoutListener(this)

                // Create a map controller that corresponds to the selected mapping library, passing in your `mapView` and `xweatherAccount` instances.
                mapController = MapboxMapController(mapView, xweatherAccount)

                with(mapController) {
                    mapboxMap.loadStyle(Style.LIGHT)
                    mapboxMap.setProjection(projection(ProjectionName.MERCATOR))
                    mapboxMap.subscribeMapLoaded(mapLoadedCallback)
                }
            }
        })
    }
}
```

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

### Get Animation Start Offset (TypeScript)

Source: https://www.xweather.com/docs/javascript-sdk/api/classes/textanimation

Retrieves the current start offset of the animation relative to the current time, in milliseconds. Returns a number.

```typescript
startOffset(): number;
```

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

### Initialize Routing Module with Interactive Map App (JavaScript)

Source: https://www.xweather.com/docs/javascript-sdk/map-modules/routing-module

Demonstrates the initial setup for an Interactive Map App instance and how to add the built-in Routing module. This involves fetching app modules and then adding the Routing module with potential configuration options.

```javascript
aeris.apps().then((apps) => {
 
    const app = new apps.InteractiveMapApp('#app', {
        // map app config
    });
 
    aeris.modules().then((modules) => {
        // Add the built-in Routing module
        app.modules.add(modules.Routing, null, {
            // configuration options...
        });
    });
 
});
```

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

### Get Animation Start Date (TypeScript)

Source: https://www.xweather.com/docs/javascript-sdk/api/classes/textanimation

Retrieves the start date of the animation. Returns a Date object representing the animation's commencement.

```typescript
startDate(): Date;
```

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

### Create Interactive Map App with MapLibre

Source: https://www.xweather.com/docs/javascript-sdk/examples/interactive-map-app/create-an-interactive-map-app-using-maplibre

Demonstrates how to create an interactive map application using MapLibre by configuring the map strategy and adjusting panel positions. This example requires the AerisWeather JavaScript SDK.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Aeris JavaScript SDK - Create an Interactive Map App using MapLibre</title>
  <script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
  <link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
 
  <style>
  #map {
      height: 600px;
      margin: 30px auto;
      width: 1000px;
 
  }
  </style>
 
</head>
<body>
 
<div id="map"></div>
 
<script>
 
    window.onload = () => {
 
        const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
        const utils = aeris.utils;
 
        aeris.apps().then((apps) => {
            const map = new apps.InteractiveMapApp('#map', {
                map: {
                    strategy: 'maplibre',
                    style: 'https://demotiles.maplibre.org/style.json',
                    zoom    : 4,
                    layers  : 'radar'
                },
                panels: {
                    layers: {
                        buttons: [{
                            id   : 'radar',
                            value: 'radar:80',
                            title: 'Radar'
                        }, {
                            id   : 'satellite',
                            value: 'satellite:75',
                            title: 'Satellite'
                        }, {
                            id   : 'alerts',
                            value: 'alerts',
                            title: 'Alerts'
                        }]
                    }, 
                    legends: {
                        position: {
                            pin: 'bottomleft',
                            translate: { x: 10, y: -30 }
                        }
                    },
                     timeline: {
                        position: {
                            translate: {x: 0, y: -15}
                        }
                    }
                },
            });
        });
    };
 
</script>
</body>
</html>
```

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

### Configure Run Script Phase for AerisCore Framework

Source: https://www.xweather.com/docs/ios-sdk/getting-started/installation

This snippet outlines the configuration for a new Run Script Phase in Xcode to ensure proper framework stripping. This phase should be placed below the 'Embed Frameworks' phase in your Target's Build Phases and is crucial for avoiding linker errors.

```shell
Shell /bin/sh

bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/AerisCore.framework/strip-frameworks.sh"

Show environment variables in build log: Checked
Run script only when installing: Not checked

Input Files: Empty
Output Files: Empty
```

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

### AerisMarkerWindow Constructor

Source: https://www.xweather.com/docs/android-sdk/api/AerisMap/com/aerisweather/aeris/maps/AerisMarkerWindow

Initializes a new instance of the AerisMarkerWindow class.

```APIDOC
## AerisMarkerWindow Constructor

### Description
Initializes a new instance of the AerisMarkerWindow class.

### Method
`public AerisMarkerWindow()`

### Endpoint
N/A (Constructor)

### Parameters
None

### Request Example
```java
AerisMarkerWindow markerWindow = new AerisMarkerWindow();
```

### Response
N/A (Constructor)
```

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

### Aeris Demo App Custom Endpoint Example (Java)

Source: https://www.xweather.com/docs/android-sdk/changelog

Includes a demonstration of a custom endpoint within the `com.example.customendpoint` package. This example showcases how to integrate custom API calls or data sources with the Aeris framework, offering flexibility beyond standard endpoints.

```java
// package com.example.customendpoint;

// public class CustomEndpointActivity extends AppCompatActivity {
//     // ... implementation to call a custom endpoint ...
// }
```

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

### Include AerisWeather Maps Pods using CocoaPods

Source: https://www.xweather.com/docs/ios-sdk/getting-started/installation

This snippet demonstrates how to include additional AerisWeather mapping functionality pods. Choose the appropriate pod ('Maps', 'Mapbox', or 'GoogleMaps') based on your project's mapping requirements. This requires the base 'AerisWeather' pod to be included as well.

```ruby
pod 'AerisWeather/Maps'

# include this if using Mapbox for maps in your project
pod 'AerisWeather/Mapbox'

# or include this if using Google Maps for maps in your project
pod 'AerisWeather/GoogleMaps'
```

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

### Get Animation Start Date (startDate)

Source: https://www.xweather.com/docs/javascript-sdk/api/classes/dataanimation

Retrieves the start date of the animation. This method returns a Date object representing when the animation began. It is part of the Animation class.

```typescript
/**
 * Returns the start date of the animation.
 * @returns The start date of the animation.
 */
startDate(): Date;
```

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

### Start Animation

Source: https://www.xweather.com/docs/android-sdk/api/AerisMap/index-all

Starts or queues another image to be posted at the next rate milliseconds.

```APIDOC
## POST /websites/xweather/animation/start

### Description
Starts or queues another image to be posted at the next rate milliseconds.

### Method
POST

### Endpoint
/websites/xweather/animation/start

### Parameters
#### Request Body
- **rate** (int) - Required - The rate in milliseconds.
```

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

### Http Class Constructor

Source: https://www.xweather.com/docs/javascript-sdk/api/classes/http

Initializes an Http instance with a base URL and optional headers. The base URL is prepended to relative URLs.

```APIDOC
## Http Constructor

### Description
Initializes an instance with the baseUrl and header configuration. The `baseUrl` value will be prepended to all relative urls made with this instance, whereas absolute urls will be passed through without prefixing.

### Method
`constructor`

### Parameters
#### Path Parameters
- **baseUrl** (string) - Required - The base URL for HTTP requests.
- **headers** (any) - Optional - Additional headers to be included in requests.

### Returns
- **Http** - An instance of the Http class.
```

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

### Instantiate InteractiveMap with NPM Module (JavaScript)

Source: https://www.xweather.com/docs/javascript-sdk/getting-started/views-module

Illustrates how to use the Xweather SDK when installed via NPM. This example imports the core `AerisWeather` entry point and then loads the Views module. It's functionally similar to the script tag approach but uses ES module syntax.

```javascript
import aeris from '@aerisweather/javascript-sdk';

const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.views().then((views) => {
    const map = new views.InteractiveMap('#ia-map', {
        strategy: 'leaflet',
        zoom: 4,
        layers: 'satellite,radar'
    });
});
```

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

### Get Animation Start Offset - Java

Source: https://www.xweather.com/docs/android-sdk/api/AerisMap/com/aerisweather/aeris/maps/AerisMapOptions

Retrieves the configured start offset for animations in seconds. This indicates how many seconds prior to the current time the animation should begin.

```java
public int getAnimationStartOffset() {
    // Implementation details...
    return 0;
}
```

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

### AerisAmpLayerView Instance Methods

Source: https://www.xweather.com/docs/android-sdk/api/AerisMap/com/aerisweather/aeris/tiles/AerisAmpLayerView

Lists the concrete instance methods available for the AerisAmpLayerView.

```APIDOC
## AerisAmpLayerView Instance Methods

### Description
Provides details on the specific methods implemented within the AerisAmpLayerView class.

### Methods

#### `init()`
* **Description**: Initializes the view.
* **Return Type**: `void`

#### `onProgressChanged(android.widget.SeekBar seekBar, int i, boolean b)`
* **Description**: Callback method for when the progress of a SeekBar changes.
* **Parameters**:
    * `seekBar` (android.widget.SeekBar) - The SeekBar whose progress has changed.
    * `i` (int) - The current progress level.
    * `b` (boolean) - True if the user is currently touching the SeekBar, false otherwise.
* **Return Type**: `void`

#### `onStartTrackingTouch(android.widget.SeekBar seekBar)`
* **Description**: Callback method called when the user starts a touch gesture on a SeekBar.
* **Parameters**:
    * `seekBar` (android.widget.SeekBar) - The SeekBar that was touched.
* **Return Type**: `void`

#### `onStopTrackingTouch(android.widget.SeekBar seekBar)`
* **Description**: Callback method called when the user stops a touch gesture on a SeekBar.
* **Parameters**:
    * `seekBar` (android.widget.SeekBar) - The SeekBar that was released.
* **Return Type**: `void`

#### `setCheckbox()`
* **Description**: Sets up or configures a checkbox within the view.
* **Return Type**: `android.widget.CheckBox`
```

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

### Getting the Code for an Advisory Field (Java)

Source: https://www.xweather.com/docs/android-sdk/api/Aeris/com/aerisweather/aeris/communication/fields/AdvisoryFields

This example demonstrates how to get the string code associated with an AdvisoryFields enum constant using the getCode() method. This method is part of the CodedInterface implementation.

```Java
AdvisoryFields field = AdvisoryFields.LOCATION;
String code = field.getCode();
System.out.println("Code for " + field + ": " + code);
```

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

### Instantiate InteractiveMapApp with SDK (JavaScript)

Source: https://www.xweather.com/docs/javascript-sdk/getting-started/apps-module

Shows how to instantiate the `InteractiveMapApp` after the Apps module has been loaded. This example initializes the AerisWeather SDK with client credentials and then sets up an interactive map using the Leaflet strategy.

```javascript
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
aeris.apps().then((apps) => {
    const app = new apps.InteractiveMapApp('#ia-map', {
        map: {
            strategy: 'leaflet',
            zoom: 4,
            layers: 'satellite,radar'
        }
    });
});
```