//地理データ取得
const aoi = await d3.json('../geojson/bloom/bloom-aoi.geojson');
const lineDemoData = await d3.json('../geojson/bloom/bloom-line.geojson');
const pointData = await d3.json('../geojson/bloom/bloom-point.geojson')

//表示範囲のデータからbboxを取得   
const bbox = Thematika.getBbox(aoi)

// 投影法を地図データに合わせて設定
const currentProjection = d3.geoEquirectangular();
currentProjection.fitExtent([[10, 10], [width-10, height-10]], aoi);


//エフェクトプリセット
const bloom = Thematika.FilterPresets.standardBloom()
const grayscale = Thematika.FilterPresets.grayscale()

// 地図を作成
const map = new Thematika.Map({
    container: '#map',
    width: width,
    height: height,
    projection: currentProjection,
    backgroundColor: '#0f172a',
    defs:[grayscale,bloom]
});

// ラスターレイヤー（背景画像）
const imageLayer = new Thematika.ImageLayer('raster', {
    src: '../img/Satellite.png',
    bounds: [bbox.minX, bbox.minY, bbox.maxX, bbox.maxY], // [west, south, east, north]
    attr:{
        "filter":grayscale.url()
    },
    style: { 
        "opacity": 1 // 画像の不透明度
    }
});

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

const bloomLineLayer = new Thematika.LineConnectionLayer({
    data:lineDemoData,
    lineType:"smooth",
    attr:{
        "filter": bloom.url(),
        "stroke": "#ff0000",
        "stroke-width": 6,
    }
})
const innerLineLayer = new Thematika.LineConnectionLayer({
    data:lineDemoData,
    lineType:"smooth",
    attr:{
        "stroke": "#ff0000",
        "stroke-width": 2,
        "opacity":0.9
    }
})

map.addLayer('graticuleLayer', graticuleLayer);
map.addLayer('imageLayer', imageLayer);
map.addLayer('bloomLineLayer', bloomLineLayer)
map.addLayer('innerLineLayer', innerLineLayer)