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 web domain hosting the map needs to be whitelisted for your organization - contact accounts@leolabs.space if this is not already set up.

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

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. 'abcdefghijklm123'
  catalogNumbers: undefined,  // required. e.g. ['L335', 4793, 'L225', 36508]
  epoch: new Date(),
  startOffset: 720,
  endOffset: 720,
  animation: 'none',

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

  objectColor: '#cccccc',
  orbitPathColor: '#ffd480',
  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
  },
  customObjectNames: null,
  excludeCatalogNumberFromGlobeObjectName: false
};

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.
doFadeIn	`true`	When set to `true`, the view of Earth will fade in from black after the embedded map loads. When set to `false`, the Earth will appear instantly at that point.
followObject	`true`	Setting this to `true` will center the camera on the selected object, which means the camera will rotate around the selected object, and during animation, the camera will follow the object overhead. Setting this to `false` will center the camera on the Earth, which means the camera will rotate around the Earth, and the camera will not follow any objects. The user can change this via the menu unless you hide the menu option.
showObjectNames	`true`	Whether to show the objects' names on the globe. The user can change this via the menu unless you hide the menu option. By default, the object name includes the catalog number unless you set `excludeCatalogNumberFromGlobeObjectName` to `true`.
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.
showModels	`false`	Whether to display a 3d satellite model for each object instead of the default sphere or uncertainty ellipsoid. 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.
showMenuItems.models	`true`	Whether to show the "Models" menu item.
customObjectNames	`null`	Configuration that specifies how to customize object names, if desired. Example: `customObjectNames: { applyToObjectsInUI: true, applyToObjectsOnGlobe: true, mapping: { global: { regex: [ { pattern: 'ENVISAT', replacement: 'TEST' }, ] }, byCatalogNumber: { 'L2669': '${Name} !!!' } } }` applyToObjectsInUI Boolean, defaults to `true`. If `true`, apply object name customization to the object's name displayed in UI. applyToObjectsOnGlobe Boolean, defaults to `true`. If `true`, apply object name customization to the object's name displayed next to the object on the globe. mapping Configuration that specifies how an object's custom displayed name is generated. byCatalogNumber: In this section, you can provide a custom name for any object. If one is specified in this section for an object, it will take precedence over anything specified in the `global` section for that object. global: This section allows you to specify a transformation that is applied to the name for all objects. Currently this is done by adding a `regex` entry, where `pattern` specifies how to match the substring of the object's name, and `replacement` specifies the content of that substring's replacement. Each regex will be applied to every object, in the order specified in the config. Any string specified in the `mapping` section will be inspected for the `${Name}` placeholder and if found, will be replaced by the object's name. LeoLabs reserves the right to disable the embedded map if objects are renamed in a way that offends other members of the space community.
excludeCatalogNumberFromGlobeObjectName	`false`	If `false` the object's catalog number will be appended to the object's name on the globe.

var map = new leolabs.OrbitMap3d(containerEl, {
  apiAccessKey: 'YOUR API ACCESS KEY HERE',
  catalogNumbers: ['L2669', 'L335'],
  animation: 'live',
  showUncertaintyEllipsoids: false,
  followObject: 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

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. 'abcdefghijklm123'
  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