wtnabe/README

## README
 1. rake fetch_lib
 2. edit config.yaml ( skip OK )
 3. rake open

## config.yaml
geohash:   xn3pvxy
zoom:      14
separator: ','
width:     500
height:    400

## geohash_visualizer.html.dist
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="geohash.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.4");</script>
    <script type="text/javascript" src="geohash_visualizer.js"></script>
    <title>Geohashエリア確認ツール</title>
    <style type="text/css" media="screen">
      #map {
        width:   <%= config['width'] %>px;
        height:  <%= config['height'] %>px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <form method="get" id="geocode">
      <table>
        <tr>
          <th>Address</th>
          <td><input id="address" type="text" name="address" value=""> <input type="submit" name="" value=" geohash ! " /></td>
        </tr>
      </table>
    </form>
    <form method="get" id="geoform">
      <table>
        <tr>
          <th>Geohash</th>
          <td><input id="geohash" type="text" name="geohash" value=""></td>
        </tr>
        <tr>
          <th>Zoom</th>
          <td><input id="zoom" type="text" name="zoom" value=""></td>
        </tr>
        <tr>
          <td colspan="2" align="center"><input type="submit" name="" value=" 更新 ! " /></td>
        </tr>
      </table>
    </form>
  </body>
</html>

## geohash_visualizer.js.dist
(function() {
  /**
   * Utilities for location.hash
   */
  var Lh = {
    SEPARATOR:          '<%= config["separator"] %>',
    DEFAULT_ZOOM_LEVEL: <%= config['zoom'] %>,
    DEFAULT_GEOHASH:    '<%= config["geohash"] %>',

    /**
     * right location hash string
     */
    lh: function() {
      return location.hash.substr( 1 );
    },

    /**
     * extract geohash from location.hash
     *
     * @return string
     */
    geohash: function () {
      var geohash = this.lh().split( this.SEPARATOR )[0];
      if ( !geohash ) {
        geohash = this.DEFAULT_GEOHASH;
      }
      return geohash;
    },

    /**
     * extract google maps' zoom level from location.hash
     *
     * @return int
     */
    zoom: function() {
      var zoom = this.lh().split( this.SEPARATOR )[1];
      if ( !zoom ) {
        zoom = this.DEFAULT_ZOOM_LEVEL;
      }
      return zoom - 0;
    },

    /**
     * @param  string geohash
     * @param  string zoom
     * @return string
     */
    set: function( geohash, zoom ) {
      location.hash = geohash + this.SEPARATOR + zoom;
    }
  };

  /**
   * Utilities for google.maps
   */
  var Gmap = {
    map:      null,
    mapid:    'map',
    polygon:  null,
    geocoder: null,

    /**
     * convert from geohash to google.maps.LatLng array for google.maps.Polygon
     *
     * @param  string geohash
     * @return array
     */
    square_path: function( geohash ) {
      var l    = decodeGeoHash( geohash );
      var lats = l.latitude;
      var lngs = l.longitude;
      var square_routes = [[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]];

      return jQuery( square_routes ).map( function( i, e ) {
        return new google.maps.LatLng( lats[e[0]], lngs[e[1]] );
      });
    },

    /**
     * @return void
     */
    draw_map: function() {
      var geohash = Lh.geohash();
      var l       = decodeGeoHash( geohash );
      this.map = new google.maps.Map( document.getElementById( this.mapid ), {
        center:    new google.maps.LatLng( l.latitude[2], l.longitude[2] ),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom:      Lh.zoom()
      });
      this.draw_square( geohash );
    },

    /**
     * @param  string geohash
     * @return void
     */
    draw_square: function( geohash ) {
      if ( this.polygon ) {
        this.polygon.setMap( null );
      }
      this.polygon = new google.maps.Polygon({
        paths: this.square_path( geohash )
      });
      this.polygon.setMap( this.map );
    },

    /**
     * @return int
     */
    zoom: function() {
      if ( this.map ) {
        return this.map.zoom;
      } else {
        return Lh.zoom();
      }
    },
  };

  /**
   * I/O for Information Bar in HTML
   */
  var Infobar = {
    get: function( id ) {
      return $('#' + id).val();
    },
    set: function( id, val ) {
      $('#' + id).val( val );
    }
  }

  function dispatch() {
    google.maps.event.addDomListener( window, 'load', function() {
      Gmap.draw_map();
      refresh_info();
      set_geohash_drawer();
      google.maps.event.addListener( Gmap.map, 'zoom_changed', function() {
        setTimeout( function() {
          refresh_info();
          set_geohash_drawer();
        }, 1000 );
      });
    });

    jQuery( document ).ready( function( $ ) {
      refresh_info();

      /**
       * Changer for location.hash and map from Infobar values
       */
      $('#geoform').bind( 'submit', function( e ) {
        Lh.set( Infobar.get( 'geohash' ), Infobar.get( 'zoom' ) );
        Gmap.draw_map();
        set_geohash_drawer();
        return false;
      });
      $('#geocode').bind( 'submit', function( e ) {
        set_addr( Infobar.get( 'address' ) );
        e.stopPrepagation;
        return false;
      });
    });
  }

  function set_geohash_drawer() {
    google.maps.event.addListener( Gmap.map, 'center_changed', function() {
      var geohash = new_geohash();
      Gmap.draw_square( geohash );
      Infobar.set( 'geohash', geohash );
      Lh.set( geohash, Gmap.zoom() );
    });
  }

  function refresh_info() {
    Lh.set( $('#geohash').val(), Gmap.zoom() );
    Infobar.set( 'geohash', Lh.geohash() );
    Infobar.set( 'zoom', Gmap.zoom() );
  }

  function new_geohash() {
    var len     = Lh.geohash().length;
    var geohash = encodeGeoHash( Gmap.map.center.b, Gmap.map.center.c );

    return geohash.substr( 0, len );
  }

  function set_addr( address ) {
    new google.maps.Geocoder().geocode({
      address:  address,
        language: 'ja',
        region:   'jp'
    }, function( r, stat ) {
      if ( stat == 'OK' ) {
        var l       = r[0].geometry.location;
        var geohash = encodeGeoHash( l.b, l.c );
        Lh.set( geohash, Gmap.zoom() );
        Infobar.set( 'geohash', geohash );
        Gmap.draw_map();
        set_geohash_drawer();
      } else {
        return false;
      }
    });
  }

  dispatch();
})();

