// TileMapの使用例（ImageLayer + tile-utils）

// 地域の境界を定義
const regions = {
    tokyo: [139.4, 35.5, 139.9, 35.8],
    osaka: [135.3, 34.5, 135.7, 34.8],
    fukuoka: [130.2, 33.4, 130.6, 33.8],
    japan: [129.0, 30.0, 146.0, 46.0]
};

// タイルUtilsを使用してタイル座標を計算
const bounds = regions.tokyo;
const zoom = 10;
const tiles = Thematika.generateTileUrls(bounds, zoom, {
    urlTemplate: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
});

// 投影法を設定
const projection = d3.geoMercator();

// タイル表示用に適切なスケールを設定
const centerLon = (bounds[0] + bounds[2]) / 2;
const centerLat = (bounds[1] + bounds[3]) / 2;

// ズームレベルに基づいてスケールを計算
const scale = 256 * Math.pow(2, currentZoom) / (2 * Math.PI);                
projection
    .scale(scale)
    .center([centerLon, centerLat])
    .translate([width / 2, height / 2]);


// 地図の作成
const map = new Thematika.Map({
    container: '#map',
    width: 800,
    height: 600,
    projection:projection
});

// 各タイルをImageLayerとして追加
tiles.forEach((tile, index) => {
    const imageLayer = new Thematika.ImageLayer(`tile-${index}`, {
        src: tile.url,
        bounds: tile.bounds.bounds,
        showBboxMarkers: false
    });
    map.addLayer(`tile-${index}`, imageLayer);
});