「Googleマイマップ」を利用した「コーヒー豆 生産国マップ」は気に入っています。
コーヒー豆 生産国 Googleマイマップ
でも、選択や拡大しないと「国名」が分からないし「国旗」も載せたいところです。そこで「国名」「国旗」を表示したオリジナル「コーヒー豆 生産国マップ」を作成しました。
コーヒー豆 生産国 国旗付き世界地図
以下に、その完成までの流れと利用したサイトやサービスを紹介します。
フリーの世界地図も国旗も準備万端
前提として「Googleマイマップ」はサイトに埋め込めるけど画像として二次利用できないので、まずはフリーの世界地図と国旗イラストを用意しました。
「コーヒー好き.com」で世界50か国のコーヒー豆 生産国が分かる Googleマップ連携と銘柄ごとの国旗表示を実現
これらの素材を使って、世界地図にコーヒー豆 生産国 50か国の 場所を「国名」と「国旗」で示しました。
さすがに 50か国は多いし、中米やアジアなど国が密集しているエリアは大変でした。
上下トリミングしてスクロール可能に
ロシアとかカナダとかコーヒーを生産できない国ばかり大きいので上下をトリミング。いい感じです。
でも、これだと横長すぎてページ内で全体表示すると小さくなりすぎるので画像をスクロールできるようにしました。
結構いい感じですが、このままだと大きすぎですし、マウス操作だとスクロールバーでスクロールは不便です。
便利ツールでクリッカブルマップに
さらに国名や国旗をクリックすると各国のページにジャンプしたいところ。そんなときは「クリッカブルマップ」という手法がありますが、50か国もあると手間ですが「HTML Imagemap Generator」という素晴らしいサービスがありました。
これを使って作成するとサクサクできました。大感謝です。
ただし、このままでは表示サイズを小さくすると「クリッカブルマップ」の位置がずれるので、それを補正できるプログラムを探して導入してみました。
さらにマップ上をドラッグするとマップがスクロールできるプログラムも実装。
結果、以下のようにドラッグでスクロール可能な「クリッカブルマップ」が完成。マウスでドラッグしたり、国旗をクリック／タップしたりしてみてください。
トップページで表示して「拡大版」も公開
まずはトップページで表示できるようにしました。最初から Googleマイマップと地図が２つ並んで表示もスッキリしないのでアコーディオンで最初は閉じておきます。
いい感じですが、やはり表示が小さめです。
そこで「拡大版」ページも作成。サイドバーなどを非表示にしてマップを幅いっぱいに表示できます。
https://coffeezuki.com/map/worldmap/
これで「コーヒー豆 生産国 国旗 世界地図」を堪能できると思います。めでたしめでたし。
国旗にポインターを合わせると黒枠を表示
最初から「国旗」の上にポインターを合わせると、ポインターの形状が「矢印」から「指差し」に変わるようにはなっていました。
でも、もう少し「その国旗を選択している」と分かる表示にしたくて調べたところ「クリッカブルマップ」では結構、難しいと分かってきましたが、それでも以下のページを参考に「hover 時の効果」を加えてみました。
結果として、国旗の上にポインターを合わせると「黒い枠」が表示できるようになりました。
黒から別の色にしようと試したところ、なかなかうまくいかないので、とりあえず今回は、ここまでにしておきます。
コーヒー豆 生産国 国旗付き世界地図 
