Vessel detection events viewed in the Skylight web interface include visual indicators for scale and orientation, as shown in the screen capture below.

1. Compass orientation (in degrees from true north) can be seen on the upper left of the image chip
2. Scale (in kilometers) can be seen on the lower left

The metadata associated with the image chip orientation and scale is also available via the Skylight API using the events endpoint.  

API request

A request to the events endpoint will return an Events object, which can optionally include EventDetails for each record in the response.  Among the fields that can be included in EventDetails are the following:

1. meters_per_pixel (the image scale)
2. orientation (the compass orientation)

Below is an example API request including those two fields:

{query: 
   events(eventTypes: [viirs], pageSize: 1, startTime: "2025-01-12T00:00:00Z")
   {
       items 
       {
           event_id
           event_details {
               data_source
               meters_per_pixel
               orientation
           }
       }
   }
}

API response

The response to the request shown in the previous section looks like this:

{
   "data": {
       "query": {
           "items": [
               {
                   "event_id": "VNP02DNB_NRT.A2025012.0000.002.2025012021107_-33.99_25.71805",
                   "event_details": {
                       "data_source": "nasa",
                       "meters_per_pixel": 86,
                       "orientation": 351
                   }
               }
           ]
       }
   }
}

In the example above, the orientation is 351 degrees from north, indicating a northwest orientation (an orientation value of zero indicates true north).

UI display

Using the meters_per_pixel and orientation data included in the API response, you can generate your own scale and compass orientation displays, similar to the usage in the Skylight web interface (as shown at the top of this article).

Orientation

You can use the CSS rotate property to control how the orientation displays, as in this example:

      .rotate-180 {
       transform: rotate(180deg);
     }

In the associated interface code, the relevant img tag might be rendered as in the following example:

               <img
                src={directionImg}
                style={{
                  transform: `rotate(${eventDetails.orientation}deg)`,
                }}
                alt="compass"
                className="compass"
              />