jelster/mapdata.html

## mapdata.html
<!DOCTYPE html>
<html>
<head>
<title>The Inner Sphere</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width" name="viewport" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js" ></script>
<style type="text/css">
#result {
	display: block;
	height: 100%;
	width: 100%;
	background-color: transparent;
	padding: 5px;
}
#result svg, #result canvas {
	margin: 5px auto;
	background-color: rgba(0, 0, 0, 0.67);


}
#innerSvg {

}
</style>
</head>

<body>

<table id="data">
	<tr>
		<th>Data</th>
		<th>X</th>
		<th>Y</th>
	</tr>
	<tr class="total">
		<td class="total" colspan="3"></td>
	</tr>

</table>

<div id="result">
<svg id="innerSvg" height="1000" width="1000" zoomAndPan="magnify"></svg>
 <!-- <canvas width="100" height="100" id="sphereCanvas"></canvas> -->
</div>


<script type="text/javascript">

var planetRadius = 2;
function drawPlanet(context, planet, scaleX, scaleY, fullWidth, fullHeight, useCanvas) {
	if (planet.generated || !planet.position) {
	            return true;
    }

    var centeredX, centeredY, adjustedX, adjustedY;
    centeredX = +(planet.position.x) + (fullWidth /2);
    centeredY = -((planet.position.y)) + (fullHeight/2);
    adjustedX = (centeredX - (centeredX * scaleX));
    adjustedY = (centeredY - (centeredY * scaleX));

  	if (useCanvas) {
  		context.stokeStyle = "rgb(0,0, 255)";
    	context.fillStyle = "rgb(0,0,255)";
    	context.beginPath();
    	context.arc(adjustedX, adjustedY, planetRadius, 0, 2 * Math.PI);
    	context.stroke();
  	}
  	else {
  		var svgPlanet = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  		var fillColor = "white";
  		var radius = planetRadius;
  		if (planet.contested != 0) {
  			fillColor = "darkRed";
  			radius += 3;
  		}
  		$(svgPlanet)
  		.attr("stroke", "white")
  		.attr("stroke-width", "1")
  		.attr("fill", fillColor) // TODO: fill color should match faction colors
  		.attr("cx", adjustedX)
  		.attr("cy", adjustedY)
  		.attr("r", radius)
  		.attr("title", planet.name); // TODO: add conflict markers
  		$("#innerSvg").append(svgPlanet);
  	}
}

$(document).ready(function() {
	var url = "mapdata.json";//"http://static.mwomercs.com/data/cw/mapdata.json";
	var dataTable = $("#data");
	var clippingPoints = [];
	$.getJSON(url).done(function (points) {
		//var canvas = $("#sphereCanvas").get(0);
		//var ctx = canvas.getContext("2d");
		var svgElement = $("#innerSvg");

	    var maxX, maxY, minX, minY, fullWidth, fullHeight;

	    maxX = _.max(points, function(p) { return (p.position && +(p.position.x)) || 0; });
	    maxY = _.max(points, function(p) { return (p.position && +(p.position.y)) || 0; });
	    dataTable.append("<tr><td>Max</td><td>" + maxX.position.x + "</td><td>" + maxY.position.y + "</td></tr>");

	    minX = _.min(points, function(p) { return (p.position && +(p.position.x)) || 0;});
	    minY = _.min(points, function(p) { return (p.position && +(p.position.y)) || 0;});
	    fullWidth = Math.abs(maxX.position.x - minX.position.x);
	    fullHeight = Math.abs(maxY.position.y - minY.position.y);

	    dataTable.append("<tr><td>Min</td><td>" + minX.position.x + "</td><td>" + minY.position.y + "</td></tr>");
	    var scaleX = svgElement.width() / fullWidth;
	    var scaleY = svgElement.height() / fullHeight;
	    dataTable.append("<tr><td>Scale</td><td>" + scaleX + "</td><td>" + scaleY + "</td></tr>");

	    _.forEach(points, function (p) {
	    //	drawPlanet(ctx, p, scaleX, scaleY, canvas.width, canvas.height, true); // draw using canvas
	       	drawPlanet(null, p, scaleX, scaleY, fullWidth, fullHeight, false); // draw map using SVG
	    });
	    dataTable.append("<tr><td colspan='2'>" + (_.size(points)) + "</td></tr>");


	});
});


