Google Chart ToolsのGeomapで世界地図のドリルダウンを実装してみました。

サンプルサイト (2010-05-24 URL更新)

地図中の領域をクリックしてドリルダウンしていくことができます。上に戻るには左上の「Zoom Out」ボタンをクリックします。

本来は統計データを表示するものですが、地図から住所を入力したり、人やお店を探したりするインターフェースとしても使えそうです。

あまり深くまで行こうとするとエラーになりますので、実際に利用する場合は修正が必要です。

コードは以下のようになっています。Sinatraで実装しました。

require 'rubygems'
require 'sinatra'

helpers do
  include Rack::Utils
  alias_method :h, :escape_html

  def render_map(region)
    <<-END
    var data = new google.visualization.DataTable();
    data.addRows(7);
    data.addColumn('string', 'Country');
    data.addColumn('number', 'Number of people');
    data.setValue(0, 0, 'Germany');
    data.setValue(0, 1, 10);
    data.setValue(1, 0, 'United States');
    data.setValue(1, 1, 31);
    data.setValue(2, 0, 'Brazil');
    data.setValue(2, 1, 17);
    data.setValue(3, 0, 'Canada');
    data.setValue(3, 1, 8);
    data.setValue(4, 0, 'France');
    data.setValue(4, 1, 22);
    data.setValue(5, 0, 'RU');
    data.setValue(5, 1, 34);
    data.setValue(6, 0, 'Japan');
    data.setValue(6, 1, 22);
    var options = {};
    options['region'] = '#{h(region)}';
    options['dataMode'] = 'regions';
    options['showZoomOut'] = #{region == 'world' ? 'false' : 'true'};

    var container = document.getElementById('mapCanvas');
    var geomap = new google.visualization.GeoMap(container);
    geomap.draw(data, options);

    google.visualization.events.addListener(geomap, 'regionClick', function(props) {
      var region = props.region;
      new Ajax.Request(region, {
        method: 'get',
        asynchronous: true,
        evalScripts: true
      });
    });

    google.visualization.events.addListener(geomap, 'zoomOut', function() {
      new Ajax.Request('world', {
        method: 'get',
        asynchronous: true,
        evalScripts: true
      });
    });
    END
  end
end

get '/' do
  haml :index
end

get '/:region' do
  content_type('text/javascript')
  render_map(h(params[:region]))
end

__END__

@@ layout
%html
  %head
    %title Map Select
    %script{ :type => 'text/javascript', :src => 'http://www.google.com/jsapi' }
    %script{ :type => 'text/javascript', :src => 'js/prototype.js' }
    %script{ :type => 'text/javascript' } google.load('visualization', '1', {'packages': ['geomap']});
  %body
    #mapCanvas
    = yield

@@ index
%script{ :type => 'text/javascript' }= render_map('world')

やっていることは、Geomapを表示し、領域がクリックされたときにそのregionをAjaxでサーバーに送り、新しいregionでGeomapを表示しなおしているだけです。

動作させるには、これをmapselect.rbとして保存します。そして保存したディレクトリの下にpublic/jsというディレクトリを作成し、そこにprototype.jsを置きます。起動は

ruby mapselect.rb

とします。

時間があればRailsプラグインか何かにしてみようと思います。