// ImageLayerの使用例（アフリカ画像）
const map = new Thematika.Map({
    container: '#map',
    width: 800,
    height: 400,
    projection: d3.geoEquirectangular(),
    backgroundColor: "#e6f3ff"
});

// 背景レイヤー（世界地図）
const backgroundLayer = new Thematika.GeojsonLayer({
    data: geojson,
    attr: {
        "fill": '#ffffff',
        "stroke": '#ff0000',
        "stroke-width": 2
    }
});

// ラスター画像レイヤーの追加
const 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 
    },
    showBboxMarkers: false // 境界ボックスマーカーの表示
});

// 経緯線レイヤー
const graticuleLayer = new Thematika.GraticuleLayer({
    step: [15, 15],
    attr: {
        "stroke": '#999999',
        "stroke-width": 0.5,
        "stroke-dasharray": '2,2'
    }
});

// 投影法を設定
imageLayer.setProjection(map.getProjection());

// レイヤーを地図に追加
map.addLayer('countries', backgroundLayer);
map.addLayer('graticule', graticuleLayer);
map.addLayer('raster', imageLayer);