Updates

geomatico · Jul 16, 2024 · ea1be9f · ea1be9f
1 parent 37443d1
commit ea1be9f
Show file tree

Hide file tree

Showing 7 changed files with 365 additions and 6 deletions.
diff --git a/color-ramp.html b/color-ramp.html
@@ -30,7 +30,7 @@
   map.on('load', () => {
     map.addSource('imageSource', {
       type: 'raster',
-      url: 'cog://./data/kriging.tif#color:BrewerSpectral9,1.7084054885838,1.7919403772937',
+      url: 'cog://./data/kriging.tif#color:BrewerSpectral7,1.7084054885838,1.7919403772937,c',
     });
 
     map.addLayer({

diff --git a/colors.html b/colors.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Color Ramp cheatsheet</title>
+  <link rel="stylesheet" href="vanilla.css">
+  <style>
+    .colorItem {
+      display: inline-block;
+      width: 1px;
+      height: 20px;
+    }
+  </style>
+  <script src="dist/index.js"></script>
+</head>
+<body>
+<h1>Color Ramp cheatsheet</h1>
+<div id="colorSchemes"></div>
+<script>
+  const {colorInterpolator, colorSchemeNames} = MaplibreCOGProtocol;
+
+  const rows = colorSchemeNames.map(colorScheme => {
+    const interpolateDisc = colorInterpolator({colorScheme, min: 0,max: 230});
+    const discreteRamp = Array.from({length: 231}, (x, i) => {
+      const [r, g, b] = interpolateDisc(i);
+      return `<span class="colorItem" style="background: rgb(${r}, ${g}, ${b})"></span>`;
+    }).join('');
+
+    const interpolateCont = colorInterpolator({colorScheme, min: 0, max: 230, isContinuous: true});
+    const continuousRamp = Array.from({length: 231}, (x, i) => {
+      const [r, g, b] = interpolateCont(i);
+      return `<span class="colorItem" style="background: rgb(${r}, ${g}, ${b})"></span>`;
+    }).join('');
+
+    return `<tr>
+      <td>${colorScheme}</td>
+      <td>${discreteRamp}</td>
+      <td>${continuousRamp}</td>
+      </tr>`;
+  }).join('');
+
+  document.getElementById('colorSchemes').innerHTML = `<table>
+    <tr>
+      <th>colorScheme</th>
+      <th>discrete</th>
+      <th>continuous</th>
+    </tr>
+
+    ${rows}
+  </table>`;
+
+</script>
+</body>
+</html>
diff --git a/dist/colorInterpolator.d.ts b/dist/colorInterpolator.d.ts
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -1,2 +1,3 @@
 import cogProtocol from '@/cogProtocol';
-export { cogProtocol };
+import { colorInterpolator, colorSchemeNames } from '@/colorInterpolator';
+export { cogProtocol, colorInterpolator, colorSchemeNames };
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@ <h2>Examples</h2>
 
 <h2>Resources</h2>
 <ul>
+  <li><a href="colors.html">Color Ramp cheatsheet</a></li>
   <li><a href="http://github.com/geomatico/maplibre-cog-protocol">GitHub repository</a></li>
 </ul>
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ <h2>Examples</h2> @@
     <h2>Resources</h2>
     <ul>
+      <li><a href="colors.html">Color Ramp cheatsheet</a></li>
       <li><a href="http://github.com/geomatico/maplibre-cog-protocol">GitHub repository</a></li>
     </ul>
@@ Expand Down @@