// PointSymbolLayerの使用例（インデックスベースの自動割り当て）

const geojson = await d3.json("../geojson/world.geojson");

// CARTO Safeパレット（色覚障害完全対応）
const colorPalette = ['#88CCEE', '#CC6677', '#DDCC77', '#117733', '#332288', '#AA4499', '#44AA99', '#999933'];

const map = new Thematika.Map({
    container: '#map',
    width: 800,
    height: 600,
    projection: d3.geoNaturalEarth1()
});

// インデックスベースでシンボルと色を自動割り当て
const symbolLayer = new Thematika.PointSymbolLayer({
    data: geojson,
    size: 64, // 固定サイズ
    symbolType: (feature, index) => {
        // インデックスに基づいて7種類のシンボルを順番に使用
        const symbols = [
            d3.symbolCircle,
            d3.symbolCross,
            d3.symbolDiamond,
            d3.symbolSquare,
            d3.symbolStar,
            d3.symbolTriangle,
            d3.symbolWye
        ];
        return symbols[index % symbols.length];
    },
    attr: {
        "fill": (d, i) => colorPalette[i % colorPalette.length], // インデックスで色を割り当て
        "stroke": '#2d3436',
        "stroke-width": 1,
        "opacity": 0.8
    }
});

// サイズも動的に設定する場合
const dynamicSymbolLayer = new Thematika.PointSymbolLayer({
    data: geojson,
    size: (feature, index) => {
        // 人口に基づいてサイズを決定
        const population = feature.properties?.POP_EST || 0;
        return Math.min(Math.sqrt(population / 1000000) * 32 + 16, 256);
    },
    symbolType: (feature, index) => {
        const symbols = [d3.symbolCircle, d3.symbolCross, d3.symbolDiamond, d3.symbolSquare, d3.symbolStar, d3.symbolTriangle, d3.symbolWye];
        return symbols[index % symbols.length];
    },
    attr: {
        "fill": (d, i) => colorPalette[i % colorPalette.length],
        "stroke": '#2d3436',
        "stroke-width": 0.5,
        "opacity": 0.8
    }
});

// レイヤーを地図に追加
map.addLayer('graticule', graticuleLayer);
map.addLayer('symbols', symbolLayer);