</script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>The Inner Sphere</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta content="width=device-width" name="viewport" />
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
	<script src="http://underscorejs.org/underscore-min.js" ></script>
	<style type="text/css">
	#result {
	display: block;
	height: 100%;
	width: 100%;
	background-color: transparent;
	padding: 5px;
	}
	#result svg, #result canvas {
	margin: 5px auto;
	background-color: rgba(0, 0, 0, 0.67);


	}
	#innerSvg {

	}
	</style>
	</head>

	<body>

	<table id="data">
	<tr>
	<th>Data</th>
	<th>X</th>
	<th>Y</th>
	</tr>
	<tr class="total">
	<td class="total" colspan="3"></td>
	</tr>

	</table>

	<div id="result">
	<svg id="innerSvg" height="1000" width="1000" zoomAndPan="magnify"></svg>
	<!-- <canvas width="100" height="100" id="sphereCanvas"></canvas> -->
	</div>





	<script type="text/javascript">

	var planetRadius = 2;
	function drawPlanet(context, planet, scaleX, scaleY, fullWidth, fullHeight, useCanvas) {
	if (planet.generated \|\| !planet.position) {
	return true;
	}

	var centeredX, centeredY, adjustedX, adjustedY;
	centeredX = +(planet.position.x) + (fullWidth /2);
	centeredY = -((planet.position.y)) + (fullHeight/2);
	adjustedX = (centeredX - (centeredX * scaleX));
	adjustedY = (centeredY - (centeredY * scaleX));

	if (useCanvas) {
	context.stokeStyle = "rgb(0,0, 255)";
	context.fillStyle = "rgb(0,0,255)";
	context.beginPath();
	context.arc(adjustedX, adjustedY, planetRadius, 0, 2 * Math.PI);
	context.stroke();
	}
	else {
	var svgPlanet = document.createElementNS("http://www.w3.org/2000/svg", "circle");
	var fillColor = "white";
	var radius = planetRadius;
	if (planet.contested != 0) {
	fillColor = "darkRed";
	radius += 3;
	}
	$(svgPlanet)
	.attr("stroke", "white")
	.attr("stroke-width", "1")
	.attr("fill", fillColor) // TODO: fill color should match faction colors
	.attr("cx", adjustedX)
	.attr("cy", adjustedY)
	.attr("r", radius)
	.attr("title", planet.name); // TODO: add conflict markers
	$("#innerSvg").append(svgPlanet);
	}
	}

	$(document).ready(function() {
	var url = "mapdata.json";//"http://static.mwomercs.com/data/cw/mapdata.json";
	var dataTable = $("#data");
	var clippingPoints = [];
	$.getJSON(url).done(function (points) {
	//var canvas = $("#sphereCanvas").get(0);
	//var ctx = canvas.getContext("2d");
	var svgElement = $("#innerSvg");

	var maxX, maxY, minX, minY, fullWidth, fullHeight;

	maxX = _.max(points, function(p) { return (p.position && +(p.position.x)) \|\| 0; });
	maxY = _.max(points, function(p) { return (p.position && +(p.position.y)) \|\| 0; });
	dataTable.append("<tr><td>Max</td><td>" + maxX.position.x + "</td><td>" + maxY.position.y + "</td></tr>");

	minX = _.min(points, function(p) { return (p.position && +(p.position.x)) \|\| 0;});
	minY = _.min(points, function(p) { return (p.position && +(p.position.y)) \|\| 0;});
	fullWidth = Math.abs(maxX.position.x - minX.position.x);
	fullHeight = Math.abs(maxY.position.y - minY.position.y);

	dataTable.append("<tr><td>Min</td><td>" + minX.position.x + "</td><td>" + minY.position.y + "</td></tr>");
	var scaleX = svgElement.width() / fullWidth;
	var scaleY = svgElement.height() / fullHeight;
	dataTable.append("<tr><td>Scale</td><td>" + scaleX + "</td><td>" + scaleY + "</td></tr>");

	_.forEach(points, function (p) {
	// drawPlanet(ctx, p, scaleX, scaleY, canvas.width, canvas.height, true); // draw using canvas
	drawPlanet(null, p, scaleX, scaleY, fullWidth, fullHeight, false); // draw map using SVG
	});
	dataTable.append("<tr><td colspan='2'>" + (_.size(points)) + "</td></tr>");


	});
	});


	</script>
	</body>

	</html>