mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 02:41:09 +00:00
34 lines
1.3 KiB
HTML
34 lines
1.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>PMTiles Leaflet Example</title>
|
|
<meta charset="utf-8"/>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.0/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.0/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/pmtiles@4.3.0/dist/pmtiles.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://pmtiles.io/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>
|