これまで旅した／暮らした国ごとに、記事を分類して世界地図を作ってみーたよ٩( 'ω' )و
こちらのページから遊んでみてね！
どうやって作ったか（ざっくり）
・Leaflet.jsという地図ライブラリを使用し、HTMLでシンプルな地図ページを作成
・jsonデータで国情報データを作成し（ここは手動）、その情報を取得して旗を設置
・当該記事に国名ラベルをつけているので、国ごとにBlogger APIを用いてデータ取得
・Blogger APIで取得したデータからカウントした記事件数と、記事一覧へのリンクを、マーカーのツールチップに追加
・ここまでの手順で作ったサイトをGitLab Pagesで公開し、iframeでブログ固定ページに埋め込み
要望があれば、詳しい解説記事を書きますので、記事にコメントをいただけると嬉しいです。
コードを見たい方はこちらからどうぞ。
こだわりポイント
地図のビンテージっぽさ・紙の質感を出した
 |
| CSS無しだとこんな感じ。 |
いかに宝の地図っぽくするかは、まずLeafletのプロバイダをいい感じに選定するところから始まりました。
今回はEsri.NatGeoWorldMapを使っています。
種類によっては、別途サービスに登録して、appkeyを取得しないといけないものがあったので、それが不要なものを使いました（わざわざ環境変数の設定をするのが面倒なので）。
フォントが一番それっぽいものを選びました。
古い紙の質感は、紙のマテリアルを用意しておき、background-image: url('../assets/paper.png'); として上から重ね、mix-blend-mode: multiply; というプロパティを使うことで、いい感じに実現できました。
ビンテージっぽい色は、filter: sepia();を使いました。
コードを綺麗に
ざーっと動くものを作っても良かったのですが、オブジェクト指向を意識して書いてみました。勉強になった。
まとめ
初めてLeaflet.jsを触ってみましたが、かなり充実した便利なライブラリだとわかりました。
一般的な世界地図だけじゃなく、自分の好きな画像を読み込んで地図も作れるらしい...
空想世界の地図とか作れちゃいそうだね...(๑╹ω╹๑ )
ということで、Bloggerで、各地域ごとにラベル付けした記事を一覧で見られる地図を埋め込んでみたお話でした！
0 コメント