deploy: 353a761

protomaps · Sep 12, 2024 · 219ca10 · 219ca10
commit 219ca10
Show file tree

Hide file tree

Showing 48 changed files with 5,248 additions and 0 deletions.
diff --git a/.nojekyll b/.nojekyll
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+pmtiles.io
diff --git a/assets/Start.29df1183.js b/assets/Start.29df1183.js
diff --git a/assets/mapview.64b6ec48.css b/assets/mapview.64b6ec48.css
diff --git a/assets/mapview.c0b6178a.js b/assets/mapview.c0b6178a.js
diff --git a/assets/tileinspect.efe2f2e3.js b/assets/tileinspect.efe2f2e3.js
diff --git a/cloudformation-stack.yaml b/cloudformation-stack.yaml
diff --git a/examples/leaflet.html b/examples/leaflet.html
@@ -0,0 +1,33 @@
+<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>
diff --git a/examples/maplibre.html b/examples/maplibre.html
@@ -0,0 +1,95 @@
+<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>
diff --git a/examples/maplibre_raster_dem.html b/examples/maplibre_raster_dem.html
@@ -0,0 +1,79 @@
+<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>
diff --git a/examples/openlayers/raster.html b/examples/openlayers/raster.html
@@ -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>
diff --git a/examples/openlayers/vector.html b/examples/openlayers/vector.html
@@ -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>
diff --git a/index.html b/index.html
@@ -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.c0b6178a.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>