Document

> ## Documentation Index > Fetch the complete documentation index at: https://terminal49.com/docs/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](/docs/api-docs/useful-info/entitlements) for access requirements. * Familiarity with the [Shipments API](/docs/api-docs/api-reference/shipments/list-shipments) and [Containers API](/docs/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. 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. ## Embed the map on your website Once you have the API key, you can embed the map on your website. 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 `` tag, add the following link tag to load the map styles. ```html theme={null} Document ``` Just before the closing `` tag, add the following script tag to load the map code. ```html theme={null} ``` Define a container where you want the map to be displayed. ```html theme={null}

``` 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. This tells the map to initialize and hook into the element designated during initialization. ```javascript theme={null} await map.start(); ``` 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); ``` 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} ``` Or you can use the module attribute to use top-level async/await. ```html theme={null} ```

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 will take the full width of its container and some height. The map is expandable by clicking on the expand button on 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; } ```

### 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:

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.