diff --git a/index.html b/index.html
index 739edef9..cf30d114 100644
--- a/index.html
+++ b/index.html
@@ -30,10 +30,9 @@
   <script src="libs/jquery-ui.min.js"></script>
   <script src="libs/polylabel.min.js"></script>
   <script src="libs/quantize.min.js" defer></script>
-  <script src="libs/d3-hexbin.v0.2.min.js" defer></script>
   <script src="libs/jquery.ui.touch-punch.min.js" defer></script>
-  <link rel="stylesheet" type="text/css" href="index.css?version=0.59.10b"/>
-  <link rel="stylesheet" type="text/css" href="icons.css?version=0.59.10b"/>
+  <link rel="stylesheet" type="text/css" href="index.css?version=0.59.12b"/>
+  <link rel="stylesheet" type="text/css" href="icons.css?version=0.59.12b"/>
   <link rel="stylesheet" type="text/css" href="libs/jquery-ui.css"/>
 </head>
 <body>
@@ -195,18 +194,18 @@
         </select>
         <p>Displayed layers. Drag to move, click to toggle</p>
         <ul id="mapLayers">
-          <li onmouseover="tip('Toggle Ocean pattern')" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li>
-          <li onmouseover="tip('Toggle Heightmap')" id="toggleHeight" class="buttonoff">Heightmap</li>
+          <li onmouseover="tip('Toggle Ocean pattern (see Style tab for styling)')" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li>
+          <li onmouseover="tip('Toggle Heightmap (see Style tab for styling and Customize for editting)')" id="toggleHeight" class="buttonoff">Heightmap</li>
           <li onmouseover="tip('Toggle Grid')" id="toggleGrid" class="buttonoff" onclick="$('#grid').fadeToggle()">Grid</li>
           <li onmouseover="tip('Toggle Overlay (overlay type can be set in Style tab)')" id="toggleOverlay" class="buttonoff">Overlay</li>
           <li onmouseover="tip('Toggle Cultural map (does not work good when counties layer is on)')" id="toggleCultures" class="buttonoff">Cultures</li>
           <li onmouseover="tip('Toggle Routes')" id="toggleRoutes" onclick="$('#routes').fadeToggle()">Routes</li>
           <li onmouseover="tip('Toggle Rivers')" id="toggleRivers" onclick="$('#rivers').fadeToggle()">Rivers</li>
-          <li onmouseover="tip('Toggle Countries')" id="toggleCountries">Countries</li>
+          <li onmouseover="tip('Toggle Countries (open Customize tab for editting)')" id="toggleCountries">Countries</li>
           <li onmouseover="tip('Toggle Borders')" id="toggleBorders" onclick="$('#borders').fadeToggle()">Borders</li>
-          <li onmouseover="tip('Toggle Relief icons')" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li>
-          <li onmouseover="tip('Toggle Labels')" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
-          <li onmouseover="tip('Toggle Icons')" id="toggleIcons" onclick="$('#icons').fadeToggle()">Icons</li>
+          <li onmouseover="tip('Toggle Relief icons (draft version)')" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li>
+          <li onmouseover="tip('Toggle Labels (label groups can be toggled separately in Style tab)')" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
+          <li onmouseover="tip('Toggle Burg icons')" id="toggleIcons" onclick="$('#icons').fadeToggle()">Icons</li>
         </ul>
         <div id="layoutCheckboxes">
           <input id="toggleTooltips" class="checkbox" type="checkbox" checked onclick="$('#tooltip').fadeToggle()">
@@ -246,12 +245,13 @@
           <div id="styleOverlay">
             <br><span>Ensure Overlay layer is active (see Layout tab)</span><br>
             <br>Overlay type: <select id="styleOverlayType" class="pureInput">
-              <option value="hex" selected>Hex grid</option>
+              <option value="pointyHex" selected>Hex grid (pointy)</option>
+              <option value="flatHex">Hex grid (flat)</option>
               <option value="square">Square grid</option>
               <option value="windrose">Wind rose</option>
             </select><br>
-            <br>Size: <input id="styleOverlaySize" type="range" min="2" max="20" step="0.2" value="5">
-            <output id="styleOverlaySizeOutput">5</output>
+            <br>Size: <input id="styleOverlaySize" type="range" min="2" max="50" step="0.1" value="10">
+            <output id="styleOverlaySizeOutput">10</output>
           </div>
           <div id="styleOcean">
             <br>Elements:
@@ -292,6 +292,7 @@
             <br>Radius: <button class="whiteButton" onmouseover="tip('Multiply Radius by 1.1')" id="styleFillPlus">+</button><button class="whiteButton" onmouseover="tip('Multiply Radius by 0.9')" id="styleFillMinus">-</button>
             <span> Stroke: </span><button class="whiteButton" onmouseover="tip('Multiply Stroke-width by 1.1')" id="styleStrokePlus">+</button><button class="whiteButton" onmouseover="tip('Multiply Stroke-width by 0.9')" id="styleStrokeMinus">-</button>
           </div>
+
           <div id="styleOpacity">
             <br>Opacity: <input id="styleOpacityInput" type="range" min="0" max="1" step="0.01" value="1">
             <output id="styleOpacityOutput">1</output>
@@ -309,7 +310,6 @@
               <option value="url(#outline)">Outline</option>
               <option value="url(#pencil)">Pencil</option>
               <option value="url(#turbulence)">Turbulence</option>
-              <option value="url(#water)">Water</option>
             </select>
           </div>
           <div id="styleScheme">
@@ -1152,5 +1152,5 @@
     <input type="file" accept=".txt" id="namesbaseToLoad">
   </div>
 
-  <script src="script.js?version=0.59.10b"></script>
+  <script src="script.js?version=0.59.12b"></script>
 </body>
