Widgets

<div id="box" style="height: 480px"></div>
<script>
  const site = 'https://platform.example.com'
  const token = '...' // bearer token จาก /api/auth/oauth2/token
  const messageToken = crypto.randomUUID()

  const params = new URLSearchParams({
    _credential_type: 'bearer-token',
    _token: token,
    _origin: location.origin,
    _message_token: messageToken,
    _locale: 'th',
    _theme: 'light',
    item_id: '<id ของ web map>',
  })
  const frame = document.createElement('iframe')
  frame.src = `${site}/widgets/map?${params}`
  frame.style = 'width:100%;height:100%;border:0'
  document.getElementById('box').append(frame)

  addEventListener('message', (e) => {
    if (e.origin !== site || e.data.messageToken !== messageToken) return
    if (e.data.action === 'ready') {
      frame.contentWindow.postMessage(
        { messageToken, action: 'post-widget-parameters', payload: { options: {} } },
        site
      )
    }
  })
</script>