mapshaper 0.6.106 → 0.6.108

package/README.md

@@ -80,6 +80,14 @@ npm run build     # bundle source code files
 npm link          # (optional) add global symlinks so scripts are available systemwide
 ```
 
+## Using mapshaper with Bun
+
+Mapshaper's command line tools can be run with [Bun](https://bun.sh/) as an alternative to Node.js. The simplest option is to use `bunx`, like this:
+
+```
+bunx mapshaper [commands]
+```
+
 ## Building and testing
 
 From the project directory, run `npm run build` to build both the cli and web UI modules.

package/mapshaper.js

@@ -3927,7 +3927,10 @@
 
   function getValueType(val) {
     var type = null;
-    if (utils.isString(val)) {
+    if (val === null || val === undefined) {
+      // optimization, when scanning columns containing mostly null values
+      type = null;
+    } else if (utils.isString(val)) {
       type = 'string';
     } else if (utils.isNumber(val)) {
       type = 'number';
@@ -13542,14 +13545,8 @@
   function getBoundsPrecisionForDisplay(bbox) {
     var w = Math.abs(bbox[2] - bbox[0]),
         h = Math.abs(bbox[3] - bbox[1]),
-        // switched to max bound, based on experience with shift-drag box info
-        // range = Math.min(w, h) + 1e-8,
-        range = Math.max(w, h) + 1e-8,
-        digits = 0;
-    while (range < 2000 && digits < 1) {
-      range *= 10;
-      digits++;
-    }
+        range = (w + h) / 2 + 1e-8,
+        digits = Math.max(0, Math.round(3 - Math.log10(range)));
     return digits;
   }
 
@@ -46041,7 +46038,7 @@ ${svg}
     });
   }
 
-  var version = "0.6.106";
+  var version = "0.6.108";
 
   // Parse command line args into commands and run them
   // Function takes an optional Node-style callback. A Promise is returned if no callback is given.
@@ -46095,7 +46092,7 @@ ${svg}
     }
     if (!loggingEnabled()) argv += ' -quiet'; // kludge to pass logging setting to subprocess
     var mb = Math.round(gb * 1000);
-    var command = [process.execPath, '--max-old-space-size=' + mb, mapshaperScript, argv].join(' ');
+    var command = [`"${process.execPath}"`, '--max-old-space-size=' + mb, `"${mapshaperScript}"`, argv].join(' ');
     var child = require$1('child_process').exec(command, {}, function(err, stdout, stderr) {
       opts.callback(err);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapshaper",
-  "version": "0.6.106",
+  "version": "0.6.108",
   "description": "A tool for editing vector datasets for mapping and GIS.",
   "keywords": [
     "shapefile",

package/www/elements.css

@@ -130,7 +130,8 @@ div.tip {
 
 .btn {
 	text-align: center;
-	padding: 4px 7px 5px 7px;
+	/* padding: 4px 7px 5px 7px; */
+	padding: 3px 6px 4px 6px;
 	border-radius: 4px;
 	line-height: 1;
 	display: inline-block;

package/www/index.html

@@ -76,7 +76,7 @@
 		<input type="text" value="label" class="clicktext" />
 	</div></div>
 	<div id="mode-buttons" class="page-header-buttons">
-		<span class="console-btn header-btn btn">Console</span><span class="basemap-btn header-btn btn">Basemap</span><span class="separator"></span><span class="separator"></span><span class="simplify-btn header-btn btn">Simplify</span><span class="separator"></span><span class="export-btn header-btn btn">Export</span>
+		<span class="console-btn header-btn btn">Console</span><span class="display-btn header-btn btn">Display</span><span class="separator"></span><span class="separator"></span><span class="simplify-btn header-btn btn">Simplify</span><span class="separator"></span><span class="export-btn header-btn btn">Export</span>
 	</div>
 	<div id="splash-buttons" class="page-header-buttons">
 		<a href="https://github.com/mbloch/mapshaper/wiki"><span id="wiki-btn" class="header-btn btn">Wiki</span></a><span class="separator"></span><a href="https://github.com/mbloch/mapshaper"><span id="github-btn" class="header-btn btn">GitHub</span></a>
@@ -174,23 +174,30 @@ precision=0.001. Click to see all options.</div></div></div></a>
 		<div><span id="save-preference" style="display: none;"><input type="checkbox"/>choose output directory</span></div>
 		<div><span id="save-to-clipboard" style="display: inline-block;"><input type="checkbox"/>save to clipboard</span></div>
 		</div>
-		<div id="export-btn" class="btn dialog-btn" style="margin-top: 4px;">Export</div>
+		<div id="export-btn" class="btn dialog-btn" style="margin-top: 5px;">Export</div>
 
 	</div>
 </div>
 
-<div class="basemap-options main-area popup-dialog">
+<div class="display-options main-area popup-dialog">
 	<div class="info-box">
 		<div class="close2-btn"></div>
-		<h3>Basemap options</h3>
-		<p class="basemap-note"></p>
-		<p class="basemap-warning"></p>
-		<div class="basemap-styles basemap-buttons"></div>
-		<div>
-			<!-- <div class="close-btn btn dialog-btn">Close</div> -->
-			<div class="clear-btn btn dialog-btn disabled">Clear</div>
-			<div class="fade-btn btn dialog-btn disabled">Fade</div>
-			<!-- <div class="hide-btn btn dialog-btn disabled">Hide</div> -->
+		<h3>Display options</h3>
+
+		<div class=""><label for="intersections-opt"><input type="checkbox" id="intersections-opt" class="checkbox intersections-opt"/>detect line intersections</label></div>
+		<div class=""><label for="ghost-opt"><input type="checkbox" id="ghost-opt" class="checkbox ghost-opt"/>show reference lines</label></div>
+
+		<div class="basemap-opts">
+			<h4>Basemaps</h4>
+			<p class="basemap-warning"></p>
+			<div class="basemap-styles basemap-buttons"></div>
+			<p class="basemap-note"></p>
+			<div>
+				<!-- <div class="close-btn btn dialog-btn">Close</div> -->
+				<div class="clear-btn btn dialog-btn disabled">Clear</div>
+				<div class="fade-btn btn dialog-btn disabled">Fade</div>
+				<!-- <div class="hide-btn btn dialog-btn disabled">Hide</div> -->
+			</div>
 		</div>
 	</div>
 </div>
@@ -237,7 +244,6 @@ of more acute angles are
 preferentially removed, for
 a smoother appearance.</div></div></div></div>
 
-
 		</div> <!-- option menu -->
 
 		<div>
@@ -295,8 +301,7 @@ encoding=big5</span>. Click to see all options.</div></div></div></div>
 	</div>
 	<div class="mshp-main-map main-area map-area">
 		<div class="intersection-display">
-			<span class="intersection-check text-btn colored-text">Check line intersections</span><span class="intersection-count">0 line intersections</span>
-			<img class="close-btn" draggable="false" src="images/close.png">
+			<span class="intersection-count">0 line intersections</span>
 			<div class="repair-btn text-btn colored-text">Repair</div>
 		</div>
 		<div class="basemap-overlay-buttons basemap-buttons"></div>

package/www/mapshaper-gui.js

@@ -1162,7 +1162,7 @@
     var topTier = 10000; // short-circuit counting here
     var count = 0;
     layers = layers.filter(function(lyr) {
-      return lyr.geometry_type == 'point' && lyr.gui.style.dotSize > 0;
+      return lyr.geometry_type == 'point' && lyr.gui.style?.dotSize > 0;
     });
     layers.forEach(function(lyr) {
       count += countPoints(lyr.gui.displayLayer.shapes, topTier, bbox);
@@ -3042,7 +3042,7 @@
       displayLayer: null,
       source: {dataset},
       bounds: null,
-      style: null,
+      // style: null, // protect old style in projectLayerForDisplay()
       dynamic_crs: null,
       invertPoint: null,
       projectPoint: null
@@ -4209,18 +4209,20 @@
         model = gui.model,
         el = gui.container.findChild(".intersection-display"),
         readout = el.findChild(".intersection-count"),
-        checkBtn = el.findChild(".intersection-check"),
         repairBtn = el.findChild(".repair-btn"),
+        optBox = gui.container.findChild('.intersections-opt'),
         _simplifiedXX, // saved simplified intersections, for repair
-        _unsimplifiedXX, // saved unsimplified intersection data, for performance
-        _disabled = false,
-        _on = false;
-
-    el.findChild('.close-btn').on('click', dismissForever);
+        _unsimplifiedXX; // saved unsimplified intersection data, for performance
 
     gui.on('simplify_drag_start', function() {
-      if (intersectionsAreOn()) {
-        hide();
+      hide();
+    });
+
+    gui.on('mode', updateRepairBtn);
+
+    gui.on('display_option_change', function(e) {
+      if (e.option == 'intersectionsOn') {
+        updateAsync();
       }
     });
 
@@ -4228,12 +4230,6 @@
       updateSync('simplify_drag_end');
     });
 
-    checkBtn.on('click', function() {
-      checkBtn.hide();
-      _on = true;
-      updateSync();
-    });
-
     repairBtn.on('click', function() {
       var e = model.getActiveLayer();
       if (!_simplifiedXX || !e.dataset.arcs) return;
@@ -4245,59 +4241,46 @@
     });
 
     model.on('update', function(e) {
-      if (!intersectionsAreOn()) {
-        reset(); // need this?
-        return;
-      }
       var needRefresh = e.flags.simplify_method || e.flags.simplify ||
-        e.flags.repair || e.flags.clean;
-      if (needRefresh) {
+        e.flags.repair || e.flags.clean || e.flags.select || intersectionsMayHaveChanged(e.flags);
+      if (!intersectionsAreOn()) {
+        reset();
+      } else if (needRefresh) {
         updateAsync();
       } else if (e.flags.simplify_amount) {
         // slider is being dragged - hide readout and dots, retain data
         hide();
-      } else if (intersectionsMayHaveChanged(e.flags)) {
-        // intersections may have changed -- reset the display
-        reset();
       } else {
         // keep displaying the current intersections
       }
     });
 
+    function updateRepairBtn() {
+      if (intersectionsAreOn() && gui.getMode() == 'simplify' &&
+        _simplifiedXX?.length > 0) {
+        repairBtn.show();
+      } else {
+        repairBtn.hide();
+      }
+    }
+
     function intersectionsAreOn() {
-      return _on && !_disabled;
+      var e = model.getActiveLayer();
+      return !!(gui.display.getOptions().intersectionsOn &&
+        e && e.dataset.arcs && internal.layerHasPaths(e.layer));
     }
 
-    function turnOff() {
+    function reset() {
       hide();
-      _on = false;
       _simplifiedXX = null;
       _unsimplifiedXX = null;
     }
 
-    function reset() {
-      turnOff();
-      if (_disabled) {
-        return;
-      }
-      var e = model.getActiveLayer();
-      if (!e) return;
-      if (internal.layerHasPaths(e.layer)) {
-        el.show();
-        checkBtn.show();
-        readout.hide();
-        repairBtn.hide();
-      }
-    }
-
-    function dismissForever() {
-      _disabled = true;
-      turnOff();
-    }
-
     function hide() {
       map.setIntersectionLayer(null);
       el.hide();
+      repairBtn.hide();
+      readout.hide();
     }
 
     // Update intersection display, after a short delay so map can redraw after previous
@@ -4307,16 +4290,16 @@
     }
 
     function updateSync(action) {
-      if (!intersectionsAreOn()) return;
       var e = model.getActiveLayer();
       var arcs = e.dataset && e.dataset.arcs;
+      if (!intersectionsAreOn() || !arcs || !internal.layerHasPaths(e.layer)) {
+        reset();
+        return;
+      }
       var intersectionOpts = {
         unique: true,
         tolerance: 0
       };
-      if (!arcs || !internal.layerHasPaths(e.layer)) {
-        return;
-      }
       if (arcs.getRetainedInterval() > 0) {
         // simplification
         _simplifiedXX = internal.findSegmentIntersections(arcs, intersectionOpts);
@@ -4336,7 +4319,6 @@
       var pointLyr, count = 0, html;
       el.show();
       readout.show();
-      checkBtn.hide();
       if (xx.length > 0) {
         pointLyr = internal.getIntersectionLayer(xx, lyr, arcs);
         count = internal.countPointsInLayer(pointLyr);
@@ -4349,12 +4331,7 @@
         html = utils$1.format('<span class="icon"></span>%s line intersection%s', count, utils$1.pluralSuffix(count));
       }
       readout.html(html);
-
-      if (_simplifiedXX && count > 0) {
-        repairBtn.show();
-      } else {
-        repairBtn.hide();
-      }
+      updateRepairBtn();
     }
   }
 
@@ -10093,7 +10070,7 @@
       };
 
   function getOverlayLayers(activeLyr, hitData, styleOpts) {
-    if (activeLyr.hidden || !activeLyr?.gui?.style) return [];
+    if (activeLyr?.hidden || !activeLyr?.gui?.style) return [];
     var displayLyr = activeLyr.gui.displayLayer;
     var layers, lyr, outlineStyle, ids;
     if (styleOpts.interactionMode == 'vertices') {
@@ -11282,8 +11259,8 @@
         dotSize: 1
       },
       intersectionStyle = {
-        dotColor: "#F24400",
-        dotSize: 1
+        dotColor: "#FF421D",
+        dotSize: 1.3
       };
 
   function getIntersectionStyle(lyr, opts) {
@@ -11316,6 +11293,11 @@
     } else {
       style = copyBaseStyle(activeStyle);
     }
+    // kludge: no ghosted lines if not enabled
+    if (style.strokeColors && !opts.ghostingOn) {
+      style.strokeColors = [null, style.strokeColors[1]];
+    }
+
     return style;
   }
 
@@ -11780,22 +11762,23 @@
     var arcs;
     var style = lyr.gui.style;
     var arcCounts = lyr.gui.arcCounts;
-    var darkStyle = {strokeWidth: style.strokeWidth, strokeColor: style.strokeColors[1]},
-        lightStyle = {strokeWidth: style.strokeWidth, strokeColor: style.strokeColors[0]};
+    var fgStyle = {strokeWidth: style.strokeWidth, strokeColor: style.strokeColors[1]},
+        bgStyle = {strokeWidth: style.strokeWidth, strokeColor: style.strokeColors[0]};
     var filter;
+
     if (internal.layerHasPaths(lyr.gui.displayLayer)) {
       if (!arcCounts) {
         arcCounts = lyr.gui.arcCounts = new Uint8Array(lyr.gui.displayArcs.size());
         internal.countArcsInShapes(lyr.gui.displayLayer.shapes, arcCounts);
       }
       arcs = getArcsForRendering(lyr, ext);
-      if (lightStyle.strokeColor) {
+      if (bgStyle.strokeColor) {
         filter = getArcFilter(arcs, ext, false, arcCounts);
-        canv.drawArcs(arcs, lightStyle, filter);
+        canv.drawArcs(arcs, bgStyle, filter);
       }
-      if (darkStyle.strokeColor && lyr.gui.displayLayer.geometry_type != 'point') {
+      if (fgStyle.strokeColor && lyr.gui.displayLayer.geometry_type != 'point') {
         filter = getArcFilter(arcs, ext, true, arcCounts);
-        canv.drawArcs(arcs, darkStyle, filter);
+        canv.drawArcs(arcs, fgStyle, filter);
       }
     }
     if (lyr.gui.displayLayer.geometry_type == 'point') {
@@ -12577,7 +12560,7 @@
     var self = new EventDispatcher();
     var box = new HighlightBox(gui, {name: 'box-tool', persistent: true, handles: true, draggable: true});
     var popup = gui.container.findChild('.box-tool-options');
-    var coords = popup.findChild('.box-coords');
+    var coords = popup.findChild('.box-coords').hide();
     var _on = false;
     var instructionsShown = false;
     var alert;
@@ -12958,7 +12941,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       clearAllDisplayArcs();
 
       // Reproject all visible map layers
-      getContentLayers().forEach(function(lyr) {
+      getContentLayers().concat(_intersectionLyr || []).forEach(function(lyr) {
         projectLayerForDisplay(lyr, newCRS);
       });
 
@@ -13001,7 +12984,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
         darkMode: !!gui.state.dark_basemap,
         outlineMode: mode == 'vertices',
         interactionMode: mode
-      }, opts);
+      }, opts, gui.display.getOptions()); // intersectionsOn, ghostingOn
     }
 
     // Refresh map display in response to data changes, layer selection, etc.
@@ -13220,14 +13203,13 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
           // regenerating active style everytime, to support style change when
           // switching between outline and preview modes.
           style = getActiveLayerStyle(mapLayer.gui.displayLayer, getGlobalStyleOptions());
-          if (style.type != 'styled' && layers.length > 1 && style.strokeColors) {
-            // kludge to hide ghosted layers when reference layers are present
-            // TODO: consider never showing ghosted layers (which appear after
-            // commands like dissolve and filter).
-            style = utils$1.defaults({
-              strokeColors: [null, style.strokeColors[1]]
-            }, style);
-          }
+          // changed: ghosting is set in gui-layer-styler.mjs
+          // if (style.type != 'styled' && layers.length > 1 && style.strokeColors) {
+          //   // kludge to hide ghosted layers when reference layers are present
+          //   style = utils.defaults({
+          //     strokeColors: [null, style.strokeColors[1]]
+          //   }, style);
+          // }
         } else {
           if (mapLayer == _activeLyr) {
             console.error("Error: shared map layer");
@@ -13363,14 +13345,12 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
   }
 
   function Basemap(gui) {
-    var menu = gui.container.findChild('.basemap-options');
+    var menu = gui.container.findChild('.display-options');
     var fadeBtn = new SimpleButton(menu.findChild('.fade-btn'));
-    var closeBtn = new SimpleButton(menu.findChild('.close2-btn'));
     var clearBtn = new SimpleButton(menu.findChild('.clear-btn'));
     var menuButtons = menu.findChild('.basemap-styles');
     var overlayButtons = gui.container.findChild('.basemap-overlay-buttons');
     var container = gui.container.findChild('.basemap-container');
-    var basemapBtn = gui.container.findChild('.basemap-btn');
     var basemapNote = gui.container.findChild('.basemap-note');
     var basemapWarning = gui.container.findChild('.basemap-warning');
     var mapEl = gui.container.findChild('.basemap');
@@ -13385,22 +13365,25 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       //  TODO: check page URL for compatibility with mapbox key
       init();
     } else {
-      basemapBtn.hide();
+      menu.findChild('.basemap-opts').hide();
     }
 
     function init() {
-      gui.addMode('basemap', turnOn, turnOff, basemapBtn);
-
-      closeBtn.on('click', function() {
-        gui.clearMode();
-        turnOff();
+      gui.on('mode', function(e) {
+        if (e.prev == 'display_options') {
+         basemapWarning.hide();
+         basemapNote.hide();
+        }
+        if (e.name == 'display_options') {
+          onUpdate();
+        }
       });
 
       clearBtn.on('click', function() {
         if (activeStyle) {
           turnOffBasemap();
           updateButtons();
-          closeMenu();
+          // closeMenu();
         }
       });
 
@@ -13441,7 +13424,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
             showBasemap(style);
           }
           updateButtons();
-          closeMenu();
+          // closeMenu();
         }
       });
     }
@@ -13481,11 +13464,6 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       });
     }
 
-    function turnOn() {
-      onUpdate();
-      menu.show();
-    }
-
     function onUpdate() {
       var activeLyr = gui.model.getActiveLayer(); // may be null
       var info = getDatasetCrsInfo(activeLyr?.dataset); // defaults to wgs84
@@ -13507,19 +13485,13 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
         activeStyle = null;
         updateButtons();
       } else {
-        note = `Your data ${activeStyle ? 'is' : 'will be'} displayed using the Mercator projection.`;
+        note = `Note: basemaps use the Mercator projection.`;
         basemapNote.text(note).show();
         overlayButtons.show();
         overlayButtons.removeClass('disabled');
       }
     }
 
-    function turnOff() {
-      basemapWarning.hide();
-      basemapNote.hide();
-      menu.hide();
-    }
-
     function enabled() {
       return !!(mapEl && params);
     }
@@ -13635,6 +13607,64 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     return {refresh, show: onUpdate};
   }
 
+  function DisplayOptions(gui) {
+    var menuBtn = gui.container.findChild('.display-btn');
+    var menu = gui.container.findChild('.display-options');
+    var closeBtn = new SimpleButton(menu.findChild('.close2-btn'));
+    var xxBox = menu.findChild('.intersections-opt');
+    var ghostBox = menu.findChild('.ghost-opt');
+
+    var savedOpts = GUI.getSavedValue('display_options') || {};
+    xxBox.node().checked = savedOpts.intersectionsOn;
+    ghostBox.node().checked = savedOpts.ghostingOn;
+
+
+    gui.addMode('display_options', turnOn, turnOff, menuBtn);
+
+    closeBtn.on('click', function() {
+      gui.clearMode();
+      turnOff();
+    });
+
+    gui.on('display_option_change', function() {
+      GUI.setSavedValue('display_options', getOptions());
+    });
+
+    xxBox.on('change', function() {
+      gui.dispatchEvent('display_option_change', {
+        option: 'intersectionsOn',
+        value: getOptions().intersectionsOn
+      });
+    });
+
+    ghostBox.on('change', function() {
+      gui.dispatchEvent('display_option_change', {
+        option: 'ghostingOn',
+        value: getOptions().ghostingOn
+      });
+      gui.dispatchEvent('map-needs-refresh');
+    });
+
+    function getOptions() {
+      return {
+        intersectionsOn: xxBox.node().checked,
+        ghostingOn: ghostBox.node().checked
+      };
+    }
+
+    function turnOn() {
+      menu.show();
+    }
+
+    function turnOff() {
+      menu.hide();
+    }
+
+    return {
+      getOptions
+    };
+  }
+
   function GuiInstance(container, opts) {
     var gui = new ModeSwitcher();
     opts = utils$1.extend({
@@ -13652,12 +13682,14 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     gui.model = new Model(gui);
     gui.keyboard = new KeyboardEvents(gui);
     gui.buttons = new SidebarButtons(gui);
+    gui.display = new DisplayOptions(gui);
     gui.basemap = new Basemap(gui);
     gui.session = new SessionHistory(gui);
     gui.contextMenu = new ContextMenu();
     gui.undo = new Undo(gui);
     gui.map = new MshpMap(gui);
 
+
     gui.state = {};
 
     var msgCount = 0;

package/www/mapshaper.js

@@ -3927,7 +3927,10 @@
 
   function getValueType(val) {
     var type = null;
-    if (utils.isString(val)) {
+    if (val === null || val === undefined) {
+      // optimization, when scanning columns containing mostly null values
+      type = null;
+    } else if (utils.isString(val)) {
       type = 'string';
     } else if (utils.isNumber(val)) {
       type = 'number';
@@ -13542,14 +13545,8 @@
   function getBoundsPrecisionForDisplay(bbox) {
     var w = Math.abs(bbox[2] - bbox[0]),
         h = Math.abs(bbox[3] - bbox[1]),
-        // switched to max bound, based on experience with shift-drag box info
-        // range = Math.min(w, h) + 1e-8,
-        range = Math.max(w, h) + 1e-8,
-        digits = 0;
-    while (range < 2000 && digits < 1) {
-      range *= 10;
-      digits++;
-    }
+        range = (w + h) / 2 + 1e-8,
+        digits = Math.max(0, Math.round(3 - Math.log10(range)));
     return digits;
   }
 
@@ -46041,7 +46038,7 @@ ${svg}
     });
   }
 
-  var version = "0.6.106";
+  var version = "0.6.108";
 
   // Parse command line args into commands and run them
   // Function takes an optional Node-style callback. A Promise is returned if no callback is given.
@@ -46095,7 +46092,7 @@ ${svg}
     }
     if (!loggingEnabled()) argv += ' -quiet'; // kludge to pass logging setting to subprocess
     var mb = Math.round(gb * 1000);
-    var command = [process.execPath, '--max-old-space-size=' + mb, mapshaperScript, argv].join(' ');
+    var command = [`"${process.execPath}"`, '--max-old-space-size=' + mb, `"${mapshaperScript}"`, argv].join(' ');
     var child = require$1('child_process').exec(command, {}, function(err, stdout, stderr) {
       opts.callback(err);
     });

package/www/page.css

@@ -325,18 +325,18 @@ div.alert-box {
 /* --- Splash screen -------------- */
 
 .import-instructions {
-	margin: 7px 0 0 0;
+	margin: 8px 0 0 0;
+	font-size: 15px;
 }
 
 .mini-drop-area {
 	border: 1.5px dashed #999;
-	max-width: 245px;
+	max-width: 260px;
 	border-radius: 9px;
-	font-size: 14px;
-	line-height: 1.5;
+	line-height: 1.45;
 	padding: 9px 11px 6px 11px;
 	margin: 9px -1px 3px -1px;
-	min-height: 120px;
+	min-height: 130px;
 	background: #f8fdff;
 }
 
@@ -503,7 +503,7 @@ div.alert-box {
 	text-align: left;
 	margin-top: 12px;
 	margin-right: 20px;
-	padding: 11px 16px 12px 18px;
+	padding: 12px 16px 12px 18px;
 	vertical-align: top;
 	display: inline-block;
 	/* border: 1px solid #aaa; */
@@ -533,7 +533,7 @@ div.alert-box {
 }
 
 .info-box h3 {
-	font-size: 19px;
+	font-size: 20px;
 	line-height: 1.1;
 	padding: 0;
 	margin: 0 0 0.4em 0;
@@ -821,7 +821,7 @@ img.close-btn {
 	float: right;
 	height:  18px;
 	width:  18px;
-	/* margin-top: 1px; */
+	margin-top: 1px;
 	margin-right: -3px;
 	cursor: pointer;
 	border-radius: 4px;
@@ -1101,11 +1101,11 @@ img.close-btn:hover,
 	height: 100%;
 }
 
-.basemap-options {
+.display-options {
 	pointer-events: none;
 }
 
-.basemap-options .info-box {
+.display-options .info-box {
 	width:  min-content;
 	pointer-events: initial;
 }
@@ -1134,6 +1134,10 @@ img.close-btn:hover,
 	color: #cc0000;
 }
 
+.basemap-note {
+	font-size: 90%;
+}
+
 .basemap-prompt {
 	width: 100%;
 	text-align:  center;
@@ -1146,7 +1150,7 @@ img.close-btn:hover,
 
 .basemap-styles > div {
 	display: inline-block;
-	margin-bottom:  6px;
+	margin-bottom: 4px;
 }
 
 .basemap-styles > div:nth-child(even) {