Last active
August 29, 2015 14:11
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
Uncomment out the canvas element in HTML and the script to draw map in canvas mode. There are currently some gnarly calculations in the scaling / projecting that cause the map to be drawn offset or sized incorrectly; I will try to fix soon.