mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 19:01:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

rename maplibre_headers to maplibre_advanced; show metadata description (#506)

Browse Source
This commit is contained in:
Brandon Liu
2025-01-06 15:04:07 +08:00
committed by GitHub
parent 9a53ed8495
commit 275b5bcb5d
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/examples/maplibre_headers.html → js/examples/maplibre_advanced.html
View File

@@ -10,12 +10,14 @@
margin: 0; margin: 0;
} }
#map { #map {
height:100%; width:100%; height:calc(100% - 50px);
width:100%;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
Description from PMTiles metadata: <span id="description"></span>
<script type="text/javascript"> <script type="text/javascript">
// Advanced MapLibre example demonstrating PMTiles JavaScript API + pmtiles:// protocol. // 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 // this is so we share one instance across the JS code and the map renderer
protocol.add(p); 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. // we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then((h) => { p.getHeader().then((h) => {
const map = new maplibregl.Map({ const map = new maplibregl.Map({