HOGS maps can be implemented on any page by using the HTML iframe tag. Provide the https://iframe.hogs.live as source.
<iframe src="https://iframe.hogs.live"></iframe>
Main parameters
Use GET method to send parameters to the iframe. Authentication token known as authToken is the most important parameter that allows the use of the iframe. The token can be aquired by loging in via API: http://wiki.hogs.live/autoryzacja-2/
<iframe src="https://iframe.hogs.live?authToken=<authToken>"></iframe>
Mode parameter defines the mode in which iframe can be started i.e. what functions are offered, ex. mode= calculateRoute means route plotting mode. Options ia a supplementary mode that contains all information needed to aquired specified behaviour ex. parameters characteristic for route.
Main parameters documentation link: parameters-main
Iframe modes:
Communication- events
There is a possibility to send information without reloading the iframe. In the same way you can receive information from the iframe.
Sending event:
<body>
<iframe id="iframe" src="https://iframe.hogs.live/"></iframe>
</body>
<script>
const iframe = document.getElementById('iframe');
function sendEventToIframe(data) {
iframe.contentWindow.postMessage(data, '*');
}
sendEventToIframe('sth');
</script>
Receiving event
window.addEventListener('message', (event) => {
console.log('Dane z iframe: ', event.data);
});
Event model
interface Event {
type: string;
data: any;
}
While sending event to the iframe the type setting assumes the value of mode parameter (main parameters, sent by GET, map mode), data assumes options value.