diff --git a/js/examples/maplibre_headers.html b/js/examples/maplibre_advanced.html
similarity index 92%
rename from js/examples/maplibre_headers.html
rename to js/examples/maplibre_advanced.html
index ca2083c..d2df3b7 100644
--- a/js/examples/maplibre_headers.html
+++ b/js/examples/maplibre_advanced.html
@@ -10,12 +10,14 @@
                 margin: 0;
             }
             #map {
-                height:100%; width:100%;
+                height:calc(100% - 50px);
+                width:100%;
             }
         </style>
     </head>
     <body>
         <div id="map"></div>
+        Description from PMTiles metadata: <span id="description"></span>
         <script type="text/javascript">
             // Advanced MapLibre example demonstrating PMTiles JavaScript API + pmtiles:// protocol.
 
@@ -31,6 +33,10 @@
             // this is so we share one instance across the JS code and the map renderer
             protocol.add(p);
 
+            p.getMetadata().then((m) => {
+              document.getElementById("description").textContent = m.description;
+            })
+
             // we first fetch the header so we can get the center lon, lat of the map.
             p.getHeader().then((h) => {
               const map = new maplibregl.Map({
