SDK prototype

Interact with MapX within a static web page or from a full featured application.

Plan

  • Introduction
  • Resources
  • Examples
  • Outro

Introduction

Initial requirement description:

...displaying the view titles and abstracts, legends, metadata and filters will be customizable in the host page while other functions such as data download, map export, data sharing will be triggered in the iFrame from the host page.

Introduction

Made of a javascript library which interacts with MapX's « user space » by:

  • Embedding a MapX instance into an <iframe>
  • Providing a stack of functions/events that interact with MapX functions/events; e.g.:
    • get_views()
    • get_projects()
    • view_add/view_remove()
    • get_view_meta()
    • get_view_legend()
    • ...

Introduction (code)

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/@fxi/mxsdk"></script>
    <script>
      const mapx = new mxsdk.Manager({
        container: document.getElementById('app'),
        url: 'https://app.staging.mapx.org/?project=MX-HPP-OWB-3SI-3FF-Q3R&language=en'
      });
      mapx.on('ready', () => {
        mapx.ask('get_views').then((views) => console.log(views));
      });
    </script>
  </body>
</html>

Introduction (basic showcase)

Views output...

Resources

Examples

Outro

  • SDK status
  • Steps
  • Remarks
  • ...

- Quick intro to Observable - Go trough the sections describing the interactions...