[Geospatial Data] Allow the user to interact with the Tree Cover Loss layer

This PR allows the user to interact with the Tree Cover Loss layer i.e. changing the start and end years.

In order to let the user change the start and end years, I've created a new attribute in the Layer model called ui_settings.

How to test

On your local instance of Strapi, create a new layer as follows (don't forget to assign it to a layer group!):

type: deckgl
config:

{
  "@@type": "DecodeLayer",
  "source": {
    "type": "raster",
    "tiles": [
      "https://tiles.globalforestwatch.org/umd_tree_cover_loss/v1.10/tcd_30/{z}/{x}/{y}.png"
    ],
    "maxzoom": 12,
    "minzoom": 2
  },
  "styles": [
    {
      "id": "tree-cover-loss",
      "type": "raster",
      "paint": {
        "raster-opacity": {
          "o": "@@#params.opacity",
          "@@function": "setOpacity"
        }
      },
      "layout": {
        "visibility": {
          "v": "@@#params.visibility",
          "type": "deckgl",
          "@@function": "setVisibility"
        }
      }
    }
  ],
  "decodeParams": {
    "endYear": "@@#params.endYear",
    "startYear": "@@#params.startYear"
  },
  "decodeFunction": "// values for creating power scale, domain (input), and range (output)\nfloat domainMin = 0.;\nfloat domainMax = 255.;\nfloat rangeMin = 0.;\nfloat rangeMax = 255.;\nfloat exponent = zoom < 13. ? 0.3 + (zoom - 3.) / 20. : 1.;\nfloat intensity = color.r * 255.;\n// get the min, max, and current values on the power scale\nfloat minPow = pow(domainMin, exponent - domainMin);\nfloat maxPow = pow(domainMax, exponent);\nfloat currentPow = pow(intensity, exponent);\n// get intensity value mapped to range\nfloat scaleIntensity = ((currentPow - minPow) / (maxPow - minPow) * (rangeMax - rangeMin)) + rangeMin;\n// a value between 0 and 255\ncolor.a *= zoom < 13. ? scaleIntensity / 255. : color.g;\nfloat year = 2000.0 + (color.b * 255.);\n// map to years\nif (year >= startYear && year <= endYear && year >= 2001.) {\n  color.r = 220. / 255.;\n  color.g = (72. - zoom + 102. - 3. * scaleIntensity / zoom) / 255.;\n  color.b = (33. - zoom + 153. - intensity / zoom) / 255.;\n} else {\n  color.a = 0.;\n}"
}

params_config:

[
  {
    "key": "opacity",
    "default": 1
  },
  {
    "key": "visibility",
    "default": true
  },
  {
    "key": "startYear",
    "default": 2001
  },
  {
    "key": "endYear",
    "default": 2022
  }
]

ui_config:

{
  "@@type": "TreeCoverLossSettings",
  "endYear": "@@#params.endYear",
  "startYear": "@@#params.startYear",
  "description": "Displaying Tree cover loss with >30% canopy density."
}

Tracking

ORC-94 - Land cover/land use layers (GFW)
- ORC-345 - FE - Implement the year selector for the Tree Cover Loss layer

Orcasa-Platform / orcasa

[Geospatial Data] Allow the user to interact with the Tree Cover Loss layer #110

How to test

Tracking