操作できる地図をWebサイトへ掲載！Kumoyの埋め込み機能を解説

はじめに

QGISで作成した地図をWebページで紹介するとき、地図を画像として掲載するだけでは、閲覧者が見たい場所へ移動したり、拡大して詳しく確認したりすることはできません。一方、Webマップを一から開発するには、地図表示の仕組みやサーバーを用意する必要があります。

Kumoyの埋め込み機能を使うと、QGISで作成してKumoyへ保存したマップを、操作可能な地図としてWebページ内に掲載できます。地図名やレイヤーなどの表示項目を選び、生成されたコードをWebページへ貼り付けるだけで利用できます。

この記事では、Kumoyの埋め込み機能を使って、Webページに地図を掲載する方法について解説します。

Kumoyの概要や、QGISからマップを保存する流れを知りたい方は、以下の記事もあわせてご覧ください。

Kumoyの埋め込み機能とは

Kumoyの埋め込み機能は、Kumoyで公開しているWebマップを、iframeというHTMLの仕組みを使って別のWebページ内に表示する機能です。

通常の共有リンクでは、リンクをクリックするとKumoyのWebマップが別のページで開きます。埋め込み機能では、自社サイト、ブログ、オウンドメディアなどの記事内に地図を配置できるため、閲覧者はページを移動せずに地図を確認できます。

埋め込んだ地図では、ドラッグによる移動や拡大・縮小、レイヤーの表示切り替えなどができます。画像を貼り付ける場合と異なり、閲覧者が目的に合わせて地図を操作できる点が特徴です。

掲載先や読者に合わせて、地図の名称や説明、各種ボタンなどの必要な情報だけを表示できるため、Webページの限られたスペースにも地図を配置しやすくなります。

Webページへ地図を埋め込む手順

マップをKumoyへ保存する

埋め込み機能を利用するには、まず、QGISで作成したプロジェクトをKumoyのマップとして保存しておく必要があります。

QGISからマップを保存する手順は、以下の記事で詳しく紹介しています。

共有画面を開く

マップをKumoyに保存したら、KumoyのWeb画面にログインし、ダッシュボードから対象のプロジェクトを開いて、埋め込みたいマップを選択します。

マップが開いたら、マップ画面右上の共有ボタン（青色の矢印）をクリックします。

「マップを共有」という画面が表示されます。「アクセスできる人」に表示されている現在の公開範囲を確認します。

公開範囲が［非公開］の場合は、［公開］または［保護されたアクセス］へ変更してから埋め込み設定へ進みます。公開範囲を変更すると閲覧できる人が変わるため、マップに含まれる情報を確認したうえで設定してください。

表示する項目を選ぶ

「マップを共有」画面で［埋め込み］をクリックすると、「埋め込み設定」画面が表示されます。

右側の「サイドバー」と「コントロール」で、埋め込み先に表示する項目を選択します。

埋め込み時に設定できる項目は次のとおりです。各項目の右側にあるボタンをオフにすると、その項目が非表示になります。

分類	項目	表示される内容
サイドバー	地図名	Kumoyで設定したマップ名
サイドバー	説明	マップに設定した説明文と出典表記
サイドバー	レイヤー	レイヤーの一覧、凡例、表示切り替え
コントロール	ズーム	地図を拡大・縮小するボタン
コントロール	コンパス	地図の向きを示し、北向きへ戻すボタン
コントロール	現在地	端末の位置情報を使って現在地へ移動するボタン
コントロール	スケール	地図上の距離を示すスケールバー

たとえば、記事に地図を埋め込む場合、地図の目的を記事内ですでに説明しているなら、「説明」を非表示にすると、地図の表示スペースを広く確保できます。一方、閲覧者にレイヤーを切り替えて見比べてもらいたい場合は、「レイヤー」を表示すると便利です。

地図の表示範囲を調整する

プレビューのマップ画面をドラッグし、スクロールまたはズームボタンで縮尺を調整することで、その中心位置とズームレベルが埋め込みコードへ反映されます。掲載時に見せたい範囲が画面の中央へ入るように調整しましょう。

右側の「ビュー」には、現在の中心位置とズームレベルが表示されます。［リセット］をクリックすると、マップを開いたときの初期表示へ戻せます。

コードをコピーしてWebページへ貼り付ける

表示内容の設定とビューの調整が終わったら、［コードをコピー］をクリックします。

コピーされるコードは、次のようなiframe要素です。マップのIDや表示設定は自動的に含まれるため、通常はコードを組み立てる必要はありません。

<iframe
	src="https://app.kumoy.io/embed/map/6e81496d-77e2-43d5-b6dd-10bf423392e3?title=1&amp;description=1&amp;layers=1&amp;zoomControl=1&amp;compassControl=1&amp;geolocateControl=1&amp;scaleControl=1&amp;center=140.09%2C35.4&amp;zoom=9.58"
	width="100%"
	height="480"
	style="border:0"
	loading="lazy"
	referrerpolicy="strict-origin-when-cross-origin"
	allow="geolocation"
	title="公共交通空白地の抽出 - Kumoy"
></iframe>

Webページを編集する画面で、HTMLを入力できるブロックやソース編集機能を開き、コピーしたコードを貼り付けます。保存または公開する前にプレビューを開き、地図が表示されて操作できることを確認してください。

今回作成した地図を実際に埋め込んだ例は以下のとおりです。埋め込まれているため、マップの表示範囲を変更したり、各種ボタンをクリックしたりすることが可能です。

利用しているCMSやWeb制作サービスによっては、安全上の理由からiframeが削除されることがあります。その場合は、サービスの管理者またはWebサイトの担当者へ、外部コンテンツを埋め込む方法を確認してください。

NotionにKumoyのマップを埋め込む

これまで紹介したのは、生成されたiframeコードをHTMLへ貼り付けて地図を埋め込む方法です。一方、サービスによっては、埋め込みコードを使わず、マップのURLを貼り付けるだけで地図を表示できます。

Notionのようにリッチ埋め込み（oEmbed）に対応しているサービスでは、公開マップの画面の［リンクをコピー］から取得したURLを貼り付けるだけで、埋め込み機能を利用できます。

たとえばNotionでは、ページにURLを貼り付けて［埋め込み］を選びます。

すると、Notionのページ内に地図が表示されます。表示された地図は、その場で移動や拡大・縮小、属性情報の確認などの操作ができます。

おわりに

Kumoyの埋め込み機能を使うと、QGISで作成した地図を、移動や拡大・縮小ができるWebマップとして自社サイトやブログへ掲載できます。生成されたコードを貼り付けるだけなので、地図表示の仕組みを一から開発する必要はありません。

地図名、説明、レイヤー、操作ボタンを掲載目的に合わせて選び、プレビューで見せたい範囲を調整できる点も便利です。静止画像では伝えにくかった地理的な広がりや、複数レイヤーの関係を閲覧者自身に確かめてもらえます。

まずは公開済みのマップで埋め込み設定を開き、プレビューを確認しながらWebページに合う表示を作ってみましょう。

データ出典

• 地理院タイル
• 「国土数値情報（鉄道データ）」（国土交通省）
• 「国土数値情報（行政区域データ）」（国土交通省）
• 「国土数値情報（250mメッシュ別将来推計人口（R6国政局推計））」（国土交通省）