jQueryでブログ内にオシャレな地図を表示したいんじゃ

【※重要！】地図ツール改良版作りました

www.procrasist.com

この記事をサラッと見た後に、↑のに行くとすんなり見られると思います。なかなか出来は良いと思いますので是非是非！

こんにちは、ほけきよです。

先日へそちゃさん(id:hesocha)がステキな固定ページの使い方を紹介してました。

www.hesocha.com

おっ、これは良い。

と思い、導入を検討。今回は、

(わかれば)自分でいろいろといじることが出来る
オシャレ

という理由から、javascriptで地図表示を試みて見ました。しかし、雑魚なので色々と手詰まりなところもあったり...

この辺の知見がある方は、教えてください👶

javascript, jQuery初心者ですので、もっといい方法があるよという人は優しく教えてください。
オシャレですが、動作は遅くなりそう。

オシャレなjQueryのMapライブラリ : "jQuery vector map"

イマドキのワカモノはじゃばすくりぷとというのでなんでもオシャレにするらしい。じゃあ地図もあるのでは？

と思い調べるとナウなヤングにピッタリのjQuery プラグインがあるっぽい？

なので、jQueryで悪戦苦闘してみる。ちなみにいじったことはない。

github.com

どうやってjsスクリプト埋め込むのよ？

まずこれ。ブログ内にjavascriptって埋め込めるの？？という疑問。

しらべると、チャートグラフでしたいことをやってる人いた。ありがてぇ。

lance104.hatenablog.jp

HTMLを普段から触っている人にしてみれば簡単なことかもしれませんが、 <script>タグでスクリプトを埋め込めるんですね！たのしー！

ほむほむ。記事には

インポートするライブラリはデザインタイトル下にぶち込む
はてな記法にする

と書かれていましたが

本文中に埋め込んでもOK*2
MarkdownでもOK*3

です。

あとは、javascriptで実行したい処理を、次の記述で挟むことがポイントのようです。

$(document).ready(function(){
  //何かしらの処理
});

コチラの記事が参考になりました。

jQueryの基本 - $(document).ready - Qiita

MAPを埋め込みたい

これでjQueryを埋め込めることがわかったので、後はマップをぶち込みましょう。

ライブラリの読み込み厄介？

さっきのmapのTOPページに行くと

...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
<script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
....

この../distってのが厄介。そもそもローカルに落として使う想定のようなので、はてなのようなサーバを借りているとこのままじゃアカンみがある。そこで、直接リンクさせて、ライブラリを読み込むことにする

便利なのがこいつ。

RawGitでGithubファイルをCDN化

rawgit.com

参考記事はこれ

GitHub上のファイルをCDNとして参照する - Qiita

CDNとは、Content Delivery Networkのこと

ファイルなどのWebコンテンツを配信するために最適化されたネットワークのこと。有名なライブラリだと、インターネットで公開されており、JavaScrptやCSSファイルをダウンロードしなくても、読み込むだけで利用できるようになっていたたりする。

GitHub上のファイルは、インターネットで公開されていても、テキストとして読み込まれるため、直接URLを指定してもJavaScriptやCSSとしては利用できない。

Rawgitを使えば、GitHub上のファイルのURLを指定するだけで、CDN化してくれる。

ふむ、良さげ。これを使おう。

ちず

オシャレ、ええね。

コピペでOK！コード

こういう地図を表示させたい方のために、コードです。はてなならたぶん動きます。

コードをみる

<link href="https://rawgit.com/manifestinteractive/jqvmap/master/dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/manifestinteractive/jqvmap/master/dist/jquery.vmap.js"></script>

<script type="text/javascript" src="https://rawgit.com/manifestinteractive/jqvmap/master/dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
<script type="text/javascript" src="https://jqvmap.com/js/vmap/jquery.vmap.sampledata.js?v=1.5.0" charset="utf-8"></script>
 
<script>
(function($){
$(document).ready(function(){   
    $('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: null,
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial',
        values: sample_data,
        markerStyle: {
            initial: {
                fill: '#F8E23B',
                stroke: '#383f47'
            }
        },
        markers: [
            {latLng: [41.90, 12.45], name: 'Vatican City'},
            {latLng: [43.73, 7.41], name: 'Monaco'}
        ],
    })
});
})(jQuery);
</script>
<div id="vmap" style="width: 300px; height: 200px;"></div>