Namespace: reearth.viewport

Viewport

Description: Viewport defines a structured data type used to represent the dimensions and characteristics of the viewport within reearth, along with any query parameters associated with the current view. The Viewport type is especially useful for adapting the user interface and functionality to different device types and sizes, and for retrieving specific data according to URL query parameters. It is a composite type that includes properties from ViewportSize and extends it with a query object.

Syntax: reearth.viewport(ViewportSize & {query: Record<string, string>})

Structure:

// An object that outline the basic dimensions and device context of the viewport.
ViewportSize {

width // Nnumber. The width of the viewport in pixels.
height // Nnumber. The height of the viewport in pixels.
isMobile // Boolean. A flag indicating whether the viewport is being accessed from a mobile device, which can affect the rendering and layout of content.

}

query (Record<string, string>) // A key-value pair that represent query parameters associated with the viewport. These parameters can be used to store or transmit additional information about the state or configuration of the viewport, such as user preferences, specific settings, or contextual data relevant to the current session.

Example Usage:

//1. Example of defining a viewport object
const myViewport = {
  width: 1024,    // Example width in pixels
  height: 768,    // Example height in pixels
  isMobile: false,  // Indicates that this is not a mobile device
  query: {
    section: "news",  // Example of a query parameter
    theme: "light"    // Another query parameter
  }
};

//Use query parameters to customize UI elements
  if (myViewport.query.theme === "light") {
    console.log("Applying light theme based on viewport query.");
  }

//Example of a function that might use the Viewport type to adjust UI elements
function adjustElements(viewport) {
  console.log(`Adjusting UI for width: ${viewport.width}, height: ${viewport.height}`);
  if (viewport.isMobile) {
    console.log("Applying mobile-specific adjustments.");
  }
 }
 
// Calling the function with the myViewport object
adjustElements(myViewport);
  
  

//2. Define a viewport object for a web application running in a mobile environment
const myViewport = {
  width: 360,       // width in pixels
  height: 640,      // height in pixels
  isMobile: true,   // indicating a mobile device
  query: {
    theme: "dark",   // a custom query parameter for UI mode
    userId: "12345"   // a user identifier passed as a query parameter
  }
};

//Usage in a function to adjust UI based on viewport size and query params
function adjustUI(viewport) {
  if (viewport.isMobile) {
    console.log("Adjusting UI for mobile device.");
  }
  console.log(`User ID from query: ${viewport.query.user}`);
}

// Calling the function with the myViewport object
adjustUI(myViewport);

//3. Displaying information about the viewport
console.log(`Viewport width: ${myViewport.width}`);
console.log(`Viewport height: ${myViewport.height}`);
console.log(`Is on mobile device: ${myViewport.isMobile}`);
console.log(`Current theme from query: ${myViewport.query.theme}`);
console.log(`User ID from query: ${myViewport.query.userId}`);

//4. if the viewport is being viewed on mobile, post a message to a popup window.
if (reearth.viewport.isMobile) {
      reearth.popup.postMessage({
        action,
        payload: {
          dataID,
          layer: {
            id: layer?.id,
            data: { ...layer?.data, ...overriddenLayer?.data },
          },
        },
      });
 }
      
 //5. set a width and height when updating a popup
     reearth.popup.update({
      height: reearth.viewport.height - 68,
      width: reearth.viewport.width - 12,
     })

Examples Without Comment