deploy: d735708

protomaps · Oct 30, 2024 · 31b2a2c · 31b2a2c
commit 31b2a2c
Show file tree

Hide file tree

Showing 50 changed files with 5,370 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.57f98654.js b/assets/Start.57f98654.js
diff --git a/assets/index.35cb7a5b.css b/assets/index.35cb7a5b.css
diff --git a/assets/mapview.5f7d0c78.js b/assets/mapview.5f7d0c78.js
diff --git a/assets/tileinspect.0a12ed38.js b/assets/tileinspect.0a12ed38.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,85 @@
+<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.
+            // setting metadata = true fills out the "attribution" field of the source, and is required for some inspector applications,
+            // but requires an additional blocking HTTP request before loading the map.
+            let protocol = new pmtiles.Protocol({metadata: true});
+            maplibregl.addProtocol("pmtiles", protocol.tile);
+
+            const map = new maplibregl.Map({
+              container: "map",
+              zoom: 13,
+              center: [11.2543435, 43.7672134],
+              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://https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles",
+                  },
+                },
+                layers: [
+                  {
+                    id: "water",
+                    source: "example_source",
+                    "source-layer": "water",
+                    filter: ["==",["geometry-type"],"Polygon"],
+                    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_headers.html b/examples/maplibre_headers.html
@@ -0,0 +1,98 @@
+<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">
+            // Advanced MapLibre example demonstrating PMTiles JavaScript API + pmtiles:// protocol.
+
+            let protocol = new pmtiles.Protocol();
+            maplibregl.addProtocol("pmtiles", protocol.tile);
+
+            let PMTILES_URL = "https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles";
+
+            let source = new pmtiles.FetchSource(PMTILES_URL, new Headers({'Content-Language': 'xx'}));
+
+            const p = new pmtiles.PMTiles(source);
+
+            // 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",
+                      filter: ["==",["geometry-type"],"Polygon"],
+                      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,58 @@
+<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({metadata: true});
+            maplibregl.addProtocol("pmtiles", protocol.tile);
+
+            const map = new maplibregl.Map({
+              container: "map",
+              zoom: 0,
+              center: [0, 0],
+              style: {
+                version: 8,
+                sources: {
+                  example_source: {
+                    type: "raster-dem",
+                    url: "pmtiles://https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
+                    encoding: "terrarium",
+                  },
+                },
+                layers: [
+                  {
+                    id: "dem",
+                    source: "example_source",
+                    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.5f7d0c78.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/Start.57f98654.js">
+    <link rel="stylesheet" href="/assets/index.35cb7a5b.css">
+  </head>
+  <body>
+    <div id="root"></div>
+
+  </body>
+</html>