jelster · August 29, 2015 14:11 · jelster · Dec 18, 2014
diff --git a/mapdata.html b/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>