【DrawTrail】 マップにマーカーを記載する

はじめに

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

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

マップにマーカーを記載する

　マップにテキストを記載するには、まずトップページより「マーカー」を選択します。マップ内をクリックすると、クリックした箇所にマーカーが記載されます。
　マーカーを削除するには、削除したいマーカーを右クリックして「マーカーを削除」を選択するか、「マーカー」→「マーカーをすべて削除する」あるいは「ひとつ前のマーカーを削除（Ctrl+X）」を選択すると、マーカーが削除されます。

マーカーをカスタマイズする

　マーカーをカスタマイズするには、トップページより「マーカー」→「マーカースタイル」から、使いたいマーカーを選択します。マーカーの色を変更するには、「マーカー」→「カラーパレット」より、所望の色を選択してください。トップページのマップ内をクリックすると、変更した設定のマーカーが記載されます。

マーカーにリンクをつける

　マーカーをクリックすると、別のページにジャンプするようにすることも可能です。まずトップページより「マーカー」→「リンクURL」に、ジャンプ先URLを記入します。マップをクリックすると、リンクを付加したマーカーが記載されます。

Font Awesome をつかう

　CSS を使ったアイコンの中でも、Font Awesome というウェブフォントは、数千種ものアイコンが登録してあり、特に有名なウェブフォントになります。そんな Font Awesome をマーカーとして使用することも可能です。
　トップページより「マーカー」→「Font Awesome をつかう」のフォームに、Font Awesome のHTMLを記載してください。例えば、飛行機の離陸アイコン（２倍サイズ）を使いたければ、下記のようにフォームに記入します。マップをクリックすれば、離陸アイコンが記載されます。

<i class="fas fa-plane-departure fa-2x"></i>

　なお、当サイトは Font Awesome 6.4.2 (Free) に対応しています。マップを埋め込む場合は、埋め込み先のサイトにも事前にダウンロードしておいてください。
　とりあえず使ってみたいだけで、ダウンロードはちょっと…という方は、「マーカー」→「Font Awesome の CDN をつかう」をチェックしてください。CDN 用のリンクが埋め込まれます。