// PointAnnotationLayerの使用例

// 主要都市データ
const citiesData = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [139.6917, 35.6895] },
            properties: { name: 'Tokyo', country: 'Japan', population: 37833000 }
        },
        {
            type: 'Feature',
            geometry: { type: 'Point', coordinates: [-74.0060, 40.7128] },
            properties: { name: 'New York', country: 'USA', population: 20140470 }
        }
        // ... 他の都市
    ]
};

const width = 800;
const height = 600;

const projection = d3.geoNaturalEarth1()
    .fitExtent([[10, 10], [width-10, height-10]], citiesData);

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

// PointAnnotationLayerインスタンスを作成
const annotationLayer = new Thematika.PointAnnotationLayer({
    data: citiesData,
    annotationType: 'callout',
    textAccessor: 'name',
    titleAccessor: 'country',
    offsetAccessor: (feature, index) => [30, -20],
    subjectOptions: {
        type: 'point',      // 'point' | 'circle' | 'rect'
        r: 3,               // 半径（point/circle用）
        width: 16,          // 幅（rect用）
        height: 16,         // 高さ（rect用）
        fill: '#e74c3c',    // 塗りつぶし色
        stroke: 'white',    // 境界線色
        strokeWidth: 1,     // 境界線太さ
        strokeDasharray: 'none'  // 境界線ダッシュパターン
    },
    connectorOptions: {
        stroke: '#666666',
        strokeWidth: 1
    },
    noteOptions: {
        backgroundColor: '#ffffff',
        fontSize: '12px',
        textColor: '#000000',
        borderColor: '#cccccc',
        borderWidth: 1,
        padding: 4              // パディング設定
    }
});

// レイヤーを地図に追加
map.addLayer('annotations', annotationLayer);