JM Topo Colors

by techbrew

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-primary">
  <div class="panel-heading">
    <div class="panel-title"><a href="http://journeymap.info/Topographic" target="_parent">JourneyMap Topographic Maps</a> Color Editor</div>
  </div>
  <div class="panel-body">
    <div class="alert alert-info alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      Paste and edit the contents of your <i>journeymap.topo.config</i> file (5.2 or later) below. When you're done, paste back into the file, save, and JourneyMap will immediately use the new configuration without the need to restart.
    </div>

    <textarea id="config" rows="6"></textarea>

    <div id="buttons" class="center-block clearfix">
      <button id="updateBtn" type="button" class="btn btn-primary pull-left">Refresh</button>
      <button id="resetBtn" type="button" class="btn btn-danger pull-right">Reset</button>
    </div>

    <p/>

    <table id="colortable">
      <tr>
        <th>
          <h3>Land contour intervals: <span id="landcount"/> </h3></th>
        <th>
          <h3>Water contour intervals: <span id="watercount"/></h3></th>
      </tr>
      <tr>
        <td id="land" />
        <td id="water" />
      </tr>
    </table>

  </div>
  <div class="panel-footer">Color Editor v2016.04.11.1 by Techbrew for <a href="http://journeymap.info/Topographic" target="_parent">JourneyMap Topographic Maps</a></div>
</div>

CSS

body {
  margin: 10px
}

h3 {
  font-size: 16px;
  font-weight: bold;
}

.panel-title a {
  text-decoration: underline !important
}

table {
  border: 1px solid #cccccc;
  border-collapse: collapse;
  width: 100%;
  height: 512px;
}

th {
  width: 50%;
  text-align: center;
}

td {
  font-family: monospace;
  padding: 0px;
  margin: 0px
}

#land,
#water {
  white-space: nowrap;
  overflow: hidden
}

#config {
  font-family: monospace;
  font-size: 11px;
  width: 100%;
  resize: vertical;
}

#buttons button {
  min-width: 150px;
}

#buttons {
  width: 50%;
}

JavaScript

var configFile = {
  "land": "#010c02,#041105,#071609,#0a1b0c,#0d200f,#102513,#132a16,#162f19,#19341c,#1b3a20,#1e3f23,#214426,#24492a,#274e2d,#2a5330,#2d5834,#375f41,#41674d,#4b6e5a,#557567,#5f7c73,#698480,#738b8d,#7c929a,#8699a6,#90a1b3,#9aa8c0,#a4afcc,#aeb6d9,#b8bee6,#c2c5f2,#ccccff,#cccfff,#ccd2ff,#ccd6ff,#ccd9ff,#ccdcff,#ccdfff,#cce2ff,#cce5ff,#cce9ff,#ccecff,#ccefff,#ccf2ff,#ccf5ff,#ccf9ff,#ccfcff,#ccffff,#cfffff,#d2ffff,#d6ffff,#d9ffff,#dcffff,#dfffff,#e2ffff,#e5ffff,#e9ffff,#ecffff,#efffff,#f2ffff,#f5ffff,#f9ffff,#fcffff,#ffffff",
  "water": "#000040,#02024e,#03035d,#05056b,#070779,#080887,#0a0a96,#0b0ba4,#1a1aaa,#2a2aaf,#3939b5,#4848bb,#5757c0,#6767c6,#7676cc,#8585d2,#9494d7,#a4a4dd,#b3b3e3,#c2c2e8,#d1d1ee,#d7d7f0,#ddddf2,#e2e2f4,#e8e8f6,#eeeef9,#f4f4fb,#f9f9ff,#f9f9ff,#f9f9ff,#f9f9ff,#f9f9ff",
  "landContour": "#222222",
  "waterContour": "#000066",
}

var worldHeight = 256;
var seaLevel = 63;

var padLeft = function(max, val) {
  var str = new String(val);
  return new Array(max - str.length + 1).join("&nbsp;") + str;
}

var showContours = function(colors, divName) {
  var arr = colors.split(",");
  var range = arr.length - 1;
  var interval = worldHeight / Math.max(1, arr.length);
  $(divName + "count").text(arr.length);

  $.each(arr, function(index, color) {
    var start = Math.floor(index * interval);
    var end = Math.floor(Math.min(start + interval, worldHeight - 1));
    var stripeHeight = interval / worldHeight * 512;
    var label = "&nbsp;y " + padLeft(3, start) + " to " + padLeft(3, end);
    label += padLeft(16, color.trim());
    if (start <= seaLevel && end >= seaLevel) {
      label += "  Sea Level";
    }

    $("<div/>", {
      css: {
        "height": stripeHeight,
        "background-color": color.trim(),
        "font-size": Math.min(16, stripeHeight) + "px",
      },
      html: label
    }).prependTo(divName);
  });
}

var updateContours = function() {
  eval("var topo=" + $('#config').val());
  $("#land").html("").css("color",...