プロクラシスト

今日の寄り道 明日の近道

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


スポンサーリンク

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

www.procrasist.com

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

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

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

おっ、これは良い。

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

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

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

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

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

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

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

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

github.com

*1

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

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

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

lance104.hatenablog.jp

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

ほむほむ。記事には

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

と書かれていましたが

です。

あとは、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を指定してもJavaScriptCSSとしては利用できない。
  • 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>
    

    にほんちず

    ↑のは世界地図。日本地図ってないのかな。 探すと作ってくれている人がいました。すてち!

    GitHub - takemaru-hirai/japan-map: jQuery plugin to show clickable map of prefectures (or area) of Japan.

    ところで、助けて欲しい。

    表示は出来たのですが、それ以降が全然進まず手詰まりなのです。 jQueryに詳しい方々に助けてほしいです。

    世界地図

    表示以外の細かな調整をしようとしたら何故か出来ないんですよね。むずかしい。。。

    • Configuration Settingsが上手くいかない*4
      • マーカーを打ちたいけど、打てない (参考)
      • クリックしたら情報を表示させたいけど、出来ない(参考)

    日本地図

    • クリックの位置が地図の位置と同期が取れていない

    まとめ

    いかがでしたでしょうか。 jQueryをうまく使うことで、表現の幅が広がりそうですね。 皆さん是非試してみてください!そして助けてください!笑

    オシャレなの、作りたい~~!

    *1:もう一つ、Mapaelというプラグインもありました。こちらも便利そうなので試したい

    *2:むしろある特定の記事だけに使いたいならこっちのが良いかも?

    *3:間違いなくHTML記法でもOKでしょう。面倒でやってませんが。

    *4:ページのソースにjsのコードがあります。タスケテクダサイ~~

    PROCRASIST