1 of 21

Visualizing Queries

A User-Friendly CQL2 Filter Builder for Geospatial Data

Noam Rabi, July 2025

2 of 21

Hi,

I’m Noam

2

  • Senior Front-End Engineer at UP42
  • Based in Berlin
  • My favourite ice cream flavour�is Chocolate

​

3 of 21

Why visualize queries?

INTRO

UP42’s Console

We want to make

exploring geospatial

datasets easier.

​

3

Web interfaces

are good for that!

4 of 21

Why visualize queries?

INTRO

STAC Browser

Copernicus Data Space Ecosystem

Planetary Computer

How to translate the form to a query?

Unfortunately, there was no

JavaScript library to help me…

�So I made one.

Planetary Computer

4

5 of 21

CQL2-filters-parser library

INTRO

5

  • Unified way to parse CQL2 Text and JSON encodings
  • Runs in Browsers and JavaScript hosts
  • Extendable to your needs

6 of 21

CQL2 filters

What is CQL2 and why is it helpful?

7 of 21

STAC vs CQL2

CQL2 FILTERS

a way to organize geospatial data

  • STAC Item
  • STAC Catalog

​

​

a language to describe filter expressions for spatial and temporal data

Spec

Spec

7

CQL2�Common Query Language

STAC�SpatioTemporal Asset Catalog

8 of 21

Two encodings

CQL2 FILTERS

CQL2 comes in two encodings, �Text and JSON

  • Query language
  • Only operators and operands
  • No flow control, loops, recursion

8

9 of 21

Two encodings

CQL2 FILTERS

Differences:

  • Audience
  • Usage

9

10 of 21

Building blocks

CQL2 FILTERS

​

​

  • Literals: strings, numbers, booleans, etc.
  • Properties: the variables of CQL2
  • Operators: logical, comparison, arithmetic
  • Combining: binary expression, function, etc.
  • Spatial: bbox, geometries
  • Temporal: timestamp, date, interval

All of these nodes expressions in a �tree data structure.

10

11 of 21

Parsing Text,

Parsing JSON

12 of 21

Parsers

PARSING TEXT, PARSING JSON

​

12

Text -> tokenizer -> parser -> Expression tree

​

JSON -> depth first parser -> Expression tree

​

parse() -> Expression tree

13 of 21

Parsers

PARSING TEXT, PARSING JSON

13

14 of 21

Visitors welcome

Especially for this library :)

15 of 21

Visitor design pattern

VISITORS WELCOME

​

​

​

Separates the operation from the object.

Allows defining new operations on data structure.

15

16 of 21

Visitor design pattern

VISITORS WELCOME

​

​

​

Each node type has a corresponding visit function:

​

  • Literal -> visitLiteralExpression()
  • Operator -> visitOperatorExpression()
  • Property -> visitPropertyExpression()
  • Binary expression -> visitBinaryExpression()

​

The visitor object is something that implements visit functions

​

​

16

17 of 21

HTML Builder Visitor

VISITORS WELCOME

​

​

​

The visitor object is something that implements visit functions

​

​

​

​

17

18 of 21

HTML Builder Visitor

VISITORS WELCOME

​

​

​

18

TODO

19 of 21

HTML Builder Visitor

VISITORS WELCOME

​

​

19

20 of 21

Wrapping up

21 of 21

CQL2-filters-parser library

WRAPPING UP

GitHub repository

21

  • Unified way to parse CQL2 Text and JSON encodings
  • Runs in Browsers and JavaScript hosts
  • Extendable to your needs

CQL2 Playground - https://noamra.github.io/ogc-cql2-filters

GitHub repository - https://github.com/NoamRa/ogc-cql2-filters�npm i cql2-filters-parser