v1 (🤞 that the actions config works...)

.github/workflows/static.yml

@@ -0,0 +1,52 @@
+name: Build github pages
+
+on:
+  push:
+    branches: ["main"]
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  buildAndDeploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+      - name: Install PMTiles CLI
+        uses: supplypike/setup-bin@v4
+        with:
+          uri: 'https://github.com/protomaps/go-pmtiles/releases/download/v1.23.1/go-pmtiles_1.23.1_Linux_x86_64.tar.gz'
+          name: 'pmtiles'
+          version: '1.23.1'
+      - name: Install NPM Deps
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: 'dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules/

README.md

@@ -0,0 +1,16 @@
+# Github Actions built & Github Pages hosted Protomaps Extract & Styles
+
+This repo contains scripts and Github Actions configuration to create a Protomaps exctract for the
+area defined in `region.geojson` and a style to go along with it.
+
+This allows you to very easily host your own basemap for a small to medium sized area with Github
+Pages.
+
+The default region is the state of Virginia in the United State of America.
+
+To create your own Github Pages hosted basemap:
+
+- Fork this repository
+- Replace `region.geojson` with the region of your choice
+- Enable Github Actions on your fork
+- Push your updated region

buildStyles.mjs

@@ -0,0 +1,53 @@
+// derived from from https://github.com/protomaps/basemaps/blob/main/styles/src/generate_styles.ts
+import fs from "fs";
+import { writeFile } from "fs/promises";
+import i from "protomaps-themes-base";
+import { language_script_pairs } from "protomaps-themes-base";
+
+// Determine tile URL
+let tileJson;
+if (process.env.TILE_JSON) {
+  tileJson = process.env.TILE_JSON;
+} else if (process.env.GITHUB_REPOSITORY) {
+  const [owner, repo] = process.env.GITHUB_REPOSITORY.split("/", 2);
+  tileJson = `pmtiles://https://${owner}.github.io/${repo}/protomaps.pmtiles`;
+} else {
+  throw new Exception("No TILE_JSON or GITHUB_REPOSITORY env var set");
+}
+
+for (const theme of ["light", "dark", "white", "grayscale", "black"]) {
+  for (const { lang, full_name, script } of language_script_pairs) {
+    const layers = i("protomaps", theme, lang, script);
+
+    const style = {
+      version: 8,
+      sources: {
+        protomaps: {
+          type: "vector",
+          attribution:
+            '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
+          url: tileJson,
+        },
+      },
+      layers: layers,
+      sprite: `https://protomaps.github.io/basemaps-assets/sprites/v4/${theme}`,
+      glyphs:
+        "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
+    };
+
+    const directory = `dist/styles/${theme}`;
+    if (!fs.existsSync(directory)) {
+      fs.mkdirSync(directory, { recursive: true });
+      console.log(`Directory ${directory} created successfully!`);
+    }
+
+    try {
+      await writeFile(
+        `${directory}/${lang}.json`,
+        JSON.stringify(style, null, 2),
+      );
+    } catch (err) {
+      console.error("An error occurred while writing to the file:", err);
+    }
+  }
+}

buildTiles.mjs

@@ -0,0 +1,29 @@
+import fs from "fs";
+import { spawn } from "child_process";
+
+if (!fs.existsSync("dist")) {
+  fs.mkdirSync("dist");
+}
+
+// Get latest version
+const resp = await fetch("https://build-metadata.protomaps.dev/builds.json");
+const builds = await resp.json();
+const latestBuild = builds.slice(-1)[0];
+
+// pmtiles extract
+const child = spawn(
+  "pmtiles",
+  [
+    "extract",
+    `https://build.protomaps.com/${latestBuild.key}`,
+    "dist/tiles.pmtiles",
+    "--region=region.geojson",
+  ],
+  { stdio: "inherit" },
+);
+const exitCode = await new Promise((resolve, reject) => {
+  child.on("close", resolve);
+});
+if (exitCode !== 0) {
+  throw new Exception(`pmtiles extract failed with exit code: ${exitCode}`);
+}

index.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Protomaps Github Pages</title>
+    <link
+      href="https://cdn.skypack.dev/maplibre-gl@5.0.1/dist/maplibre-gl.css"
+      rel="stylesheet"
+    />
+
+    <style>
+      html,
+      body,
+      #map {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      #map {
+        height: 60%;
+        width: 60%;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Style URL: <span id="style-url"></span></div>
+
+    <div id="map"></div>
+
+    <script type="module">
+      import maplibregl from "https://cdn.skypack.dev/maplibre-gl@5.0.1";
+      import { Protocol } from "https://cdn.skypack.dev/pmtiles@4.2.1";
+
+      const protocol = new Protocol();
+      maplibregl.addProtocol("pmtiles", protocol.tile);
+
+      document.getElementById("style-url").textContent = new URL(
+        "./styles/light/en.json",
+        window.location.href,
+      );
+
+      var map = new maplibregl.Map({
+        container: "map",
+        style: "./styles/light/en.json",
+        hash: true,
+        attributionControl: {},
+      });
+    </script>
+  </body>
+</html>