deck.glで作成した地図をページの一部に埋め込む

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

概要

deck.glはデフォルトでは表示されている画面いっぱいに地図が表示されますが、場合によってはページの一部分にのみ地図を埋め込みたい場合があります。

cssの設定で地図のサイズを固定しページへの埋め込みを行うことができるのでそのやり方を解説します。

サンプルコード

解説

親要素にposition: “relative”を設定し、横幅(width)と高さ(height)を指定することで地図の表示サイズを調整できます。

また、通常deck.glが出力するcanvasのid名は「deckgl-overlay」になりますが、idプロパティを指定することで変更することができます。

一つのページに複数の地図を埋め込むときはid名を変更したほうがよいでしょう。

//レンダリング
  return (
    <div className="App">
      <h1>ページに地図を埋め込みます</h1>
      <div
        style={{
          position: "relative",
          width: 400,
          height: 300
        }}
      >
        <DeckGL
          id={"deck-maps1"} //canvasのidになる。複数埋め込みたいときは指定
          initialViewState={viewState}
        />
      </div>
    </div>
  );
};

//レンダリング

return (

<h1>ページに地図を埋め込みます</h1>

<div

style={{

position: "relative",

width: 400,

height: 300

}}

<DeckGL

id={"deck-maps1"} //canvasのidになる。複数埋め込みたいときは指定

initialViewState={viewState}

</div>

);

};

概要

サンプルコード

解説

投稿者: shimizu