# 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](/docs/sample-projects/discovery-search.md) 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[​](#features "Direct link to 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[​](#nodejs-and-npm-installation-guide "Direct link to Node.js and npm Installation Guide")

### Windows and macOS Installation[​](#windows-and-macos-installation "Direct link to Windows and macOS Installation")

1. **Download Node.js**<br />- Go to the [Node.js download page](https://nodejs.org/) and download the latest **LTS** (Long-Term Support) version, which includes npm.

2. **Install Node.js**<br />- Open the downloaded installer and follow the installation prompts. - This will install both Node.js and npm.

3. **For Additional Guidance**<br />- Visit the official [Node.js Documentation](https://nodejs.org/en/docs/) for more information on setup and usage.

### Linux Installation[​](#linux-installation "Direct link to 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[​](#using-a-package-manager "Direct link to Using a Package Manager")

* **Debian/Ubuntu**:

  ```text
  sudo apt update
  sudo apt install -y nodejs npm

  ```

  ```text
  # 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[​](#setup-instructions "Direct link to Setup Instructions")

1. **Clone the Repository**

   Clone the project to your local machine:

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

   ```

2. **Install Dependencies**

   Install the necessary dependencies using npm:

   ```text
   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:

   ```text
   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[​](#usage "Direct link to Usage")

### Development Server[​](#development-server "Direct link to Development Server")

To start the development server

```text
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[​](#build-for-production "Direct link to Build for Production")

To create an optimized production build:

```text
npm run build

```

### Run Tests[​](#run-tests "Direct link to Run Tests")

Run the project unit test using Vitest:

```text
npm run test

```

## Streaming - Imagery API[​](#streaming---imagery-api "Direct link to Streaming - Imagery API")

### Overview[​](#overview "Direct link to 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 Vantor Hub 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[​](#wms-get-map "Direct link to 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[​](#wfs-get-feature "Direct link to 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[​](#filter-parameters-used-in-the-application "Direct link to 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:

```text
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.

```