> ## Documentation Index
> Fetch the complete documentation index at: https://terminal49-cursor-land-agent-trust-main-c4b3.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Terminal49 Map Embed Guide

> Embed the Terminal49 container map in your website with a publishable API key to display live vessel positions and shipment location data.

## Prerequisites

* A Terminal49 account.
* A publishable map API key. See [Entitlements and Paid Features](/api-docs/useful-info/entitlements) for access requirements.
* Familiarity with the [Shipments API](/api-docs/api-reference/shipments/list-shipments) and [Containers API](/api-docs/api-reference/containers/list-containers).

The following examples pass `containerId` and `shipmentId` variables to the embedded map.
They relate to `id` attributes of the container and shipment objects that are returned by the API.

<Note>
  The map embed works from a local development environment. Open your HTML file directly in a browser or serve it from `http://localhost`. There is no domain allowlisting on the embed itself. Your page just needs internet access to load `bundle.js` and `bundle.css` from `https://map.terminal49.com`, and a valid publishable API key.
</Note>

## Embed the map on your website

Once you have the API key, you can embed the map on your website.

<Steps>
  <Step title="Load the map assets">
    Copy and paste the code below and insert it on your website.
    Once loaded, this will make the map code available through the global `window` object.

    Just before the closing `</head>` tag, add the following link tag to load the map styles.

    ```html theme={null}
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="https://map.terminal49.com/bundle.css" />
    </head>
    ```

    Just before the closing `</body>` tag, add the following script tag to load the map code.

    ```html theme={null}
    <body>
      <!-- Other tags -->
      <script src="https://map.terminal49.com/bundle.js"></script>
    </body>
    ```
  </Step>

  <Step title="Define a container element">
    Define a container where you want the map to be displayed.

    ```html theme={null}
    <div id="map"></div>
    ```
  </Step>

  <Step title="Create a map instance">
    After the code is loaded, you can use the `window.TntMap` class to create a map instance.

    ```javascript theme={null}
    const map = new window.TntMap("#map", {
      authToken: publishableApiKey,
    });
    ```

    Notice that the `authToken` option is required. This is where you pass your publishable map API key.
  </Step>

  <Step title="Start the map">
    This tells the map to initialize and hook into the element designated during initialization.

    ```javascript theme={null}
    await map.start();
    ```
  </Step>

  <Step title="Load a container">
    You can pass shipment and container ids to the map where it'll fetch the data and display it.

    ```javascript theme={null}
    await map.load(shipmentId, containerId);
    ```
  </Step>
</Steps>

Putting it all together, here is the JavaScript code that you need to embed the map on your website.

```javascript theme={null}
const map = new window.TntMap("#map", {
  authToken: publishableApiKey,
});

await map.start();
await map.load(shipmentId, containerId);
```

If you want to use inside the browser you can use the IIFE pattern.

```html theme={null}
<script>
  (async () => {
    const map = new window.TntMap("#map", {
      authToken: publishableApiKey,
    });

    await map.start();
    await map.load(shipmentId, containerId);
  })();
</script>
```

Or you can use the module attribute to use top-level async/await.

```html theme={null}
<script type="module">
  const map = new window.TntMap("#map", {
    authToken: publishableApiKey,
  });

  await map.start();
  await map.load(shipmentId, containerId);
</script>
```

<img src="https://mintcdn.com/terminal49-cursor-land-agent-trust-main-c4b3/QKXrjg8HzK1OzN3u/images/terminal49-map.png?fit=max&auto=format&n=QKXrjg8HzK1OzN3u&q=85&s=dcbfe6fc1f27c77309a27a8cc22dab9c" alt="terminal49-map.png" width="1474" height="346" data-path="images/terminal49-map.png" />

Additionally, the map element doesn't have to be an element id but can be a DOM element reference instead.
Consider this example, which uses a query selector to select the map element.

```javascript theme={null}
const element = document.querySelector("#map");
const map = new window.TntMap(element, {
  authToken: publishableApiKey,
});
```

## Styling the map

