chadcooper · December 24, 2015 17:08
diff --git a/moon.html b/moon.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Corona Tiles</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        var width256Tile = 142;
        var height256Tile = 41;
 	var tile = 256;
        var coronaWidth = 36315;
        var coronaHeight = 10492;
 	var br_x = 1;
        var br_y = 1;
        //var center_y = ((256 - (height256Tile / 2)) - (256 - height256Tile)) / (256 - (256 - height256Tile))
        //var center_x = (width256Tile / 2) / width256Tile

 	function coronaProjection() {};

 	coronaProjection.prototype.fromLatLngToPoint = function(latlng) {
 	    // pixel size of tile at zoom 0
 	    var max = 256; 
 	    // define bottom-right corner
 	    var x = max * latlng.lng() / br_x; // 142
 	    var y = max * latlng.lat() / br_y; // 256
            //console.log(x + ', ' + y + '  [' + map.zoom + ']')
 	    return new google.maps.Point(x, y);
            
 	};

 	coronaProjection.prototype.fromPointToLatLng = function(pixel) {
 	    // inverse conversion
 	    var max = 256;
 	    var lng = pixel.x / max * br_x;
 	    var lat = pixel.y / max * br_y;
 	    return new google.maps.LatLng(lat, lng);
 	};

 	var coronaTypeOptions = {
 	    getTileUrl: function(coord, zoom) {
 		//console.log(coord);
 		var normalizedCoord = getNormalizedCoord(coord, zoom);
 		if (!normalizedCoord) {
 		    return null;
 		}
 		//var bound = Math.pow(2, zoom);
 		//console.log(zoom);
 		//console.log(normalizedCoord.x);
 		//console.log(normalizedCoord.y);
 		return '../gdal-tiles12/' + zoom + '/' + normalizedCoord.x + '/' + normalizedCoord.y + '.png';
 	    },
 	    tileSize: new google.maps.Size(256, 256),
 	    maxZoom: 12,
 	    minZoom: 0,
 	    name: "Corona"
 	};

 	var coronaMapType = new google.maps.ImageMapType(coronaTypeOptions);
 	coronaMapType.projection = new coronaProjection();

 	// Normalizes the coords that tiles repeat across the x axis (horizontally)
 	// like the standard Google map tiles.
 	function getNormalizedCoord(coord, zoom) {
 	    var y = coord.y;
 	    var x = coord.x;
            // Rename tiles on the fly to make Google like TMS tiles gen'd from gdal2tiles 
            var ymax = 1 << zoom;
            var y = ymax - coord.y - 1;
 	    // tile range in one direction range is dependent on zoom level
 	    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
 	    var tileRange = 1 << zoom;
 	    // don't repeat across y-axis (vertically)
 	    if (y < 0 || y >= tileRange) {
 		return null;
 	    }
 	    // repeat across x-axis
 	    if (x < 0 || x >= tileRange) {
 		return null;
 	    }
 	    return {
 		x: x,
 		y: y
 	    };
 	}

    function translateXY(gLatLng, coronaWidth, coronaHeight, width256Tile, height256Tile) {
        // Translate clicked latLng to true pixel coordinates
        var a = 0;
        var xyArray = [];
        var bY = coronaHeight;
        var minY = 1 - (height256Tile/256);
        var maxY = 1;
 	var bX = coronaWidth;
 	var minX = 0;
 	var maxX = width256Tile/256;

        var translatedY = ((bY - a)*(gLatLng.lat() - minY)) / (maxY - minY);
        xyArray[0] = translatedY;
        var translatedX = ((bX - a)*(gLatLng.lng() - minX)) / (maxX - minX);
   	xyArray[1] = translatedX;
        return xyArray;
    }

        function g(gLatLng, coronaWidth, coronaHeight, width256Tile, height256Tile) {
  		var n = []
 		// Width
 		var tile = 256;
 		var oldRangeWidth = (width256Tile/tile) - 0;
 		console.log(oldRangeWidth);
 		var newRangeWidth = coronaWidth - 0 + 37;
 		console.log(newRangeWidth);
 		var newValueWidth = (((gLatLng.lng() - 0) * newRangeWidth) / oldRangeWidth) + 0;
 		console.log(newValueWidth);
 		// Height
 		var oldRangeHeight = ((height256Tile)/tile);
 		console.log("ORH: " + oldRangeHeight);
 		var newRangeHeight = coronaHeight;
 		console.log("NRH: " + newRangeHeight);
 		console.log(gLatLng.lat())
 		var newValueHeight = ((((gLatLng.lat()) - (1-(height256Tile/tile))) * (newRangeHeight+4)) / oldRangeHeight);
 		
 		n[0] = newValueHeight;
 		n[1] = newValueWidth;
 		return n;
 	}

 	function initialize() {
 	    var myLatlng = new google.maps.LatLng(0.91, 0.27);  // ~center of image
 	    var myOptions = {
 		center: myLatlng,
 		zoom: 2,
 		minZoom: 0,
 		streetViewControl: false,
 		mapTypeControlOptions: {
 		    mapTypeIds: ['corona']
 		}
 	    };

 	    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
 	    map.mapTypes.set('corona', coronaMapType);
            map.setOptions({ draggableCursor: 'url(Cross.cur), default' }); 
 	    map.setMapTypeId('corona');

 	    google.maps.event.addListener(map, 'click', function(event) {
            var t = g(event.latLng, coronaWidth, coronaHeight, width256Tile, height256Tile);
            console.log("TRANS: " + (t[0]-4) + ', ' + t[1]);
 	    console.log(event.latLng.toString());
 	    });
 	}

 	google.maps.event.addDomListener(window, 'load', initialize);

      </script>
  </head>
  <body>
    <div id="map_canvas" style="width: 800px; height: 600px;"></div>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Corona Tiles</title>
	<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
	var map;
	var width256Tile = 142;
	var height256Tile = 41;
	var tile = 256;
	var coronaWidth = 36315;
	var coronaHeight = 10492;
	var br_x = 1;
	var br_y = 1;
	//var center_y = ((256 - (height256Tile / 2)) - (256 - height256Tile)) / (256 - (256 - height256Tile))
	//var center_x = (width256Tile / 2) / width256Tile

	function coronaProjection() {};

	coronaProjection.prototype.fromLatLngToPoint = function(latlng) {
	// pixel size of tile at zoom 0
	var max = 256;
	// define bottom-right corner
	var x = max * latlng.lng() / br_x; // 142
	var y = max * latlng.lat() / br_y; // 256
	//console.log(x + ', ' + y + ' [' + map.zoom + ']')
	return new google.maps.Point(x, y);

	};

	coronaProjection.prototype.fromPointToLatLng = function(pixel) {
	// inverse conversion
	var max = 256;
	var lng = pixel.x / max * br_x;
	var lat = pixel.y / max * br_y;
	return new google.maps.LatLng(lat, lng);
	};

	var coronaTypeOptions = {
	getTileUrl: function(coord, zoom) {
	//console.log(coord);
	var normalizedCoord = getNormalizedCoord(coord, zoom);
	if (!normalizedCoord) {
	return null;
	}
	//var bound = Math.pow(2, zoom);
	//console.log(zoom);
	//console.log(normalizedCoord.x);
	//console.log(normalizedCoord.y);
	return '../gdal-tiles12/' + zoom + '/' + normalizedCoord.x + '/' + normalizedCoord.y + '.png';
	},
	tileSize: new google.maps.Size(256, 256),
	maxZoom: 12,
	minZoom: 0,
	name: "Corona"
	};

	var coronaMapType = new google.maps.ImageMapType(coronaTypeOptions);
	coronaMapType.projection = new coronaProjection();

	// Normalizes the coords that tiles repeat across the x axis (horizontally)
	// like the standard Google map tiles.
	function getNormalizedCoord(coord, zoom) {
	var y = coord.y;
	var x = coord.x;
	// Rename tiles on the fly to make Google like TMS tiles gen'd from gdal2tiles
	var ymax = 1 << zoom;
	var y = ymax - coord.y - 1;
	// tile range in one direction range is dependent on zoom level
	// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
	var tileRange = 1 << zoom;
	// don't repeat across y-axis (vertically)
	if (y < 0 \|\| y >= tileRange) {
	return null;
	}
	// repeat across x-axis
	if (x < 0 \|\| x >= tileRange) {
	return null;
	}
	return {
	x: x,
	y: y
	};
	}

	function translateXY(gLatLng, coronaWidth, coronaHeight, width256Tile, height256Tile) {
	// Translate clicked latLng to true pixel coordinates
	var a = 0;
	var xyArray = [];
	var bY = coronaHeight;
	var minY = 1 - (height256Tile/256);
	var maxY = 1;
	var bX = coronaWidth;
	var minX = 0;
	var maxX = width256Tile/256;

	var translatedY = ((bY - a)*(gLatLng.lat() - minY)) / (maxY - minY);
	xyArray[0] = translatedY;
	var translatedX = ((bX - a)*(gLatLng.lng() - minX)) / (maxX - minX);
	xyArray[1] = translatedX;
	return xyArray;
	}

	function g(gLatLng, coronaWidth, coronaHeight, width256Tile, height256Tile) {
	var n = []
	// Width
	var tile = 256;
	var oldRangeWidth = (width256Tile/tile) - 0;
	console.log(oldRangeWidth);
	var newRangeWidth = coronaWidth - 0 + 37;
	console.log(newRangeWidth);
	var newValueWidth = (((gLatLng.lng() - 0) * newRangeWidth) / oldRangeWidth) + 0;
	console.log(newValueWidth);
	// Height
	var oldRangeHeight = ((height256Tile)/tile);
	console.log("ORH: " + oldRangeHeight);
	var newRangeHeight = coronaHeight;
	console.log("NRH: " + newRangeHeight);
	console.log(gLatLng.lat())
	var newValueHeight = ((((gLatLng.lat()) - (1-(height256Tile/tile))) * (newRangeHeight+4)) / oldRangeHeight);

	n[0] = newValueHeight;
	n[1] = newValueWidth;
	return n;
	}

	function initialize() {
	var myLatlng = new google.maps.LatLng(0.91, 0.27); // ~center of image
	var myOptions = {
	center: myLatlng,
	zoom: 2,
	minZoom: 0,
	streetViewControl: false,
	mapTypeControlOptions: {
	mapTypeIds: ['corona']
	}
	};

	map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
	map.mapTypes.set('corona', coronaMapType);
	map.setOptions({ draggableCursor: 'url(Cross.cur), default' });
	map.setMapTypeId('corona');

	google.maps.event.addListener(map, 'click', function(event) {
	var t = g(event.latLng, coronaWidth, coronaHeight, width256Tile, height256Tile);
	console.log("TRANS: " + (t[0]-4) + ', ' + t[1]);
	console.log(event.latLng.toString());
	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>
	</head>
	<body>
	<div id="map_canvas" style="width: 800px; height: 600px;"></div>
	</body>
	</html>