// createClipPolygonの使用例

// アフリカ大陸outlineデータを読み込み
const aflicaClipGeoJSON = await d3.json('../geojson/aflica.geojson');


// 投影法を地図データに合わせて設定
currentProjection.fitExtent([[10, 10], [790, 390]], geojson);


// クリップエフェクトを作成
const clipEffect = Thematika.createClipPolygon({
    id: 'aflica-clip',
    polygon: aflicaClipGeoJSON,
    projection: currentProjection
});


// 地図を作成
const map = new Thematika.Map({
    container: '#map',
    width: 800,
    height: 400,
    projection: currentProjection,
    defs: [clipEffect]  // クリップエフェクトを追加
});


// ラスターレイヤー（アフリカの画像を使用）
imageLayer = new Thematika.ImageLayer('raster', {
    src: '../img/africa_img.png',
    bounds: [-25.855061, -38.477223, 66.427949, 41.479176], // [west, south, east, north]
    style: { 
        "opacity": 0.7 ,
        "clip-path": clipEffect.url()  // クリップパスを適用
    },
    
});
map.addLayer('raster', imageLayer);