Mapy HOGS mogą zostać zaimplementowane na dowolnej stronie poprzez wykorzystanie znacznika HTML iframe. Adres, który należy podać jako źródło, to https://iframe.hogs.live .
<iframe src="https://iframe.hogs.live"></iframe>
Parametry główne
W celu przekazania informacji do iframe’a należy przekazać parametry za pomocą metody GET. Najważniejszym parametrem pozwalającym na korzystanie z iframe’a jest authToken, czyli token uwierzytelniający. Token należy uzyskać w drodze logowania poprzez API: http://wiki.hogs.live/autoryzacja-2/
<iframe src="https://iframe.hogs.live?authToken=<authToken>"></iframe>
Parametr mode definiuje, w jakim trybie ma zostać uruchomiony iframe, tzn. jakie funkcjonalności ma oferować, np. mode= calculateRoute będzie oznaczał tryb wyznaczania trasy. Parametrem uzupełniającym jest options, który zawiera wszystkie informacje potrzebne do uzyskania odpowiedniego zachowania, np. parametry charakteryzujące trasę.
Link do dokumentacji parametrów głównych: parametry-główne
Tryby iframe’a:
Komunikacja- eventy
Istnieje także możliwość przesłania informacji bez potrzeby przeładowywania iframe’a. W analogiczny sposób można odebrać informacje od iframe’a.
Wysłanie eventu:
<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>
Odebranie eventu:
window.addEventListener('message', (event) => {
console.log('Dane z iframe: ', event.data);
});
Model eventu
interface Event {
type: string;
data: any;
}
Podczas wysyłania eventu do iframe’a właściwość type przyjmuje wartość parametru mode (parametry główne, przysyłane GETem, tryb mapy), data odpowiada wartości options.