Embeddable Maps

The orbit map displays the orbit and position of a given set of objects for a specified timeframe. It is available in 2D and 3D, but some features are only available in one or the other.

The 3D Orbit Map supports the following browsers:

The latest 2 versions of Chrome
The latest 2 versions of Firefox
The latest 2 versions of Safari
The latest 2 versions of Edge
Internet Explorer 11

It does not support Internet Explorer 10 and older versions.

In order to embed the 3D Orbit Map onto your web page, you will need to include the LeoLabs JavaScript SDK on your web page and initialize the map with a container element and a configuration. The 3D Orbit Map will fill the available space of the container and will not expand the container to a viewable size, so you must make sure that the container is given a size. You must place the <script> tags at the end of the <body> tag.

<!DOCTYPE html>
<html>
  <head>
    ...
    <style>
      #orbit-map-container {
        width: 100%;
        height: 600px;
      }
    </style>
    ...
  </head>
  <body>
    ...
    <div id="orbit-map-container"></div>
    ...
    <script src="https://platform-cdn.leolabs.space/sdk/v1"></script>
    <script>
      var containerEl = document.getElementById('orbit-map-container');
      var config = {/* see below for configuration details */};
      var map = new leolabs.OrbitMap3d(containerEl, config);
    </script>
  </body>
</html>

After creating the container element, including the SDK, and adding the code to initialize the map, you're now ready to configure the map.

The following is a sample configuration that shows all the default values. This is a good starting point for your configuration. You can remove all the optional parameters or tweak the parameters to your liking. The only required parameters are apiAccessKey and catalogNumbers; the rest of the parameters have default values. There is a detailed explanation of each parameter after the sample.

var config = {
  apiAccessKey: undefined,    // required. e.g. 'MLptTBs7CAnMu-oQ'
  catalogNumbers: undefined,  // required. e.g. ['L335', 4793, 'L225', 36508]
  epoch: new Date(),
  startOffset: 720,
  endOffset: 720,
  animation: 'none',

  showUncertaintyEllipsoids: true,
  showObjectNames: true,
  showOrbitPath: true,
  showLeoLabsInstruments: true,
  showRadioHorizons: false,
  showUncertaintyAxes: false,

  objectColor: '#cccccc',
  orbitPathColor: '#ff00ff',
  uncertaintyEllipsoidColor: '#ffff00',
  radioHorizonColor: '#ffa500',

  minimizeMenu: false,
  showMenuItems: {
    animation: true,
    viewLive: true,
    time: true,
    speed: true,
    followObject: true,
    orbitPath: true,
    uncertaintyAxes: true,
    objectNames: true,
    radioHorizons: true,
    instruments: true
  }
};

