demos/00-colorramps.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <style>
    body {
      margin: 10px;
      padding: 0;
      font-family: sans-serif;
    }

    #colorramp-contain>* {
      margin-bottom: 6px;
      display: flex;
    }

    #colorramp-contain>div>span {
      width: 185px;
      height: 20px;
      line-height: 20px;
      background: #eeeeee;
      text-align: center;
      margin-right: 5px;
      border-radius: 3px;
      color: #04040496;
      font-size: 12px;
    }

    #colorramp-contain>div>canvas {
      width: calc(100% - 190px);
      border-radius: 3px;
    }


    #colorramp-contain>div:nth-of-type(1)>canvas {
      border: 1px dashed #00000059;
    }
  </style>
</head>

<body>
  <div id="colorramp-contain"></div>

  <script src="../build/maptiler-sdk.umd.min.js"></script>
  <script>
    const colorrampContainer = document.getElementById("colorramp-contain");

    function displayColorRamp(name, colorramp, extraInfo = "") {
      const canvas = colorramp.getCanvasStrip();
      canvas.style.height = "20px";

      const bounds = colorramp.getBounds()

      const div = document.createElement("div");
      const descSpan = document.createElement("span");
      descSpan.innerHTML = `${name}${extraInfo}`;

      div.appendChild(descSpan);
      div.appendChild(canvas);
      colorrampContainer.appendChild(div);
    };

    Object.keys(maptilersdk.ColorRampCollection).forEach((k, i) => {
      const colorramp = maptilersdk.ColorRampCollection[k];
      displayColorRamp(k, colorramp);

      // if (i === 0) return;

      // displayColorRamp(k, colorramp.resample("ease-in-square"), ', resampling method: "ease-in-square"')
      // displayColorRamp(k, colorramp.resample("ease-in-sqrt"), ', resampling method: "ease-in-sqrt"')
      // displayColorRamp(k, colorramp.resample("ease-in-exp"), ', resampling method: "ease-in-exp"')

      // displayColorRamp(k, colorramp.resample("ease-out-square"), ', resampling method: "ease-out-square"')
      // displayColorRamp(k, colorramp.resample("ease-out-sqrt"), ', resampling method: "ease-out-sqrt"')
      // displayColorRamp(k, colorramp.resample("ease-out-exp"), ', resampling method: "ease-out-exp"')

      // colorrampContainer.appendChild( document.createElement("p") );
    });
  </script>
</body>

</html>