1import numpy as np
2import numpy.typing as npt

def xyz_to_lonlat(
    x: npt.NDArray[np.floating], # horizontal index
    y: npt.NDArray[np.floating], # vertical index
    z: int, # zoom level
):
3    lon = 2 * np.pi * x / 2**z - np.pi
4    lat = 2 * np.arctan(np.exp(np.pi - (2 * np.pi * y / 2**z))) - np.pi / 2
    return (lon * 180 / np.pi, lat * 180 / np.pi)

import geopandas as gpd
import shapely

zoom_levels = [0, 1, 2, 3, 4, 5, 6]

# for layer in layer_config_list:
tile_data_list = []
for zoom in zoom_levels:
    tilerange = range(2**zoom + 1)

    # Create arrays of cell vertices.
    x_vertices = np.array(tilerange)
    y_vertices = np.array(tilerange)

    # Convert vertices to lon/lat coordinates.
    lons, lats = xyz_to_lonlat(x_vertices, y_vertices, zoom)

    for ix in tilerange[:-1]:
        for iy in tilerange[:-1]:
            poly_coords = [
                (lons[ix], lats[iy]),
                (lons[ix + 1], lats[iy]),
                (lons[ix + 1], lats[iy + 1]),
                (lons[ix], lats[iy + 1])
            ]
            # print('poly_coords', poly_coords)

            tile_data = {
                'zoom': zoom,
                'x_index': ix,
                'y_index': iy,
                'geometry': shapely.Polygon(poly_coords),
            }
            tile_data_list.append(tile_data)

gdf = gpd.GeoDataFrame(
    data=tile_data_list,
    crs="EPSG:4326"
)

import math

def patch_area_single_rectangle(
    R: float, # Authalic radius, in meters
    lon1: float, # Minimum longitude, in degrees
    lat1: float, # Minimum latitude, in degrees
    lon2: float, # Maximum longitude, in degrees
    lat2: float, # Maximum latitude, in degrees
) -> float:
    # Convert from degrees to radians
    lon1_rad = lon1 * (np.pi / 180)
    lon2_rad = lon2 * (np.pi / 180)
    lat1_rad = lat1 * (np.pi / 180)
    lat2_rad = lat2 * (np.pi / 180)
    
    h = R * (math.sin(lat2_rad) - math.sin(lat1_rad))
    area_patch = R * h  * (lon2_rad - lon1_rad)
    return area_patch

gdf['area_km2'] = gdf.apply(
    lambda row:patch_area_single_rectangle(
        6371007.180918,  # Authalic radius, in meters
        *row['geometry'].bounds,  # tuple of (minx, miny, maxx, maxy)
    ) * 1e-6,
    axis=1
)

gdf

tile_colors = [
    [0, 0, 0],
    [255, 255, 255],
]

# Radial offsets (meters) used as the 3rd dimension on the globe.
#
# The tile grid sits a modest amount above the basemap (TILE_ELEVATION_M):
# high enough that the depth buffer can clearly separate the two layers
# (too small a value causes z-fighting, which makes the basemap look
# splotchy), but low enough that the grid doesn't look like it floats far
# above the countries.
#
# Each label is then placed at TILE_ELEVATION_M + a per-zoom lift. The
# lift is large at low zoom (big tiles; the labels need height to avoid
# limb/edge clipping from depth testing) and small at high zoom (tiny,
# dense tiles, where a big lift would look like the labels float). These
# lift values preserve the tight label-to-tile spacing tuned earlier.
TILE_ELEVATION_M = 80000

def label_lift_for_zoom(zoom):
    """Height (meters) of the (x, y) label *above the tile*, by zoom."""
    return {
        0: 600000,
        1: 500000,
        2: 350000,
        3: 220000,
        4: 130000,
        5: 50000,
        6: 50000,
    }.get(zoom, 50000)

def add_pydeck_colums(gdf):
    """Add columns for PyDeck visualization"""
    
    # Convert geodataframe geometries into a PyDeck compatible format
    gdf['pydeck_polygon'] = [
        [
            vertex + (TILE_ELEVATION_M, )  # Add a third dimension
            for vertex in list(geom.exterior.coords)
        ]
        for geom in gdf['geometry'].geometry
    ]
    gdf['pydeck_centroid'] = [
        list(geom.centroid.coords[0]) + [TILE_ELEVATION_M + label_lift_for_zoom(zoom)] # Add a third dimension
        for geom, zoom in zip(gdf['geometry'].geometry, gdf['zoom'])
    ]
    gdf['centroid_label'] = '(' + gdf['x_index'].astype(str) + ',' + gdf['y_index'].astype(str) + ')'
    gdf['bounds'] = [
        [f'{x:.2f}' for x in geom.bounds]
        for geom in gdf['geometry'].geometry
    ]

    gdf['fill_color'] = gdf.apply(
        lambda row: tile_colors[(row['x_index'] + row['y_index']) % 2],
        axis=1
    )

    gdf['area_desc'] = gdf.apply(
        lambda row: f"{row['area_km2']:.2e}", 
        axis=1
    )

    return gdf