## Rakefile
# -*- mode: ruby -*-

require 'yaml'
require 'erb'

LIB    = 'geohash.js'
DIST   = FileList[['html','js'].map { |e| "geohash_visualizer.#{e}.dist" }]
OBJ    = FileList[['html','js'].map { |e| "geohash_visualizer.#{e}" }]
CONFIG = File.dirname( __FILE__ ) + '/config.yaml'

desc "fetch latest geohash.js from github when geohash.js doesn't exist."
task :fetch_lib => LIB do
end

file LIB do
  require 'open-uri'
  LIB_LATEST = 'http://github.com/davetroy/geohash-js/raw/master/geohash.js'

  open( LIB, 'wb' ) { |f|
    f.puts URI( LIB_LATEST ).read
  }
end

desc "create #{OBJ.join( ',' )}"
task :compile => OBJ do |t|
end

rule /\.(html|js)\z/ => [proc { |t| t + '.dist' }] << CONFIG do |t|
  config = YAML.load_file( CONFIG )
  open( t.name, 'w' ) { |d|
    open( t.source, 'r' ) { |o|
      d.puts ERB.new( o.read ).result( binding )
      puts "#{t.name} created."
    }
  }
end

desc 'open HTML'
task :open => OBJ do
  sh 'open geohash_visualizer.html'
end

