rename maplibre_headers to maplibre_advanced; show metadata descripti…

…on (#506)
protomaps · Jan 6, 2025 · 275b5bc · 275b5bc
1 parent 9a53ed8
commit 275b5bc
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/js/examples/maplibre_headers.html → js/examples/maplibre_advanced.html b/js/examples/maplibre_headers.html → 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({