// PointSpikeLayerの使用例

const worldData = await d3.json("../geojson/world.geojson");
const capitalsData = await d3.json("../geojson/world-capitals.geojson");

const width = 800;
const height = 600;

const projection = d3.geoEquirectangular()
    .fitExtent([[10, 60], [width-10, height-20]], worldData);

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

// PointSpikeLayerインスタンスを作成
const spikeLayer = new Thematika.PointSpikeLayer({
    data: capitalsData,
    length: (d) => Math.sqrt(d.properties.population || 1000000) / 500,
    direction: 'up',
    attr: {
        "fill": '#ff6b6b',
        "fill-opacity": 0.7,
        "stroke": '#d63031',
        "stroke-width": 1
    }
});

// レイヤーインスタンスを地図に追加
map.addLayer('graticule', graticuleLayer);
map.addLayer('world', worldLayer);
map.addLayer('outline', outlineLayer);
map.addLayer('spikes', spikeLayer);