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.
3D Orbit Map
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. '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
}
};
| 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.
|
| useHighResMap | true |
When true, a high resolution version of the Earth's terrain will be loaded after the low-resolution version.
|
| useHighResNormalMap | true |
When true, a high resolution version of the normal map image will be loaded after the low-resolution version.
|
| useHighResSpecularMap | true |
When true, a high resolution version of the specular map image will be loaded after the low-resolution version.
|
| loadExtraImagesAfterEarthLoad | false |
When this is true, all of the high-resolution versions of images, as well as the low-resolution versions of the normal map image and specular map image will be
loaded after the embedded map has loaded and displayed the earth.
|
| 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. 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. |
| 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. |
Examples
Live Animation
var map = new leolabs.OrbitMap3d(containerEl, {
apiAccessKey: 'YOUR API ACCESS KEY HERE',
catalogNumbers: ['L2669', 'L335'],
animation: 'live',
showUncertaintyEllipsoids: false,
followObject: false,
minimizeMenu: true
});
2D Orbit Map
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. '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]]}].
|
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]]}]
});