// インセット地図は「メイン地図」と「位置図」の2つのMapで作る。
// HTML側で位置図のdivをメイン地図の上に重ねておく:
//   <div id="map"><div id="inset"></div></div>
//   #inset { position: absolute; right: 12px; bottom: 12px; ... }

// 1. メイン地図（群馬県）
const gunma = await d3.json('./geojson/japan/gunma.geojson');
const mainProjection = d3.geoMercator()
    .fitExtent([[20, 20], [width - 20, height - 20]], gunma);

const mainMap = new Thematika.Map({
    container: '#map', width, height,
    projection: mainProjection
});
mainMap.addLayer('gunma', new Thematika.GeojsonLayer({
    data: gunma,
    attr: { fill: '#a8d5ba', stroke: '#5b8a72', 'stroke-width': 0.5 }
}));

// 2. インセット位置図（日本全体 + メイン地図の範囲枠）
const japan = await d3.json('./geojson/japan/pref.geojson');
const insetProjection = d3.geoMercator()
    .fitExtent([[5, 5], [195, 145]], japan);

const insetMap = new Thematika.Map({
    container: '#inset', width: 200, height: 150,
    projection: insetProjection
});

// メインデータのbboxをD3互換Polygon（外側リング時計回り）に変換
const bbox = Thematika.getBbox(gunma);
const frame = Thematika.bboxToPolygon([bbox.minX, bbox.minY, bbox.maxX, bbox.maxY]);

insetMap.addLayer('japan', new Thematika.GeojsonLayer({
    data: japan,
    attr: { fill: '#e2e8f0', stroke: '#94a3b8', 'stroke-width': 0.3 }
}));
insetMap.addLayer('frame', new Thematika.GeojsonLayer({
    data: [frame],
    attr: { fill: 'none', stroke: '#e11d48', 'stroke-width': 1.5 }
}));