diff --git a/libs/d3-hexbin.v0.2.min.js b/libs/d3-hexbin.v0.2.min.js
deleted file mode 100644
index f15da735..00000000
--- a/libs/d3-hexbin.v0.2.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// https://github.com/d3/d3-hexbin Version 0.2.2. Copyright 2017 Mike Bostock.
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(n.d3=n.d3||{})}(this,function(n){"use strict";function t(n){return n[0]}function r(n){return n[1]}var e=Math.PI/3,u=[0,e,2*e,3*e,4*e,5*e],o=function(){function n(n){var t,r={},e=[],u=n.length;for(t=0;t<u;++t)if(!isNaN(i=+d.call(null,o=n[t],t,n))&&!isNaN(c=+p.call(null,o,t,n))){var o,i,c,s=Math.round(c/=f),h=Math.round(i=i/a-(1&s)/2),l=c-s;if(3*Math.abs(l)>1){var v=i-h,M=h+(i<h?-1:1)/2,x=s+(c<s?-1:1),g=i-M,m=c-x;v*v+l*l>g*g+m*m&&(h=M+(1&s?1:-1)/2,s=x)}var y=h+"-"+s,j=r[y];j?j.push(o):(e.push(j=r[y]=[o]),j.x=(h+(1&s)/2)*a,j.y=s*f)}return e}function o(n){var t=0,r=0;return u.map(function(e){var u=Math.sin(e)*n,o=-Math.cos(e)*n,i=u-t,a=o-r;return t=u,r=o,[i,a]})}var i,a,f,c=0,s=0,h=1,l=1,d=t,p=r;return n.hexagon=function(n){return"m"+o(null==n?i:+n).join("l")+"z"},n.centers=function(){for(var n=[],t=Math.round(s/f),r=Math.round(c/a),e=t*f;e<l+i;e+=f,++t)for(var u=r*a+(1&t)*a/2;u<h+a/2;u+=a)n.push([u,e]);return n},n.mesh=function(){var t=o(i).slice(0,4).join("l");return n.centers().map(function(n){return"M"+n+"m"+t}).join("")},n.x=function(t){return arguments.length?(d=t,n):d},n.y=function(t){return arguments.length?(p=t,n):p},n.radius=function(t){return arguments.length?(i=+t,a=2*i*Math.sin(e),f=1.5*i,n):i},n.size=function(t){return arguments.length?(c=s=0,h=+t[0],l=+t[1],n):[h-c,l-s]},n.extent=function(t){return arguments.length?(c=+t[0][0],s=+t[0][1],h=+t[1][0],l=+t[1][1],n):[[c,s],[h,l]]},n.radius(1)};n.hexbin=o,Object.defineProperty(n,"__esModule",{value:!0})});
\ No newline at end of file
diff --git a/script.js b/script.js
index 86613b76..59468a74 100644
--- a/script.js
+++ b/script.js
@@ -4774,9 +4774,11 @@ function fantasyMap() {
     if (overlay.selectAll("*").size() === 0) {
       var type = styleOverlayType.value;
       var size = +styleOverlaySize.value;
-      if (type === "hex") {
-        var hexbin = d3.hexbin().radius(size).size([svgWidth, svgHeight]);
-        overlay.append("path").attr("d", round(hexbin.mesh(), 0));
+      if (type === "pointyHex" || type === "flatHex") {
+        let points = getHexGridPoints(size, type);
+        let hex = "m" + getHex(size, type).slice(0, 4).join("l");
+        let d = points.map(function(p) {return "M" + p + hex;}).join("");
+        overlay.append("path").attr("d", d);
       } else if (type === "square") {
         var x = d3.range(size, svgWidth, size);
         var y = d3.range(size, svgHeight, size);
@@ -4799,6 +4801,35 @@ function fantasyMap() {
     }
   }
 
+  function getHex(radius, type) {
+    let x0 = 0, y0 = 0;
+    let s = type === "pointyHex" ? 0 : Math.PI / -6;
+    let thirdPi = Math.PI / 3;
+    let angles = [s, s + thirdPi, s + 2 * thirdPi, s + 3 * thirdPi, s + 4 * thirdPi, s + 5 * thirdPi];
+    return angles.map(function(angle) {
+      var x1 = Math.sin(angle) * radius,
+          y1 = -Math.cos(angle) * radius,
+          dx = x1 - x0,
+          dy = y1 - y0;
+      x0 = x1, y0 = y1;
+      return [dx, dy];
+    });
+  }
+
+  function getHexGridPoints(size, type) {
+    let points = [];
+    const rt3 = Math.sqrt(3);
+    const off = type === "pointyHex" ? rt3 * size / 2 : size * 3 / 2;
+    const ySpace = type === "pointyHex" ? size * 3 / 2 : rt3 * size / 2;
+    const xSpace = type === "pointyHex" ? rt3 * size : size * 3;
+    for (let y = 0, l = 0; y < graphHeight; y += ySpace, l++) {
+      for (let x = l % 2 ? 0 : off; x < graphWidth; x += xSpace) {
+        points.push([x, y]);
+      }
+    }
+    return points;
+  }
+
   // clean data to get rid of redundand info
   function cleanData() {
     console.time("cleanData");
@@ -9071,7 +9102,7 @@ function fantasyMap() {
     if (!$("#toggleOverlay").hasClass("buttonoff")) toggleOverlay();
   });
 
-  $("#styleOverlaySize").on("input", function() {
+  $("#styleOverlaySize").on("change", function() {
     styleOverlaySizeOutput.value = this.value;
     overlay.selectAll("*").remove();
     if (!$("#toggleOverlay").hasClass("buttonoff")) toggleOverlay();
