Skip to content

Commit

Permalink
deploy: 6a4f3d2
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdon
bdon committed Aug 8, 2024
0 parents commit ff9dbfd
Show file tree
Hide file tree
Showing 47 changed files with 4,527 additions and 0 deletions.
Empty file added .nojekyll
Empty file.
1 change: 1 addition & 0 deletions CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
pmtiles.io
44 changes: 44 additions & 0 deletions assets/Start.29df1183.js

Large diffs are not rendered by default.

787 changes: 787 additions & 0 deletions assets/mapview.383296ab.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/mapview.64b6ec48.css

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions assets/tileinspect.efe2f2e3.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/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>
94 changes: 94 additions & 0 deletions examples/maplibre.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<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/pmtiles.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);

// pmtiles extract https://build.protomaps.com/20240807.pmtiles my_area.pmtiles --bbox=11.221144,43.745121,11.287543,43.789306
let PMTILES_URL = "https://pmtiles.io/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",
// For standard Z/X/Y tile APIs or Z/X/Y URLs served from go-pmtiles, replace "url" with "tiles" and remove all the pmtiles-related client code.
// tiles: ["https://example.com/{z}/[x}/{y}.mvt"],
// see https://maplibre.org/maplibre-style-spec/sources/#vector
url: "pmtiles://" + PMTILES_URL,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
}
},
layers: [
{
"id":"water",
"source": "example_source",
"source-layer":"water",
"type": "fill",
"paint": {
"fill-color": "#80b1d3"
}
},
{
"id":"buildings",
"source": "example_source",
"source-layer":"buildings",
"type": "fill",
"paint": {
"fill-color": "#d9d9d9"
}
},
{
"id":"roads",
"source": "example_source",
"source-layer":"roads",
"type": "line",
"paint": {
"line-color": "#fc8d62"
}
},
{
"id":"pois",
"source": "example_source",
"source-layer":"pois",
"type": "circle",
"paint": {
"circle-color": "#ffffb3"
}
}
]
}
});
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/pmtiles.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>
16 changes: 16 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!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="/assets/mapview.383296ab.js"></script>
<link rel="modulepreload" href="/assets/Start.29df1183.js">
<link rel="stylesheet" href="/assets/mapview.64b6ec48.css">
</head>
<body>
<div id="root"></div>

</body>
</html>
Loading

0 comments on commit ff9dbfd

Please sign in to comment.