Parameter	Default Value	Description
apiAccessKey	`undefined`	(required) The access key portion of your LeoLabs API Key. You do not have to include the secret key.
catalogNumbers	`undefined`	(required) An array of LeoLabs Catalog Numbers or NORAD Catalog Numbers. Use a string for LeoLabs Catalog Numbers and an integer for NORAD Catalog Numbers, e.g. `['L335', 4793, 'L225', 36508]`. If there's not enough data to show an object's orbit, that object will not be displayed in the map.
epoch	`new Date()`	A `Date` object that is the reference point for the timeframe of the objects' orbits. The timeframe of the orbits is determined by the `epoch`, `startOffset`, and `endOffset`. Unless `animation` is set to `'live'`, the objects are positioned at the `epoch` when the map loads. Defaults to `new Date()`, which is the current time.
startOffset	`720`	The number of minutes before the `epoch` to define the start of the orbit timeframe. It must be between `1` and `1440` (24 hours), inclusive, and must be an integer. Defaults to `720`, which is 12 hours.
endOffset	`720`	The number of minutes after the `epoch` to define the end of the orbit timeframe. It must be between `1` and `1440` (24 hours), inclusive, and must be an integer. Defaults to `720`, which is 12 hours.
animation	`'none'`	Valid values are `'none'`, `'autoPlay'`, and `'live'`. `'none'` will result in the map loading up at the given `epoch`, without any animation. `'autoPlay'` will result in the map loading up at the given `epoch` and then animating the objects through their orbits at an accelerated rate. `'live'` will result in the map loading up at the current time and animating the objects through their orbits in real-time.
showUncertaintyEllipsoids	`true`	Whether to show the uncertainty ellipsoids around each object. If the uncertainty ellipsoids are hidden, the objects will be represented as fixed-size spheres.
showObjectNames	`true`	Whether to show the objects' names. The user can change this via the menu unless you hide the menu option.
showOrbitPath	`true`	Whether to show the orbit path for the selected object. The user can change this via the menu unless you hide the menu option.
showLeoLabsInstruments	`true`	Whether to show the field of view of the LeoLabs instruments. The user can change this via the menu unless you hide the menu option.
showRadioHorizons	`false`	Whether to show the radio horizons for each object. The user can change this via the menu unless you hide the menu option.
showUncertaintyAxes	`false`	Whether to show the RIC axes of the uncertainty ellipsoids. The user can change this via the menu unless you hide the menu option.
objectColor	`'#cccccc'`	The color of the objects as a hexadecimal string. This parameter does not affect the uncertainty ellipsoid color; there is a separate parameter for that.
orbitPathColor	`'#ff00ff'`	The color of the orbit path of the selected object as a hexadecimal string.
uncertaintyEllipsoidColor	`'#ffff00'`	The color of the uncertainty ellipsoids as a hexadecimal string.
radioHorizonColor	`'#ffa500'`	The color of the radio horizons as a hexadecimal string.
minimizeMenu	`false`	Whether to minimize the menu when the map loads. The user will still have the option to expand the menu.
showMenuItems.animation	`true`	Whether to show the animation-related buttons, like reverse, play, and fast-forward.
showMenuItems.viewLive	`true`	Whether to show the "View Live" button. If there is not enough data to show a live view, this button will not show regardless of this parameter setting.
showMenuItems.time	`true`	Whether to show the time control menu item.
showMenuItems.speed	`true`	Whether to show the speed control menu item.
showMenuItems.followObject	`true`	Whether to show the "Follow Object" menu item.
showMenuItems.orbitPath	`true`	Whether to show the "Orbit Path" menu item.
showMenuItems.uncertaintyAxes	`true`	Whether to show the "Uncertainty Axes" menu item.
showMenuItems.objectNames	`true`	Whether to show the "Object Names" menu item.
showMenuItems.radioHorizons	`true`	Whether to show the "Radio Horizons" menu item.
showMenuItems.instruments	`true`	Whether to show the "Instruments" menu item.

var map = new leolabs.OrbitMap3d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: ['L2669', 'L335'],
  animation: 'live',
  showUncertaintyEllipsoids: false,
  minimizeMenu: true
});

The 2D Orbit Map supports the following browsers:

The latest 2 versions of Chrome
The latest 2 versions of Firefox
The latest 2 versions of Safari
The current version of Edge
Internet Explorer 10 and 11

In order to embed the 2D Orbit Map onto your web page, you will need to include the LeoLabs JavaScript SDK on your web page and initialize the map with a container element and a configuration. The 2D Orbit Map will fill the available space of the container and will not expand the container to a viewable size, so you must make sure that the container is given a size. You must place the <script> tags at the end of the <body> tag.

<!DOCTYPE html>
<html>
  <head>
    ...
    <style>
      #orbit-map-container {
        width: 100%;
        height: 600px;
      }
    </style>
    ...
  </head>
  <body>
    ...
    <div id="orbit-map-container"></div>
    ...
    <script src="https://platform-cdn.leolabs.space/sdk/v1"></script>
    <script>
      var containerEl = document.getElementById('orbit-map-container');
      var config = {/* see below for configuration details */};
      var map = new leolabs.OrbitMap2d(containerEl, config);
    </script>
  </body>
</html>

