tokumine/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Grandiose</title>
    <style>

        body, html{
            height:100%;
            margin:0;
            padding:0;
        }
        #map-canvas{
            width:100%;
            height:90%;
        }
    </style>
    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=geometry">
    </script>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>

    <script>
        $(document).ready(function(){

            var user  = 'simon';
            var table = 'tanganyika';

            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                    mapOptions);
            var pos;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(a){
                    pos = a;

                    var sql = new cartodb.SQL({ user: user });
                    sql.execute('select st_x(ST_Centroid(the_geom)) as x, st_y(ST_Centroid(the_geom)) as y from tanganyika').done(function(bounds) {

                        bounds = bounds.rows[0];
                        var dif_lat = bounds.y-pos.coords.latitude;
                        var dif_lon = bounds.x-pos.coords.longitude;


                        sql.execute("select st_AsGeoJSON(the_geom) from {{table}}", { table: table})
                                .done(function(data) {
                                    _.each(data.rows, function(o){
                                        var center = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); //new google.maps.LatLng(o.st_y, o.st_x);
                                        map.setCenter(center);
                                        map.setZoom(6);

                                        // generate transposed coordinates for polygon

                                        var coords = JSON.parse(o.st_asgeojson).coordinates[0][0];
                                        var poly = [];


                                        _.each(coords, function(c){
                                            poly.push(new google.maps.LatLng(c[1]-dif_lat, c[0]-dif_lon));
                                        });


                                        var mypoly = new google.maps.Polygon({
                                            paths: poly,
                                            strokeColor: '#FF0000',
                                            strokeOpacity: 0.8,
                                            strokeWeight: 3,
                                            fillColor: '#FF0000',
                                            fillOpacity: 0.35,
                                            geodesic: true,
                                            draggable: true

                                        });

                                        mypoly.setMap(map);
                                    });

                                })
                                .error(function(errors) {
                                    // errors contains a list of errors
                                    console.log("error:" + err);
                                })


                    });


                }, function(){});
            } else {
                console.log('not supported');
            }


        });

    </script>

</head>
<body>
<h1>How big is Lake Tanganyika, Tanzania? (draggable)</h1>
<div id="map-canvas"></div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Grandiose</title>
	<style>

	body, html{
	height:100%;
	margin:0;
	padding:0;
	}
	#map-canvas{
	width:100%;
	height:90%;
	}
	</style>
	<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=geometry">
	</script>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>

	<script>
	$(document).ready(function(){

	var user = 'simon';
	var table = 'tanganyika';

	var mapOptions = {
	center: new google.maps.LatLng(-34.397, 150.644),
	zoom: 8,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map-canvas"),
	mapOptions);
	var pos;
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(a){
	pos = a;

	var sql = new cartodb.SQL({ user: user });
	sql.execute('select st_x(ST_Centroid(the_geom)) as x, st_y(ST_Centroid(the_geom)) as y from tanganyika').done(function(bounds) {

	bounds = bounds.rows[0];
	var dif_lat = bounds.y-pos.coords.latitude;
	var dif_lon = bounds.x-pos.coords.longitude;


	sql.execute("select st_AsGeoJSON(the_geom) from {{table}}", { table: table})
	.done(function(data) {
	_.each(data.rows, function(o){
	var center = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); //new google.maps.LatLng(o.st_y, o.st_x);
	map.setCenter(center);
	map.setZoom(6);

	// generate transposed coordinates for polygon

	var coords = JSON.parse(o.st_asgeojson).coordinates[0][0];
	var poly = [];


	_.each(coords, function(c){
	poly.push(new google.maps.LatLng(c[1]-dif_lat, c[0]-dif_lon));
	});



	var mypoly = new google.maps.Polygon({
	paths: poly,
	strokeColor: '#FF0000',
	strokeOpacity: 0.8,
	strokeWeight: 3,
	fillColor: '#FF0000',
	fillOpacity: 0.35,
	geodesic: true,
	draggable: true

	});

	mypoly.setMap(map);
	});

	})
	.error(function(errors) {
	// errors contains a list of errors
	console.log("error:" + err);
	})



	});


	}, function(){});
	} else {
	console.log('not supported');
	}



	});

	</script>

	</head>
	<body>
	<h1>How big is Lake Tanganyika, Tanzania? (draggable)</h1>
	<div id="map-canvas"></div>

	</body>
	</html>