今までfoursquareにチェックインした都道府県を塗りつぶしてくれるツールを作ったよ

#foursquare でチェックインした都道府県を塗りつぶしてくれる地図機能欲しい。MapKitでそんな事できるかな
— Og🌗エンジニア🏝宮崎 (@koogawa) 2014年5月5日

思いつきでこんなツイートをしてみたのですが、なんとか無事に完成させることができました。

最初は自分用に作った物なのですが、何人かの方から「面白そう」という嬉しいお言葉を頂き、せっかくなので公開してみました。下記のリンクからご利用いただけます。

4sqGeoChart

f:id:koogawa:20140510090202p:plain

10人ぐらい使ってもらえたら嬉しいな、と思っていたのですが、気付いたら100人以上の方が使ってくれているようです！どうもありがとうございますm(＿＿)m

（5/10 22:41 追記）ユーザー数1000人突破しました！＼(^o^)／

せっかくなので、実装方法をメモしておきます。

地図側

今回の肝となる「地図を塗りつぶす」という機能をどうやって実現するか？

ここが一番苦労するだろうな〜と考えていたのですが、id:pomu0325 さんから非常にありがたい情報が。

@koogawa google chartのgeochart使うと簡単 https://t.co/i5utT09Kvg
— 🐶pomu0325 (@pomu0325) 2014年5月5日

どうやら Google さんが提供している Geochart というのを使えば簡単に実装できそうです。

Visualization: GeoChart | Charts | Google Developers

さっそく使い方を調査。

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

なんとこれだけで地図が塗りつぶせるようです！

つまり、私がやることは、次のようなデータを用意するだけ。

var data = google.visualization.arrayToDataTable([
          ['Prefecture'],
          ['Tokyo'],
          ['Osaka'],
          ['Hokkaido']
        ]);