After creating the container element, including the SDK, and adding the code to initialize the map, you're now ready to configure the map.

var config = {
  apiAccessKey: undefined,    // required. e.g. 'MLptTBs7CAnMu-oQ'
  catalogNumbers: undefined,  // required. e.g. ['L335', 4793, 'L225', 36508]
  epoch: new Date(),
  startOffset: 720,
  endOffset: 720,
  animation: 'none',
  showLeoLabsInstruments: true,
  showRadioHorizons: false,
  customShapes: []
};

Parameter	Default Value	Description
apiAccessKey	`undefined`	(required) The access key portion of your LeoLabs API Key. You do not have to include the secret key.
catalogNumbers	`undefined`	(required) An array of LeoLabs Catalog Numbers or NORAD Catalog Numbers. Use a string for LeoLabs Catalog Numbers and an integer for NORAD Catalog Numbers, e.g. `['L335', 4793, 'L225', 36508]`. If there's not enough data to show an object's orbit, that object will not be displayed in the map.
epoch	`new Date()`	A `Date` object that is the reference point for the timeframe of the objects' orbits. The timeframe of the orbits is determined by the `epoch`, `startOffset`, and `endOffset`. Unless `animation` is set to `'orbit'` or `'live'`, the objects are positioned at the `epoch` when the map loads. Defaults to `new Date()`, which is the current time.
startOffset	`720`	The number of minutes before the `epoch` to define the start of the orbit timeframe. Defaults to `720`, which is 12 hours.
endOffset	`720`	The number of minutes after the `epoch` to define the end of the orbit timeframe. Defaults to `720`, which is 12 hours.
animation	`'none'`	Valid values are `'none'`, `'manual'`, `'orbit'`, and `'live'`. `'none'` will result in the map loading up at the given `epoch`, without any animation. `'manual'` will result in the map loading up at the given `epoch` with a button to allow the user to play the animation. `'orbit'` will result in the map loading up at `startOffset` and then animating the objects through their orbits in real-time. `'live'` will result in the map loading up at the current time and animating the objects through their orbits in real-time.
showLeoLabsInstruments	`true`	Whether to show the LeoLabs instruments and their field of view.
showRadioHorizons	`false`	Whether to show the radio horizons for each object.
customShapes	`[]`	An array of objects that specify a label (optional) and a path for the custom shape, e.g. `[{label: {text: 'ground station', lat: 0, lon: 0}, path: [[10,10], [10,-10], [-10,-10], [-10,10]]}]`.

var map = new leolabs.OrbitMap2d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: ['L2669']
});

var map = new leolabs.OrbitMap2d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: ['L2669'],
  animation: 'live'
});

var map = new leolabs.OrbitMap2d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: ['L2669', 'L335']
});

var map = new leolabs.OrbitMap2d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: [4793, 40053],
  epoch: new Date(Date.UTC(2018, 0, 1)),
  startOffset: 60,
  endOffset: 60,
  animation: 'manual'
});

var map = new leolabs.OrbitMap2d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: [4793, 40053],
  epoch: new Date(Date.UTC(2018, 0, 1)),
  startOffset: 60,
  endOffset: 60,
  animation: 'orbit'
});

var map = new leolabs.OrbitMap2d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: ['L2669'],
  showLeoLabsInstruments: false
});

var map = new leolabs.OrbitMap2d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: ['L2669'],
  showRadioHorizons: true
});

var map = new leolabs.OrbitMap2d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: ['L2669'],
  customShapes: [{label: {text: 'ground station', lat: 0, lon: 0}, path: [[10,10], [10,-10], [-10,-10], [-10,10]]}]
});

Embeddable Maps

3D Orbit Map

Browser Requirements

Set Up The Code

Configuration

Examples

Live Animation

2D Orbit Map

Browser Requirements

Set Up The Code

Configuration

Examples

One Object

Live Animation

Two Objects

Manual Animation

Orbit Animation

Hide LeoLabs Instruments

Radio Horizons

Custom Shapes