label layer, console.info, formatting

bdon · Aug 23, 2024 · b6e973c · b6e973c
1 parent 2d1fa70
commit b6e973c
Showing 1 changed file with 47 additions and 22 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -78,7 +78,6 @@ const getCellVisualization = (union: s2.CellUnion): FeatureCollection => {
       console.error("polygonize error");
       console.error(e);
     }
-
     return collection;
   });
   return {
@@ -106,12 +105,12 @@ function App() {
     let covering;
     switch (snapshot[0].properties.mode) {
       case "rectangle": {
-        console.error("rectangle covering");
+        console.info("rectangle covering");
         covering = getCovering(regionCoverer, polygons, rectBuilder);
         break;
       }
       default: {
-        console.error("polygon covering");
+        console.info("polygon covering");
         covering = getCovering(regionCoverer, polygons, polygonBuilder);
       }
     }
@@ -185,6 +184,20 @@ function App() {
           "line-color": "yellow",
         },
       });
+      map.addLayer({
+        id: "covering-label",
+        type: "symbol",
+        source: "covering",
+        filter: ["<=", ["get", "level"], ["+", ["zoom"], 3]],
+        layout: {
+          "text-font": ["Noto Sans Medium"],
+          "text-field": ["get", "level"],
+          "text-size": 10,
+        },
+        paint: {
+          "text-color": "yellow",
+        },
+      });
     });
   });
 
@@ -194,9 +207,7 @@ function App() {
         <div class="controls">
           <div class="input">
             <div class="label">
-              <label>
-                draw mode:
-              </label>
+              <label>draw mode:</label>
             </div>
             <select
               onChange={(e) => {
@@ -214,9 +225,7 @@ function App() {
 
           <div class="input">
             <div class="label">
-              <label>
-                max cells:
-              </label>
+              <label>max cells:</label>
             </div>
             <input
               type="text"
@@ -228,9 +237,7 @@ function App() {
           </div>
           <div class="input">
             <div class="label">
-              <label>
-                max level:
-              </label>
+              <label>max level:</label>
             </div>
             <input
               type="text"
@@ -245,23 +252,41 @@ function App() {
         <div class="text">
           <h1>s2js Demo</h1>
           <p>
-            Visual demo of <a target="_blank" href="https://github.com/missinglink/s2js">s2js</a>, a pure TypeScript implementation of <a href="http://s2geometry.io" target="_blank">S2 Geometry.</a><br />
-
-            Draw any region to see its cell covering.<br />
-
-            Built with <a target="_blank" href="http://terradraw.io">Terra Draw</a>, <a target="_blank" href="http://maplibre.org">MapLibre</a> and <a target="_blank" href="https://github.com/protomaps">Protomaps</a> tiles.
-          </p>
-          <p class="faq">
-            <strong>Why are there gaps between cells?</strong> The visual cells are approximated by trapezoids; in reality they are geodesics, or straight on great circles.
+            Visual demo of{" "}
+            <a target="_blank" href="https://github.com/missinglink/s2js">
+              s2js
+            </a>
+            , a pure TypeScript implementation of{" "}
+            <a href="http://s2geometry.io" target="_blank">
+              S2 Geometry.
+            </a>
+            <br />
+            Draw any region to see its cell covering.
+            <br />
+            Built with{" "}
+            <a target="_blank" href="http://terradraw.io">
+              Terra Draw
+            </a>
+            ,{" "}
+            <a target="_blank" href="http://maplibre.org">
+              MapLibre
+            </a>{" "}
+            and{" "}
+            <a target="_blank" href="https://github.com/protomaps">
+              Protomaps
+            </a>{" "}
+            tiles.
           </p>
           <p class="faq">
-            <strong>Why don't the cells cover my region?</strong> The library interprets edges in the input also as geodesics; this can be mitigated by shorter distances between boundary vertices.
+            <strong>Why don't the cells cover my region?</strong> The library
+            interprets edges in the input also as geodesics; this can be
+            mitigated by shorter distances between boundary vertices.
           </p>
           <a href="https://github.com/bdon/s2js-demos">Fork me on GitHub</a>
         </div>
       </div>
       <div id="map"></div>
-    </div >
+    </div>
   );
 }