// LineTextLayerの使用例（GeoJSON形式）

const lineDemoData = await d3.json('../geojson/line/line-demo-data.geojson');

// LineTextLayerインスタンスを作成
const textLayer = new Thematika.LineTextLayer({
    data: lineDemoData,       // ラインデータ
    textProperty: 'name',     // テキスト取得元プロパティ
    lineType: 'arc',          // 'straight', 'arc', または 'smooth'
    arcHeight: 0.3,           // アークの高さ（arcタイプの場合）
    smoothType: 'curveBasis', // スムージング時のカーブタイプ
    startOffset: '50%',       // textPath上のテキスト位置
    textAnchor: 'middle',     // テキストアンカー
    fontSize: 18,             // フォントサイズ
    fontWeight: 'bold',       // フォントウェイト
    followPath: true,         // パス沿い配置
    flipText: false,          // テキスト方向反転
    dx: 0,                    // X方向オフセット
    dy: 0,                    // Y方向オフセット
    attr: {
        "fill": (d, i) => i % 2 === 0 ? "#2c3e50" : "#1a237e",
        "stroke": '#ffffff',
        "stroke-width": 3
    }
});

// LineConnectionLayerと併用でガイドライン表示
const guideLayer = new Thematika.LineConnectionLayer({
    data: lineDemoData,
    lineType: 'arc',
    arcHeight: 0.3,
    endArrow: true,
    attr: {
        "stroke": (d, i) => i % 2 === 0 ? "#ff6b6b" : "#45b7d1",
        "stroke-width": 2,
        "opacity": 0.7,
        "stroke-dasharray": '5,3'
    }
});

// 地図に追加（ガイドラインを先に、テキストを後に）
map.addLayer('guide-lines', guideLayer);
map.addLayer('line-texts', textLayer);