The Terminal49 Map allows you to embed real-time visualized container tracking on your website with just a few lines of code.
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.window
object.</head>
tag, add the following link tag to load the map styles.
</body>
tag, add the following script tag to load the map code.
window.TntMap
class to create a map instance.authToken
option is required. This is where you pass your Publishable API key.
.tntm
class to avoid style conflicts with your website.
.tntm
class to avoid style conflicts with your website.
--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: