DrawTrailについて

はじめに

 サイトやブログにマップを張り付けたい、という状況はしばしありますが、そういった時 Google Maps が使われることは多いように思います。

 しかし、ただ張り付けるだけではなく、マップ上に文字を書いたり、統計情報をまとめたりと、少しマップをカスタマイズしたいと思う場合もあります。ところが、カスタマイズするためには、プログラムをゼロから組んでいかなければいけませんし、利用料が発生することもあって(参考)、マップのカスタマイズには少しハードルを感じます。

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

 当サイトで出力されたプログラムが、皆様のサイト運営の一助となれば幸いです。

使用例

 以下 DrawTrail の使用例です。

DrawTrail

図1. アジア各国の人口分布

DrawTrail

図2. 日本百名山と百名湯

DrawTrail

図3 地図への画像埋め込み

DrawTrail

図4. GPS ログの読み込み

 
 使ってみたい方は、トップページ をご覧になってください。簡単な使い方はこちらにあります。

 また、当サイト(DrawTrail)と連携している Android の GPS ロガーアプリもあります( Android4.1 からAndroid13 に対応)。ダウンロード/使い方はこちら。ソースコードも公開しているので、気になる方は「【osmdroid】Android で GPS ロガーを自作する(Java)」のページをご覧になってください。

コンセプト

 当サイトでは、埋め込みマップの「プログラム自動生成」を目標としています。プログラム内で使用するのは、マップデータと Leaflet (JavaScript ライブラリ) のみで、特にマップデータに関しては、商用利用可能かつ登録不要のオープンソースを参照しています。

 

図2. DrawTrail のコンセプト


 当サイトを停止しても、他の埋め込みマップへの影響が出ないよう、プログラムは当サイトのサーバーから独立したものにしています。バージョン管理などが複雑になるので、プラグインや jQuery など他のライブラリは参照していません。
 例外的に、Font Awesome の CDN へのリンクを貼れるようにしていますが、基本的には非推奨です。自分のサイトに Font Awesome をダウンロードしてから使う方が安全だと思います。

 

図3. 構成のシンプル化について


 動作環境としては、CSS3 以上の環境を想定しています。これはマーカー等を CSS で描画しているためで、数年以内にアップデートされたブラウザなら基本的に問題なく動作すると思います。

サイトポリシー

  • 当サイトで行うのは、埋め込み地図のプログラムを生成することです。サイト埋め込みに伴う不具合、損害について当方一切責任を負いません。
  • 当サイトはリンクフリーです。ご自由にお使いください。
  • 使用するマップタイルの利用規約をご参照の上、ご利用ください。
  • 使用しているマップデータは寄付により成り立っています。興味がある方はこちら(英語サイト)をご参照ください。

 

コメントを残す

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