gdf = add_pydeck_colums(gdf)

import pydeck as pdk
from pydeck.types import String
import pandas as pd

def label_size_for_zoom(zoom):
    """Font size for the per-tile (x, y) labels.

    Tiles get 4x denser per zoom level, so the labels are scaled down at
    higher zooms to keep them legible and reduce overlap."""
    return {0: 16, 1: 16, 2: 14, 3: 13, 4: 12, 5: 8}.get(zoom, 6)

def tile_opacity_for_zoom(zoom):
    """Fill opacity of the tile grid, by zoom level.

    At high zoom the dense grid of tiles otherwise hides the basemap, so
    the tiles are made more transparent as zoom increases."""
    return {0: 0.25, 1: 0.25, 2: 0.25, 3: 0.22, 4: 0.20, 5: 0.15}.get(zoom, 0.12)

def get_globe_view():
    """Return a pyDeck view for the globe."""
    view = pdk.View(
        type="_GlobeView",
        controller=True,
        width='100%',
    )
    return view

def get_initial_view_state():
    """Specify the initial pyDeck view state."""
    initial_view_state = pdk.ViewState(
        latitude=45,
        longitude=-45,
        zoom=0,
        min_zoom=0,
    )
    return initial_view_state

def get_basemap_layer():
    """Get a pyDeck layer based on Natural Earth country boundaries."""
    basemap_layer = pdk.Layer(
        "GeoJsonLayer",
        id="base-map",
        data="https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson",
        stroked=False,
        filled=True,
        extruded=False,
        get_fill_color=[200, 200, 200],
        get_line_color=[255, 255, 255],
        opacity=0.5,
    )
    return basemap_layer

def get_tiles(zoom):
    """Create a pyDeck polygon and text layer for tiles of a specified zoom level."""
    poly_layer = pdk.Layer(
        "SolidPolygonLayer",
        gdf[gdf['zoom']==zoom],
        opacity=tile_opacity_for_zoom(zoom),
        visible=True,
        get_polygon="pydeck_polygon",
        get_fill_color="fill_color",
        extruded=True,
    )

    # Depth testing stays ON so the opaque globe occludes back-hemisphere
    # labels (no bleed-through). The labels are lifted above the tile by a
    # per-zoom amount (see label_lift_for_zoom) to reduce - but not fully
    # eliminate - the limb clipping that depth testing causes at the
    # globe's edges.
    text_layer = pdk.Layer(
        "TextLayer",
        gdf[gdf['zoom']==zoom],
        get_position="pydeck_centroid",
        get_text="centroid_label",
        get_size=label_size_for_zoom(zoom),
        # get_color=[127, 255, 255],
        get_color=[255, 255, 0],
        get_angle=0,
        get_text_anchor=String("middle"),
        get_alignment_baseline=String("center"),
        pickable=True,
        billboard=True,
    )

    return [poly_layer, text_layer]


def create_globe_with_xyz_tiles(zoom):
    
    # gdf = layer_config['gdf']
    deck = pdk.Deck(
        views=[get_globe_view()],
        initial_view_state=get_initial_view_state(),
        layers=[
            get_basemap_layer(),
            get_tiles(zoom),
        ],
        map_provider=None,
        tooltip={
            "html": (
                "<table>"
                "<tr><th>Zoom:</th><td>{zoom}</td></tr>"
                "<tr><th>X, Y:</th><td>{x_index}, {y_index}</td></tr>"
                "<tr><th>Area, km<sup>2</sup>:</th><td>{area_desc}</td></tr>"
                "<tr><th>Longitude:</th><td>{bounds.0}&deg; to {bounds.2}&deg;</td></tr>"
                "<tr><th>Latitude:</th><td>{bounds.1}&deg; to {bounds.3}&deg;</td></tr>"
                "</table>"
            ),
            "style": {
                "text-align": "right",
            }
        },
        # Note: set to True for the globe to be opaque
        parameters={"cull": True},
    )
    return deck


from pathlib import Path
from IPython.display import IFrame

GLOBE_DIR = Path("globes")

def show_globe(zoom, height=500):
    """Write a standalone globe HTML file and embed it via an iframe.

    Inlining pyDeck output for high zoom levels produces tens of MB of JSON
    in a single cell, which overflows Quarto's HTML formatter. Writing each
    globe to its own file and referencing it with an iframe keeps the
    notebook output tiny and lets each globe load independently.
    """
    GLOBE_DIR.mkdir(exist_ok=True)
    deck = create_globe_with_xyz_tiles(zoom)
    out_path = GLOBE_DIR / f"web_mercator_tiles_z{zoom}.html"
    deck.to_html(str(out_path), notebook_display=False, offline=False)
    return IFrame(src=str(out_path), width="100%", height=height)

1import math
2import numpy as np