add minLevel

package.json

@@ -14,7 +14,7 @@
     "@turf/great-circle": "^7.1.0",
     "maplibre-gl": "^4.6.0",
     "protomaps-themes-base": "^3.1.0",
-    "s2js": "^1.42.0",
+    "s2js": "^1.42.1",
     "solid-js": "^1.8.20",
     "terra-draw": "^1.0.0-beta.1"
   },

src/App.tsx

@@ -52,9 +52,8 @@ const getCovering = (
   coverer: geojson.RegionCoverer,
   features: Feature[],
 ): s2.CellUnion => {
-  return s2.CellUnion.fromUnion(
-    ...features.map((f) => coverer.covering(f.geometry)),
-  );
+  if (features.length > 1) throw new Error("multi-feature unsupported");
+  return coverer.covering(features[0].geometry);
 };
 
 // We adjust the lines from great-circle to have lng > 180 and < -180 so that
@@ -219,6 +218,7 @@ function App() {
   let draw: TerraDraw;
   let regionCoverer: geojson.RegionCoverer;
 
+  const [minLevel, setMinLevel] = createSignal(0);
   const [maxLevel, setMaxLevel] = createSignal(30);
   const [maxCells, setMaxCells] = createSignal(200);
   const [drawMode, setDrawMode] = createSignal("");
@@ -275,6 +275,7 @@ function App() {
 
   createEffect(() => {
     regionCoverer = new geojson.RegionCoverer({
+      minLevel: minLevel(),
       maxLevel: maxLevel(),
       maxCells: maxCells(),
     });
@@ -499,6 +500,18 @@ function App() {
               }}
             />
           </div>
+          <div class="input">
+            <div class="label">
+              <label>min level:</label>
+            </div>
+            <input
+              type="text"
+              value={minLevel()}
+              onInput={(e) => {
+                setMinLevel(+e.target.value || 1);
+              }}
+            />
+          </div>
           <div class="input">
             <div class="label">
               <label>max level:</label>