Skip to content

Instantly share code, notes, and snippets.

@wtnabe

wtnabe/README

Created August 21, 2010 07:45
Show Gist options
  • Save wtnabe/541945 to your computer and use it in GitHub Desktop.
Save wtnabe/541945 to your computer and use it in GitHub Desktop.
Download ZIP
Geohash Visualizer
Raw
README
1. rake fetch_lib
2. edit config.yaml ( skip OK )
3. rake open
Raw
config.yaml
geohash: xn3pvxy
zoom: 14
separator: ','
width: 500
height: 400
Raw
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>
Raw
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();
})();
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment