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

はじめに

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

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

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

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

DrawTrail

図1.マーカーの配置

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

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

DrawTrail

図2.いろいろなアイコン

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

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

DrawTrail

図3.マーカーをクリックすると、スカイツリー公式サイトが開きます

Font Awesome をつかう

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

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

 なお、当サイトは Font Awesome 6 (Free) に対応しています。マップを埋め込む場合は、埋め込み先のサイトにも事前にダウンロードしておいてください。

DrawTrail

図4.Font Awesome をつかう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です