Document

> ## Documentation Index > Fetch the complete documentation index at: https://terminal49-wayfair-docs.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 and load live shipment location data with a publishable API key. ### Prerequisites * A Terminal49 account. * A Publishable API key, you can get one by reaching out to us at [support@terminal49.com](mailto:support@terminal49.com). * Familiarity with our [Shipments API](/api-docs/api-reference/shipments/list-shipments) and [Containers API](/api-docs/api-reference/containers/list-containers). In the following examples we'll be passing a `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. ### How do I embed the map on my website? Once you have the API Key, you can embed the map on your website. 1. 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} ``` 2. Define a container where you want the map to be displayed. ```html theme={null}

``` 3. 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 API key. 4. Start the map. This tells the map to initialize and hook into the element designated during initialization. ```javascript theme={null} await map.start(); ``` 5. Final step: 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); ``` 6. 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. ```javascript theme={null} ``` Or you can use module attribute to use top-level async/await. ```javascript 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 where we use 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 used those 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. Let's say you want to tell the map to take 60% of the total viewport size when expanded, we'd do this as follows: ```css theme={null} .tntm .tntm__container.--expanded { height: 60vh; } ```

#### Colors We expose 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, which we don't recommend changing and only focus on the `--marker` variants instead. Additionally the variables might require adjusting for different states of the map markers. What does that mean? Let's say we want to display markers 'visited' by a vessel as orange and the others - that we call are in 'on-the-way' state as blue. First let's 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:

It's also possible to change the marker colors based on wheter they're hovered over or not. This is what we do on the Terminal49 website to style the map markers to our needs: ```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.