TrackerPro Admin API: Vehicles
September 27, 2024TrackerPro Client API: LiveMapView
September 29, 2024TrackerPro Client API
After you have embedded PAYT View into your own webpage, you may control the component using Javascript messages. The following sections assume you have embedded the component correctly using code similar to the following:
<iframe id="paytframe" width="100%" height="500" src="https://trackerproview.payasyoutrack.com/#Embed/LiveMapView/{XXXXLAUNCHTOKENXXXX}" frameborder="0"></iframe>Step 1: Reference the iFrame
Within javascript on your page obtain a reference to the iFrame
var mapFrame = document.getElementById('paytframe');
const if_doc = mapFrame.contentWindow;
Step 2: Sending Commands TO the iFrame
Messages can be sent to the iFrame usually take the form {‘action’:’someaction’, ‘params’:someparams}. Think of action as a ‘function call’ and params the parameters to the function. They can be sent to the iFrame like so:
if_doc.postMessage(msg, '*');
Step 3: Receiving Events FROM the iFrame
Add an event listener to the window.
window.addEventListener('message', function(evt) {
//evt.data will contain the response/messages from the iFrame
});
evt.data is of the form {‘action’:’someaction’, ‘result’: someresult}
The component will also send some responses (events) when certain actions occur.
Example: Turn on Clustering
Add a listener for returned events and log result
window.addEventListener('message', function(evt) {
//evt.data will contain the response/messages from the iFrame
console.log(JSON.stringify(evt.data));
});
Make a call to the iFrame to turn on clustering
var mapFrame = document.getElementById('paytframe');
const if_doc = mapFrame.contentWindow;
if_doc.postMessage({action:'clusterOn', params: true}, '*');
Next: LiveView Client API
Back to: Contents
