Skip to content

Commit

Permalink
deploy: befa393
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdon
bdon committed Jul 8, 2023
0 parents commit c5c6350
Show file tree
Hide file tree
Showing 14 changed files with 1,119 additions and 0 deletions.
Empty file added .nojekyll
Empty file.
1 change: 1 addition & 0 deletions assets/index.1291385f.css

Large diffs are not rendered by default.

837 changes: 837 additions & 0 deletions assets/index.f2523f25.js

Large diffs are not rendered by default.

30 changes: 30 additions & 0 deletions examples/leaflet.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<html>
<head>
<title>PMTiles Leaflet Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/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>
81 changes: 81 additions & 0 deletions examples/maplibre.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<html>
<head>
<title>PMTiles MapLibre Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<style>
body {
margin: 0;
}
#map {
height:100%; width:100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// add the PMTiles plugin to the maplibregl global.
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);

let PMTILES_URL = "https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles";

const p = new pmtiles.PMTiles(PMTILES_URL)

// this is so we share one instance across the JS code and the map renderer
protocol.add(p);

// we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then(h => {
const map = new maplibregl.Map({
container: 'map',
zoom: h.maxZoom-2,
center: [h.centerLon, h.centerLat],
style: {
version:8,
sources: {
"example_source": {
type: "vector",
url: "pmtiles://" + PMTILES_URL,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
}
},
layers: [
{
"id":"buildings",
"source": "example_source",
"source-layer":"landuse",
"type": "fill",
"paint": {
"fill-color": "steelblue"
}
},
{
"id":"roads",
"source": "example_source",
"source-layer":"roads",
"type": "line",
"paint": {
"line-color": "black"
}
},
{
"id":"mask",
"source": "example_source",
"source-layer":"mask",
"type": "fill",
"paint": {
"fill-color": "white"
}
}
]
}
});
map.showTileBoundaries = true;
})
</script>
</body>
</html>
68 changes: 68 additions & 0 deletions examples/maplibre_raster_dem.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<html>
<head>
<title>PMTiles MapLibre Raster DEM Example</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<style>
body {
margin: 0;
}
#map {
height:100%; width:100%;
}
#overlay {
position: absolute;
top: 1rem;
left: 1rem;
font: 600 16px sans-serif;
background-color: white;
border-radius: 4px;
padding: 0.5rem;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="overlay">
</div>
<script type="text/javascript">
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
let URL = "https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles";

function formatBytes(a,b=2){if(!+a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return`${parseFloat((a/Math.pow(1024,d)).toFixed(c))} ${["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][d]}`}

fetch(URL, {method:"HEAD"}).then(resp => {
let length = resp.headers.get("Content-Length");
document.getElementById("overlay").innerHTML = `<a href="${URL}">${URL}</a> (${formatBytes(length)})`;
})

const map = new maplibregl.Map({
container: 'map',
zoom: 0,
center: [0,0],
style: {
version:8,
sources: {
"example_source": {
type: "raster-dem",
url: "pmtiles://" + URL,
attribution: '<a href="https://github.com/tilezen/joerd/blob/master/docs/attribution.md">Tilezen Joerd: Attribution</a>',
encoding:"terrarium"
}
},
layers: [
{
"id":"dem",
"source": "example_source",
"source-layer":"landuse",
"type": "hillshade"
}
]
}
})
</script>
</body>
</html>
39 changes: 39 additions & 0 deletions examples/openlayers/raster.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<html>
<head>
<title>PMTiles OpenLayers Raster Example</title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
<script src="https://unpkg.com/[email protected]/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://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
attributions:["https://github.com/tilezen/joerd/blob/master/docs/attribution.md"],
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 changes: 46 additions & 0 deletions examples/openlayers/vector.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<html>
<head>
<title>PMTiles OpenLayers Vector Example</title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
<script src="https://unpkg.com/[email protected]/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>
15 changes: 15 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="data:,">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PMTiles Viewer</title>
<script type="module" crossorigin src="/PMTiles/assets/index.f2523f25.js"></script>
<link rel="stylesheet" href="/PMTiles/assets/index.1291385f.css">
</head>
<body>
<div id="root"></div>

</body>
</html>
2 changes: 2 additions & 0 deletions index.js

Large diffs are not rendered by default.

Binary file added lambda_function.zip
Binary file not shown.
Binary file added protomaps(vector)ODbL_firenze.pmtiles
Binary file not shown.
Binary file added stamen_toner(raster)CC-BY+ODbL_z3.pmtiles
Binary file not shown.
Binary file added usgs-mt-whitney-8-15-webp-512.pmtiles
Binary file not shown.

0 comments on commit c5c6350

Please sign in to comment.