GoogleMapって便利ですよね。
住所や場所の名前を入力するだけでその場所を検索したり、ある地点から目的地までの経路を検索できたりと、高機能です。無料で使えるなんて夢のようですね。
このブログでも、訪れた場所やツーリングのルートをマップに入力し、記事に埋め込んで使っています。
このブログにとって、地図を貼ることはとても重要なことなのです。
地図に色々書き込みたい
今、これからツーリングに行きたい場所、そしてツーリングに行った場所を地図に記したページを作りたいな、と考えているところです。
もちろんGoogleMapの「マイマップ」という機能を使えばできるのですが、どうも思っていたように作れなくて、色々調べていたのです。
それに、地図に書き込んだデータは、Googleのサーバーに保存することになります。できれば自分が借りているサーバーに置くことができればなぁと思っていました。
やりたいこと、とは、行きたい場所をデーターベース化し、地図と連動させること。
ただ、すべてをWEB上で作り上げることは、和休の腕ではかなり難しいことが分かりました。
代わりに、なんとかできそうな方法として、パソコン上で地点を登録したファイルを作成し、サーバーへアップロード。そのファイルを読み込ませる方法が見つかりました。
そこで、1月に入ってからその方法を色々試していたのですが、やっと形になりました。
JavaScriptライブラリ「Leaflet」
「Leaflet」ってなんじゃい？
「Leaflet」とは、ブラウザ上で地図を閲覧するためのプログラムです。
地図データそのものではなくて、地図上を移動したり、拡大・縮小したりする閲覧機能の方です。
詳しいことは他サイト様を参考していただきまして、早速地図を表示してみましょう。
ポートタワーを中心に表示しています。
こちらがLeafletで地図を表示させたものです。
地図の中心は、神戸を象徴する建物であるポートタワーの位置としています。
Leafletを使えば、地図の上に自分の好きなようにピンを立てたり、図形を配置することができます。
では、当ブログのマスコットである「照晴くん」に 日本の中心で 愛を叫ばせてみたいと思います。
北緯35度、東経135度の交差点には、「日本のへそ」と呼ばれる場所があります。今回はここを日本の中心として、照晴ピンを立てました。
国土地理院の地図タイルを使いたい！
地図は「国土地理院」が提供している地図データを使っています。
国がせっかく無料で提供してくれているのですから、使わないと損ですよね。それに、「国土地理院の地図」ってなんだか本格的でワクワクしませんか？
国土地理院コンテンツ利用規約 はこちらへどうぞ。
国土地理院が提供している地図データは何種類かあって、1番目のポートタワーは標準地図、2番目の日本の中心は淡色地図を表示しています。
淡色地図のデザインが気に入りましたし、元々国土地理院の地図を使いたかったので、今後、旅馬ではGoogleMapではなく、Leaflet＋国土地理院の地図を主に使っていこうと考えています。
他にも
英語表記
スクロールはロックしています
白地図
スクロールはロックしています
航空写真
なんと写真の地図だって使うことができます😲
地図に書き込んでいくあの喜びをもう一度
LeafletはJavaScriptで記述します。和休は、JavaScriptは使ったことが無かったので、1月に入ってからあれやこれやと試行錯誤していました。
一応、ピンの立て方はわかったので、地図上に好きなだけピンを立てることができます。
各都道府県の県庁所在地にピンを立てました
こんな風にね😁
もうひとつ、こだわって作ったのが、地図の左上にある付箋のようなもの。
もちろん、地図帳に付箋を貼ったイメージで作りました。
昭和生まれの方なら、自分の地図上にあれこれ書き込んだり、メモを書き込んだ付箋を貼ったりして自分の地図を作り上げる楽しみ、わかりますよね？
コメントをどうぞ！