【DrawTrail】 マップに画像を埋め込む

はじめに

　当サイトでは、埋め込み地図のカスタマイズをより簡単なものにするために、プログラムを自動生成するフォームを作っています。プログラム内で参照しているマップデータにはオープンデータを使用していて、商用利用や改変など、かなり幅広い利用が可能です。

　今回はマップに画像を埋め込む方法についてまとめたいと思います。作成したマップをサイト内に貼り付ける方法については、別の記事を参照してください。（→「【DrawTrail】埋め込み地図を表示させる方法」）

マップに画像を埋め込む

　マップに画像を埋め込むには、まずトップページより「埋め込み画像」→「埋め込み画像」のフォームに画像URLを入力します。なお画像URLを取得するには、ネット上の画像を右クリックして、「画像アドレスをコピー」を選択してください。フォームに画像URLを入力後、トップページのマップをクリックすれば、クリックした箇所に画像付きマーカーが表示されます。画像を開くには、マーカーを右クリックして、「埋め込み画像を開く」を選択すると、埋め込んだ画像を確認できます。
　実際に作成した埋め込み地図上では、下図のように、マーカーをクリックすると画像が表示されるようになります。

DrawTrail

図1.マーカーをクリックすると、画像が開く

　また、トップページより「埋め込み画像」→「埋め込み画像を開いておく」をONにすると、マーカーをクリックせずとも、画像をあらかじめ開いておくことができます。

DrawTrail

図2.埋め込み画像を開いておく

　画像のサイズは「埋め込み画像」→「画像サイズ」より変更可能です。但し、同一ページ内の埋め込み画像のサイズは同じものにしてください。

画像にコメントを挿入する

　画像にコメントを挿入するには、トップページより「埋め込み画像」→「コメント」の欄にコメントを記載しておいてください。埋め込み画像をマップに付加すると、同時にコメントも画像内に記載されます。

DrawTrail

図3.画像にコメントを挿入する

画像にリンクを付加する

　画像にリンクを付加するには、トップページより「マーカー」→「リンクURL」の欄にURLを記載しておいてください。埋め込み画像をマップに付加すると、画像をクリックすることで別サイトにジャンプするようになります。

DrawTrail

図4.画像をクリックすると、すみだ水族館HPへジャンプする

注意点

　この埋め込み画像では、Leaflet のポップアップの CSS を上書きしているのですが、再度 Leaflet の CSS を読み込むと、上書きされていた CSS が元に戻って、画像が崩れたりすることがあります。そのときは、後から読み込むマップの Leaflet の CDN へのリンクを削除（「エクスポート」→「Leaflet の CDN をつける」をOFF にする）と上手く表示されることがあります。