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.

Browser Requirements

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.

Set Up The Code

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.

Configuration

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.

Examples

Live Animation

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

Browser Requirements

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

Set Up The Code

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.

Configuration

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', 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]]}].

Examples

One Object

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

Live Animation

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

Two Objects

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

Manual Animation

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' });

Orbit Animation

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' });

Hide LeoLabs Instruments

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

Radio Horizons

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

Custom Shapes

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]]}] });