task :default do
  app = Rake.application
  app.options.show_task_pattern = Regexp.new('')
  app.display_tasks_and_comments
end
	1. rake fetch_lib
	2. edit config.yaml ( skip OK )
	3. rake open
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="geohash.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.4");</script>
	<script type="text/javascript" src="geohash_visualizer.js"></script>
	<title>Geohashエリア確認ツール</title>
	<style type="text/css" media="screen">
	#map {
	width: <%= config['width'] %>px;
	height: <%= config['height'] %>px;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<form method="get" id="geocode">
	<table>
	<tr>
	<th>Address</th>
	<td><input id="address" type="text" name="address" value=""> <input type="submit" name="" value=" geohash ! " /></td>
	</tr>
	</table>
	</form>
	<form method="get" id="geoform">
	<table>
	<tr>
	<th>Geohash</th>
	<td><input id="geohash" type="text" name="geohash" value=""></td>
	</tr>
	<tr>
	<th>Zoom</th>
	<td><input id="zoom" type="text" name="zoom" value=""></td>
	</tr>
	<tr>
	<td colspan="2" align="center"><input type="submit" name="" value=" 更新 ! " /></td>
	</tr>
	</table>
	</form>
	</body>
	</html>
	(function() {
	/**
	* Utilities for location.hash
	*/
	var Lh = {
	SEPARATOR: '<%= config["separator"] %>',
	DEFAULT_ZOOM_LEVEL: <%= config['zoom'] %>,
	DEFAULT_GEOHASH: '<%= config["geohash"] %>',

	/**
	* right location hash string
	*/
	lh: function() {
	return location.hash.substr( 1 );
	},

	/**
	* extract geohash from location.hash
	*
	* @return string
	*/
	geohash: function () {
	var geohash = this.lh().split( this.SEPARATOR )[0];
	if ( !geohash ) {
	geohash = this.DEFAULT_GEOHASH;
	}
	return geohash;
	},

	/**
	* extract google maps' zoom level from location.hash
	*
	* @return int
	*/
	zoom: function() {
	var zoom = this.lh().split( this.SEPARATOR )[1];
	if ( !zoom ) {
	zoom = this.DEFAULT_ZOOM_LEVEL;
	}
	return zoom - 0;
	},

	/**
	* @param string geohash
	* @param string zoom
	* @return string
	*/
	set: function( geohash, zoom ) {
	location.hash = geohash + this.SEPARATOR + zoom;
	}
	};

	/**
	* Utilities for google.maps
	*/
	var Gmap = {
	map: null,
	mapid: 'map',
	polygon: null,
	geocoder: null,

	/**
	* convert from geohash to google.maps.LatLng array for google.maps.Polygon
	*
	* @param string geohash
	* @return array
	*/
	square_path: function( geohash ) {
	var l = decodeGeoHash( geohash );
	var lats = l.latitude;
	var lngs = l.longitude;
	var square_routes = [[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]];

	return jQuery( square_routes ).map( function( i, e ) {
	return new google.maps.LatLng( lats[e[0]], lngs[e[1]] );
	});
	},

	/**
	* @return void
	*/
	draw_map: function() {
	var geohash = Lh.geohash();
	var l = decodeGeoHash( geohash );
	this.map = new google.maps.Map( document.getElementById( this.mapid ), {
	center: new google.maps.LatLng( l.latitude[2], l.longitude[2] ),
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	zoom: Lh.zoom()
	});
	this.draw_square( geohash );
	},

	/**
	* @param string geohash
	* @return void
	*/
	draw_square: function( geohash ) {
	if ( this.polygon ) {
	this.polygon.setMap( null );
	}
	this.polygon = new google.maps.Polygon({
	paths: this.square_path( geohash )
	});
	this.polygon.setMap( this.map );
	},

	/**
	* @return int
	*/
	zoom: function() {
	if ( this.map ) {
	return this.map.zoom;
	} else {
	return Lh.zoom();
	}
	},
	};

	/**
	* I/O for Information Bar in HTML
	*/
	var Infobar = {
	get: function( id ) {
	return $('#' + id).val();
	},
	set: function( id, val ) {
	$('#' + id).val( val );
	}
	}

	function dispatch() {
	google.maps.event.addDomListener( window, 'load', function() {
	Gmap.draw_map();
	refresh_info();
	set_geohash_drawer();
	google.maps.event.addListener( Gmap.map, 'zoom_changed', function() {
	setTimeout( function() {
	refresh_info();
	set_geohash_drawer();
	}, 1000 );
	});
	});

	jQuery( document ).ready( function( $ ) {
	refresh_info();

	/**
	* Changer for location.hash and map from Infobar values
	*/
	$('#geoform').bind( 'submit', function( e ) {
	Lh.set( Infobar.get( 'geohash' ), Infobar.get( 'zoom' ) );
	Gmap.draw_map();
	set_geohash_drawer();
	return false;
	});
	$('#geocode').bind( 'submit', function( e ) {
	set_addr( Infobar.get( 'address' ) );
	e.stopPrepagation;
	return false;
	});
	});
	}

	function set_geohash_drawer() {
	google.maps.event.addListener( Gmap.map, 'center_changed', function() {
	var geohash = new_geohash();
	Gmap.draw_square( geohash );
	Infobar.set( 'geohash', geohash );
	Lh.set( geohash, Gmap.zoom() );
	});
	}

	function refresh_info() {
	Lh.set( $('#geohash').val(), Gmap.zoom() );
	Infobar.set( 'geohash', Lh.geohash() );
	Infobar.set( 'zoom', Gmap.zoom() );
	}

	function new_geohash() {
	var len = Lh.geohash().length;
	var geohash = encodeGeoHash( Gmap.map.center.b, Gmap.map.center.c );

	return geohash.substr( 0, len );
	}

	function set_addr( address ) {
	new google.maps.Geocoder().geocode({
	address: address,
	language: 'ja',
	region: 'jp'
	}, function( r, stat ) {
	if ( stat == 'OK' ) {
	var l = r[0].geometry.location;
	var geohash = encodeGeoHash( l.b, l.c );
	Lh.set( geohash, Gmap.zoom() );
	Infobar.set( 'geohash', geohash );
	Gmap.draw_map();
	set_geohash_drawer();
	} else {
	return false;
	}
	});
	}

	dispatch();
	})();
	# -- mode: ruby --

	require 'yaml'
	require 'erb'

	LIB = 'geohash.js'
	DIST = FileList[['html','js'].map { \|e\| "geohash_visualizer.#{e}.dist" }]
	OBJ = FileList[['html','js'].map { \|e\| "geohash_visualizer.#{e}" }]
	CONFIG = File.dirname( __FILE__ ) + '/config.yaml'

	desc "fetch latest geohash.js from github when geohash.js doesn't exist."
	task :fetch_lib => LIB do
	end

	file LIB do
	require 'open-uri'
	LIB_LATEST = 'http://github.com/davetroy/geohash-js/raw/master/geohash.js'

	open( LIB, 'wb' ) { \|f\|
	f.puts URI( LIB_LATEST ).read
	}
	end

	desc "create #{OBJ.join( ',' )}"
	task :compile => OBJ do \|t\|
	end

	rule /\.(html\|js)\z/ => [proc { \|t\| t + '.dist' }] << CONFIG do \|t\|
	config = YAML.load_file( CONFIG )
	open( t.name, 'w' ) { \|d\|
	open( t.source, 'r' ) { \|o\|
	d.puts ERB.new( o.read ).result( binding )
	puts "#{t.name} created."
	}
	}
	end

	desc 'open HTML'
	task :open => OBJ do
	sh 'open geohash_visualizer.html'
	end

	task :default do
	app = Rake.application
	app.options.show_task_pattern = Regexp.new('')
	app.display_tasks_and_comments
	end