Webで地図上にマーカーを載せたりグルーピングしたりする方法

地図上にマーカーを載せたり、マーカーをグルーピングしたりする機能、最近はかなり流行ってますね。 Wikipediaの充実等により地図上の座標情報を簡単にとれるようになってきてデータ作りが簡単になってきたというのと、 自由に使える地図がかなり使いやすくなってきたということで、あちこちでそういうものが提供されるように なってきています。

もちろん、Google mapで多くのことはできますし、少し凝ったことでもたとえばOmeka + Neatlineを使うことで、 マウスでポチポチするだけで地図上に色々なものを プロットできるようになっているなど、プログラミングなどはまったくしなくてもできるようになっている というのが基本的には重要な点だと思いますが、一方で、簡素なプログラミングによってこの種のことが できるようになってきているという手も割と重要です。

いずれにしても、プログラミングができた方が人生色々応用がきいて楽しいという時代になってきましたし、 プログラミングのスキルを高めたり確かめたりする上で、地図上に何かをプロットできるようなものを 作れるとちょっと面白そうです。

ということで、とりあえずやってみようと思うのですが、まず、目指すところをおさえておきましょう。

今回は、

・Webページに拡大縮小可能な地図を組み込んで、そこにJSON形式のデータを食わせて、グルーピング可能なマーカーをプロットする

です。具体的には、こういうもの↓を作ろうという話です。

地図上で

いきなり目標が高いと思われる人もいるかもしれませんが、最近は例によって色々楽にできるものが 作成公開されており、これ自体はそんなに難しくはありません。というわけで、必要な技術や道具立てについて みてみましょう。

必要なもの：

Javascript + jQueryによるプログラミング 動的な地図を読み込むjavascriptのソフトウェア Leaflet マーカーをまとめてくれるLeafletのプラグイン JSONで作った位置情報データ

という感じです。

さて、ここで解説を始めようか…と思いましたが、実は以下のサイト

地図ライブラリ「Leaflet」にcluster機能を追加する - Qiita

に書いてあることに私から付け加えるようなことはあまりなくて、 とりあえずそちらの作例をコピペしてみれば、大体、なるほど、という感じになると思います。

ここからさらにカスタマイズということで、たとえば自分が作った位置情報データを読み込ませたければ、上記のサイトの中で

    for (var i = 0; i < 30; i++) {
        var marker = L.marker([51.5 + (Math.random() / 10), -0.09 + (Math.random() / 10)]);
        marker.bindPopup("<b>Hello</b>");
        markers.addLayer(marker);
    }

という箇所をちょっといじればよいということになります。

たとえば、以下のようなJSONデータを locations.json というファイル名で作ったとしたら、

[
    {
        "person": "卍山道白/ 復古道人/ 隨時子",
        "type": "Residence",
        "when": "",
        "plname": "永平寺",
        "lat": "36.053056",
        "long": "136.355556"
    },
    {
        "person": "卍山道白/ 復古道人/ 隨時子",
        "type": "Residence",
        "when": "",
        "plname": "大乘寺",
        "lat": "36.532556",
        "long": "136.658944"
    },
    {
        "person": "卍山道白/ 復古道人/ 隨時子",
        "type": "Found (Sect)",
        "when": "",
        "plname": "源光庵",
        "lat": "35.054814",
        "long": "135.731722"
    }
]

jQueryでやろうとした場合、htmlファイルと同じディレクトリ（フォルダ）に置いて以下のように書いておけば読み込めるはずです。

  $.ajax({ url: 'location.json',dataType:"json"}).done(function(data){
     var markers = L.markerClusterGroup();
     data.forEach(function(e){
       var plname = e.plname;
       var personat = e.person+'@'+plname
       var lat = e.lat;
       var long = e.long;
       if(lat != ""){
         var marker =  L.marker([lat,long],{title: plname}).bindPopup(personat);
         markers.addLayer(marker);
       }
     });
     mymap.addLayer(markers);
  });

やり方を調べるのが少し億劫かもしれませんが、わかってしまうと結構簡単です。よかったらぜひお試ししてみてください。