fake clipping with a mask

buildStyles.mjs

@@ -5,8 +5,13 @@ import protomapsLayers from "protomaps-themes-base";
 import { language_script_pairs } from "protomaps-themes-base";
 import { viewport } from "@mapbox/geo-viewport";
 import { bbox } from "@turf/bbox";
+import { mask } from "@turf/mask";
+import { simplify } from "@turf/simplify";
 
 const region = JSON.parse(fs.readFileSync("region.geojson"));
+const simplifiedRegion = simplify(region, { tolerance: 0.01 }).features[0].geometry;
+
+fs.writeFileSync("dist/region-mask.geojson", JSON.stringify(mask(region)));
 
 // Determine tile URL
 let tileJson;
@@ -22,6 +27,24 @@ if (process.env.TILE_JSON) {
 for (const theme of ["light", "dark", "white", "grayscale", "black"]) {
   for (const { lang, full_name, script } of language_script_pairs) {
     const layers = protomapsLayers("protomaps", theme, lang, script);
+    const bgIdx = layers.findIndex(({ id }) => id === "places_subplace");
+    const bgColor = layers.find(({ id }) => id === "background").paint[
+      "background-color"
+    ];
+    layers.splice(bgIdx, 0, {
+      id: "mask-fill",
+      type: "fill",
+      source: "mask",
+      paint: { "fill-color": bgColor },
+    });
+    layers.forEach((l) => {
+      if (l.id.startsWith("place") || l.id === "pois") {
+        if (l.filter[0] === "==" && typeof l.filter[0] === "string") {
+          l.filter = [l.filter[0], ["get", l.filter[1]], l.filter[2]];
+        }
+        l.filter = ["all", l.filter, ["within", simplifiedRegion]];
+      }
+    });
 
     const style = {
       version: 8,
@@ -32,6 +55,13 @@ for (const theme of ["light", "dark", "white", "grayscale", "black"]) {
             '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
           url: tileJson,
         },
+        mask: {
+          type: "geojson",
+          data: new URL(
+            "./region-mask.geojson",
+            tileJson.replace(/^pmtiles:\/\//, ""),
+          ),
+        },
       },
       layers: layers,
       sprite: `https://protomaps.github.io/basemaps-assets/sprites/v4/${theme}`,

package.json

@@ -32,6 +32,8 @@
   "dependencies": {
     "@mapbox/geo-viewport": "^0.5.0",
     "@turf/bbox": "^7.2.0",
+    "@turf/mask": "^7.2.0",
+    "@turf/simplify": "^7.2.0",
     "protomaps-themes-base": "^4.3.1"
   },
   "devDependencies": {