XYZ Source change of URL template parameters

[lubojr]

We have a following URL template string for an XYZ source on a OpenLayers TileLayer:

https://reccap2.api.dev.brockmann-consult.de/api/tiles/cop28~reccap2-9x108x139-0.0.1.zarr/AGC_LVOD_amazonia_smooth_mean_crop/{z}/{y}/{x}?crs=EPSG:3857&time={time}&vmin={vmin}&vmax={vmax}&cbar={cbar}

And we want some parameters to be supplied by the user (vmax, vmin, cbar) by an input field (probably being part of the LayerControl), as it controls visualisation.

Vmin and vmax are numerical inputs (float values), while cbar is a string input. The rest of the template will be filled either by OpenLayers or other parts of the integrating app having access to the OL Source (TimePicker component), so they should stay not evaluated. The default selected values, allowed ranges and label should be configurable.

Example filled template URL: https://reccap2.api.dev.brockmann-consult.de/api/tiles/cop28~reccap2-9x108x139-0.0.1.zarr/AGC_LVOD_amazonia_smooth_mean_crop/5/16/9?crs=EPSG:3857&time=2018-01-01T00:00:00Z&vmin=0&vmax=150&cbar=rain

[lubojr]

Some examples of other integrations: https://reccap2.api.dev.brockmann-consult.de/api/viewer/ - legend on the top right is clickable and used for modifying layer source.

A not so beautiful example from the old VS Client based on EOxC just for orientation:

[spectrachrome]

Do I understand correctly that a custom layer definition is needed here for the EOxLayerControl in order to have a customizable map layer based on the given endpoint?

[silvester-pari]

I did some initial experiments in https://codesandbox.io/s/xyz-forked-pnxy5n?file=/main.js, here are my thoughts:

Configuration format

It would probably make sense to configure the "layer config" or "layer style" as part of the JSON layer definition. Ideally, each layer can have one or multiple config options to modify the layer (e.g. url params, band manipulation in GeoTiffs etc.). See below for a possible config structure.

Elements structure

Within the layerConfig.js component, we previously had the opacity slider and the delete button. This is not used any longer, and could be used for the described layer config instead. In the layerTools, inside the config-content slot, we could render the mentioned one or more config settings forms.

eox-layercontrol
> eox-layercontrol-layer-list
> > eox-layercontrol-layer
> > > eox-layercontrol-layer-tools
> > > > <div slot="config-content">
> > > > > eox-layercontrol-layerconfig // NEW
> > > > > > config A
> > > > > > config B
> > > > > > config C
            </div>

Technologies used

Probably the most standardized way to define input forms is by using a JSON Schema. This would allow maximum flexibility for defining the forms. Since we need json-schema renderable forms also in other places, it would be nice to have an extra element for that. Initial setup of a reusable json form element are done inside the https://github.com/EOX-A/EOxElements/tree/jsonform/chore/initial-setup branch. This uses @json-editor/json-editor under the hood, which doesn't need any rendering framework and seems to be extendible (see codesandbox).

So, inside the layerconfig, the structure could be

eox-layercontrol-layerconfig
> (case "urlParams") eox-layercontrol-layerconfig-urlparams
> > eox-jsonform

---

Possible config structure:

  {
    type: "Tile",
    source: {
      type: "XYZ"
    },
    styleConfig: [
      {
        type: "urlParams",
        options: {
          properties: {
            vmin: {
              type: "number"
            },
            vmax: {
              type: "number"
            },
            cbar: {
              type: "array",
              values: [
                "foo",
                "bar"
              ]
            },
          },
        }
      }
    ]
  },
  {
    type: "Tile",
    source: {
      type: "GeoTIFF"
    },
    layerConfig: [
      {
        type: "bandStretch",
        options: {
          bands: [0, 1, 2],
          min: true,
          max. false
        }
      },
      {
        type: "bandSwap",
        options: {
          bands: [0, 1, 2, 3, 4],
        }
      }
    ]
  }
]