S2-Cell-Draw, gaps in returned Polygons

Question

I am tagging geospatial data using S2 and would like to display it on a leaflet map, along with the corresponding S2 tile. When I use the library s2-cell-draw to plot the s2 boxes, there is one row with a triangle and unclosed polygons. Image attached. Also, the polygons don't always touch each other like I would expect.

Does anyone have a solution to this? The tiles should touch eachother and actually represent the corresponding S2 tile. Or is there another s2 drawing library in js that I should be using? Images and code below.

import {createPolygonListFromBounds, deboxByKey} from 's2-cell-draw';

const bounds = [
            [11.987743,-7.815649],
            [43.158713,10.386320],
            [74.118173,58.119280],
            [-2.337240,40.379856],
        ]
        const polygonList = createPolygonListFromBounds({
            bounds: [
                [bounds[0][1], bounds[0][0]],
                [bounds[2][1], bounds[2][0]]
            ],
            level: 7
        });
          
        let boxes = [];
        for (let i = 0; i < polygonList.length; i++) {
            boxes.push(deboxByKey(polygonList[i]["S2Key"]))
        }

// ... in Leaflet map:

{boxes.map((box, i) => (
        <Polygon pathOptions={{ color: 'purple' }} positions={[
            [box.path[0][1], box.path[0][0]],
            [box.path[1][1], box.path[1][0]],
            [box.path[2][1], box.path[2][0]],
            [box.path[3][1], box.path[3][0]],
            [box.path[0][1], box.path[0][0]],
        ]} />
    ))}

Answer 1

Well I did find a solution, though not using S2-Cell-Draw. My original intent was to draw S2 squares inside a Leaflet map, which s2-cell-draw was supposed to do, but the squares were not accurate. I managed to find this solution where a user wrote a python script to convert a bounding box to KML, so I rewrote it in JS to output to geojason for use on a map.

Link to py script: https://gis.stackexchange.com/questions/293716/creating-shapefile-of-s2-cells-for-given-level

My Code:

let s2 = require("nodes2ts");

(() => {
    let point_nw = s2.S2LatLng.fromDegrees(37,35);
    let point_se = s2.S2LatLng.fromDegrees(27,49);
    let s2_level = 7;

    let rc = new s2.S2RegionCoverer();
    rc.setMinLevel(s2_level);
    rc.setMaxLevel(s2_level);
    rc.setMaxCells(1000000);

    let region = s2.S2LatLngRect.fromPointPair(point_nw, point_se);

    let cellids = rc.getCoveringCells(region);
    let geo_json = [];

    for (let i = 0; i < cellids.length; i++) {
        let cid = cellids[i];
        let verticies = [];

        for (let j = 0; j < 4; j++) {
            verticies.push(s2.S2LatLng.fromPoint(new s2.S2Cell(cid).getVertex(j)));
        }

        let coordinates = [];

        for (let j = 0; j < 4; j++) {
            let v = verticies[j];
            coordinates.push([v.lngDegrees, v.latDegrees]);
        }
        coordinates.push(coordinates[0]); // close the polygon

        geo_json.push({
            "type": "Feature",
            "properties": {
                "id": Number(cid.id)
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [coordinates]
            }
        })
    }

    // paste into geojson.io:
    console.log(JSON.stringify({
        "type": "FeatureCollection",
        "features": geo_json
    }, null, 4));
})();