All of the map styles are written as human-readable CSS classes and variables.
You can use these to customize the map to your liking.
The styles are written in [BEM](https://getbem.com/) style as well as they're scoped under a `.tntm` class to avoid style conflicts with your website.

### Sizing

By default, the map takes the full width of its container and some height. To expand the map, click the expand button in the bottom-left corner of the map.
You can also override the default styles to customize the map to your liking.

For example, to tell the map to take 60% of the total viewport size when expanded, do the following:

```css theme={null}
.tntm .tntm__container.--expanded {
  height: 60vh;
}
```

<img src="https://mintcdn.com/terminal49-cursor-land-agent-trust-main-c4b3/QKXrjg8HzK1OzN3u/images/terminal49-map-expanded.png?fit=max&auto=format&n=QKXrjg8HzK1OzN3u&q=85&s=1c676dd60f28321c97893b750ac8c69f" alt="terminal49-map-expanded.png" width="1482" height="709" data-path="images/terminal49-map-expanded.png" />

### Colors

Terminal49 exposes a number of CSS variables that you can use to customize the map colors.
All of the variables are bound to the `.tntm` class to avoid style conflicts with your website.

```css theme={null}
.tntm {
  --marker-background-color: var(--athens-gray-500);
  --marker-border-color: var(--athens-gray-500);
  --marker-text-color: var(--white);
  --marker-secondary-background-color: var(--athens-gray-100);
  --marker-secondary-text-color: var(--athens-gray-500);
}
```

By default, their values are set to the Terminal49 brand colors. Don't change these — focus on the `--marker` variants instead.
Additionally, the variables might require adjusting for different states of the map markers.

For example, to display markers 'visited' by a vessel as orange and others (in the 'on-the-way' state) as blue:

First, define the default, blue color:

```css theme={null}
.tntm [data-journey-state='on-the-way'] {
  --marker-background-color: blue;
  --marker-border-color: lightblue;
  --marker-text-color: var(--white);
  --marker-secondary-background-color: lightblue;
  --marker-secondary-text-color: black;
}

.tntm [data-journey-state='visited'] {
  --marker-background-color: orange;
  --marker-border-color: #FFD580;
  --marker-text-color: var(--white);
  --marker-secondary-background-color: #FFD580;
  --marker-secondary-text-color: black;
}
```

Result:

<img src="https://mintcdn.com/terminal49-cursor-land-agent-trust-main-c4b3/QKXrjg8HzK1OzN3u/images/terminal49-map-colors.png?fit=max&auto=format&n=QKXrjg8HzK1OzN3u&q=85&s=415a7bd9eaef286976c8794a1073ef80" alt="terminal49-map-colors.png" width="1482" height="709" data-path="images/terminal49-map-colors.png" />

You can also change the marker colors based on whether they are hovered over or not.

This is how the Terminal49 website styles the map markers:

```css theme={null}
[data-journey-state='visited'] {
  --marker-background-color: var(--green-600);
  --marker-border-color: var(--green-600);
  --marker-text-color: var(--white);
  --marker-secondary-background-color: var(--green-50);
  --marker-secondary-text-color: var(--green-600);
}

[data-journey-state='on-the-way'] {
  --marker-background-color: var(--athens-gray-500);
  --marker-border-color: var(--athens-gray-500);
  --marker-text-color: var(--white);
  --marker-secondary-background-color: var(--athens-gray-100);
  --marker-secondary-text-color: var(--athens-gray-500);
}

[data-hovered][data-journey-state='visited'],
[data-hovered] [data-journey-state='visited'] {
  --marker-secondary-background-color: var(--green-200);
  --marker-secondary-text-color: var(--green-700);
  --marker-border-color: var(--green-700);
}

[data-hovered][data-journey-state='on-the-way'],
[data-hovered] [data-journey-state='on-the-way'] {
  --marker-secondary-background-color: var(--athens-gray-200);
  --marker-secondary-text-color: var(--athens-gray-600);
  --marker-border-color: var(--athens-gray-600);
}
```

You might want to copy this code and adjust it to your needs.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.