LST Map Module

Live Status Tracker presents two ways of use.

Library JS Mode. LST Library is a javascript file shared through a CDN provider. You can embed it in your project by adding the HTML script tag in your index.html file.
URL Mode. LST URL is a web app (or SPA) that you can access through an URL. The content of the page is parameterizable via query parameters in the URL.

There are two urls for each environment

Production

Library.	URL Lib	URL Web
map	https://lsw-v3.instaleap.io/lib/map.js	https://lsw-v3.instaleap.io/map?

Test

Library.	URL Lib	URL Web
map	https://xandar-lsw-v3.instaleap.io/lib/map.js	https://xandar-lsw-v3.instaleap.io/map?

Basic parameters

The basic parameters required by the LST call are:

Parameter	Description
Job : string	This is the Job number, the widget will retrieve al related information to this job
token : string	This is your unique api token that allows you to authenticate to our systems.
container : string	This is a selector of the container that is created in your DOM. . If you have added an id attribute, the selector must be prefixed with the '#' character. Example `<div id="lsw" />` `{ ... container="#lsw" }`

How to embed it in Library JS mode:

In the index.html of your project, you will require to append the URL to the library CDN.

<head>
    <meta charset="UTF-8"/>
    <title>LSW v3 Embed</title>
    <script src="https://xandar-lsw-v3.instaleap.io/lib/map.js"></script>
</head>

In your project, make sure you have defined an HTML element, that the library will use as an anchor to render its content. add an id attribute to this element. this way the library is able to find the container in the DOM

You can define constraints to the size of the HTML container as you prefer, or leave it dynamically resizable, the content of the script will automatically adjust to the dimensions of the container.

<body>
	<div id="instaleap-lsw-v3"></div>
</body>

How to render it:

Since you have injected the script using a CDN. If successfully loaded, you will have access to the library through the Window Object. You should have access to it from the entire scope of your application.

The library will expose an attribute called "instaleap", in particular we care about the "instaleap.{Library}.render" method . you can invoke the render method from any .ts, .js. or any other file capable of running javascript code.

<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",
    }
    window.instaleap.{Library}.render(params)
</script>

How to load it URL mode

You will access the application through the URL https://xandar-lsw-v3.instaleap.io/ , although you will have to configure the query parameters to be able to display any information.

So you will end up with a full url whose query params seems similar to the following

https://xandar-lsw-v3.instaleap.io/map? job=jobId&token=token

How to load it in URL mode in Iframe

Consider the following component who will load the url in an iframe

function LSW() {
  const lswUrl = "https://xandar-lsw-v3.instaleap.io/map?";
  const urlParams = {
    job: "myJob,
    token: "myToken
  };
  const url = `${lswUrl}/?job=${urlParams.job}&token=${urlParams.token}`;

  return (
    <div className="live-status">
      <h3>live status widget in an iframe</h3>
      <iframe src={url}></iframe>
    </div>
  );
}

Use library Map

To use this library you only have to use the map tag in the url of the LST call.
Note: Note: The driver icon only appears on the map when active the shopper app.

Consider the following examples:

<!DOCTYPE html>
<head>
    <title>LSW v3 Embed</title>
</head>
<body>
    <div id="instaleap-lsw-v3"></div>
</body>

<script src="https://xandar-lsw-v3.instaleap.io/lib/map.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3"
    }
    window.instaleap.map.render(params)
</script>
</html>

https://xandar-lsw-v3.instaleap.io/map?job=myJob&token=myToken

The list of parameters is as follows

📘

Custom icons on map

Example: