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

add JS leaflet/maplibre example files.

Browse Source
This commit is contained in:
Brandon Liu
2022-10-24 20:14:32 +08:00
parent 6a71f48f20
commit d689776a18
2 changed files with 111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
js/examples/leaflet.html Normal file
View File

@@ -0,0 +1,30 @@
<html>
<head>
<title>PMTiles Leaflet Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/pmtiles@2.3.0/dist/index.js"></script>
<style>
body, #map {
height:100vh;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
const map = L.map('map').setView([0, 0], 0);
const p = new pmtiles.PMTiles("https://protomaps.github.io/PMTiles/stamen_toner(raster)CC-BY+ODbL_z3.pmtiles")
p.getHeader().then(h => {
let layer = pmtiles.leafletRasterLayer(p, {
maxzoom:h.maxZoom,
attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
});
layer.addTo(map);
})
</script>
</body>
</html>