Skip to main content

CQL Playground

The CQL Playground lets users learn how to construct WMS and WFS CQL Queries and sorting used in WMS and WFS queries to OGC API endpoints.

This project leverages Vue.js, Vuetify, and Vite to deliver a modern and interactive web application. It integrates a Leaflet map to provide an interactive interface for retrieving, visualizing, and analyzing geospatial data.. 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.

Installation​

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-cql-playground.git

  2. Install Dependencies

    Install the necessary dependencies using npm:

    npm install

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

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

About the CQL Playground​

Overview​

The CQL Playground allows users to interact with imagery services through filtering and sorting capabilities via WFS and WMS.

  • With WFS, you can retrieve detailed metadata for basemap imagery that matches specific criteria, such as location, acquisition date, and cloud coverage.
  • WMS provides a visual representation of the basemap imagery directly on a map. This tool enables efficient exploration and visualization of Vivid Basemaps for research and analysis.

Key Parameters Used In Example​

Filters​

These parameters allow you to refine your search results based on specific criteria. Examples of how each filter is used are available in the search panel.

  • Catalog ID: Display a specific image using its Catalog ID.

    • Field: legacyIdentifier
    • Example: legacyIdentifier='1020010107DFF400'

  • Date Range: Show images within a specific date range.

    • Field: acquisitionDate
    • Example: acquisitionDate > '2022-08-15' AND acquisitionDate < '2024-08-15'

  • Feature ID: Display images by their Feature ID, used for the image's vector footprint.

    • Field: featureId
    • Example: featureId='99cdc53d-bba1-8eca-e19a-f25ddc4d540d'

  • Ground Sample Distance: Filter images by ground sample distance in meters (pixel resolution).

    • Field: groundSampleDistance
    • Example: groundSampleDistance BETWEEN 0.7 AND 1.0

  • Satellite Name: Display images from specific satellites (e.g., WV01, WV02, GE01).

    • Field: source
    • Examples: source = 'WV01' or source IN ('WV03_VNIR', 'LG01')

  • Cloud Cover Percent: Filter images by the percentage of cloud coverage.

    • Field: cloudCover
    • Example: cloudCover < 20

  • Off-nadir Angle: Filter images by their off-nadir angle (lower values indicate straighter down views).

    • Field: offNadirAngle
    • Example: offNadirAngle < 10

  • Sun Angle: Filter images by sun angle.

    • Field: sunElevation
    • Example: sunElevation > 60

Sort​

These parameters allow you to sort the search results. Examples of usage are provided in the search panel.

  • Date Range: Sort results by acquisition date.
    • Examples:
      • Ascending: acquisitionDate A
      • Descending: acquisitionDate D
  • Ground Sample Distance: Sort results by ground sample distance.
    • Examples:
      • Ascending: groundSampleDistance A
      • Descending: groundSampleDistance D

For more information, please refer to the API Documentation.