Website updates

Author: tschaub

dist/en/main/apidoc/module-ol_source_TileDebug-TileDebug.html

@@ -166,7 +166,7 @@ <h4 class="name">
 
         <div class="tag-source">
             <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/source/TileDebug.js">source/TileDebug.js</a>,
-            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/source/TileDebug.js#L36">line 36</a>
+            <a href="https://github.com/openlayers/openlayers/blob/main/src/ol/source/TileDebug.js#L37">line 37</a>
         </div>
 
     </div>
@@ -368,6 +368,33 @@ <h4 class="name">
         </tr>
 
 
+
+        <tr class="">
+            
+                <td class="name"><code>color</code></td>
+            
+
+            
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
+
+
+                
+                    (defaults to 'grey')
+                
+            
+            </td>
+
+            
+
+            <td  class="description last">
+                
+                <p>CSS color to fill text and stroke grid lines of each tile.</p></td>
+        </tr>
+
+	
 	</tbody>
 </table>
 

dist/en/main/apidoc/module-ol_source_TileDebug.html

@@ -355,6 +355,31 @@ <h5 class="subsection-title">Properties:</h5>
         </tr>
 
 
+
+        <tr>
+            
+                <td class="name"><code>color</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
+
+
+                
+                    <br>(defaults to 'grey')
+                
+            
+            </td>
+
+            <td class="description last">
+                <p>CSS color to fill text and stroke grid lines of each tile.</p>
+                
+            </td>
+        </tr>
+
+	
 	</tbody>
 </table></dl>
 

dist/en/main/examples/common.js

@@ -29,6 +29,10 @@ export type Options = {
      * Should include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
      */
     template?: string | undefined;
+    /**
+     * CSS color to fill text and stroke grid lines of each tile.
+     */
+    color?: string | undefined;
 };
 /**
  * @typedef {Object} Options
@@ -44,6 +48,7 @@ export type Options = {
  * If both `source` and individual options are specified the individual options will have precedence.
  * @property {string} [template='z:{z} x:{x} y:{y}'] Template for labeling the tiles.
  * Should include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
+ * @property {string} [color='grey'] CSS color to fill text and stroke grid lines of each tile.
  */
 /**
  * @classdesc

dist/en/main/examples/common.js.map

@@ -24,6 +24,7 @@ import ImageTile from './ImageTile.js';
  * If both `source` and individual options are specified the individual options will have precedence.
  * @property {string} [template='z:{z} x:{x} y:{y}'] Template for labeling the tiles.
  * Should include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
+ * @property {string} [color='grey'] CSS color to fill text and stroke grid lines of each tile.
  */
 
 /**
@@ -44,6 +45,7 @@ class TileDebug extends ImageTile {
     options = options || {};
     const template = options.template || 'z:{z} x:{x} y:{y}';
     const source = options.source;
+    const color = options.color || 'grey';
 
     super({
       transition: 0,
@@ -97,10 +99,10 @@ class TileDebug extends ImageTile {
         const [width, height] = this.getTileSize(z);
         const context = createCanvasContext2D(width, height);
 
-        context.strokeStyle = 'grey';
+        context.strokeStyle = color;
         context.strokeRect(0.5, 0.5, width + 0.5, height + 0.5);
 
-        context.fillStyle = 'grey';
+        context.fillStyle = color;
         context.strokeStyle = 'white';
         context.textAlign = 'center';
         context.textBaseline = 'middle';