Skip to content

Instantly share code, notes, and snippets.

@jelster
Last active August 29, 2015 14:11
Show Gist options
  • Save jelster/317b722849311c2bdf1f to your computer and use it in GitHub Desktop.
Save jelster/317b722849311c2bdf1f to your computer and use it in GitHub Desktop.
Canvas + SVG versions of the MWO CW map as read from public API
<!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>
@jelster
Copy link
Author

jelster commented Dec 18, 2014

updated the gist to scale only by x-axis - makes for a more viewable map, but still should cull or clip some of the planets on the Exodus Road, up to or including the clan Home Worlds

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment