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

bump JS example versions; add experimental OpenLayers example [#3]

Browse Source
This commit is contained in:
Brandon Liu
2022-10-28 09:56:22 +08:00
parent 76063ccadb
commit 84710d250f
3 changed files with 91 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/examples/leaflet.html
View File

@@ -4,7 +4,7 @@
<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>
<script src="https://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>
<style>
body, #map {
height:100vh;

4
js/examples/maplibre.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/pmtiles@2.3.0/dist/index.js"></script>
<script src="https://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>
<style>
body {
margin: 0;
@@ -21,7 +21,7 @@
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
let PMTILES_URL = "https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles";
let PMTILES_URL = "protomaps(vector)ODbL_firenze.pmtiles";
const p = new pmtiles.PMTiles(PMTILES_URL)

88
js/examples/openlayers.html Normal file
View File

@@ -0,0 +1,88 @@
<html>
<head>
<title>PMTiles OpenLayers Example</title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
<script src="https://unpkg.com/pmtiles@2.4.0/dist/index.js"></script>
<style>
body, #map {
height:100vh;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
class OLPMTilesSource {
constructor(url) {
this._url = url;
this._p = new pmtiles.PMTiles(url)
}
url = () => {
return "pmtiles://" + this._url + "/{z}/{x}/{y}";
}
tileLoadFunction = (tile,url) => {
// the URL construction is done internally by OL, so we need to parse it
// back out here using a hacky regex
const re = new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/);
const result = url.match(re);
const z = +result[2];
const x = +result[3];
const y = +result[4];
tile.setLoader((extent, resolution, projection) => {
this._p.getZxy(z,x,y).then((result) => {
if (result) {
const format = tile.getFormat();
const features = format.readFeatures(result.data.buffer, {
extent: extent,
featureProjection: projection
});
tile.setFeatures(features);
}
});
});
}
}
const source = new OLPMTilesSource("https://pub-9288c68512ed46eca46ddcade307709b.r2.dev/us-west/nz-buildings-v3.pmtiles");
const country = 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)',
}),
});
const vtLayer = new ol.layer.VectorTile({
declutter: true,
source: new ol.source.VectorTile({
attributions:["© Land Information New Zealand"],
maxZoom: 15, // this could come from the PMTiles header (async)
format: new ol.format.MVT(), // this could come from the PMTiles header (async)
url:source.url(),
tileLoadFunction: source.tileLoadFunction
}),
style: country,
});
ol.proj.useGeographic();
const map = new ol.Map({
layers: [vtLayer],
target: 'map',
view: new ol.View({
center: [172.606201,-43.556510],
zoom: 7,
multiWorld: true,
}),
});
</script>
</body>
</html>