Add map toggle for sec status vs. faction.

static/map.css

@@ -41,4 +41,37 @@
     right: 0;
     padding: 0.5em;
     background-color: rgba(0, 0, 0, 0.75);
+    text-align: right;
+}
+
+#map .controls .label {
+    font-size: 85%;
+}
+
+#map .system.neutral {
+    color: #777;
+}
+
+#map .system.faction {
+    color: #AAA;
+}
+
+#map .system.faction-amarr-empire {
+    color: #FFDE78;
+}
+
+#map .system.faction-caldari-state {
+    color: #99CCEE;
+}
+
+#map .system.faction-gallente-federation {
+    color: #66BB99;
+}
+
+#map .system.faction-minmatar-republic {
+    color: #D89988;
+}
+
+#map .system.faction-jove-empire {
+    color: #444;
 }

static/map.js

@@ -18,10 +18,25 @@ var get_bounds = function(galaxy) {
     return [xmin, ymin, xspan, yspan];
 }
 
+var get_sec_class = function(sec) {
+    return "sec-" + (
+        sec <= 0.0 ? "null" :
+        Number(Math.max(sec, 0.1)).toFixed(1).replace(".", "_"));
+}
+
+var get_faction_class = function(factions, faction) {
+    if (faction < 0)
+        return "neutral";
+    if (factions[faction] !== undefined)
+        return "faction faction-" + S(factions[faction]["name"]).slugify();
+}
+
 $(function() {
     $("#map .preload").append($("<p>").text("Loading map data..."));
     $.getJSON( "map/data.json", data => {
         var galaxy = data["systems"];
+        var factions = data["factions"];
+
         var systems = Object.values(galaxy);
         var jumps = [].concat
             .apply([], Object.keys(galaxy)
@@ -45,9 +60,9 @@ $(function() {
         var svg = d3.select("#map").append("svg")
             .attr("viewBox", (-radius) + " " + (-radius) +
                   " " + scale + " " + scale);
-        var stars = svg.append("g");
+        var field = svg.append("g");
 
-        stars.selectAll("line")
+        field.selectAll("line")
             .data(jumps)
             .enter()
             .append("line")
@@ -58,19 +73,16 @@ $(function() {
             .attr("class", "jump")
             .style("stroke-width", 1);
 
-        stars.selectAll("circle")
+        field.selectAll("circle")
             .data(systems)
             .enter()
             .append("circle")
             .attr("cx", d => projx(d["coords"][0]))
             .attr("cy", d => projy(d["coords"][2]))
-            .attr("r", 2)
-            .attr("class", d => {
-                var sec = d["security"];
-                var klass = sec <= 0.0 ? "null" :
-                    Number(Math.max(sec, 0.1)).toFixed(1).replace(".", "_");
-                return "system sec-" + klass;
-            });
+            .attr("r", 2);
+
+        var stars = field.selectAll("circle");
+        var jumps = field.selectAll("line");
 
         var lastk = 1;
         var zoom = d3.zoom()
@@ -81,14 +93,12 @@ $(function() {
                 var clamp = radius * (trans.k - 1);
                 trans.x = Math.max(Math.min(trans.x, clamp), -clamp);
                 trans.y = Math.max(Math.min(trans.y, clamp), -clamp);
-                stars.attr("transform", trans);
+                field.attr("transform", trans);
                 $("#map-scale").val(Math.log2(trans.k + 1));
 
                 if (Math.abs((trans.k - lastk) / lastk) > 0.1) {
-                    stars.selectAll("circle")
-                        .attr("r", 6 / (trans.k + 2));
-                    stars.selectAll("line")
-                        .style("stroke-width", 2 / (trans.k + 1));
+                    stars.attr("r", 6 / (trans.k + 2));
+                    jumps.style("stroke-width", 2 / (trans.k + 1));
                     lastk = trans.k;
                 }
             });
@@ -97,7 +107,20 @@ $(function() {
         $("#map-scale").on("input", e => {
             var k = Math.pow(2, e.target.value) - 1;
             zoom.scaleTo(svg, k);
-        })
+        });
+
+        $('#map .controls input[name="color"]').change(function() {
+            if (this.value == "sec") {
+                stars.attr("class", d =>
+                    "system " + get_sec_class(d["security"]));
+            }
+            else if (this.value == "faction") {
+                stars.attr("class", d =>
+                    "system " + get_faction_class(factions, d["faction"]));
+            }
+        });
+
+        $("#map-color-sec").prop("checked", true).change();
 
         $(window).resize(() => {
             svg.style("display", "none")

templates/map/map.mako

@@ -7,6 +7,7 @@
 </%block>
 <%block name="extrajs">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js" integrity="sha256-4mL8TQfOJSbg0f42dQw5cKLl2ngQXUSXqfQnvK11M44=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/string.js/3.3.3/string.min.js" integrity="sha256-0AbuA3ySKKYec199lOYKxEcX6NdOl8CeRhquNfddzfs=" crossorigin="anonymous"></script>
     ${self.support.makejs("map.js")}
 </%block>
 <div id="map">
@@ -17,6 +18,16 @@
         </noscript>
     </div>
     <div class="controls">
-        <input id="map-scale" type="range" min="1" max="6" step="0.1" value="1">
+        <div>
+            <label for="map-scale">Scale</label>
+            <input id="map-scale" type="range" min="1" max="6" step="0.1" value="1">
+        </div>
+        <div>
+            Color
+            <input id="map-color-sec" type="radio" name="color" value="sec">
+            <label class="label" for="map-color-sec">Security</label>
+            <input id="map-color-faction" type="radio" name="color" value="faction">
+            <label class="label" for="map-color-faction">Faction</label>
+        </div>
     </div>
 </div>