Skip to main content

Streaming Search

The Streaming Search sample application enables users to apply filters, search for imagery, and display results retrieved from the Streaming - Imagery API, which provides access to high-resolution satellite imagery through Web Map Services (WMS) and Web Feature Services (WFS). Users can interact with the map to define search areas, refine results using multiple filter options, and retrieve metadata for selected imagery.

Functionality is similar to the Discovery Search Sample Application but search queries are requested against the OGC endpoints of the Streaming - Imagery API instead of the Discovery STAC catalog.

This project leverages Vue.js, Vuetify, and Vite to deliver a modern and interactive web application. It integrates a Leaflet map to provide a seamless interface for visualizing streaming imagery from the imagery catalog. Below is all the necessary information to set up and run the project.

Features​

  • Framework: Built using Vue 3 and Vuetify 3 for a responsive and modern UI.
  • State Management: Utilizes custom state management.
  • Routing: Includes Vue Router for single-page application navigation.
  • Build Tool: Powered by Vite for fast development and build processes.

Node.js and npm Installation Guide​

Windows and macOS Installation​

  1. Download Node.js
    - Go to the Node.js download page and download the latest LTS (Long-Term Support) version, which includes npm.

  2. Install Node.js
    - Open the downloaded installer and follow the installation prompts. - This will install both Node.js and npm.

  3. For Additional Guidance
    - Visit the official Node.js Documentation for more information on setup and usage.

Linux Installation​

For Linux, you can install Node.js and npm via a package manager (like apt for Debian/Ubuntu, or dnf for RHEL/Fedora), or directly using nvm (Node Version Manager) for easier version control.

Using a Package Manager​

  • Debian/Ubuntu: 
    sudo apt update
    sudo apt install -y nodejs npm
    # Run this to check if NodeJS and NPM are installed and verify the version

    node -v   # This should display the Node.js version
    npm -v    # This should display the npm version

Setup Instructions​

  1. Clone the Repository

    Clone the project to your local machine:

    git clone https://github.com/Maxar-Public/mgp-streaming-search.git

  2. Install Dependencies

    Install the necessary dependencies using npm:

    npm install

    (You can also use yarn install or pnpm install.)

  3. Environment Configuration

    Create a .env file and set up environment variables. The file should contain:

    VITE_API_KEY=<your-api-key>

    Replace <your-api-key> with your actual API Key.

    Note: The .env needs to be in the root folder inside 'mgp-streaming-search'

Usage​

Development Server​

To start the development server

npm run dev

This will launch the application at http://localhost:3000.

Note: To run this command and any other command you need to locate yourself where the project is; otherwise, it will throw an error.

Build for Production​

To create an optimized production build:

npm run build

Run Tests​

Run the project unit test using Vitest:

npm run test

Streaming - Imagery API​

Overview​

The Streaming - Imagery API uses the Open Geospatial Consortium (OGC) API services, including Web Feature Service (WFS), Web Map Service (WMS) and Web Map Tile Service (WMTS), to provide RGB imagery and metadata ready for use in a map-like interface.

For example, the Streaming API provides the imagery displayed in the MGP Pro web application and is ideal for use as an imagery layer in GIS software. A single request can return display data showing one or more stacked image products.

In Streaming Search, the following API endpoints are used:

WMS Get Map​

Generates a map based on the input query parameters. In this case, the endpoint will use the legacy identifier property of a feature to know what map area to will the images be displayed. As you zoom in and out of a map, it will bring the images of the map according to the layer.

WFS Get Feature​

Searches for imagery features in the online catalog. The feature coordinates are used to display polygons on the interactive map, while the legacy identifier property of a feature is used to display images within the area of those coordinates.

Filter Parameters Used in the Application​

In the code below, you are able to modify the query of the endpoint by changing the values of the variables that represent the following parameters:

bbox — query
Bounding box in the format "south,west,north,east" in WGS84 decimal degrees. Specifies the coordinates of the square area where the features are located.

acquisitionDate — query
Filtered using the 'Date From' and 'Date To' fields in the application to create a date range for when the features were acquired.

sunElevation — query
Displayed as Sun Angle in app. Users may only enter an angle between 0-90. The features fetched will have a sun elevation angle less than or equal to the specified value.

cloudCover — query
Displayed as Image Cloud Cover in the application. The features will have less or equal of percentage in clouds in images (value between 0-100).

offNadirAngle — query
Displayed as Off nadir Angle in the application. The features will have less than or equal to that angle (value between 0-90).

sensors — query
A comma-separated list of sensors to search features from. If this parameter is not specified, imagery will be retrieved from all available sensors.