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

deploy: 9598b8abeb

Browse Source
This commit is contained in:
bdon
2026-02-03 22:58:48 +00:00
commit b392a31945
55 changed files with 5029 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
examples/openlayers/raster.html Normal file
View File

@@ -0,0 +1,39 @@
<html>
<head>
<title>PMTiles OpenLayers Raster Example</title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.0.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.0.0/ol.css">
<script src="https://unpkg.com/ol-pmtiles@2.0.2/dist/olpmtiles.js"></script>
<style>
body, #map {
height:100vh;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
const rasterLayer = new ol.layer.WebGLTile({
source: new olpmtiles.PMTilesRasterSource({
url:"https://download.mapterhorn.com/planet.pmtiles",
attributions:["https://mapterhorn.com/attribution/"],
tileSize: [512,512]
})
});
ol.proj.useGeographic();
const map = new ol.Map({
layers: [rasterLayer],
target: 'map',
view: new ol.View({
center: [0,0],
zoom: 1,
multiWorld: true
}),
});
</script>
</body>
</html>

46
examples/openlayers/vector.html Normal file
View File

@@ -0,0 +1,46 @@
<html>
<head>
<title>PMTiles OpenLayers Vector Example</title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v9.0.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.0.0/ol.css">
<script src="https://unpkg.com/ol-pmtiles@2.0.2/dist/olpmtiles.js"></script>
<style>
body, #map {
height:100vh;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
const vectorLayer = new ol.layer.VectorTile({
declutter: true,
source: new olpmtiles.PMTilesVectorSource({
url: "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles",
attributions: ["© Land Information New Zealand"]
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 1,
}),
fill: new ol.style.Fill({
color: 'rgba(20,20,20,0.9)',
})
})
});
ol.proj.useGeographic();
const map = new ol.Map({
layers: [vectorLayer],
target: 'map',
view: new ol.View({
center: [172.606201,-43.556510],
zoom: 7
}),
});
</script>
</body>
</html>