Debug tiles (#25)

* add number tiles * add number hillshade and terrain ruffles tiles * make terrain ruffles a little sharper * Update README
maplibre · Sep 27, 2024 · 45c11b5 · 45c11b5
1 parent e08e66c
commit 45c11b5
Show file tree

Hide file tree

Showing 77 changed files with 200 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -7,6 +7,7 @@ You can see the live demos at the following links. You can also access the style
 | [MapLibre World](#maplibre-world-demo-map) | https://demotiles.maplibre.org | https://demotiles.maplibre.org/style.json
 | [OpenMapTiles](tiles-omt),</br>centered around Innsbruck, Austria | https://demotiles.maplibre.org/tiles-omt | https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json
 | [Terrain](terrain-tiles),</br>centered around Innsbruck, Austria | https://demotiles.maplibre.org/terrain-tiles | https://demotiles.maplibre.org/styles/osm-bright-gl-terrain/style.json
+| [Debug](debug-tiles),</br>demonstrating tile zoom variation | https://demotiles.maplibre.org/debug-tiles | 
 
 ## MapLibre World demo map
 
@@ -54,10 +55,22 @@ Design is heavily inspired by the the Geography Class map style from [klokantech
 
 The map labels are using the Open Sans SemiBold font.
 
+## Maplibre Debug Tiles
+
+The [number](debug-tiles/number) tiles contain a black number indicating the tile's zoom level on a colored background, with a black border. These tiles can be used to investigate which zoom levels are loaded.
+
+![0](debug-tiles/number/0.png)![22](debug-tiles/number/22.png)
+
+The [number-hillshade](debug-tiles/number-hillshade) tiles render the zoom level as an elevation that displays the number when used as a hillshade.
+
+The [terrain-ruffles](debug-tiles/terrain-ruffles) tiles contain a ruffle around the border, which helps visualize bouundaries between loaded raster tiles.
+
 ## Contributors
 
 the [MapLibre World](#maplibre-world-demo-map) demo was kindly provided by the [MapTiler](https://www.maptiler.com/) team ([@klokan](https://github.com/klokan), [@nbozon](https://github.com/nbozon), [@petr-pokorny-1](https://github.com/petr-pokorny-1), [@tomasklanica](https://github.com/tomasklanica)). 
 
-the [Terrain](terrain-tiles) and [OpenMapTiles](tiles-omt) demos were provided by [@acalcutt](https://github.com/acalcutt) with styles based on [OSM Bright](https://github.com/openmaptiles/osm-bright-gl-style)
+the [Terrain](terrain-tiles) and [OpenMapTiles](tiles-omt) demos were provided by [@acalcutt](https://github.com/acalcutt) with styles based on [OSM Bright](https://github.com/openmaptiles/osm-bright-gl-style).
 
 The font PBFs were generated using the scripts and source fonts from https://github.com/openmaptiles/fonts.
+
+The debug tiles were provided by [@NathanMOlson](https://github.com/NathanMOlson).
diff --git a/debug-tiles/index.html b/debug-tiles/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8' />
+    <title>MapLibre Demotile - Numbers</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <style>
+        body { margin:0; padding:0; }
+        #map { position:absolute; top:0; bottom:0; width:100%; }
+    </style>
+</head>
+<body>
+
+<div id='map'></div>
+<script>
+var map = window.map = new maplibregl.Map({
+    container: 'map',
+    zoom: 9,
+    center: [0.0, 0.0],
+    hash: true,
+    style: {
+        version: 8,
+        sources: {
+            number: {
+                type: 'raster',
+                url: 'https://demotiles.maplibre.org/debug-tiles/number/tiles.json',
+                tileSize: 256,
+                maxzoom: 22
+            },
+            terrainSource: {
+                type: 'raster-dem',
+                url: 'https://demotiles.maplibre.org/debug-tiles/terrain-ruffles/tiles.json',
+                tileSize: 256
+            },
+            hillshadeSource: {
+                type: 'raster-dem',
+                url: 'https://demotiles.maplibre.org/debug-tiles/number-hillshade/tiles.json',
+                tileSize: 256
+            }
+        },
+        layers: [
+            {
+                id: 'number',
+                type: 'raster',
+                source: 'number'
+            },
+            {
+                id: 'hills',
+                type: 'hillshade',
+                source: 'hillshadeSource',
+                layout: {visibility: 'visible'},
+                paint: {'hillshade-shadow-color': '#473B24'}
+            }
+        ],
+        terrain: {
+            source: 'terrainSource',
+            exaggeration: 1
+        },
+        sky: {}
+    },
+    maxZoom: 18,
+    maxPitch: 85
+});
+
+map.addControl(
+    new maplibregl.NavigationControl({
+        visualizePitch: true,
+        showZoom: true,
+        showCompass: true
+    })
+);
+
+map.addControl(
+    new maplibregl.TerrainControl({
+        source: 'terrainSource',
+        exaggeration: 1
+    })
+);
+</script>
+
+</body>
+</html>
diff --git a/debug-tiles/number-hillshade/0.png b/debug-tiles/number-hillshade/0.png
diff --git a/debug-tiles/number-hillshade/1.png b/debug-tiles/number-hillshade/1.png
diff --git a/debug-tiles/number-hillshade/10.png b/debug-tiles/number-hillshade/10.png
diff --git a/debug-tiles/number-hillshade/11.png b/debug-tiles/number-hillshade/11.png
diff --git a/debug-tiles/number-hillshade/12.png b/debug-tiles/number-hillshade/12.png
diff --git a/debug-tiles/number-hillshade/13.png b/debug-tiles/number-hillshade/13.png
diff --git a/debug-tiles/number-hillshade/14.png b/debug-tiles/number-hillshade/14.png
diff --git a/debug-tiles/number-hillshade/15.png b/debug-tiles/number-hillshade/15.png
diff --git a/debug-tiles/number-hillshade/16.png b/debug-tiles/number-hillshade/16.png
diff --git a/debug-tiles/number-hillshade/17.png b/debug-tiles/number-hillshade/17.png
diff --git a/debug-tiles/number-hillshade/18.png b/debug-tiles/number-hillshade/18.png
diff --git a/debug-tiles/number-hillshade/19.png b/debug-tiles/number-hillshade/19.png
diff --git a/debug-tiles/number-hillshade/2.png b/debug-tiles/number-hillshade/2.png
diff --git a/debug-tiles/number-hillshade/20.png b/debug-tiles/number-hillshade/20.png
diff --git a/debug-tiles/number-hillshade/21.png b/debug-tiles/number-hillshade/21.png
diff --git a/debug-tiles/number-hillshade/22.png b/debug-tiles/number-hillshade/22.png
diff --git a/debug-tiles/number-hillshade/3.png b/debug-tiles/number-hillshade/3.png
diff --git a/debug-tiles/number-hillshade/4.png b/debug-tiles/number-hillshade/4.png
diff --git a/debug-tiles/number-hillshade/5.png b/debug-tiles/number-hillshade/5.png
diff --git a/debug-tiles/number-hillshade/6.png b/debug-tiles/number-hillshade/6.png
diff --git a/debug-tiles/number-hillshade/7.png b/debug-tiles/number-hillshade/7.png
diff --git a/debug-tiles/number-hillshade/8.png b/debug-tiles/number-hillshade/8.png
diff --git a/debug-tiles/number-hillshade/9.png b/debug-tiles/number-hillshade/9.png
diff --git a/debug-tiles/number-hillshade/metadata.json b/debug-tiles/number-hillshade/metadata.json
@@ -0,0 +1,7 @@
+{
+    "format": "png",
+    "name": "number-hillshade",
+    "description": "number-hillshade",
+    "version": "1",
+    "type": "baselayer"
+}
diff --git a/debug-tiles/number-hillshade/tiles.json b/debug-tiles/number-hillshade/tiles.json
@@ -0,0 +1,27 @@
+{
+    "tiles": [
+        "https://demotiles.maplibre.org/debug-tiles/number-hillshade/{z}.png"
+    ],
+    "name": "number-hillshade",
+    "format": "png",
+    "basename": "number-hillshade",
+    "id": "number-hillshade",
+    "description": "number-hillshade",
+    "version": "1",
+    "type": "baselayer",
+    "minzoom": 0,
+    "maxzoom": 22,
+    "tileSize": 256,
+    "bounds": [
+        -180,
+        -85.05112877980659,
+        180,
+        85.0511287798066
+    ],
+    "center": [
+        0,
+        0,
+        9
+    ],
+    "tilejson": "2.0.0"
+}
diff --git a/debug-tiles/number/0.png b/debug-tiles/number/0.png
diff --git a/debug-tiles/number/1.png b/debug-tiles/number/1.png
diff --git a/debug-tiles/number/10.png b/debug-tiles/number/10.png
diff --git a/debug-tiles/number/11.png b/debug-tiles/number/11.png
diff --git a/debug-tiles/number/12.png b/debug-tiles/number/12.png
diff --git a/debug-tiles/number/13.png b/debug-tiles/number/13.png
diff --git a/debug-tiles/number/14.png b/debug-tiles/number/14.png
diff --git a/debug-tiles/number/15.png b/debug-tiles/number/15.png
diff --git a/debug-tiles/number/16.png b/debug-tiles/number/16.png
diff --git a/debug-tiles/number/17.png b/debug-tiles/number/17.png
diff --git a/debug-tiles/number/18.png b/debug-tiles/number/18.png
diff --git a/debug-tiles/number/19.png b/debug-tiles/number/19.png
diff --git a/debug-tiles/number/2.png b/debug-tiles/number/2.png
diff --git a/debug-tiles/number/20.png b/debug-tiles/number/20.png
diff --git a/debug-tiles/number/21.png b/debug-tiles/number/21.png
diff --git a/debug-tiles/number/22.png b/debug-tiles/number/22.png
diff --git a/debug-tiles/number/3.png b/debug-tiles/number/3.png
diff --git a/debug-tiles/number/4.png b/debug-tiles/number/4.png
diff --git a/debug-tiles/number/5.png b/debug-tiles/number/5.png
diff --git a/debug-tiles/number/6.png b/debug-tiles/number/6.png
diff --git a/debug-tiles/number/7.png b/debug-tiles/number/7.png
diff --git a/debug-tiles/number/8.png b/debug-tiles/number/8.png
diff --git a/debug-tiles/number/9.png b/debug-tiles/number/9.png
diff --git a/debug-tiles/number/metadata.json b/debug-tiles/number/metadata.json
@@ -0,0 +1,7 @@
+{
+    "format": "png",
+    "name": "number",
+    "description": "number",
+    "version": "1",
+    "type": "baselayer"
+}
diff --git a/debug-tiles/number/tiles.json b/debug-tiles/number/tiles.json
@@ -0,0 +1,27 @@
+{
+    "tiles": [
+        "https://demotiles.maplibre.org/debug-tiles/number/{z}.png"
+    ],
+    "name": "number",
+    "format": "png",
+    "basename": "number",
+    "id": "number",
+    "description": "number",
+    "version": "1",
+    "type": "baselayer",
+    "minzoom": 0,
+    "maxzoom": 22,
+    "tileSize": 256,
+    "bounds": [
+        -180,
+        -85.05112877980659,
+        180,
+        85.0511287798066
+    ],
+    "center": [
+        0,
+        0,
+        9
+    ],
+    "tilejson": "2.0.0"
+}
diff --git a/debug-tiles/terrain-ruffles/0.png b/debug-tiles/terrain-ruffles/0.png
diff --git a/debug-tiles/terrain-ruffles/1.png b/debug-tiles/terrain-ruffles/1.png
diff --git a/debug-tiles/terrain-ruffles/10.png b/debug-tiles/terrain-ruffles/10.png
diff --git a/debug-tiles/terrain-ruffles/11.png b/debug-tiles/terrain-ruffles/11.png
diff --git a/debug-tiles/terrain-ruffles/12.png b/debug-tiles/terrain-ruffles/12.png
diff --git a/debug-tiles/terrain-ruffles/13.png b/debug-tiles/terrain-ruffles/13.png
diff --git a/debug-tiles/terrain-ruffles/14.png b/debug-tiles/terrain-ruffles/14.png
diff --git a/debug-tiles/terrain-ruffles/15.png b/debug-tiles/terrain-ruffles/15.png
diff --git a/debug-tiles/terrain-ruffles/16.png b/debug-tiles/terrain-ruffles/16.png
diff --git a/debug-tiles/terrain-ruffles/17.png b/debug-tiles/terrain-ruffles/17.png
diff --git a/debug-tiles/terrain-ruffles/18.png b/debug-tiles/terrain-ruffles/18.png
diff --git a/debug-tiles/terrain-ruffles/19.png b/debug-tiles/terrain-ruffles/19.png
diff --git a/debug-tiles/terrain-ruffles/2.png b/debug-tiles/terrain-ruffles/2.png
diff --git a/debug-tiles/terrain-ruffles/20.png b/debug-tiles/terrain-ruffles/20.png
diff --git a/debug-tiles/terrain-ruffles/21.png b/debug-tiles/terrain-ruffles/21.png
diff --git a/debug-tiles/terrain-ruffles/22.png b/debug-tiles/terrain-ruffles/22.png
diff --git a/debug-tiles/terrain-ruffles/3.png b/debug-tiles/terrain-ruffles/3.png
diff --git a/debug-tiles/terrain-ruffles/4.png b/debug-tiles/terrain-ruffles/4.png
diff --git a/debug-tiles/terrain-ruffles/5.png b/debug-tiles/terrain-ruffles/5.png
diff --git a/debug-tiles/terrain-ruffles/6.png b/debug-tiles/terrain-ruffles/6.png
diff --git a/debug-tiles/terrain-ruffles/7.png b/debug-tiles/terrain-ruffles/7.png
diff --git a/debug-tiles/terrain-ruffles/8.png b/debug-tiles/terrain-ruffles/8.png
diff --git a/debug-tiles/terrain-ruffles/9.png b/debug-tiles/terrain-ruffles/9.png
diff --git a/debug-tiles/terrain-ruffles/metadata.json b/debug-tiles/terrain-ruffles/metadata.json
@@ -0,0 +1,7 @@
+{
+    "format": "png",
+    "name": "terrain-ruffles",
+    "description": "terrain-ruffles",
+    "version": "1",
+    "type": "baselayer"
+}
diff --git a/debug-tiles/terrain-ruffles/tiles.json b/debug-tiles/terrain-ruffles/tiles.json
@@ -0,0 +1,27 @@
+{
+    "tiles": [
+        "https://demotiles.maplibre.org/debug-tiles/terrain-ruffles/{z}.png"
+    ],
+    "name": "terrain-ruffles",
+    "format": "png",
+    "basename": "terrain-ruffles",
+    "id": "terrain-ruffles",
+    "description": "terrain-ruffles",
+    "version": "1",
+    "type": "baselayer",
+    "minzoom": 0,
+    "maxzoom": 22,
+    "tileSize": 256,
+    "bounds": [
+        -180,
+        -85.05112877980659,
+        180,
+        85.0511287798066
+    ],
+    "center": [
+        0,
+        0,
+        9
+    ],
+    "tilejson": "2.0.0"
+}