// LegendLayerの使用例

// 序数スケールの例
const colorScale = d3.scaleOrdinal()
    .domain(['都市', '農村', '工業地域'])
    .range(['#ff0000', '#00ff00', '#0000ff']);

const legendLayer = new Thematika.LegendLayer({
    scale: colorScale,
    position: { top: 20, left: 20 },  // SVG座標系でのピクセル値
    title: '土地利用',
    orientation: 'vertical',
    showBackground: true,  // 背景ボックスを表示
    backgroundStyle: {
        "fill": '#ffffff',
        "stroke": '#cccccc', 
        "opacity": 0.9,
        rx: 4
    }
});

// サイズスケールの例（セルタイプ）
const densityScale = d3.scaleOrdinal()
    .domain(['低', '中', '高'])
    .range(['#ffcccc', '#ff6666', '#ff0000']);

const sizeScale = d3.scaleLinear()
    .domain([0, 1, 2])
    .range([100, 400, 900]); // 面積値

const sizeLegend = new Thematika.LegendLayer({
    scale: densityScale,
    sizeScale: sizeScale,
    symbolType: 'cell',  // セルタイプを指定
    position: { top: 300, left: 200 },
    title: '人口密度'
});

// 連続スケールの例
const temperatureScale = d3.scaleLinear()
    .domain([0, 100])
    .range(['#ffffff', '#ff0000']);

const tempLegend = new Thematika.LegendLayer({
    scale: temperatureScale,
    symbolType: 'gradient',
    position: { top: 50, left: 600 },
    title: '気温 (°C)',
    orientation: 'horizontal'
});

// 地図に追加
map.addLayer('legend', legendLayer);
map.addLayer('size-legend', sizeLegend);
map.addLayer('temp-legend', tempLegend);