//地理データ取得
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/bloom-img.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
    }
})

// PointAnnotationLayerを作成
const annotationLayer = new Thematika.PointAnnotationLayer({
    data: pointData,
    annotationType: "callout",
    textAccessor: 'name',
    titleAccessor: undefined,
    offsetAccessor: (feature, index) => [30, -20],
    subjectOptions: {
        type: "circle",
        r: 20,
        width: 16,
        height: 16,
        fill: "none",
        stroke: "#ffffff",
        strokeWidth: 1.5,
        strokeDasharray: "2,2",
    },
    connectorOptions: {
        stroke: '#ffffff',
        strokeWidth: 1
    },
    noteOptions: {
        backgroundColor: "#ffffff",
        fontSize: '12px',
        textColor: '#000000',
        borderColor: '#cccccc',
        borderWidth: 1,
        padding: 2
    }
});


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