deck.glでツールチップを表示する

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

deck.glでツールチップを表示する方法はいくつかありますが、ここではdeck.glに標準で備わっているビルトインツールチップを使用する方法を解説します。

サンプルコード

解説

deck.glコンポーネントでは、getTooltipプロパティを通してビルトインツールチップを使用することができます。

getTooltipのコールバックでは、引数からマウスホバー下のデータを取得することができ、戻り値にツールチップ内に出力するhtmlを指定することができます。

GeoJSONレイヤーに設定されたデータを取得し、ツールチップ内にテーブルとして出力するサンプルは以下となります。

//ツールチップを生成する
const tooltipHandler = (d) => {
    //マウスホバー位置に地物が存在するかチェックする
    if (!d || !d.object) return null;
    let obj = d.object;

    //geojsonレイヤーの場合はpropertiesの値をobjに入れる
    if (d.object.properties) obj = d.object.properties;

    //データからtr要素を生成する
    const trs = Object.keys(obj)
        .filter(key => obj[key]) //値がnullや""のプロパティは省く
        .map(key => `<tr><th style="text-align:right">${key}</th><td>${obj[key]}</td></tr>`)
        .join("\n");

    //tooltip内に出力するhtml要素を生成する
    const html = ["<table>", trs, "</table>"].join("\n");

    return {
        // tooltip内に出力するhtml要素を渡す
        html: html,
        // tooltip内のhtmlに適用するstyleを設定する
        style: {
            fontSize: "0.5em"
        }
    };
};


return (
    <DeckGL
        getTooltip={tooltipHandler}
    />
)

//ツールチップを生成する

const tooltipHandler = (d) => {

//マウスホバー位置に地物が存在するかチェックする

if (!d || !d.object) return null;

let obj = d.object;

//geojsonレイヤーの場合はpropertiesの値をobjに入れる

if (d.object.properties) obj = d.object.properties;

//データからtr要素を生成する

const trs = Object.keys(obj)

.filter(key => obj[key]) //値がnullや""のプロパティは省く

.map(key => `<tr><th style="text-align:right">${key}</th><td>${obj[key]}</td></tr>`)

.join("\n");

//tooltip内に出力するhtml要素を生成する

const html = ["<table>", trs, "</table>"].join("\n");

return {

// tooltip内に出力するhtml要素を渡す

html: html,

// tooltip内のhtmlに適用するstyleを設定する

style: {

fontSize: "0.5em"

}

};

return (

<DeckGL

getTooltip={tooltipHandler}

)

おまけ

ついでにクリック時にカスタムツールチップを表示するサンプルもつくってみましたので興味ある方はリンク先を参照してください。

概要

サンプルコード

解説

おまけ

投稿者: shimizu