mapshaper 0.6.75 → 0.6.77

package/www/mapshaper-gui.js

@@ -760,10 +760,7 @@
   //
   //El.prototype.__domevents = utils.arrayToIndex("click,mousedown,mousemove,mouseup".split(','));
   El.prototype.__on = El.prototype.on;
-  El.prototype.on = function(type, func, ctx) {
-    if (ctx) {
-      error$1("[El#on()] Third argument no longer supported.");
-    }
+  El.prototype.on = function(type, func) {
     if (this.constructor == El) {
       this.el.addEventListener(type, func);
     } else {
@@ -1369,10 +1366,12 @@
     init();
 
     async function init() {
-      var enabled = await isStorageEnabled();
-      if (!enabled) return;
-
       btn = gui.buttons.addButton('#ribbon-icon').addClass('menu-btn save-btn');
+      var enabled = await isStorageEnabled();
+      if (!enabled) {
+        btn.remove();
+        return;
+      }
       menu = El('div').addClass('nav-sub-menu save-menu').appendTo(btn.node());
       await initialCleanup();
 
@@ -1444,14 +1443,6 @@
           renderMenu();
         }).text('remove');
       });
-
-      // if (snapshots.length >= 1) {
-      //   addMenuLink({
-      //     slug: 'clear',
-      //     label: 'remove all',
-      //     action: clearData
-      //   });
-      // }
     }
 
     function addMenuLink(item) {
@@ -1484,6 +1475,7 @@
 
     async function saveSnapshot(gui) {
       var obj = await captureSnapshot(gui);
+      if (!obj) return;
       // storing an unpacked object is usually a bit faster (~20%)
       // note: we don't know the size of unpacked snapshot objects
       // obj = internal.pack(obj);
@@ -1563,12 +1555,13 @@
   }
 
   async function captureSnapshot(gui) {
-    var datasets = gui.model.getDatasets();
-    var lyr = gui.model.getActiveLayer().layer;
+    var lyr = gui.model.getActiveLayer()?.layer;
+    if (!lyr) return null; // no data -- no snapshot
+    lyr.active = true;
     // compact: true applies compression to vector coordinates, for ~30% reduction
     //   in file size in a typical polygon or polyline file, but longer processing time
     var opts = {compact: false};
-    lyr.active = true;
+    var datasets = gui.model.getDatasets();
     // console.time('msx');
     var obj = await internal.exportDatasetsToPack(datasets, opts);
     // console.timeEnd('msx')
@@ -1761,7 +1754,7 @@
       }],
       info: {}
     };
-    if (type == 'polygon' || type == 'point') {
+    if (type == 'polygon' || type == 'polyline') {
       dataset.arcs = new internal.ArcCollection();
     }
     if (crsInfo) {
@@ -1873,7 +1866,6 @@
     var initialImport = true;
     var importCount = 0;
     var importTotal = 0;
-    var overQuickView = false;
     var useQuickView = false;
     var queuedFiles = [];
     var manifestFiles = opts.files || [];
@@ -1883,50 +1875,48 @@
       catalog = new CatalogControl(gui, opts.catalog, downloadFiles);
     }
 
-    new SimpleButton('#import-buttons .submit-btn').on('click', importQueuedFiles);
-    new SimpleButton('#import-buttons .cancel-btn').on('click', gui.clearMode);
-    new DropControl(gui, 'body', receiveFiles);
-    new FileChooser('#file-selection-btn', receiveFiles);
-    new FileChooser('#import-buttons .add-btn', receiveFiles);
+    var submitBtn = new SimpleButton('#import-options .submit-btn').on('click', importQueuedFiles);
+    new SimpleButton('#import-options .cancel-btn').on('click', gui.clearMode);
+    new DropControl(gui, 'body', receiveFilesWithOption);
+    new FileChooser('#import-options .add-btn', receiveFilesWithOption);
     new FileChooser('#add-file-btn', receiveFiles);
     new SimpleButton('#add-empty-btn').on('click', function() {
       gui.clearMode(); // close import dialog
       openAddLayerPopup(gui);
     });
-    initDropArea('#import-quick-drop', true);
-    initDropArea('#import-drop');
+    // initDropArea('#import-quick-drop', true);
+    // initDropArea('#import-drop');
     gui.keyboard.onMenuSubmit(El('#import-options'), importQueuedFiles);
 
     gui.addMode('import', turnOn, turnOff);
     gui.enterMode('import');
 
-    gui.on('mode', function(e) {
-      // re-open import opts if leaving alert or console modes and nothing has been imported yet
-      if (!e.name && model.isEmpty()) {
-        gui.enterMode('import');
-      }
-    });
-
-    function initDropArea(el, isQuick) {
-      var area = El(el)
-        .on('dragleave', onout)
-        .on('dragover', function() {overQuickView = !!isQuick; onover();})
-        .on('mouseover', onover)
-        .on('mouseout', onout);
-
-      function onover() {
-        area.addClass('dragover');
+    function turnOn() {
+      if (manifestFiles.length > 0) {
+        downloadFiles(manifestFiles, true);
+        manifestFiles = [];
+      } else if (model.isEmpty()) {
+        showImportMenu();
       }
+    }
 
-      function onout() {
-        overQuickView = false;
-        area.removeClass('dragover');
+    function turnOff() {
+      var target;
+      if (catalog) catalog.reset(); // re-enable clickable catalog
+      if (importCount > 0) {
+        onImportComplete();
+        importTotal += importCount;
+        importCount = 0;
       }
+      gui.clearProgressMessage();
+      initialImport = false; // unset 'quick view' mode, if on
+      clearQueuedFiles();
+      hideImportMenu();
     }
 
     async function importQueuedFiles() {
-      gui.container.removeClass('queued-files');
-      gui.container.removeClass('splash-screen');
+      // gui.container.removeClass('queued-files');
+      hideImportMenu();
       var files = queuedFiles;
       try {
         if (files.length > 0) {
@@ -1943,27 +1933,7 @@
       }
     }
 
-    function turnOn() {
-      if (manifestFiles.length > 0) {
-        downloadFiles(manifestFiles, true);
-        manifestFiles = [];
-      } else if (model.isEmpty()) {
-        gui.container.addClass('splash-screen');
-      }
-    }
 
-    function turnOff() {
-      var target;
-      if (catalog) catalog.reset(); // re-enable clickable catalog
-      if (importCount > 0) {
-        onImportComplete();
-        importTotal += importCount;
-        importCount = 0;
-      }
-      gui.clearProgressMessage();
-      initialImport = false; // unset 'quick view' mode, if on
-      clearQueuedFiles();
-    }
 
     function onImportComplete() {
       // display last layer of last imported dataset
@@ -1996,6 +1966,7 @@
       }, []);
     }
 
+
     function showQueuedFiles() {
       var list = gui.container.findChild('.dropped-file-list').empty();
       queuedFiles.forEach(function(f) {
@@ -2015,13 +1986,20 @@
           }
         });
       });
+      submitBtn.classed('disabled', queuedFiles.length === 0);
+    }
+
+    function receiveFilesWithOption(files) {
+      var quickView = !El('.advanced-import-options').node().checked;
+      receiveFiles(files, quickView);
     }
 
-    async function receiveFiles(files) {
+    async function receiveFiles(files, quickView) {
       var names = getFileNames(files);
       var expanded = [];
       if (files.length === 0) return;
-      useQuickView = importTotal === 0 && (opts.quick_view || overQuickView);
+      useQuickView = importTotal === 0 && (opts.quick_view ||
+          quickView);
       try {
         expanded = await expandFiles(files);
       } catch(e) {
@@ -2039,12 +2017,23 @@
       if (useQuickView) {
         await importQueuedFiles();
       } else {
-        gui.container.addClass('queued-files');
-        El('#path-import-options').classed('hidden', !filesMayContainPaths(queuedFiles));
-        showQueuedFiles();
+        showImportMenu();
       }
     }
 
+    function showImportMenu() {
+      // gui.container.addClass('queued-files');
+      El('#import-options').show();
+      gui.container.classed('queued-files', queuedFiles.length > 0);
+      El('#path-import-options').classed('hidden', !filesMayContainPaths(queuedFiles));
+      showQueuedFiles();
+    }
+
+    function hideImportMenu() {
+      // gui.container.removeClass('queued-files');
+      El('#import-options').hide();
+    }
+
     function getFileNames(files) {
       return Array.from(files).map(function(f) {return f.name;});
     }
@@ -2540,7 +2529,11 @@
     // prevent GUI message popup on error
     internal.setLoggingForCLI();
     try {
-      crs = internal.getDatasetCRS(dataset);
+      if (!dataset || internal.datasetIsEmpty(dataset)) {
+        crs = internal.parseCrsString('wgs84');
+      } else {
+        crs = internal.getDatasetCRS(dataset);
+      }
     } catch(e) {
       err = e.message;
     }
@@ -2554,7 +2547,7 @@
   // Convert a point from display CRS coordinates to data coordinates.
   // These are only different when using dynamic reprojection (basemap view).
   function translateDisplayPoint(lyr, p) {
-    return isProjectedLayer(lyr) ? lyr.invertPoint(p[0], p[1]) : p;
+    return isProjectedLayer(lyr) ? lyr.gui.invertPoint(p[0], p[1]) : p;
   }
 
   // bbox: display coords
@@ -2571,7 +2564,7 @@
 
   function isProjectedLayer(lyr) {
     // TODO: could do some validation on the layer's contents
-    return !!(lyr.source && lyr.invertPoint);
+    return !!lyr.gui.invertPoint;
   }
 
   var darkStroke = "#334",
@@ -2932,160 +2925,619 @@
     return internal.findPropertiesBySymbolGeom(fields, lyr.geometry_type);
   }
 
-  function flattenArcs(lyr) {
-    lyr.source.dataset.arcs.flatten();
-    if (isProjectedLayer(lyr)) {
-      lyr.arcs.flatten();
-    }
-  }
+  // Create low-detail versions of large arc collections for faster rendering
+  // at zoomed-out scales.
+  function enhanceArcCollectionForDisplay(unfilteredArcs) {
+    var size = unfilteredArcs.getPointCount(),
+        filteredArcs, filteredSegLen;
 
-  function setZ(lyr, z) {
-    lyr.source.dataset.arcs.setRetainedInterval(z);
-    if (isProjectedLayer(lyr)) {
-      lyr.arcs.setRetainedInterval(z);
+    // Only generate low-detail arcs for larger datasets
+    if (size > 5e5) {
+      update();
     }
-  }
 
-  function updateZ(lyr) {
-    if (isProjectedLayer(lyr) && !lyr.source.dataset.arcs.isFlat()) {
-      lyr.arcs.setThresholds(lyr.source.dataset.arcs.getVertexData().zz);
+    function update() {
+      if (unfilteredArcs.getVertexData().zz) {
+        // Use precalculated simplification data for vertex filtering, if available
+        filteredArcs = initFilteredArcs(unfilteredArcs);
+        filteredSegLen = internal.getAvgSegment(filteredArcs);
+      } else {
+        // Use fast simplification as a fallback
+        filteredSegLen = internal.getAvgSegment(unfilteredArcs) * 4;
+        filteredArcs = internal.simplifyArcsFast(unfilteredArcs, filteredSegLen);
+      }
     }
-  }
 
-  function appendNewDataRecord(layer) {
-    if (!layer.data) return null;
-    var fields = layer.data.getFields();
-    var d = getEmptyDataRecord(layer.data);
-    // TODO: handle SVG symbol layer
-    if (internal.layerHasLabels(layer)) {
-      d['label-text'] = 'TBD'; // without text, new labels will be invisible
-    } else if (layer.geometry_type == 'point' && fields.includes('r')) {
-      d.r = 3; // show a black circle if layer is styled
-    }
-    if (layer.geometry_type == 'polyline' || layer.geometry_type == 'polygon') {
-      if (fields.includes('stroke')) d.stroke = 'black';
-      if (fields.includes('stroke-width')) d['stroke-width'] = 1;
+    function initFilteredArcs(arcs) {
+      var filterPct = 0.08;
+      var nth = Math.ceil(arcs.getPointCount() / 5e5);
+      var currInterval = arcs.getRetainedInterval();
+      var filterZ = arcs.getThresholdByPct(filterPct, nth);
+      var filteredArcs = arcs.setRetainedInterval(filterZ).getFilteredCopy();
+      arcs.setRetainedInterval(currInterval); // reset current simplification
+      return filteredArcs;
     }
-    if (layer.geometry_type == 'polygon') {
-      if (fields.includes('fill')) {
-        d.fill = 'rgba(0,0,0,0.10)'; // 'rgba(249,120,249,0.20)';
+
+    // TODO: better job of detecting arc change... e.g. revision number
+    unfilteredArcs.getScaledArcs = function(ext) {
+      // check for changes in the number of arcs (probably due to editing)
+      if (filteredArcs && filteredArcs.size() != unfilteredArcs.size()) {
+        // arc count has changed... probably due to editing
+        update();
+        if (filteredArcs.size() != unfilteredArcs.size()) {
+          throw Error('Internal error');
+        }
       }
-    }
-    // TODO: better styling
-    layer.data.getRecords().push(d);
-    return d;
+      if (filteredArcs) {
+        // match simplification of unfiltered arcs
+        filteredArcs.setRetainedInterval(unfilteredArcs.getRetainedInterval());
+      }
+      // switch to filtered version of arcs at small scales
+      var unitsPerPixel = 1/ext.getTransform().mx,
+          useFiltering = filteredArcs && unitsPerPixel > filteredSegLen * 1.5;
+      return useFiltering ? filteredArcs : unfilteredArcs;
+    };
   }
 
-  function getEmptyDataRecord(table) {
-    return table.getFields().reduce(function(memo, name) {
-      memo[name] = null;
-      return memo;
-    }, {});
-  }
+  function getDisplayLayerForTable(tableArg) {
+    var table = tableArg || new internal.DataTable(0),
+        n = table.size(),
+        cellWidth = 12,
+        cellHeight = 5,
+        gutter = 6,
+        arcs = [],
+        shapes = [],
+        aspectRatio = 1.1,
+        x, y, col, row, blockSize;
 
-  function deleteLastPath(lyr) {
-    var arcId = lyr.arcs.size() - 1;
-    if (lyr.layer.data) {
-      lyr.layer.data.getRecords().pop();
-    }
-    var shp = lyr.layer.shapes.pop();
-    internal.deleteLastArc(lyr.arcs);
-    if (isProjectedLayer(lyr)) {
-      internal.deleteLastArc(lyr.source.dataset.arcs);
+    if (n > 10000) {
+      arcs = null;
+      gutter = 0;
+      cellWidth = 4;
+      cellHeight = 4;
+      aspectRatio = 1.45;
+    } else if (n > 5000) {
+      cellWidth = 5;
+      gutter = 3;
+      aspectRatio = 1.45;
+    } else if (n > 1000) {
+      gutter = 3;
+      cellWidth = 8;
+      aspectRatio = 1.3;
     }
-  }
 
-  // p1, p2: two points in source data CRS coords.
-  function appendNewPath(lyr, p1, p2) {
-    var arcId = lyr.arcs.size();
-    internal.appendEmptyArc(lyr.arcs);
-    lyr.layer.shapes.push([[arcId]]);
-    if (isProjectedLayer(lyr)) {
-      // lyr.source.layer.shapes.push([[arcId]]);
-      internal.appendEmptyArc(lyr.source.dataset.arcs);
+    if (n < 25) {
+      blockSize = n;
+    } else {
+      blockSize = Math.sqrt(n * (cellWidth + gutter) / cellHeight / aspectRatio) | 0;
     }
-    appendVertex$1(lyr, p1);
-    appendVertex$1(lyr, p2);
-    appendNewDataRecord(lyr.layer);
-  }
 
-  // p: point in source data CRS coords.
-  function insertVertex$1(lyr, id, p) {
-    internal.insertVertex(lyr.source.dataset.arcs, id, p);
-    if (isProjectedLayer(lyr)) {
-      internal.insertVertex(lyr.arcs, id, lyr.projectPoint(p[0], p[1]));
+    for (var i=0; i<n; i++) {
+      row = i % blockSize;
+      col = Math.floor(i / blockSize);
+      x = col * (cellWidth + gutter);
+      y = cellHeight * (blockSize - row);
+      if (arcs) {
+        arcs.push(getArc(x, y, cellWidth, cellHeight));
+        shapes.push([[i]]);
+      } else {
+        shapes.push([[x, y]]);
+      }
     }
-  }
 
-  function appendVertex$1(lyr, p) {
-    var n = lyr.source.dataset.arcs.getPointCount();
-    insertVertex$1(lyr, n, p);
-  }
-
-  // TODO: make sure we're not also removing an entire arc
-  function deleteLastVertex(lyr) {
-    deleteVertex$1(lyr, lyr.arcs.getPointCount() - 1);
-  }
-
-  function deleteVertex$1(lyr, id) {
-    internal.deleteVertex(lyr.arcs, id);
-    if (isProjectedLayer(lyr)) {
-      internal.deleteVertex(lyr.source.dataset.arcs, id);
+    function getArc(x, y, w, h) {
+      return [[x, y], [x + w, y], [x + w, y - h], [x, y - h], [x, y]];
     }
-  }
-
-  function getLastArcCoords(target) {
-    var arcId = target.source.dataset.arcs.size() - 1;
-    return internal.getUnfilteredArcCoords(arcId, target.source.dataset.arcs);
-  }
 
-  function getLastVertexCoords(target) {
-    var arcs = target.source.dataset.arcs;
-    return internal.getVertexCoords(arcs.getPointCount() - 1, arcs);
+    return {
+      layer: {
+        geometry_type: arcs ? 'polygon' : 'point',
+        shapes: shapes,
+        data: table
+      },
+      arcs: arcs ? new internal.ArcCollection(arcs) : null
+    };
   }
 
-  function getLastArcLength(target) {
-    var arcId = target.source.dataset.arcs.size() - 1;
-    return internal.getUnfilteredArcLength(arcId, target.source.dataset.arcs);
-  }
+  var R = 6378137;
+  var D2R = Math.PI / 180;
+  var R2D = 180 / Math.PI;
 
-  function getPointCoords(lyr, fid) {
-    return internal.cloneShape(lyr.source.layer.shapes[fid]);
-  }
+  // Assumes projections are available
 
-  function getVertexCoords(lyr, id) {
-    return lyr.source.dataset.arcs.getVertex2(id);
+  function needReprojectionForDisplay(sourceCRS, displayCRS) {
+    if (!sourceCRS || !displayCRS) {
+      return false;
+    }
+    if (internal.crsAreEqual(sourceCRS, displayCRS)) {
+      return false;
+    }
+    return true;
   }
 
-  // set data coords (not display coords) of one or more vertices.
-  function setVertexCoords(lyr, ids, dataPoint) {
-    internal.snapVerticesToPoint(ids, dataPoint, lyr.source.dataset.arcs, true);
-    if (isProjectedLayer(lyr)) {
-      var p = lyr.projectPoint(dataPoint[0], dataPoint[1]);
-      internal.snapVerticesToPoint(ids, p, lyr.arcs, true);
+  // bbox in wgs84 coords
+  // dest: CRS, which may also be wgs84
+  function projectLatLonBBox(bbox, dest) {
+    if (!dest || internal.isWGS84(dest)) {
+      return bbox.concat();
     }
+    var proj = internal.getProjTransform2(internal.parseCrsString('wgs84'), dest);
+    var bbox2 = proj(bbox[0], bbox[1]).concat(proj(bbox[2], bbox[3]));
+    return bbox2;
   }
 
-  // coords: [x, y] point in data CRS (not display CRS)
-  function setPointCoords(lyr, fid, coords) {
-    lyr.source.layer.shapes[fid] = coords;
-    if (isProjectedLayer(lyr)) {
-      lyr.layer.shapes[fid] = projectPointCoords(coords, lyr.projectPoint);
+  function projectArcsForDisplay(arcs, src, dest) {
+    var copy = arcs.getCopy(); // need to flatten first?
+    var destIsWebMerc = internal.isWebMercator(dest);
+    if (destIsWebMerc && internal.isWebMercator(src)) {
+      return copy;
     }
-  }
 
-  function updateVertexCoords(lyr, ids) {
-    if (!isProjectedLayer(lyr)) return;
-    var p = lyr.arcs.getVertex2(ids[0]);
-    internal.snapVerticesToPoint(ids, lyr.invertPoint(p[0], p[1]), lyr.source.dataset.arcs, true);
-  }
+    var wgs84 = internal.parseCrsString('wgs84');
+    var toWGS84 = internal.getProjTransform2(src, wgs84);
+    var fromWGS84 = internal.getProjTransform2(wgs84, dest);
 
-  function setRectangleCoords(lyr, ids, coords) {
-    ids.forEach(function(id, i) {
-      var p = coords[i];
-      internal.snapVerticesToPoint([id], p, lyr.source.dataset.arcs, true);
+    try {
+      // first try projectArcs() -- it's fast and preserves arc ids
+      // (so vertex editing doesn't break)
+      if (!internal.isWGS84(src)) {
+        // use wgs84 as a pivot CRS, so we can handle polar coordinates
+        // that can't be projected to Mercator
+        internal.projectArcs(copy, toWGS84);
+      }
+      if (destIsWebMerc) {
+        // handle polar points by clamping them to they will project
+        // (downside: may cause unexpected behavior when editing vertices interactively)
+        clampY(copy);
+      }
+      internal.projectArcs(copy, fromWGS84);
+    } catch(e) {
+      console.error(e);
+      // use the more robust projectArcs2 if projectArcs throws an error
+      // downside: projectArcs2 discards Z values and changes arc indexing,
+      // which will break vertex editing.
+      var reproject = internal.getProjTransform2(src, dest);
+      copy = arcs.getCopy();
+      internal.projectArcs2(copy, reproject);
+    }
+    return copy;
+  }
+
+  function clampY(arcs) {
+    var max = 89.9,
+        min = -89.9,
+        bbox = arcs.getBounds().toArray();
+    if (bbox[1] >= min && bbox[3] <= max) return;
+    arcs.transformPoints(function(x, y) {
+      if (y > max) return [x, max];
+      if (y < min) return [x, min];
+    });
+  }
+
+  function projectPointsForDisplay(lyr, src, dest) {
+    var copy = utils$1.extend({}, lyr);
+    var proj = internal.getProjTransform2(src, dest);
+    copy.shapes = internal.cloneShapes(lyr.shapes);
+    internal.projectPointLayer(copy, proj);
+    return copy;
+  }
+
+
+  function toWebMercator(lng, lat) {
+    var k = Math.cos(lat * D2R);
+    var x = R * lng * D2R;
+    var y = R * Math.log(Math.tan(Math.PI * 0.25 + lat * D2R * 0.5));
+    return [x, y];
+  }
+
+  function fromWebMercator(x, y) {
+    var lon = x / R * R2D;
+    var lat = R2D * (Math.PI * 0.5 - 2 * Math.atan(Math.exp(-y / R)));
+    return [lon, lat];
+  }
+
+  function scaleToZoom(metersPerPix) {
+    return Math.log(40075017 / 512 / metersPerPix) / Math.log(2);
+  }
+
+  function getMapboxBounds() {
+    var ymax = toWebMercator(0, 84)[1];
+    var ymin = toWebMercator(0, -84)[1];
+    return [-Infinity, ymin, Infinity, ymax];
+  }
+
+
+  // Update map extent and trigger redraw, after a new display CRS has been applied
+  function projectMapExtent(ext, src, dest, newBounds) {
+    var oldBounds = ext.getBounds();
+    var oldScale = ext.scale();
+    var newCP, proj, strictBounds;
+
+    if (dest && internal.isWebMercator(dest)) {
+      // clampToMapboxBounds(newBounds);
+      strictBounds = getMapboxBounds();
+    }
+
+    // if source or destination CRS is unknown, show full extent
+    // if map is at full extent, show full extent
+    // TODO: handle case that scale is 1 and map is panned away from center
+    if (ext.scale() == 1 || !dest) {
+      ext.setFullBounds(newBounds, strictBounds);
+      ext.reset();
+    } else {
+      // if map is zoomed, stay centered on the same geographic location, at the same relative scale
+      proj = internal.getProjTransform2(src, dest);
+      newCP = proj(oldBounds.centerX(), oldBounds.centerY());
+      ext.setFullBounds(newBounds, strictBounds);
+      if (!newCP) {
+        // projection of center point failed; use center of bounds
+        // (also consider just resetting the view using ext.home())
+        newCP = [newBounds.centerX(), newBounds.centerY()];
+      }
+      ext.recenter(newCP[0], newCP[1], oldScale);
+    }
+    // trigger full redraw, in case some SVG symbols are unprojectable
+    ext.dispatchEvent('change', {redraw: true});
+  }
+
+  // Called from console; for testing dynamic crs
+  function setDisplayProjection(gui, cmd) {
+    var arg = cmd.replace(/^projd[ ]*/, '');
+    if (arg) {
+      gui.map.setDisplayCRS(internal.parseCrsString(arg));
+    } else {
+      gui.map.setDisplayCRS(null);
+    }
+  }
+
+  function filterLayerByIds(lyr, ids) {
+    var shapes;
+    if (lyr.shapes) {
+      shapes = ids.map(function(id) {
+        return lyr.shapes[id];
+      });
+      return utils$1.defaults({shapes: shapes, data: null}, lyr);
+    }
+    return lyr;
+  }
+
+  function formatLayerNameForDisplay(name) {
+    return name || '[unnamed]';
+  }
+
+  function cleanLayerName(raw) {
+    return raw.replace(/[\n\t/\\]/g, '')
+      .replace(/^[.\s]+/, '').replace(/[.\s]+$/, '');
+  }
+
+  function updateLayerStackOrder(layers) {
+    // 1. assign ascending ids to unassigned layers above the range of other layers
+    layers.forEach(function(o, i) {
+      if (!o.layer.menu_order) o.layer.menu_order = 1e6 + i;
+    });
+    // 2. sort in ascending order
+    layers.sort(function(a, b) {
+      return a.layer.menu_order - b.layer.menu_order;
+    });
+    // 3. assign consecutve ids
+    layers.forEach(function(o, i) {
+      o.layer.menu_order = i + 1;
+    });
+    return layers;
+  }
+
+  function sortLayersForMenuDisplay(layers) {
+    layers = updateLayerStackOrder(layers);
+    return layers.reverse();
+  }
+
+  // lyr: a map layer with gui property
+  // displayCRS: CRS to use for display, or null (which clears any current display CRS)
+  function projectLayerForDisplay(lyr, displayCRS) {
+    var crsInfo = getDatasetCrsInfo(lyr.gui.source.dataset);
+    var sourceCRS = crsInfo.crs || null; // let enhanceLayerForDisplay() handle null case
+    if (!lyr.gui.geographic) {
+      return;
+    }
+    if (lyr.gui.dynamic_crs && internal.crsAreEqual(sourceCRS, lyr.gui.dynamic_crs)) {
+      return;
+    }
+    var gui = lyr.gui;
+    enhanceLayerForDisplay(lyr, lyr.gui.source.dataset, {crs: displayCRS});
+    utils$1.defaults(lyr.gui, gui); // re-apply any properties that were lost (e.g. svg_id)
+    if (lyr.gui.style?.ids) {
+      // re-apply layer filter
+      lyr.gui.displayLayer = filterLayerByIds(lyr.gui.displayLayer, lyr.gui.style.ids);
+    }
+  }
+
+
+  // Supplement a layer with information needed for rendering
+  function enhanceLayerForDisplay(layer, dataset, opts) {
+    var gui = {
+      empty: internal.getFeatureCount(layer) === 0,
+      geographic: false,
+      displayArcs: null,
+      displayLayer: null,
+      source: {dataset},
+      bounds: null,
+      style: null,
+      dynamic_crs: null,
+      invertPoint: null,
+      projectPoint: null
+    };
+
+    var displayCRS = opts.crs || null;
+    // display arcs may have been generated when another layer in the dataset
+    // was converted for display... re-use if available
+    var displayArcs = dataset.gui?.displayArcs;
+    var unprojectable = false;
+    var sourceCRS;
+    var emptyArcs;
+
+    if (displayCRS && layer.geometry_type) {
+      var crsInfo = getDatasetCrsInfo(dataset);
+      if (crsInfo.error) {
+        // unprojectable dataset -- return empty layer
+        gui.unprojectable = true;
+      } else {
+        sourceCRS = crsInfo.crs;
+      }
+    }
+
+    // Assume that dataset.displayArcs is in the display CRS
+    // (it must be deleted upstream if reprojection is needed)
+    // if (!obj.empty && dataset.arcs && !displayArcs) {
+    if (dataset.arcs && !displayArcs && !gui.unprojectable) {
+      // project arcs, if needed
+      if (needReprojectionForDisplay(sourceCRS, displayCRS)) {
+        displayArcs = projectArcsForDisplay(dataset.arcs, sourceCRS, displayCRS);
+      } else {
+        // Use original arcs for display if there is no dynamic reprojection
+        displayArcs = dataset.arcs;
+      }
+
+      enhanceArcCollectionForDisplay(displayArcs);
+      dataset.gui = {displayArcs}; // stash these in the dataset for other layers to use
+    }
+
+    if (internal.layerHasFurniture(layer)) {
+      // TODO: consider how to render furniture in GUI
+      // treating furniture layers (other than frame) as tabular for now,
+      // so there is something to show if they are selected
+    }
+
+    if (gui.unprojectable) {
+      gui.displayLayer = {shapes: []}; // TODO: improve
+    } else if (layer.geometry_type) {
+      gui.geographic = true;
+      gui.displayLayer = layer;
+      gui.displayArcs = displayArcs;
+    } else {
+      var table = getDisplayLayerForTable(layer.data);
+      gui.tabular = true;
+      gui.displayLayer = table.layer;
+      gui.displayArcs = table.arcs;
+    }
+
+    // dynamic reprojection (arcs were already reprojected above)
+    if (gui.geographic && needReprojectionForDisplay(sourceCRS, displayCRS)) {
+      gui.dynamic_crs = displayCRS;
+      gui.invertPoint = internal.getProjTransform2(displayCRS, sourceCRS);
+      gui.projectPoint = internal.getProjTransform2(sourceCRS, displayCRS);
+      if (internal.layerHasPoints(layer)) {
+        gui.displayLayer = projectPointsForDisplay(layer, sourceCRS, displayCRS);
+      } else if (internal.layerHasPaths(layer)) {
+        emptyArcs = findEmptyArcs(displayArcs);
+        if (emptyArcs.length > 0) {
+          // Don't try to draw paths containing coordinates that failed to project
+          gui.displayLayer = internal.filterPathLayerByArcIds(gui.displayLayer, emptyArcs);
+        }
+      }
+    }
+
+    gui.bounds = getDisplayBounds(gui.displayLayer, gui.displayArcs);
+    layer.gui = gui;
+  }
+
+  function getDisplayBounds(lyr, arcs) {
+    var bounds = internal.getLayerBounds(lyr, arcs) || new Bounds();
+    if (lyr.geometry_type == 'point' && arcs && bounds.hasBounds() && bounds.area() > 0 === false) {
+      // if a point layer has no extent (e.g. contains only a single point),
+      // then merge with arc bounds, to place the point in context.
+      bounds = bounds.mergeBounds(arcs.getBounds());
+    }
+    return bounds;
+  }
+
+  // Returns an array of ids of empty arcs (arcs can be set to empty if errors occur while projecting them)
+  function findEmptyArcs(arcs) {
+    var nn = arcs.getVertexData().nn;
+    var ids = [];
+    for (var i=0, n=nn.length; i<n; i++) {
+      if (nn[i] === 0) {
+        ids.push(i);
+      }
+    }
+    return ids;
+  }
+
+  function flattenArcs(lyr) {
+    lyr.gui.source.dataset.arcs.flatten();
+    if (isProjectedLayer(lyr)) {
+      lyr.gui.displayArcs.flatten();
+    }
+  }
+
+  function setZ(lyr, z) {
+    lyr.gui.source.dataset.arcs.setRetainedInterval(z);
+    if (isProjectedLayer(lyr)) {
+      lyr.gui.displayArcs.setRetainedInterval(z);
+    }
+  }
+
+  function updateZ(lyr) {
+    if (isProjectedLayer(lyr) && !lyr.gui.source.dataset.arcs.isFlat()) {
+      lyr.gui.displayArcs.setThresholds(lyr.gui.source.dataset.arcs.getVertexData().zz);
+    }
+  }
+
+  function appendNewDataRecord(layer) {
+    if (!layer.data) return null;
+    var fields = layer.data.getFields();
+    var d = getEmptyDataRecord(layer.data);
+    // TODO: handle SVG symbol layer
+    if (internal.layerHasLabels(layer)) {
+      d['label-text'] = 'TBD'; // without text, new labels will be invisible
+    } else if (layer.geometry_type == 'point' && fields.includes('r')) {
+      d.r = 3; // show a black circle if layer is styled
+    }
+    if (layer.geometry_type == 'polyline' || layer.geometry_type == 'polygon') {
+      if (fields.includes('stroke')) d.stroke = 'black';
+      if (fields.includes('stroke-width')) d['stroke-width'] = 1;
+    }
+    if (layer.geometry_type == 'polygon') {
+      if (fields.includes('fill')) {
+        d.fill = 'rgba(0,0,0,0.10)'; // 'rgba(249,120,249,0.20)';
+      }
+    }
+    // TODO: better styling
+    layer.data.getRecords().push(d);
+    return d;
+  }
+
+  function getEmptyDataRecord(table) {
+    return table.getFields().reduce(function(memo, name) {
+      memo[name] = null;
+      return memo;
+    }, {});
+  }
+
+  // p1, p2: two points in source data CRS coords.
+  function appendNewPath(lyr, p1, p2) {
+    var arcId = lyr.gui.displayArcs.size();
+    internal.appendEmptyArc(lyr.gui.displayArcs);
+    lyr.shapes.push([[arcId]]);
+    if (isProjectedLayer(lyr)) {
+      internal.appendEmptyArc(lyr.gui.source.dataset.arcs);
+    }
+    appendVertex$1(lyr, p1);
+    appendVertex$1(lyr, p2);
+    appendNewDataRecord(lyr);
+  }
+
+  function deleteLastPath(lyr) {
+    var arcId = lyr.gui.displayArcs.size() - 1;
+    if (lyr.data) {
+      lyr.data.getRecords().pop();
+    }
+    var shp = lyr.shapes.pop();
+    internal.deleteLastArc(lyr.gui.displayArcs);
+    if (isProjectedLayer(lyr)) {
+      internal.deleteLastArc(lyr.gui.source.dataset.arcs);
+    }
+  }
+
+  // p: one point in source data coords
+  function appendNewPoint(lyr, p) {
+    lyr.shapes.push([p]);
+    if (lyr.data) {
+      appendNewDataRecord(lyr);
+    }
+    // this reprojects all the points... TODO: improve
+    if (isProjectedLayer(lyr)) {
+      projectLayerForDisplay(lyr, lyr.gui.dynamic_crs);
+    }
+  }
+
+  function deleteLastPoint(lyr) {
+    if (lyr.data) {
+      lyr.data.getRecords().pop();
+    }
+    lyr.shapes.pop();
+    if (isProjectedLayer(lyr)) {
+      lyr.gui.displayLayer.shapes.pop();
+    }
+  }
+
+  // p: point in source data CRS coords.
+  function insertVertex$1(lyr, id, p) {
+    internal.insertVertex(lyr.gui.source.dataset.arcs, id, p);
+    if (isProjectedLayer(lyr)) {
+      internal.insertVertex(lyr.gui.displayArcs, id, lyr.gui.projectPoint(p[0], p[1]));
+    }
+  }
+
+  function appendVertex$1(lyr, p) {
+    var n = lyr.gui.source.dataset.arcs.getPointCount();
+    insertVertex$1(lyr, n, p);
+  }
+
+  // TODO: make sure we're not also removing an entire arc
+  function deleteLastVertex(lyr) {
+    deleteVertex$1(lyr, lyr.gui.displayArcs.getPointCount() - 1);
+  }
+
+
+  function deleteVertex$1(lyr, id) {
+    internal.deleteVertex(lyr.gui.displayArcs, id);
+    if (isProjectedLayer(lyr)) {
+      internal.deleteVertex(lyr.gui.source.dataset.arcs, id);
+    }
+  }
+
+  function getLastArcCoords(target) {
+    var arcId = target.gui.source.dataset.arcs.size() - 1;
+    return internal.getUnfilteredArcCoords(arcId, target.gui.source.dataset.arcs);
+  }
+
+  function getLastVertexCoords(target) {
+    var arcs = target.gui.source.dataset.arcs;
+    return internal.getVertexCoords(arcs.getPointCount() - 1, arcs);
+  }
+
+  function getLastArcLength(target) {
+    var arcId = target.gui.source.dataset.arcs.size() - 1;
+    return internal.getUnfilteredArcLength(arcId, target.gui.source.dataset.arcs);
+  }
+
+  function getPointCoords(lyr, fid) {
+    return internal.cloneShape(lyr.shapes[fid]);
+  }
+
+  function getVertexCoords(lyr, id) {
+    return lyr.gui.source.dataset.arcs.getVertex2(id);
+  }
+
+  // set data coords (not display coords) of one or more vertices.
+  function setVertexCoords(lyr, ids, dataPoint) {
+    internal.snapVerticesToPoint(ids, dataPoint, lyr.gui.source.dataset.arcs);
+    if (isProjectedLayer(lyr)) {
+      var p = lyr.gui.projectPoint(dataPoint[0], dataPoint[1]);
+      internal.snapVerticesToPoint(ids, p, lyr.gui.displayArcs);
+    }
+  }
+
+  // coords: [x, y] point in data CRS (not display CRS)
+  function setPointCoords(lyr, fid, coords) {
+    lyr.shapes[fid] = coords;
+    if (isProjectedLayer(lyr)) {
+      lyr.shapes[fid] = projectPointCoords(coords, lyr.gui.projectPoint);
+    }
+  }
+
+  function updateVertexCoords(lyr, ids) {
+    if (!isProjectedLayer(lyr)) return;
+    var p = lyr.gui.displayArcs.getVertex2(ids[0]);
+    internal.snapVerticesToPoint(ids, lyr.gui.invertPoint(p[0], p[1]), lyr.gui.source.dataset.arcs);
+  }
+
+  function setRectangleCoords(lyr, ids, coords) {
+    ids.forEach(function(id, i) {
+      var p = coords[i];
+      internal.snapVerticesToPoint([id], p, lyr.gui.source.dataset.arcs);
       if (isProjectedLayer(lyr)) {
-        internal.snapVerticesToPoint([id], lyr.projectPoint(p[0], p[1]), lyr.arcs, true);
+        internal.snapVerticesToPoint([id], lyr.gui.projectPoint(p[0], p[1]), lyr.gui.displayArcs);
       }
     });
   }
@@ -3093,8 +3545,8 @@
   // Update source data coordinates by projecting display coordinates
   function updatePointCoords(lyr, fid) {
     if (!isProjectedLayer(lyr)) return;
-    var displayShp = lyr.layer.shapes[fid];
-    lyr.source.layer.shapes[fid] = projectPointCoords(displayShp, lyr.invertPoint);
+    var displayShp = lyr.shapes[fid];
+    lyr.shapes[fid] = projectPointCoords(displayShp, lyr.gui.invertPoint);
   }
 
   function projectPointCoords(src, proj) {
@@ -3136,6 +3588,7 @@
     var el = gui.container.findChild('.simplify-control-wrapper');
     var menu = gui.container.findChild('.simplify-options');
     var slider, text, fromPct;
+    var menuBtn = gui.container.findChild('.simplify-btn').addClass('disabled');
 
     // init settings menu
     new SimpleButton(menu.findChild('.submit-btn').addClass('default-btn')).on('click', onSubmit);
@@ -3157,11 +3610,14 @@
     gui.keyboard.onMenuSubmit(menu, onSubmit);
 
     // init simplify button and mode
-    gui.addMode('simplify', turnOn, turnOff, gui.container.findChild('.simplify-btn'));
-    model.on('select', function() {
+    gui.addMode('simplify', turnOn, turnOff, menuBtn);
+
+    model.on('update', function() {
+      menuBtn.classed('disabled', !model.getActiveLayer());
       if (gui.getMode() == 'simplify') gui.clearMode();
     });
 
+
     // exit simplify mode when user clicks off the visible part of the menu
     menu.on('click', GUI.handleDirectEvent(gui.clearMode));
 
@@ -3334,150 +3790,12 @@
       }
     }
 
-    function updateSliderDisplay() {
-      // TODO: display resolution and vertex count
-      // var dataset = model.getActiveLayer().dataset;
-      // var interval = dataset.arcs.getRetainedInterval();
-    }
-  };
-
-  var R = 6378137;
-  var D2R = Math.PI / 180;
-  var R2D = 180 / Math.PI;
-
-  // Assumes projections are available
-
-  function needReprojectionForDisplay(sourceCRS, displayCRS) {
-    if (!sourceCRS || !displayCRS) {
-      return false;
-    }
-    if (internal.crsAreEqual(sourceCRS, displayCRS)) {
-      return false;
-    }
-    return true;
-  }
-
-  function projectArcsForDisplay(arcs, src, dest) {
-    var copy = arcs.getCopy(); // need to flatten first?
-    var destIsWebMerc = internal.isWebMercator(dest);
-    if (destIsWebMerc && internal.isWebMercator(src)) {
-      return copy;
-    }
-
-    var wgs84 = internal.parseCrsString('wgs84');
-    var toWGS84 = internal.getProjTransform2(src, wgs84);
-    var fromWGS84 = internal.getProjTransform2(wgs84, dest);
-
-    try {
-      // first try projectArcs() -- it's fast and preserves arc ids
-      // (so vertex editing doesn't break)
-      if (!internal.isWGS84(src)) {
-        // use wgs84 as a pivot CRS, so we can handle polar coordinates
-        // that can't be projected to Mercator
-        internal.projectArcs(copy, toWGS84);
-      }
-      if (destIsWebMerc) {
-        // handle polar points by clamping them to they will project
-        // (downside: may cause unexpected behavior when editing vertices interactively)
-        clampY(copy);
-      }
-      internal.projectArcs(copy, fromWGS84);
-    } catch(e) {
-      console.error(e);
-      // use the more robust projectArcs2 if projectArcs throws an error
-      // downside: projectArcs2 discards Z values and changes arc indexing,
-      // which will break vertex editing.
-      var reproject = internal.getProjTransform2(src, dest);
-      copy = arcs.getCopy();
-      internal.projectArcs2(copy, reproject);
-    }
-    return copy;
-  }
-
-  function clampY(arcs) {
-    var max = 89.9,
-        min = -89.9,
-        bbox = arcs.getBounds().toArray();
-    if (bbox[1] >= min && bbox[3] <= max) return;
-    arcs.transformPoints(function(x, y) {
-      if (y > max) return [x, max];
-      if (y < min) return [x, min];
-    });
-  }
-
-  function projectPointsForDisplay(lyr, src, dest) {
-    var copy = utils$1.extend({}, lyr);
-    var proj = internal.getProjTransform2(src, dest);
-    copy.shapes = internal.cloneShapes(lyr.shapes);
-    internal.projectPointLayer(copy, proj);
-    return copy;
-  }
-
-
-  function toWebMercator(lng, lat) {
-    var k = Math.cos(lat * D2R);
-    var x = R * lng * D2R;
-    var y = R * Math.log(Math.tan(Math.PI * 0.25 + lat * D2R * 0.5));
-    return [x, y];
-  }
-
-  function fromWebMercator(x, y) {
-    var lon = x / R * R2D;
-    var lat = R2D * (Math.PI * 0.5 - 2 * Math.atan(Math.exp(-y / R)));
-    return [lon, lat];
-  }
-
-  function scaleToZoom(metersPerPix) {
-    return Math.log(40075017 / 512 / metersPerPix) / Math.log(2);
-  }
-
-  function getMapboxBounds() {
-    var ymax = toWebMercator(0, 84)[1];
-    var ymin = toWebMercator(0, -84)[1];
-    return [-Infinity, ymin, Infinity, ymax];
-  }
-
-
-  // Update map extent and trigger redraw, after a new display CRS has been applied
-  function projectMapExtent(ext, src, dest, newBounds) {
-    var oldBounds = ext.getBounds();
-    var oldScale = ext.scale();
-    var newCP, proj, strictBounds;
-
-    if (dest && internal.isWebMercator(dest)) {
-      // clampToMapboxBounds(newBounds);
-      strictBounds = getMapboxBounds();
-    }
-
-    // if source or destination CRS is unknown, show full extent
-    // if map is at full extent, show full extent
-    // TODO: handle case that scale is 1 and map is panned away from center
-    if (ext.scale() == 1 || !dest) {
-      ext.setFullBounds(newBounds, strictBounds);
-      ext.home(); // sets full extent and triggers redraw
-    } else {
-      // if map is zoomed, stay centered on the same geographic location, at the same relative scale
-      proj = internal.getProjTransform2(src, dest);
-      newCP = proj(oldBounds.centerX(), oldBounds.centerY());
-      ext.setFullBounds(newBounds, strictBounds);
-      if (!newCP) {
-        // projection of center point failed; use center of bounds
-        // (also consider just resetting the view using ext.home())
-        newCP = [newBounds.centerX(), newBounds.centerY()];
-      }
-      ext.recenter(newCP[0], newCP[1], oldScale);
-    }
-  }
-
-  // Called from console; for testing dynamic crs
-  function setDisplayProjection(gui, cmd) {
-    var arg = cmd.replace(/^projd[ ]*/, '');
-    if (arg) {
-      gui.map.setDisplayCRS(internal.parseCrsString(arg));
-    } else {
-      gui.map.setDisplayCRS(null);
+    function updateSliderDisplay() {
+      // TODO: display resolution and vertex count
+      // var dataset = model.getActiveLayer().dataset;
+      // var interval = dataset.arcs.getRetainedInterval();
     }
-  }
+  };
 
   function Console(gui) {
     var model = gui.model;
@@ -3547,7 +3865,8 @@
     }
 
     function turnOn() {
-      if (!_isOpen && !model.isEmpty()) {
+      // if (!_isOpen && !model.isEmpty()) {
+      if (!_isOpen) {
         btn.addClass('active');
         _isOpen = true;
         // use console for messages while open
@@ -3886,8 +4205,8 @@
 
     function applyParsedCommands(commands, done) {
       var active = model.getActiveLayer(),
-          prevArcs = active.dataset.arcs,
-          prevTable = active.layer.data,
+          prevArcs = active?.dataset.arcs,
+          prevTable = active?.layer.data,
           prevTableSize = prevTable ? prevTable.size() : 0,
           prevArcCount = prevArcs ? prevArcs.size() : 0,
           job = new internal.Job(model);
@@ -3896,9 +4215,9 @@
       internal.runParsedCommands(commands, job, function(err) {
         var flags = getCommandFlags(commands),
             active2 = model.getActiveLayer(),
-            postArcs = active2.dataset.arcs,
+            postArcs = active2?.dataset.arcs,
             postArcCount = postArcs ? postArcs.size() : 0,
-            postTable = active2.layer.data,
+            postTable = active2?.layer.data,
             postTableSize = postTable ? postTable.size() : 0,
             sameTable = prevTable == postTable && prevTableSize == postTableSize,
             sameArcs = prevArcs == postArcs && postArcCount == prevArcCount;
@@ -3911,7 +4230,7 @@
         if (sameTable) {
           flags.same_table = true;
         }
-        if (active.layer != active2.layer) {
+        if (active && active?.layer == active2?.layer) {
           // this can get set after some commands that don't set a new target
           // (e.g. -dissolve)
           flags.select = true;
@@ -3926,10 +4245,10 @@
     function onError(err) {
       if (utils$1.isString(err)) {
         consoleStop(err);
-      } else if (err.name == 'UserError') {
+      } else if (err.name == 'UserError' ) {
         // stop() has already been called, don't need to log
+        console.error(err.stack);
       } else if (err.name) {
-        // log stack trace to browser console
         console.error(err.stack);
         // log to console window
         consoleWarning(err.message);
@@ -4112,6 +4431,7 @@
         return;
       }
       var e = model.getActiveLayer();
+      if (!e) return;
       if (internal.layerHasPaths(e.layer)) {
         el.show();
         checkBtn.show();
@@ -4190,45 +4510,9 @@
 
   utils$1.inherit(RepairControl, EventDispatcher);
 
-  function filterLayerByIds(lyr, ids) {
-    var shapes;
-    if (lyr.shapes) {
-      shapes = ids.map(function(id) {
-        return lyr.shapes[id];
-      });
-      return utils$1.defaults({shapes: shapes, data: null}, lyr);
-    }
-    return lyr;
-  }
-
-  function formatLayerNameForDisplay(name) {
-    return name || '[unnamed]';
-  }
-
-  function cleanLayerName(raw) {
-    return raw.replace(/[\n\t/\\]/g, '')
-      .replace(/^[.\s]+/, '').replace(/[.\s]+$/, '');
-  }
-
-  function updateLayerStackOrder(layers) {
-    // 1. assign ascending ids to unassigned layers above the range of other layers
-    layers.forEach(function(o, i) {
-      if (!o.layer.menu_order) o.layer.menu_order = 1e6 + i;
-    });
-    // 2. sort in ascending order
-    layers.sort(function(a, b) {
-      return a.layer.menu_order - b.layer.menu_order;
-    });
-    // 3. assign consecutve ids
-    layers.forEach(function(o, i) {
-      o.layer.menu_order = i + 1;
-    });
-    return layers;
-  }
-
-  function sortLayersForMenuDisplay(layers) {
-    layers = updateLayerStackOrder(layers);
-    return layers.reverse();
+  async function saveFileContentToClipboard(content) {
+    var str = utils$1.isString(content) ? content : content.toString();
+    await navigator.clipboard.writeText(str);
   }
 
   // Export buttons and their behavior
@@ -4238,7 +4522,7 @@
     var menu = gui.container.findChild('.export-options').on('click', GUI.handleDirectEvent(gui.clearMode));
     var layersArr = [];
     var toggleBtn = null; // checkbox <input> for toggling layer selection
-    var exportBtn = gui.container.findChild('.export-btn');
+    var exportBtn = gui.container.findChild('.export-btn').addClass('disabled');
     var ofileName = gui.container.findChild('#ofile-name');
     new SimpleButton(menu.findChild('.close2-btn')).on('click', gui.clearMode);
 
@@ -4253,6 +4537,10 @@
       return;
     }
 
+    model.on('update', function() {
+      exportBtn.classed('disabled', !model.getActiveLayer());
+    });
+
     new SimpleButton(menu.findChild('#export-btn').addClass('default-btn')).on('click', onExportClick);
     gui.addMode('export', turnOn, turnOff, exportBtn);
     gui.keyboard.onMenuSubmit(menu, onExportClick);
@@ -4374,12 +4662,6 @@
       } else {
         await utils$1.promisify(internal.writeFiles)(files, opts);
       }
-
-    }
-
-    async function saveFileContentToClipboard(content) {
-      var str = utils$1.isString(content) ? content : content.toString();
-      await navigator.clipboard.writeText(str);
     }
 
     function initLayerItem(o, i) {
@@ -4589,6 +4871,14 @@
     var layerOrderSlug;
 
     gui.addMode('layer_menu', turnOn, turnOff, btn.findChild('.header-btn'));
+
+    // kludge to show menu button after initial import dialog is dismissed
+    gui.on('mode', function(e) {
+      if (!e.name) {
+        updateMenuBtn();
+      }
+    });
+
     model.on('update', function(e) {
       updateMenuBtn();
       if (isOpen) render();
@@ -4679,8 +4969,9 @@
     }
 
     function updateMenuBtn() {
-      var lyrName = model.getActiveLayer().layer.name || '';
-      var menuTitle = lyrName || '[unnamed layer]';
+      var lyr = model.getActiveLayer()?.layer;
+      var lyrName = lyr?.name || '';
+      var menuTitle = lyrName || lyr && '[unnamed layer]' || '[no data]';
       var pageTitle = lyrName || 'mapshaper';
       btn.classed('active', 'true').findChild('.layer-name').html(menuTitle + " &nbsp;&#9660;");
       window.document.title = pageTitle;
@@ -4692,6 +4983,8 @@
     }
 
     function renderSourceFileList() {
+      el.findChild('.no-layer-note').classed('hidden', model.getActiveLayer());
+      el.findChild('.source-file-section').classed('hidden', !model.getActiveLayer());
       var list = el.findChild('.file-list');
       var files = [];
       list.empty();
@@ -5209,6 +5502,16 @@
       addHistoryState(undo, redo);
     });
 
+    gui.on('point_add', function(e) {
+      var redo = function() {
+        appendNewPoint(e.data.target, e.p);
+      };
+      var undo = function() {
+        deleteLastPoint(e.data.target);
+      };
+      addHistoryState(undo, redo);
+    });
+
     gui.on('path_add', function(e) {
       var redo = function() {
         gui.dispatchEvent('redo_path_add', {p1: e.p1, p2: e.p2});
@@ -5277,6 +5580,7 @@
     var _hidden = true;
     gui.on('active', updateVisibility);
     gui.on('inactive', updateVisibility);
+    gui.model.on('update', updateVisibility);
 
     // @iconRef: selector for an (svg) button icon
     this.addButton = function(iconRef) {
@@ -5305,7 +5609,7 @@
     };
 
     function updateVisibility() {
-      if (GUI.isActiveInstance(gui) && !_hidden) {
+      if (GUI.isActiveInstance(gui) && !_hidden && !!gui.model.getActiveLayer()) {
         buttons.show();
       } else {
         buttons.hide();
@@ -5326,6 +5630,7 @@
     });
 
     btn.on('click', function() {
+      if (btn.hasClass('disabled')) return;
       modes.enterMode(active ? null : name);
     });
   }
@@ -5397,19 +5702,25 @@
   function KeyboardEvents(gui) {
     var self = this;
     var shiftDown = false;
+    var ctrlDown = false;
     document.addEventListener('keyup', function(e) {
       if (!GUI.isActiveInstance(gui)) return;
-      if (e.keyCode == 16) shiftDown = false;
+      // this can fail to fire if keyup occurs over a context menu
+      // if (e.keyCode == 16) shiftDown = false;
+      shiftDown = e.shiftKey;
+      if (e.keyCode == 17) ctrlDown = false;
       self.dispatchEvent('keyup', getEventData(e));
     });
 
     document.addEventListener('keydown', function(e) {
       if (!GUI.isActiveInstance(gui)) return;
-      if (e.keyCode == 16) shiftDown = true;
+      shiftDown = e.shiftKey;
+      if (e.keyCode == 17) ctrlDown = true;
       self.dispatchEvent('keydown', getEventData(e));
     });
 
     this.shiftIsPressed = function() { return shiftDown; };
+    this.ctrlIsPressed = function() { return ctrlDown; };
 
     this.onMenuSubmit = function(menuEl, cb) {
       gui.on('enter_key', function(e) {
@@ -5426,6 +5737,7 @@
     9: 'tab',
     13: 'enter',
     16: 'shift',
+    17: 'ctrl',
     27: 'esc',
     32: 'space',
     37: 'left',
@@ -5447,7 +5759,7 @@
     var menus = {
       standard: ['info', 'selection', 'box'],
       polygons: ['info', 'selection', 'box', 'drawing'],
-      rectangles: ['info', 'selection', 'box', 'rectangles'], // 'vertices'
+      rectangles: ['info', 'selection', 'box', 'rectangles'],
       lines: ['info', 'selection', 'box' , 'drawing'],
       table: ['info', 'selection'],
       labels: ['info', 'selection', 'box', 'labels', 'location', 'add-points'],
@@ -5468,7 +5780,7 @@
       labels: 'position labels',
       location: 'drag points',
       vertices: 'edit vertices',
-      selection: 'select features',
+      selection: 'selection tool',
       'add-points': 'add points',
       drawing: 'draw/reshape tool',
       rectangles: 'drag-to-resize',
@@ -7261,11 +7573,11 @@
 
   // featureFilter: optional test function, accepts feature id
   //
-  function getShapeHitTest(displayLayer, ext, interactionMode, featureFilter) {
-    var geoType = displayLayer.layer.geometry_type;
+  function getShapeHitTest(layer, ext, interactionMode, featureFilter) {
+    var geoType = layer.gui.displayLayer.geometry_type;
     var test;
-    if (geoType == 'point' && displayLayer.style.type == 'styled') {
-      test = getGraduatedCircleTest(getRadiusFunction(displayLayer.style));
+    if (geoType == 'point' && layer.gui.style.type == 'styled') {
+      test = getGraduatedCircleTest(getRadiusFunction(layer.gui.style));
     } else if (geoType == 'point') {
       test = pointTest;
     } else if (interactionMode == 'drawing' && geoType == 'polygon') {
@@ -7305,13 +7617,13 @@
           cand, hitId;
       for (var i=0; i<cands.length; i++) {
         cand = cands[i];
-        if (geom.testPointInPolygon(x, y, cand.shape, displayLayer.arcs)) {
+        if (geom.testPointInPolygon(x, y, cand.shape, layer.gui.displayArcs)) {
           hits.push(cand);
         }
       }
       if (cands.length > 0 && hits.length === 0) {
         // secondary detection: proximity, if not inside a polygon
-        sortByDistance(x, y, cands, displayLayer.arcs);
+        sortByDistance(x, y, cands, layer.gui.displayArcs);
         hits = pickNearestCandidates(cands, 0, maxDist);
       }
       return {
@@ -7336,7 +7648,7 @@
           bufPix = bufArg >= 0 ? bufArg : 0.05, // tiny threshold for hitting almost-identical lines
           bufDist = getZoomAdjustedHitBuffer(bufPix),
           cands = findHitCandidates(x, y, maxDist);
-      sortByDistance(x, y, cands, displayLayer.arcs);
+      sortByDistance(x, y, cands, layer.gui.displayArcs);
       cands = pickNearestCandidates(cands, bufDist, maxDist);
       return {
         ids: utils$1.pluck(cands, 'id')
@@ -7377,7 +7689,7 @@
           hits = [];
 
       // inlining forEachPoint() does not not appreciably speed this up
-      internal.forEachPoint(displayLayer.layer.shapes, function(p, id) {
+      internal.forEachPoint(layer.gui.displayLayer.shapes, function(p, id) {
         var dist = geom.distance2D(x, y, p[0], p[1]) * toPx;
         if (dist > hitThreshold) return;
         if (dist < hitThreshold && hitThreshold > bullseyeDist) {
@@ -7411,7 +7723,7 @@
             directHit = false,
             hitRadius = 0,
             hitDist;
-        internal.forEachPoint(displayLayer.layer.shapes, function(p, id) {
+        internal.forEachPoint(layer.gui.displayLayer.shapes, function(p, id) {
           var distSq = geom.distanceSq(x, y, p[0], p[1]);
           var isHit = false;
           var isOver, isNear, r, d, rpix;
@@ -7451,11 +7763,11 @@
 
     // Returns array of shape ids for shapes that pass a buffered bounding-box test
     function findHitCandidates(x, y, dist) {
-      var arcs = displayLayer.arcs,
+      var arcs = layer.gui.displayArcs,
           index = {},
           cands = [],
           bbox = [];
-      displayLayer.layer.shapes.forEach(function(shp, shpId) {
+      layer.gui.displayLayer.shapes.forEach(function(shp, shpId) {
         var cand;
         if (featureFilter && !featureFilter(shpId)) {
           return;
@@ -7587,7 +7899,7 @@
 
   function getPointerHitTest(mapLayer, ext, interactionMode, featureFilter) {
     var shapeTest, targetLayer;
-    if (!mapLayer || !internal.layerHasGeometry(mapLayer.layer)) {
+    if (!mapLayer || !internal.layerHasGeometry(mapLayer.gui?.displayLayer)) {
       return function() {return {ids: []};};
     }
     shapeTest = getShapeHitTest(mapLayer, ext, interactionMode, featureFilter);
@@ -7626,6 +7938,16 @@
     // pan navigation
     var priority = 2;
 
+    mouse.on('contextmenu', function(e) {
+      // shift key enables default menu (for development)
+      if (gui.keyboard.shiftIsPressed()) {
+        return;
+      }
+      e.originalEvent.preventDefault();
+      if (!targetLayer) return; // TODO: enable menu on empty map
+      triggerHitEvent('contextmenu', e);
+    }, false);
+
     // init keyboard controls for pinned features
     gui.keyboard.on('keydown', function(evt) {
       var e = evt.originalEvent;
@@ -7653,7 +7975,7 @@
         // to help protect against inadvertent deletion, don't delete
         // when console is open or a popup menu is open
         if (!gui.getMode() && !gui.consoleIsOpen()) {
-          internal.deleteFeatureById(targetLayer.layer, pinnedId());
+          internal.deleteFeatureById(targetLayer, pinnedId());
           self.clearSelection();
           gui.model.updated({flags: 'filter'}); // signal map to update
         }
@@ -7666,7 +7988,6 @@
     };
 
     function updateHitTest(featureFilter) {
-      if (!hoverable()) return;
       hitTest = getPointerHitTest(targetLayer, ext, interactionMode, featureFilter);
     }
 
@@ -7687,7 +8008,7 @@
     }
 
     function hoverable() {
-      return true;
+      return !!interactionMode;
     }
 
     function selectable() {
@@ -7696,6 +8017,7 @@
 
     function pinnable() {
       return clickable() && !selectable();
+      // return clickable();
     }
 
     function draggable() {
@@ -7790,7 +8112,7 @@
 
     self.getTargetDataTable = function() {
       var targ = self.getHitTarget();
-      return targ && targ.layer.data || null;
+      return targ?.data || null;
     };
 
     // get function for selecting next or prev feature within the current set of
@@ -7803,7 +8125,7 @@
 
     // diff: 1 or -1
     function advanceSelectedFeature(diff) {
-      var n = internal.getFeatureCount(targetLayer.layer);
+      var n = internal.getFeatureCount(targetLayer);
       if (n < 2 || pinnedId() == -1) return;
       storedData.id = (pinnedId() + n + diff) % n;
       storedData.ids = [storedData.id];
@@ -7848,17 +8170,21 @@
 
     mouse.on('click', function(e) {
       if (!hitTest || !active) return;
+      if (!eventIsEnabled('click')) return;
+
       e.stopPropagation();
 
       // TODO: move pinning to inspection control?
       if (clickable()) {
         updateSelectionState(convertClickDataToSelectionData(hitTest(e)));
       }
+
       triggerHitEvent('click', e);
     }, null, priority);
 
     // Hits are re-detected on 'hover' (if hit detection is active)
     mouse.on('hover', function(e) {
+      if (gui.contextMenu.isOpen()) return;
       handlePointerEvent(e);
       if (storedData.pinned || !hitTest || !active) return;
       if (e.hover && isOverMap(e)) {
@@ -7872,6 +8198,7 @@
       }
     }, null, priority);
 
+
     function targetIsRollover(target) {
       while (target.parentNode && target != target.parentNode) {
         if (target.className && String(target.className).indexOf('rollover') > -1) {
@@ -7910,6 +8237,19 @@
       return hitData;
     }
 
+    function mergeSelectionModeHoverData(hitData) {
+        if (hitData.ids.length === 0 || selectionIds.includes(hitData.ids[0])) {
+          hitData.ids = selectionIds;
+          hitData.pinned = storedData.pinned;
+        } else {
+          //
+        }
+
+        // kludge to inhibit hover effect while dragging a box
+        if (gui.keydown) hitData.id = -1;
+        return hitData;
+    }
+
     function mergeHoverData(hitData) {
       if (storedData.pinned) {
         hitData.id = storedData.id;
@@ -7960,6 +8300,16 @@
     // check if an event is used in the current interaction mode
     function eventIsEnabled(type) {
       if (!active) return false;
+      if (type == 'click' && gui.keyboard.ctrlIsPressed()) {
+        return false; // don't fire if context menu might open
+      }
+      if (type == 'click' && gui.contextMenu.isOpen()) {
+        return false;
+      }
+      if (type == 'click' && interactionMode == 'drawing') {
+        return true; // click events are triggered even if no shape is hit
+      }
+
       if (interactionMode == 'drawing' && (type == 'hover' || type == 'dblclick')) {
         return true; // special case -- using hover for line drawing animation
       }
@@ -7969,9 +8319,6 @@
       var hitId = self.getHitId();
       if (hitId == -1) return false;
 
-      if (type == 'click' && !clickable()) {
-        return false;
-      }
       if ((type == 'drag' || type == 'dragstart' || type == 'dragend') && !draggable()) {
         return false;
       }
@@ -8000,10 +8347,13 @@
     // evt: event data (may be a pointer event object, an ordinary object or null)
     function triggerHitEvent(type, evt) {
       var eventData = {
-        mode: interactionMode,
-        overMap: evt ? isOverMap(evt) : null,
-        originalEvent: evt ? evt : null
+        mode: interactionMode
       };
+      if (evt) {
+        eventData.coordinates = translateDisplayPoint(targetLayer, ext.translatePixelCoords(evt.x, evt.y));
+        eventData.originalEvent = evt;
+        eventData.overMap = isOverMap(evt);
+      }
       // Merge stored hit data into the event data
       utils$1.defaults(eventData, evt && evt.data || {}, storedData);
       // utils.extend(eventData, storedData);
@@ -8050,7 +8400,7 @@
 
     function enabled() {
       var lyr = gui.map.getActiveLayer();
-      return !!(lyr && lyr.layer.geometry_type);
+      return !!(lyr && lyr.gui.displayLayer.geometry_type);
     }
 
     gui.model.on('update', function(e) {
@@ -8095,7 +8445,7 @@
       var p2 = gui.map.translatePixelCoords(ext.width(), 0);
       var bbox = p1.concat(p2);
       var decimals = internal.getBoundsPrecisionForDisplay(bbox);
-       var str = internal.getRoundedCoordString(p, decimals);
+      var str = internal.getRoundedCoordString(p, decimals);
       readout.text(str).show();
     }
 
@@ -8376,6 +8726,9 @@
     element.addEventListener('mouseout', onAreaOut);
     element.addEventListener('mousedown', onAreaDown);
     element.addEventListener('dblclick', onAreaDblClick);
+    document.addEventListener('contextmenu', function(e) {
+      _self.dispatchEvent('contextmenu', procMouseEvent(e));
+    });
 
     this.enable = function() {
       if (!_disabled) return;
@@ -8816,7 +9169,7 @@
     }
 
     gui.on('map_reset', function() {
-      ext.home();
+      ext.reset(true);
     });
 
     zoomTween.on('change', function(e) {
@@ -8834,8 +9187,9 @@
 
     mouse.on('dragstart', function(e) {
       if (disabled()) return;
-      if (!internal.layerHasGeometry(gui.model.getActiveLayer().layer)) return;
-      // zoomDrag = !!e.metaKey || !!e.ctrlKey; // meta is command on mac, windows key on windows
+      // allow drawing rectangles if active layer is empty
+      // var lyr = gui.model.getActiveLayer()?.layer;
+      // if (lyr && !internal.layerHasGeometry(lyr)) return;
       shiftDrag = !!e.shiftKey;
       if (shiftDrag) {
         if (useBoxZoom()) zoomBox.turnOn();
@@ -8943,8 +9297,8 @@
     gui.on('interaction_mode_change', function(e) {
       if (e.mode === 'selection') {
         gui.enterMode('selection_tool');
-      } else if (gui.getMode() == 'selection_tool') {
-        gui.clearMode();
+      } else if (_on) {
+        turnOff();
       }
     });
 
@@ -9410,8 +9764,17 @@
       }
     });
 
+    hit.on('contextmenu', function(e) {
+      var target = hit.getHitTarget();
+      if (!e.overMap || !target) return;
+
+      if (e.mode == 'drawing') return; // TODO: make special menu for this mode
+      gui.contextMenu.open(e, hit.getHitTarget());
+    });
+
     hit.on('change', function(e) {
       if (!inspecting()) return;
+      if (gui.keyboard.ctrlIsPressed()) return;
       var ids;
       if (e.mode == 'selection') {
         ids = e.pinned && e.ids || [];
@@ -9424,8 +9787,8 @@
     // id: Id of a feature in the active layer, or -1
     function inspect(id, ids, pin) {
       var target = hit.getHitTarget();
-      if ((id > -1 || ids && ids.length > 0) && inspecting() && target && target.layer) {
-        _popup.show(id, ids, target.layer, pin);
+      if ((id > -1 || ids && ids.length > 0) && inspecting() && target && target) {
+        _popup.show(id, ids, target, pin);
       } else {
         _popup.hide();
       }
@@ -9529,15 +9892,20 @@
 
   function initLabelDragging(gui, ext, hit) {
     var downEvt;
-    var activeId;
+    var activeId = -1;
+    var prevHitEvt;
     var activeRecord;
 
-    function active(e) {
-      return e.id > -1 && gui.interaction.getMode() == 'labels';
+    function active() {
+      return gui.interaction.getMode() == 'labels';
+    }
+
+    function labelSelected(e) {
+      return e.id > -1 && active();
     }
 
     hit.on('dragstart', function(e) {
-      if (!active(e)) return;
+      if (!labelSelected(e)) return;
       var symNode = getSymbolTarget(e);
       var table = hit.getTargetDataTable();
       if (!symNode || !table) {
@@ -9550,8 +9918,25 @@
       gui.dispatchEvent('label_dragstart', {FID: activeId});
     });
 
+    hit.on('change', function(e) {
+      if (!active()) return;
+      if (prevHitEvt) clearLabelHighlight(prevHitEvt);
+      showLabelHighlight(e);
+      prevHitEvt = e;
+    });
+
+    function clearLabelHighlight(e) {
+      var txt = getTextNode(getSymbolTarget(e));
+      if (txt) txt.classList.remove('active-label');
+    }
+
+    function showLabelHighlight(e) {
+      var txt = getTextNode(getSymbolTarget(e));
+      if (txt) txt.classList.add('active-label');
+    }
+
     hit.on('drag', function(e) {
-      if (!active(e) || activeId == -1) return;
+      if (!labelSelected(e) || activeId == -1) return;
       if (e.id != activeId) {
         error$1("Mismatched hit ids:", e.id, activeId);
       }
@@ -9565,7 +9950,7 @@
       // to anchor point, for better placement when eventual display font is
       // different from mapshaper's font.
       // if (!isMultilineLabel(textNode)) {
-      autoUpdateTextAnchor(textNode, activeRecord, getDisplayCoordsById(activeId, hit.getHitTarget().layer, ext));
+      autoUpdateTextAnchor(textNode, activeRecord, getDisplayCoordsById(activeId, hit.getHitTarget(), ext));
       // }
       updateNumber(activeRecord, 'dx', internal.roundToDigits(+activeRecord.dx, 3));
       updateNumber(activeRecord, 'dy', internal.roundToDigits(+activeRecord.dy, 3));
@@ -9575,7 +9960,7 @@
     });
 
     hit.on('dragend', function(e) {
-      if (!active(e) || activeId == -1) return;
+      if (!labelSelected(e) || activeId == -1) return;
       gui.dispatchEvent('label_dragend', {FID: e.id});
       activeId = -1;
       activeRecord = null;
@@ -9596,19 +9981,25 @@
     }
 
     function getSymbolTarget(e) {
-      if (e.id > -1 === false || !e.container) return null;
-      return getSymbolNodeById(e.id, e.container);
+      return e.id > -1 ? getSymbolNodeById(e.id) : null;
     }
 
     function getTextNode(symNode) {
+      if (!symNode) return null;
       if (symNode.tagName == 'text') return symNode;
       return symNode.querySelector('text');
     }
 
-    function getSymbolNodeById(id, parent) {
+    // function getSymbolNodeById_OLD(id, parent) {
+    //   var sel = '[data-id="' + id + '"]';
+    //   return parent.querySelector(sel);
+    // }
+
+    function getSymbolNodeById(id) {
       // TODO: optimize selector
       var sel = '[data-id="' + id + '"]';
-      return parent.querySelector(sel);
+      var activeLayer = hit.getHitTarget();
+      return activeLayer.gui.svg_container.querySelector(sel);
     }
 
     // function getTextTarget2(e) {
@@ -9655,7 +10046,7 @@
     // fails when symbol includes a dot (<g><circle/><text/></g> structure)
     function updateSymbolNode(node, d, id) {
       var o = internal.svg.renderStyledLabel(d); // TODO: symbol support
-      var activeLayer = hit.getHitTarget().layer;
+      var activeLayer = hit.getHitTarget();
       var xy = activeLayer.shapes[id][0];
       var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
       var node2;
@@ -9688,7 +10079,7 @@
     hit.on('drag', function(e) {
       if (!active(e)) return;
       // TODO: support multi points... get id of closest part to the pointer
-      var p = getPointCoordsById(e.id, symbolInfo.target.layer);
+      var p = getPointCoordsById(e.id, symbolInfo.target);
       if (!p) return;
       var diff = translateDeltaDisplayCoords(e.dx, e.dy, ext);
       p[0] += diff[0];
@@ -9719,8 +10110,8 @@
     }
   }
 
-  // pointer thresholds for hovering near a vertex or segment midpoint
-  var HOVER_THRESHOLD$1 = 10;
+  // pixel distance threshold for hovering near a vertex or segment midpoint
+  var HOVER_THRESHOLD = 10;
 
   function initLineEditing(gui, ext, hit) {
     var hoverVertexInfo;
@@ -9746,7 +10137,7 @@
     }
 
     function polygonMode() {
-      return active() && hit.getHitTarget().layer.geometry_type == 'polygon';
+      return active() && hit.getHitTarget().geometry_type == 'polygon';
     }
 
     function clearHoverVertex() {
@@ -9762,7 +10153,7 @@
       if (e.mode == 'drawing') {
         gui.enterMode('drawing_tool');
       } else if (active()) {
-        gui.clearMode();
+        turnOff();
       }
     }, null, 10); // higher priority than hit control, so turnOff() has correct hit target
 
@@ -9789,27 +10180,10 @@
         appendVertex$1(target, e.p);
       }
       if (e.shapes) {
-        replaceShapes(e.shapes);
+        replaceDrawnShapes(e.shapes);
       }
     });
 
-    function replaceShapes(shapes) {
-      var target = hit.getHitTarget();
-      var records = target.layer.data?.getRecords();
-      var prevLen = target.layer.shapes.length;
-      var newLen = initialShapeCount + shapes.length;
-      var recordCount = records?.length || 0;
-      target.layer.shapes = target.layer.shapes.slice(0, initialShapeCount).concat(shapes);
-      while (records && records.length > newLen) {
-        records.pop();
-      }
-      while (records && records.length < newLen) {
-        appendNewDataRecord(target.layer);
-      }
-    }
-
-
-
     gui.on('undo_path_extend', function(e) {
       var target = hit.getHitTarget();
       if (drawing() && prevHoverEvent) {
@@ -9822,14 +10196,14 @@
         gui.undo.undo(); // remove the path
       }
       if (e.shapes) {
-        replaceShapes(e.shapes);
+        replaceDrawnShapes(e.shapes);
       }
     });
 
     function turnOn() {
       var target = hit.getHitTarget();
-      initialArcCount = target.arcs.size();
-      initialShapeCount = target.layer.shapes.length;
+      initialArcCount = target.gui.displayArcs.size();
+      initialShapeCount = target.shapes.length;
       if (sessionCount === 0) {
         showInstructions();
       }
@@ -9845,6 +10219,12 @@
           non_blocking: true, max_width: '360px'});
     }
 
+    function hideInstructions() {
+      if (!alert) return;
+      alert.close('fade');
+      alert = null;
+    }
+
     function turnOff() {
       var removed = 0;
       finishCurrentPath();
@@ -9852,10 +10232,7 @@
         removed = removeOpenPolygons();
       }
       clearDrawingInfo();
-      if (alert) {
-        alert.close();
-        alert = null;
-      }
+      hideInstructions();
       initialArcCount = -1;
       initialShapeCount = -1;
       if (gui.interaction.getMode() == 'drawing') {
@@ -9870,20 +10247,21 @@
     // returns number of removed shapes
     function removeOpenPolygons() {
       var target = hit.getHitTarget();
-      var arcs = target.source.dataset.arcs;
-      var n = target.layer.shapes.length;
-      // delete open paths (should only occur on single-arc shapes)
+      var arcs = target.gui.source.dataset.arcs;
+      var n = target.shapes.length;
+      // delete open paths
       for (var i=initialShapeCount; i<n; i++) {
-        var shp = target.layer.shapes[i];
-        if (!geom.pathIsClosed(shp[0], arcs)) {
-          target.layer.shapes[i] = null;
+        var shp = target.shapes[i];
+        if (!geom.pathIsClosed(shp[0], arcs)) { // assume open paths have one arc
+          target.shapes[i] = null;
         }
       }
-      // removes polygons with wrong winding order and null geometry
-      mapshaper.cmd.filterFeatures(target.layer, arcs, {remove_empty: true, quiet: true});
-      return n - target.layer.shapes.length;
+      // removes features with wrong winding order or null geometry
+      mapshaper.cmd.filterFeatures(target, arcs, {remove_empty: true, quiet: true});
+      return n - target.shapes.length;
     }
 
+    // updates display arcs and redraws all layers
     function fullRedraw() {
       gui.model.updated({arc_count: true});
     }
@@ -9895,13 +10273,25 @@
       prevClickEvent = prevHoverEvent = null;
     }
 
+    hit.on('contextmenu', function(e) {
+      if (!active() || drawing() || dragging()) return;
+      var target = hit.getHitTarget();
+      var vInfo = hoverVertexInfo;
+      if (hoverVertexInfo?.type == 'vertex' && !vertexIsEndpoint(vInfo, target)) {
+        e.deleteVertex = function() {
+          deleteActiveVertex(e, vInfo);
+        };
+      }
+      // don't allow copying of open paths as geojson in polygon mode
+      gui.contextMenu.open(e, target);
+    });
+
     hit.on('dragstart', function(e) {
       if (!active() || drawing() || !hoverVertexInfo) return;
-      if (alert) {
-        alert.close('fade');
-      }
+      hideInstructions();
       e.originalEvent.stopPropagation();
       _dragging = true;
+      updateCursor();
       if (hoverVertexInfo.type == 'interpolated') {
         insertVertex$1(hit.getHitTarget(), hoverVertexInfo.i, hoverVertexInfo.point);
         hoverVertexInfo.ids = [hoverVertexInfo.i];
@@ -9915,11 +10305,10 @@
       var target = hit.getHitTarget();
       var p = ext.translatePixelCoords(e.x, e.y);
       if (gui.keyboard.shiftIsPressed()) {
-        internal.snapPointToArcEndpoint(p, hoverVertexInfo.ids, target.arcs);
+        internal.snapPointToArcEndpoint(p, hoverVertexInfo.ids, target.gui.displayArcs);
       }
-      internal.snapVerticesToPoint(hoverVertexInfo.ids, p, target.arcs);
+      internal.snapVerticesToPoint(hoverVertexInfo.ids, p, target.gui.displayArcs);
       hit.setHoverVertex(p, '');
-
       // redrawing the whole map updates the data layer as well as the overlay layer
       // gui.dispatchEvent('map-needs-refresh');
     });
@@ -9927,9 +10316,9 @@
     hit.on('dragend', function(e) {
       if (!dragging()) return;
       _dragging = false;
-      // kludge to get dataset to recalculate internal bounding boxes
       var target = hit.getHitTarget();
-      target.arcs.transformPoints(function() {});
+      // kludge to get dataset to recalculate internal bounding boxes
+      target.gui.displayArcs.transformPoints(function() {});
       updateVertexCoords(target, hoverVertexInfo.ids);
       gui.dispatchEvent('vertex_dragend', hoverVertexInfo);
       gui.dispatchEvent('map-needs-refresh'); // redraw basemap
@@ -9953,6 +10342,7 @@
     // ... or the closest point along the segment (for adding a new vertex)
     hit.on('hover', function(e) {
       if (!active() || dragging()) return;
+
       if (drawing()) {
         if (!e.overMap) {
           finishCurrentPath();
@@ -9975,6 +10365,7 @@
       } else {
         clearHoverVertex();
       }
+      updateCursor();
       prevHoverEvent = e;
     }, null, 100);
 
@@ -9985,23 +10376,22 @@
       var p = pixToDataCoords(e.x, e.y);
       if (drawing()) {
         extendCurrentPath(hoverVertexInfo?.point || p);
-        // extendCurrentPath(p); // just extend to current mouse position (not hover vertex)
       } else if (gui.keyboard.shiftIsPressed()) {
         deleteActiveVertex(e);
       } else {
         startNewPath(p);
-        if (alert) {
-          alert.close('fade');
-        }
+        hideInstructions();
+        updateCursor();
       }
       prevClickEvent = e;
     });
 
-    // esc key finishes a path
+    // esc or enter key finishes a path
     gui.keyboard.on('keydown', function(e) {
       if (active() && (e.keyName == 'esc' || e.keyName == 'enter')) {
         e.stopPropagation();
         finishCurrentPath();
+        e.originalEvent.preventDefault(); // block console "enter"
       }
     }, null, 10);
 
@@ -10015,16 +10405,24 @@
       return dbl;
     }
 
-    function deleteActiveVertex(e) {
-      var info = findDraggableVertices(e);
-      if (!info) return;
+    function updateCursor() {
+      var useArrow = hoverVertexInfo && !hoverVertexInfo.extendable && !drawing();
+      gui.container.findChild('.map-layers').classed('dragging', useArrow);
+    }
+
+    function vertexIsEndpoint(info, target) {
+      var vId = info.ids[0];
+      return internal.vertexIsArcStart(vId, target.gui.displayArcs) ||
+        internal.vertexIsArcEnd(vId, target.gui.displayArcs);
+    }
+
+    // info: optional vertex info object
+    function deleteActiveVertex(e, infoArg) {
+      var info = infoArg || findDraggableVertices(e);
+      if (!info || info.type != 'vertex') return;
       var vId = info.ids[0];
       var target = hit.getHitTarget();
-      if (internal.vertexIsArcStart(vId, target.arcs) ||
-          internal.vertexIsArcEnd(vId, target.arcs)) {
-        // TODO: support removing arc endpoints
-        return;
-      }
+      if (vertexIsEndpoint(info, target)) return;
       gui.dispatchEvent('vertex_delete', {
         target: target,
         vertex_id: vId
@@ -10050,25 +10448,27 @@
       var dist2 = dist / Math.sqrt(2);
       var minDist = Infinity;
       var cands = [
-        {x: x0, y: y0 + dist},
-        {x: x0, y: y0 - dist},
-        {x: x0 + dist, y: y0},
-        {x: x0 - dist, y: y0},
-        {x: x0 + dist2, y: y0 + dist2},
-        {x: x0 + dist2, y: y0 - dist2},
-        {x: x0 - dist2, y: y0 + dist2},
-        {x: x0 - dist2, y: y0 - dist2}
+        {dx: 0, dy: dist},
+        {dx: 0, dy: -dist},
+        {dx: dist, dy: 0},
+        {dx: -dist, dy: 0},
+        {dx: dist2, dy: dist2},
+        {dx: dist2, dy: -dist2},
+        {dx: -dist2, dy: dist2},
+        {dx: -dist2, dy: -dist2}
       ];
       var snapped = cands.reduce(function(memo, cand) {
-        var dist = geom.distance2D(thisEvt.x, thisEvt.y, cand.x, cand.y);
+        var dist = geom.distance2D(thisEvt.x, thisEvt.y, x0 + cand.dx, y0 + cand.dy);
         if (dist < minDist) {
           minDist = dist;
           return cand;
         }
         return memo;
       }, null);
-      thisEvt.x = snapped.x;
-      thisEvt.y = snapped.y;
+      thisEvt.x = x0 + snapped.dx;
+      thisEvt.y = y0 + snapped.dy;
+
+      return null;
     }
 
     function finishCurrentPath() {
@@ -10089,7 +10489,7 @@
       var p1 = hoverVertexInfo?.point || p2;
       appendNewPath(target, p1, p2);
       gui.dispatchEvent('path_add', {target, p1, p2});
-      drawingId = target.layer.shapes.length - 1;
+      drawingId = target.shapes.length - 1;
       hit.setDrawingId(drawingId);
     }
 
@@ -10103,11 +10503,11 @@
         error$1('Defective path');
       }
       if (finish && polygonMode()) {
-        shapes1 = target.layer.shapes.slice(initialShapeCount);
-        shapes2 = tryToClosePath(shapes1);
+        shapes1 = target.shapes.slice(initialShapeCount);
+        shapes2 = convertClosedPaths(shapes1);
       }
       if (shapes2) {
-        replaceShapes(shapes2);
+        replaceDrawnShapes(shapes2);
         gui.dispatchEvent('path_extend', {target, p, shapes1, shapes2});
         clearDrawingInfo();
         fullRedraw();
@@ -10117,13 +10517,27 @@
         gui.dispatchEvent('path_extend', {target, p});
         hit.triggerChangeEvent(); // trigger overlay redraw
       }
+    }
 
+    function replaceDrawnShapes(shapes) {
+      var target = hit.getHitTarget();
+      var records = target.data?.getRecords();
+      var prevLen = target.shapes.length;
+      var newLen = initialShapeCount + shapes.length;
+      var recordCount = records?.length || 0;
+      target.shapes = target.shapes.slice(0, initialShapeCount).concat(shapes);
+      while (records && records.length > newLen) {
+        records.pop();
+      }
+      while (records && records.length < newLen) {
+        appendNewDataRecord(target);
+      }
     }
 
     // p: [x, y] source data coordinates
     function updatePathEndpoint(p) {
       var target = hit.getHitTarget();
-      var i = target.arcs.getPointCount() - 1;
+      var i = target.gui.displayArcs.getPointCount() - 1;
       if (hoverVertexInfo) {
         p = hoverVertexInfo.point; // snap to selected point
       }
@@ -10133,8 +10547,8 @@
 
     function findPathStartInfo(e) {
       var target = hit.getHitTarget();
-      var arcId = target.arcs.size() - 1;
-      var data = target.arcs.getVertexData();
+      var arcId = target.gui.displayArcs.size() - 1;
+      var data = target.gui.displayArcs.getVertexData();
       var i = data.ii[arcId];
       var x = data.xx[i];
       var y = data.yy[i];
@@ -10142,7 +10556,7 @@
       var dist = geom.distance2D(p[0], p[1], x, y);
       var pathLen = data.nn[arcId];
       var pixelDist = dist / ext.getPixelSize();
-      if (pixelDist > HOVER_THRESHOLD$1 || pathLen < 4) {
+      if (pixelDist > HOVER_THRESHOLD || pathLen < 4) {
         return null;
       }
       var point = translateDisplayPoint(target, [x, y]);
@@ -10156,41 +10570,38 @@
     //
     function findDraggableVertices(e) {
       var target = hit.getHitTarget();
-      var shp = target.layer.shapes[e.id];
+      var shp = target.shapes[e.id];
       var p = ext.translatePixelCoords(e.x, e.y);
-      var ids = internal.findNearestVertices(p, shp, target.arcs);
-      var p2 = target.arcs.getVertex2(ids[0]);
+      var ids = internal.findNearestVertices(p, shp, target.gui.displayArcs);
+      var p2 = target.gui.displayArcs.getVertex2(ids[0]);
       var dist = geom.distance2D(p[0], p[1], p2[0], p2[1]);
       var pixelDist = dist / ext.getPixelSize();
-      if (pixelDist > HOVER_THRESHOLD$1) {
+      if (pixelDist > HOVER_THRESHOLD) {
         return null;
       }
       var point = getVertexCoords(target, ids[0]); // data coordinates
       // find out if the vertex is the endpoint of a single path
       // (which could be extended by a newly drawn path)
       var extendable = ids.length == 1 &&
-        internal.vertexIsArcEndpoint(ids[0], target.arcs);
-      var displayPoint = target.arcs.getVertex2(ids[0]);
+        internal.vertexIsArcEndpoint(ids[0], target.gui.displayArcs);
+      var displayPoint = target.gui.displayArcs.getVertex2(ids[0]);
       return {target, ids, extendable, point, displayPoint, type: 'vertex'};
     }
 
+
     function findInterpolatedPoint(e) {
       var target = hit.getHitTarget();
       //// vertex insertion not supported with simplification
       // if (!target.arcs.isFlat()) return null;
       var p = ext.translatePixelCoords(e.x, e.y);
       var minDist = Infinity;
-      var shp = target.layer.shapes[e.id];
+      var shp = target.shapes[e.id];
       var closest;
-      internal.forEachSegmentInShape(shp, target.arcs, function(i, j, xx, yy) {
+      internal.forEachSegmentInShape(shp, target.gui.displayArcs, function(i, j, xx, yy) {
         var x1 = xx[i],
             y1 = yy[i],
             x2 = xx[j],
             y2 = yy[j],
-            // switching from midpoint to nearest point to the mouse
-            // cx = (x1 + x2) / 2,
-            // cy = (y1 + y2) / 2,
-            // p2 = [cx, cy],
             p2 = internal.findClosestPointOnSeg(p[0], p[1], x1, y1, x2, y2, 0),
             dist = geom.distance2D(p2[0], p2[1], p[0], p[1]);
         if (dist < minDist) {
@@ -10203,7 +10614,7 @@
         }
       });
 
-      if (closest.distance / ext.getPixelSize() > HOVER_THRESHOLD$1) {
+      if (closest.distance / ext.getPixelSize() > HOVER_THRESHOLD) {
         return null;
       }
       closest.point = translateDisplayPoint(target, closest.displayPoint);
@@ -10212,49 +10623,39 @@
       return closest;
     }
 
-    // shapes: shapes that have been drawn in the current session
-    //
-    function tryToClosePath(shapes) {
+    // Try to form polygon shapes from an array of path shapes
+    // shapes: array of all shapes that have been drawn in the current session
+    function convertClosedPaths(shapes) {
       var target = hit.getHitTarget();
+      // try to convert paths to polygons
+      // NOTE: added "no_cuts" option to prevent polygons function from modifying
+      // arcs, which would break undo/redo and cause other problems
       var tmpLyr = {
         geometry_type: 'polyline',
         shapes: shapes.concat()
       };
-      // create a temp dataset containing tmp layer and original layers
-      // (so original arcs are retained)
-      var tmpDataset = Object.assign({}, target.source.dataset);
-      tmpDataset.layers = tmpDataset.layers.concat(tmpLyr);
-      // NOTE: added "no_cuts" option to prevent polygons function from modifying
-      // arcs, which would break undo/redo and cause other problems
-      var outputLyr = mapshaper.cmd.polygons([tmpLyr], tmpDataset, {no_cuts: true})[0];
-      var isOpenPath = getOpenPathTest(outputLyr.shapes);
-      var shapes2 = [];
-      shapes.forEach(function(shp) {
-        if (isOpenPath(shp)) {
-          shapes2.push(shp);
-        }
-      });
-      return shapes2.concat(outputLyr.shapes);
+      var output = mapshaper.cmd.polygons([tmpLyr], target.gui.source.dataset, {no_cuts: true});
+      var closedShapes = output[0].shapes;
+
+      // find paths that were not convertible to polygons
+      var isOpenPath = getOpenPathTest(closedShapes);
+      var openShapes = shapes.filter(function(shp) { return isOpenPath(shp); });
+
+      // retain both converted polygons and unconverted polylines
+      return openShapes.concat(closedShapes);
     }
 
     // Returns a function for testing if a shape is an unclosed path, and doesn't
     // overlap with an array of polygon shapes
-    // polygons: array of polygon shapes
-    function getOpenPathTest(polygons) {
-      var arcs = [];
-      internal.forEachArcId(polygons, function(arcId) {
-        if (arcId < 0) arcId = ~arcId;
-        arcs.push(arcId);
+    function getOpenPathTest(polygonShapes) {
+      var polygonArcs = [];
+      internal.forEachArcId(polygonShapes, function(arcId) {
+        polygonArcs.push(internal.absArcId(arcId));
       });
+
       return function(shp) {
-        // assume that compound shapes are already polygons
-        var isOpen = false;
-        if (shapeHasOneFwdArc(shp)) {
-          var arcId = shp[0][0];
-          if (arcId < 0) arcId = ~arcId;
-          isOpen = !arcs.includes(arcId);
-        }
-        return isOpen;
+        // assume that any compound shape is a polygon
+        return shapeHasOneFwdArc(shp) && !polygonArcs.includes(shp[0][0]);
       };
     }
 
@@ -10266,213 +10667,29 @@
   function initPointDrawing(gui, ext, hit) {
     var mouse = gui.map.getMouse();
 
-    gui.on('interaction_mode_change', function(e) {
-      gui.container.findChild('.map-layers').classed('add-points', e.mode === 'add-points');
-    });
-
-    function active() {
-      return gui.interaction.getMode() == 'add-points';
-    }
-
-    mouse.on('click', function(e) {
-      if (!active()) return;
-      addPoint(e.x, e.y);
-      gui.dispatchEvent('map-needs-refresh');
-    });
-
-    // x, y: pixel coordinates
-    function addPoint(x, y) {
-      var p = ext.translatePixelCoords(x, y);
-      var target = hit.getHitTarget();
-      var lyr = target.layer;
-      var fid = lyr.shapes.length;
-      var d = appendNewDataRecord(lyr);
-      if (d) {
-        // this seems to work even for projected layers -- the data tables
-        // of projected and original data seem to be shared.
-        lyr.data.getRecords()[fid] = d;
-      }
-      lyr.shapes[fid] = [p];
-      updatePointCoords(target, fid);
-    }
-
-
-  }
-
-  // pointer thresholds for hovering near a vertex or segment midpoint
-  var HOVER_THRESHOLD = 8;
-  var MIDPOINT_THRESHOLD = 11;
-
-  function initVertexDragging(gui, ext, hit) {
-    var insertionPoint;
-    var dragInfo;
-
-    function active() {
-      return gui.interaction.getMode() == 'vertices';
-    }
-
-    function dragging() {
-      return active() && !!dragInfo;
-    }
-
-    function setHoverVertex(id) {
-      var target = hit.getHitTarget();
-      hit.setHoverVertex(target.arcs.getVertex2(id));
-    }
-
-    function clearHoverVertex() {
-      hit.clearHoverVertex();
-    }
-
-    // return data on the nearest vertex (or identical vertices) to the pointer
-    // (if within a distance threshold)
-    //
-    function findDraggableVertices(e) {
-      var target = hit.getHitTarget();
-      var shp = target.layer.shapes[e.id];
-      var p = ext.translatePixelCoords(e.x, e.y);
-      var nearestIds = internal.findNearestVertices(p, shp, target.arcs);
-      var p2 = target.arcs.getVertex2(nearestIds[0]);
-      var dist = geom.distance2D(p[0], p[1], p2[0], p2[1]);
-      var pixelDist = dist / ext.getPixelSize();
-      if (pixelDist > HOVER_THRESHOLD) {
-        return null;
-      }
-      var points = nearestIds.map(function(i) {
-        return getVertexCoords(target, i); // data coordinates
-      });
-      return {
-        target: target,
-        ids: nearestIds,
-        points: points
-      };
-    }
-
-    function findVertexInsertionPoint(e) {
-      var target = hit.getHitTarget();
-      //// vertex insertion not supported with simplification
-      // if (!target.arcs.isFlat()) return null;
-      var p = ext.translatePixelCoords(e.x, e.y);
-      var midpoint = findNearestMidpoint(p, e.id, target);
-      if (!midpoint ||
-          midpoint.distance / ext.getPixelSize() > MIDPOINT_THRESHOLD) return null;
-      return midpoint;
-    }
-
-    hit.on('dragstart', function(e) {
-      if (!active()) return;
-      if (insertionPoint) {
-        var target = hit.getHitTarget();
-        insertVertex$1(target, insertionPoint.i, insertionPoint.point);
-        dragInfo = {
-          target: target,
-          insertion: true,
-          ids: [insertionPoint.i],
-          points: [insertionPoint.point]
-        };
-        insertionPoint = null;
-      } else {
-        dragInfo = findDraggableVertices(e);
-      }
-      if (dragInfo) {
-        setHoverVertex(dragInfo.ids[0]);
-      }
-    });
-
-    hit.on('drag', function(e) {
-      if (!dragging()) return;
-      var target = hit.getHitTarget();
-      var p = ext.translatePixelCoords(e.x, e.y);
-      if (gui.keyboard.shiftIsPressed()) {
-        internal.snapPointToArcEndpoint(p, dragInfo.ids, target.arcs);
-      }
-      internal.snapVerticesToPoint(dragInfo.ids, p, target.arcs);
-      setHoverVertex(dragInfo.ids[0]);
-      // redrawing the whole map updates the data layer as well as the overlay layer
-      // gui.dispatchEvent('map-needs-refresh');
-    });
-
-    hit.on('dragend', function(e) {
-      if (!dragging()) return;
-      // kludge to get dataset to recalculate internal bounding boxes
-      hit.getHitTarget().arcs.transformPoints(function() {});
-      clearHoverVertex();
-      updateVertexCoords(dragInfo.target, dragInfo.ids);
-      gui.dispatchEvent('vertex_dragend', dragInfo);
-      gui.dispatchEvent('map-needs-refresh');
-      dragInfo = null;
+    gui.on('interaction_mode_change', function(e) {
+      gui.container.findChild('.map-layers').classed('add-points', e.mode === 'add-points');
     });
 
-    hit.on('dblclick', function(e) {
+    function active() {
+      return gui.interaction.getMode() == 'add-points';
+    }
+
+    mouse.on('click', function(e) {
       if (!active()) return;
-      var info = findDraggableVertices(e); // same selection criteria as for dragging
-      if (!info) return;
+      var p = pixToDataCoords(e.x, e.y);
       var target = hit.getHitTarget();
-      var vId = info.ids[0];
-      if (internal.vertexIsArcStart(vId, target.arcs) ||
-          internal.vertexIsArcEnd(vId, target.arcs)) {
-        // TODO: support removing arc endpoints
-        return;
-      }
-      gui.dispatchEvent('vertex_delete', {
-        target: target,
-        vertex_id: vId
-      });
-      deleteVertex$1(target, vId);
-      clearHoverVertex();
+      appendNewPoint(target, p);
+      gui.dispatchEvent('point_add', {p, target});
       gui.dispatchEvent('map-needs-refresh');
     });
 
-    // highlight hit vertex in path edit mode
-    hit.on('hover', function(e) {
-      insertionPoint = null;
-      if (!active() || dragging()) return; // no hover effect while dragging
-      var info = findDraggableVertices(e);
-      if (info) {
-        // hovering near a vertex: highlight the vertex
-        setHoverVertex(info.ids[0]);
-        return;
-      }
-      // if hovering near a segment midpoint: show the midpoint and save midpoint info
-      insertionPoint = findVertexInsertionPoint(e);
-      if (insertionPoint) {
-        hit.setHoverVertex(insertionPoint.displayPoint);
-      } else {
-        // pointer is not over a vertex: clear any hover effect
-        clearHoverVertex();
-      }
-    }, null, 100);
-  }
 
+    function pixToDataCoords(x, y) {
+      var target = hit.getHitTarget();
+      return translateDisplayPoint(target, ext.translatePixelCoords(x, y));
+    }
 
-  // Given a location @p (e.g. corresponding to the mouse pointer location),
-  // find the midpoint of two vertices on @shp suitable for inserting a new vertex
-  function findNearestMidpoint(p, fid, target) {
-    var arcs = target.arcs;
-    var shp = target.layer.shapes[fid];
-    var minDist = Infinity, v;
-    internal.forEachSegmentInShape(shp, arcs, function(i, j, xx, yy) {
-      var x1 = xx[i],
-          y1 = yy[i],
-          x2 = xx[j],
-          y2 = yy[j],
-          cx = (x1 + x2) / 2,
-          cy = (y1 + y2) / 2,
-          midpoint = [cx, cy],
-          dist = geom.distance2D(cx, cy, p[0], p[1]);
-      if (dist < minDist) {
-        minDist = dist;
-        v = {
-          i: (i < j ? i : j) + 1, // insertion point
-          segment: [i, j],
-          segmentLen: geom.distance2D(x1, y1, x2, y2),
-          displayPoint: midpoint,
-          point: translateDisplayPoint(target, midpoint),
-          distance: dist
-        };
-      }
-    });
-    return v || null;
   }
 
   function initInteractiveEditing(gui, ext, hit) {
@@ -10480,7 +10697,6 @@
     initPointDragging(gui, ext, hit);
     initPointDrawing(gui, ext, hit);
     initLineEditing(gui, ext, hit);
-    initVertexDragging(gui, ext, hit);
   }
 
   function MapExtent(_position) {
@@ -10493,26 +10709,32 @@
 
     _position.on('resize', function(e) {
       if (ready()) {
-        triggerChangeEvent({resize: true});
+        // triggerChangeEvent({resize: true});
+        triggerChangeEvent();
       }
     });
 
     function ready() { return !!_fullBounds; }
 
-    this.reset = function() {
+    this.reset = function(fire) {
       if (!ready()) return;
-      recenter(_fullBounds.centerX(), _fullBounds.centerY(), 1, {reset: true});
+      recenter(_fullBounds.centerX(), _fullBounds.centerY(), 1);
+      if (fire) {
+        triggerChangeEvent();
+      }
     };
 
     this.home = function() {
       if (!ready()) return;
       recenter(_fullBounds.centerX(), _fullBounds.centerY(), 1);
+      triggerChangeEvent();
     };
 
     this.pan = function(xpix, ypix) {
       if (!ready()) return;
       var t = this.getTransform();
       recenter(_cx - xpix / t.mx, _cy - ypix / t.my);
+      triggerChangeEvent();
     };
 
     // Zoom to @w (width of the map viewport in coordinates)
@@ -10535,6 +10757,7 @@
           cx = fx + dx2,
           cy = fy + dy2;
       recenter(cx, cy, scale);
+      triggerChangeEvent();
     };
 
     this.zoomByPct = function(pct, xpct, ypct) {
@@ -10626,11 +10849,10 @@
       return this.getTransform().invert().transform(x, y);
     };
 
-    function recenter(cx, cy, scale, data) {
+    function recenter(cx, cy, scale) {
       scale = scale ? limitScale(scale) : _scale;
       if (cx == _cx && cy == _cy && scale == _scale) return;
       navigate(cx, cy, scale);
-      triggerChangeEvent(data);
     }
 
     function navigate(cx, cy, scale) {
@@ -10657,9 +10879,8 @@
       _scale = scale;
     }
 
-    function triggerChangeEvent(data) {
-      data = data || {};
-      _self.dispatchEvent('change', data);
+    function triggerChangeEvent() {
+      _self.dispatchEvent('change');
     }
 
     // stop zooming before rounding errors become too obvious
@@ -10854,47 +11075,46 @@
   }
 
   // TODO: consider moving this upstream
-  function getArcsForRendering(obj, ext) {
-    var dataset = obj.source.dataset;
+  function getArcsForRendering(lyr, ext) {
+    var dataset = lyr.gui.source.dataset;
     var sourceArcs = dataset.arcs;
-    if (obj.geographic && dataset.gui?.displayArcs) {
+    if (lyr.gui.geographic && dataset.gui?.displayArcs) {
       return dataset.gui.displayArcs.getScaledArcs(ext);
     }
-    return obj.arcs;
+    return lyr.gui.displayArcs;
   }
 
-  function drawOutlineLayerToCanvas(obj, canv, ext) {
+  function drawOutlineLayerToCanvas(lyr, canv, ext) {
     var arcs;
-    var style = obj.style;
+    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 filter;
-    if (internal.layerHasPaths(obj.layer)) {
-      if (!obj.arcCounts) {
-        obj.arcCounts = new Uint8Array(obj.arcs.size());
-        internal.countArcsInShapes(obj.layer.shapes, obj.arcCounts);
+    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);
       }
-      if (obj.arcCounts) {
-        arcs = getArcsForRendering(obj, ext);
-        if (lightStyle.strokeColor) {
-          filter = getArcFilter(arcs, ext, false, obj.arcCounts);
-          canv.drawArcs(arcs, lightStyle, filter);
-        }
-        if (darkStyle.strokeColor && obj.layer.geometry_type != 'point') {
-          filter = getArcFilter(arcs, ext, true, obj.arcCounts);
-          canv.drawArcs(arcs, darkStyle, filter);
-        }
+      arcs = getArcsForRendering(lyr, ext);
+      if (lightStyle.strokeColor) {
+        filter = getArcFilter(arcs, ext, false, arcCounts);
+        canv.drawArcs(arcs, lightStyle, filter);
+      }
+      if (darkStyle.strokeColor && lyr.gui.displayLayer.geometry_type != 'point') {
+        filter = getArcFilter(arcs, ext, true, arcCounts);
+        canv.drawArcs(arcs, darkStyle, filter);
       }
     }
-    if (obj.layer.geometry_type == 'point') {
-      canv.drawSquareDots(obj.layer.shapes, style);
+    if (lyr.gui.displayLayer.geometry_type == 'point') {
+      canv.drawSquareDots(lyr.gui.displayLayer.shapes, style);
     }
   }
 
-  function drawStyledLayerToCanvas(obj, canv, ext) {
+  function drawStyledLayerToCanvas(lyr, canv, ext) {
     // TODO: add filter for out-of-view shapes
-    var style = obj.style;
-    var layer = obj.layer;
+    var style = lyr.gui.style;
+    var layer = lyr.gui.displayLayer;
     var arcs, filter;
     if (layer.geometry_type == 'point') {
       if (style.type == 'styled') {
@@ -10903,7 +11123,7 @@
         canv.drawSquareDots(layer.shapes, style);
       }
     } else {
-      arcs = getArcsForRendering(obj, ext);
+      arcs = getArcsForRendering(lyr, ext);
       filter = getShapeFilter(arcs, ext);
       canv.drawStyledPaths(layer.shapes, arcs, style, filter);
       if (style.vertices) {
@@ -11497,12 +11717,12 @@
       }
     };
 
-    el.reposition = function(target, type) {
+    el.reposition = function(lyr, type) {
       resize(ext);
-      reposition(target, type, ext);
+      reposition(lyr, type, ext);
     };
 
-    el.drawLayer = function(target, type) {
+    el.drawLayer = function(lyr, type) {
       var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
       var html = '';
       // generate a unique id so layer can be identified when symbols are repositioned
@@ -11510,24 +11730,25 @@
       var id = utils$1.getUniqueName();
       var classNames = [id, 'mapshaper-svg-layer', 'mapshaper-' + type + '-layer'];
       g.setAttribute('class', classNames.join(' '));
-      target.svg_id = id;
+      lyr.gui.svg_id = id;
+      lyr.gui.svg_container = g;
       resize(ext);
       if (type == 'label' || type == 'symbol') {
-        html = renderSymbols(target.layer, ext);
+        html = renderSymbols(lyr.gui.displayLayer, ext);
       } else if (type == 'furniture') {
-        html = renderFurniture(target.layer, ext);
+        html = renderFurniture(lyr.gui.displayLayer, ext);
       }
       g.innerHTML = html;
       svg.append(g);
 
       // prevent svg hit detection on inactive layers
-      if (!target.active) {
+      if (!lyr.active) {
         g.style.pointerEvents = 'none';
       }
     };
 
-    function reposition(target, type, ext) {
-      var container = el.findChild('.' + target.svg_id);
+    function reposition(lyr, type, ext) {
+      var container = el.findChild('.' + lyr.gui.svg_id);
       if (!container || !container.node()) {
         console.error('[reposition] missing SVG container');
         return;
@@ -11535,9 +11756,9 @@
       var elements;
       if (type == 'symbol') {
         elements = El.findAll('.mapshaper-svg-symbol', container.node());
-        repositionSymbols(elements, target.layer, ext);
+        repositionSymbols(elements, lyr.gui.displayLayer, ext);
       } else if (type == 'furniture') {
-        repositionFurniture(container.node(), target.layer, ext);
+        repositionFurniture(container.node(), lyr.gui.displayLayer, ext);
       } else {
         // container.getElementsByTagName('text')
         error('Unsupported symbol type:', type);
@@ -11552,8 +11773,10 @@
     return el;
   }
 
-  function LayerRenderer(gui, container, ext, mouse) {
+  function LayerRenderer(gui, container) {
     var el = El(container),
+        ext = gui.map.getExtent(),
+        mouse = gui.map.getMouse(),
         _mainCanv = new DisplayCanvas().appendTo(el),
         _overlayCanv = new DisplayCanvas().appendTo(el),
         _svg = new SvgDisplayLayer(gui, ext, mouse).appendTo(el),
@@ -11571,7 +11794,7 @@
         _svg.clear();
       }
       layers.forEach(function(lyr) {
-        var isSvgLayer = internal.layerHasSvgSymbols(lyr.layer) || internal.layerHasLabels(lyr.layer);
+        var isSvgLayer = internal.layerHasSvgSymbols(lyr) || internal.layerHasLabels(lyr);
         if (isSvgLayer && !needSvgRedraw) {
           _svg.reposition(lyr, 'symbol');
         } else if (isSvgLayer) {
@@ -11620,7 +11843,7 @@
 
     function drawCanvasLayer(lyr, canv) {
       if (!lyr) return;
-      if (lyr.style.type == 'outline') {
+      if (lyr.gui.style.type == 'outline') {
         drawOutlineLayerToCanvas(lyr, canv, ext);
       } else {
         drawStyledLayerToCanvas(lyr, canv, ext);
@@ -11688,13 +11911,12 @@
     gui.on('interaction_mode_change', function(e) {
       if (e.mode === 'box') {
         gui.enterMode('box_tool');
-      } else if (gui.getMode() == 'box_tool') {
-        gui.clearMode();
+      } else if (_on) {
+        turnOff();
       }
     });
 
     gui.on('shift_drag_start', function() {
-      // box.classed('zooming', inZoomMode());
       hideCoords();
     });
 
@@ -11760,358 +11982,101 @@
       var el = popup.container();
       el.addClass('option-menu');
       var html = `<p>Enter a width in px, cm or inches to create a frame layer
-for setting the size of the map for symbol scaling in the
-GUI and setting the size and crop of SVG output.</p><div><input type="text" class="frame-width text-input" placeholder="examples: 600px 5in"></div>
-    <div tabindex="0" class="btn dialog-btn">Create</div></span>`;
-      el.html(html);
-      var input = el.findChild('.frame-width');
-      input.node().focus();
-      var btn = el.findChild('.btn').on('click', function() {
-        var widthStr = input.node().value.trim();
-        if (parseFloat(widthStr) > 0 === false) {
-          // invalid input
-          input.node().value = '';
-          return;
-        }
-        var cmd = `-rectangle + name=frame bbox='${bbox.join(',')}' width='${widthStr}'`;
-        runCommand(cmd);
-        popup.close();
-      });
-    }
-
-    return self;
-  }
-
-  function RectangleControl(gui, hit) {
-    var box = new HighlightBox(gui, {name: 'rectangle-tool', persistent: true, handles: true, classname: 'rectangles', draggable: false});
-    var _on = false;
-    var dragInfo;
-
-    gui.addMode('rectangle_tool', turnOn, turnOff);
-
-    gui.on('interaction_mode_change', function(e) {
-      if (e.mode === 'rectangles') {
-        gui.enterMode('rectangle_tool');
-      } else if (gui.getMode() == 'rectangle_tool') {
-        gui.clearMode();
-      }
-    });
-
-    hit.on('change', function(e) {
-      if (!_on) return;
-      // TODO: handle multiple hits (see gui-inspection-control)
-      var id = e.id;
-      if (e.id > -1 && e.pinned) {
-        var target = hit.getHitTarget();
-        var path = target.layer.shapes[e.id][0];
-        var bbox = target.arcs.getSimpleShapeBounds(path).toArray();
-        box.setDataCoords(bbox);
-        dragInfo = {
-          id: e.id,
-          target: target,
-          ids: [],
-          points: []
-        };
-        var iter = target.arcs.getShapeIter(path);
-        while (iter.hasNext()) {
-          dragInfo.points.push([iter.x, iter.y]);
-          dragInfo.ids.push(iter._arc.i);
-        }
-        gui.container.findChild('.map-layers').classed('dragging', true);
-
-      } else if (dragInfo) {
-        gui.dispatchEvent('rectangle_dragend', dragInfo); // save undo state
-        gui.container.findChild('.map-layers').classed('dragging', false);
-        reset();
-      } else {
-        box.hide();
-      }
-
-    });
-
-    box.on('handle_drag', function(e) {
-      if (!_on || !dragInfo) return;
-      var coords = internal.bboxToCoords(box.getDataCoords());
-      setRectangleCoords(dragInfo.target, dragInfo.ids, coords);
-      gui.dispatchEvent('map-needs-refresh');
-    });
-
-    function turnOn() {
-      box.turnOn();
-      _on = true;
-    }
-
-    function turnOff() {
-      box.turnOff();
-      if (gui.interaction.getMode() == 'rectangles') {
-        // mode change was not initiated by interactive menu -- turn off interactivity
-        gui.interaction.turnOff();
-      }
-      _on = false;
-      reset();
-    }
-
-    function reset() {
-      box.hide();
-      dragInfo = null;
-    }
-  }
-
-  // Create low-detail versions of large arc collections for faster rendering
-  // at zoomed-out scales.
-  function enhanceArcCollectionForDisplay(unfilteredArcs) {
-    var size = unfilteredArcs.getPointCount(),
-        filteredArcs, filteredSegLen;
-
-    // Only generate low-detail arcs for larger datasets
-    if (size > 5e5) {
-      update();
-    }
-
-    function update() {
-      if (unfilteredArcs.getVertexData().zz) {
-        // Use precalculated simplification data for vertex filtering, if available
-        filteredArcs = initFilteredArcs(unfilteredArcs);
-        filteredSegLen = internal.getAvgSegment(filteredArcs);
-      } else {
-        // Use fast simplification as a fallback
-        filteredSegLen = internal.getAvgSegment(unfilteredArcs) * 4;
-        filteredArcs = internal.simplifyArcsFast(unfilteredArcs, filteredSegLen);
-      }
-    }
-
-    function initFilteredArcs(arcs) {
-      var filterPct = 0.08;
-      var nth = Math.ceil(arcs.getPointCount() / 5e5);
-      var currInterval = arcs.getRetainedInterval();
-      var filterZ = arcs.getThresholdByPct(filterPct, nth);
-      var filteredArcs = arcs.setRetainedInterval(filterZ).getFilteredCopy();
-      arcs.setRetainedInterval(currInterval); // reset current simplification
-      return filteredArcs;
-    }
-
-    // TODO: better job of detecting arc change... e.g. revision number
-    unfilteredArcs.getScaledArcs = function(ext) {
-      // check for changes in the number of arcs (probably due to editing)
-      if (filteredArcs && filteredArcs.size() != unfilteredArcs.size()) {
-        // arc count has changed... probably due to editing
-        update();
-        if (filteredArcs.size() != unfilteredArcs.size()) {
-          throw Error('Internal error');
-        }
-      }
-      if (filteredArcs) {
-        // match simplification of unfiltered arcs
-        filteredArcs.setRetainedInterval(unfilteredArcs.getRetainedInterval());
-      }
-      // switch to filtered version of arcs at small scales
-      var unitsPerPixel = 1/ext.getTransform().mx,
-          useFiltering = filteredArcs && unitsPerPixel > filteredSegLen * 1.5;
-      return useFiltering ? filteredArcs : unfilteredArcs;
-    };
-  }
-
-  function getDisplayLayerForTable(table) {
-    var n = table.size(),
-        cellWidth = 12,
-        cellHeight = 5,
-        gutter = 6,
-        arcs = [],
-        shapes = [],
-        aspectRatio = 1.1,
-        x, y, col, row, blockSize;
-
-    if (n > 10000) {
-      arcs = null;
-      gutter = 0;
-      cellWidth = 4;
-      cellHeight = 4;
-      aspectRatio = 1.45;
-    } else if (n > 5000) {
-      cellWidth = 5;
-      gutter = 3;
-      aspectRatio = 1.45;
-    } else if (n > 1000) {
-      gutter = 3;
-      cellWidth = 8;
-      aspectRatio = 1.3;
-    }
-
-    if (n < 25) {
-      blockSize = n;
-    } else {
-      blockSize = Math.sqrt(n * (cellWidth + gutter) / cellHeight / aspectRatio) | 0;
-    }
-
-    for (var i=0; i<n; i++) {
-      row = i % blockSize;
-      col = Math.floor(i / blockSize);
-      x = col * (cellWidth + gutter);
-      y = cellHeight * (blockSize - row);
-      if (arcs) {
-        arcs.push(getArc(x, y, cellWidth, cellHeight));
-        shapes.push([[i]]);
-      } else {
-        shapes.push([[x, y]]);
-      }
-    }
-
-    function getArc(x, y, w, h) {
-      return [[x, y], [x + w, y], [x + w, y - h], [x, y - h], [x, y]];
-    }
-
-    return {
-      layer: {
-        geometry_type: arcs ? 'polygon' : 'point',
-        shapes: shapes,
-        data: table
-      },
-      arcs: arcs ? new internal.ArcCollection(arcs) : null
-    };
-  }
-
-  // displayCRS: CRS to use for display, or null (which clears any current display CRS)
-  function projectDisplayLayer(lyr, displayCRS) {
-    var crsInfo = getDatasetCrsInfo(lyr.source.dataset);
-    var sourceCRS = crsInfo.crs;
-    var lyr2;
-    //if (!lyr.geographic || !sourceCRS) {
-    // let getDisplayLayer() handle case of unprojectable source
-    if (!lyr.geographic) {
-      return;
-    }
-    if (lyr.dynamic_crs && internal.crsAreEqual(sourceCRS, lyr.dynamic_crs)) {
-      return;
+for setting the size of the map for symbol scaling in the
+GUI and setting the size and crop of SVG output.</p><div><input type="text" class="frame-width text-input" placeholder="examples: 600px 5in"></div>
+    <div tabindex="0" class="btn dialog-btn">Create</div></span>`;
+      el.html(html);
+      var input = el.findChild('.frame-width');
+      input.node().focus();
+      var btn = el.findChild('.btn').on('click', function() {
+        var widthStr = input.node().value.trim();
+        if (parseFloat(widthStr) > 0 === false) {
+          // invalid input
+          input.node().value = '';
+          return;
+        }
+        var cmd = `-rectangle + name=frame bbox='${bbox.join(',')}' width='${widthStr}'`;
+        runCommand(cmd);
+        popup.close();
+      });
     }
-    lyr2 = getDisplayLayer(lyr.source.layer, lyr.source.dataset, {crs: displayCRS});
-    // kludge: copy projection-related properties to original layer
-    lyr.dynamic_crs = lyr2.dynamic_crs;
-    lyr.layer = lyr2.layer;
 
-    if (lyr.style && lyr.style.ids) {
-      // re-apply layer filter
-      lyr.layer = filterLayerByIds(lyr.layer, lyr.style.ids);
-    }
-    lyr.invertPoint = lyr2.invertPoint;
-    lyr.projectPoint = lyr2.projectPoint;
-    lyr.bounds = lyr2.bounds;
-    lyr.arcs = lyr2.arcs;
+    return self;
   }
 
+  function RectangleControl(gui, hit) {
+    var box = new HighlightBox(gui, {name: 'rectangle-tool', persistent: true, handles: true, classname: 'rectangles', draggable: false});
+    var _on = false;
+    var dragInfo;
 
-  // Wrap a layer in an object along with information needed for rendering
-  function getDisplayLayer(layer, dataset, opts) {
-    var obj = {
-      layer: null,
-      arcs: null,
-      // display_arcs: null,
-      style: null,
-      invertPoint: null,
-      projectPoint: null,
-      source: {
-        layer: layer,
-        dataset: dataset
-      },
-      empty: internal.getFeatureCount(layer) === 0
-    };
-
-    var displayCRS = opts.crs || null;
-    // display arcs may have been generated when another layer in the dataset was converted for display... re-use if available
-    var displayArcs = dataset.gui?.displayArcs || null;
-    var sourceCRS;
-    var emptyArcs;
+    gui.addMode('rectangle_tool', turnOn, turnOff);
 
-    if (displayCRS && layer.geometry_type) {
-      var crsInfo = getDatasetCrsInfo(dataset);
-      if (crsInfo.error) {
-        // unprojectable dataset -- return empty layer
-        obj.empty = true;
-        obj.geographic = true;
-      } else {
-        sourceCRS = crsInfo.crs;
+    gui.on('interaction_mode_change', function(e) {
+      if (e.mode === 'rectangles') {
+        gui.enterMode('rectangle_tool');
+      } else if (_on) {
+        turnOff();
       }
-    }
+    });
 
-    // Assume that dataset.displayArcs is in the display CRS
-    // (it must be deleted upstream if reprojection is needed)
-    // if (!obj.empty && dataset.arcs && !displayArcs) {
-    if (dataset.arcs && !displayArcs) {
-      // project arcs, if needed
-      if (needReprojectionForDisplay(sourceCRS, displayCRS)) {
-        displayArcs = projectArcsForDisplay(dataset.arcs, sourceCRS, displayCRS);
+    hit.on('change', function(e) {
+      if (!_on) return;
+      // TODO: handle multiple hits (see gui-inspection-control)
+      var id = e.id;
+      if (e.id > -1 && e.pinned) {
+        var target = hit.getHitTarget();
+        var path = target.shapes[e.id][0];
+        var bbox = target.gui.displayArcs.getSimpleShapeBounds(path).toArray();
+        box.setDataCoords(bbox);
+        dragInfo = {
+          id: e.id,
+          target: target,
+          ids: [],
+          points: []
+        };
+        var iter = target.gui.displayArcs.getShapeIter(path);
+        while (iter.hasNext()) {
+          dragInfo.points.push([iter.x, iter.y]);
+          dragInfo.ids.push(iter._arc.i);
+        }
+        gui.container.findChild('.map-layers').classed('dragging', true);
+
+      } else if (dragInfo) {
+        gui.dispatchEvent('rectangle_dragend', dragInfo); // save undo state
+        gui.container.findChild('.map-layers').classed('dragging', false);
+        reset();
       } else {
-        // Use original arcs for display if there is no dynamic reprojection
-        displayArcs = dataset.arcs;
+        box.hide();
       }
 
-      enhanceArcCollectionForDisplay(displayArcs);
-      dataset.gui = {displayArcs}; // stash these in the dataset for other layers to use
-    }
+    });
 
-    if (internal.layerHasFurniture(layer)) {
-      obj.layer = layer;
-      obj.tabular = true;
-      // TODO: consider how to render furniture in GUI
-      // obj.furniture = true;
-      // obj.furniture_type = internal.getFurnitureLayerType(layer);
-      // treating furniture layers (other than frame) as tabular for now,
-      // so there is something to show if they are selected
-      // obj.tabular = obj.furniture_type != 'frame';
-    } else if (layer.geometry_type) {
-      obj.geographic = true;
-      obj.layer = layer;
-      obj.arcs = displayArcs;
-    } else if (!obj.empty) {
-      obj.tabular = true;
-    } else {
-      obj.layer = {shapes: []}; // ideally we should avoid empty layers
-    }
+    box.on('handle_drag', function(e) {
+      if (!_on || !dragInfo) return;
+      var coords = internal.bboxToCoords(box.getDataCoords());
+      setRectangleCoords(dragInfo.target, dragInfo.ids, coords);
+      gui.dispatchEvent('map-needs-refresh');
+    });
 
-    if (obj.tabular) {
-      utils$1.extend(obj, getDisplayLayerForTable(layer.data));
+    function turnOn() {
+      box.turnOn();
+      _on = true;
     }
 
-    // dynamic reprojection (arcs were already reprojected above)
-    if (obj.geographic && needReprojectionForDisplay(sourceCRS, displayCRS)) {
-      obj.dynamic_crs = displayCRS;
-      obj.invertPoint = internal.getProjTransform2(displayCRS, sourceCRS);
-      obj.projectPoint = internal.getProjTransform2(sourceCRS, displayCRS);
-      if (internal.layerHasPoints(layer)) {
-        obj.layer = projectPointsForDisplay(layer, sourceCRS, displayCRS);
-      } else if (internal.layerHasPaths(layer)) {
-        emptyArcs = findEmptyArcs(displayArcs);
-        if (emptyArcs.length > 0) {
-          // Don't try to draw paths containing coordinates that failed to project
-          obj.layer = internal.filterPathLayerByArcIds(obj.layer, emptyArcs);
-        }
+    function turnOff() {
+      box.turnOff();
+      if (gui.interaction.getMode() == 'rectangles') {
+        // mode change was not initiated by interactive menu -- turn off interactivity
+        gui.interaction.turnOff();
       }
+      _on = false;
+      reset();
     }
 
-    obj.bounds = getDisplayBounds(obj.layer, obj.arcs);
-    return obj;
-  }
-
-
-  function getDisplayBounds(lyr, arcs) {
-    var bounds = internal.getLayerBounds(lyr, arcs) || new Bounds();
-    if (lyr.geometry_type == 'point' && arcs && bounds.hasBounds() && bounds.area() > 0 === false) {
-      // if a point layer has no extent (e.g. contains only a single point),
-      // then merge with arc bounds, to place the point in context.
-      bounds = bounds.mergeBounds(arcs.getBounds());
-    }
-    return bounds;
-  }
-
-  // Returns an array of ids of empty arcs (arcs can be set to empty if errors occur while projecting them)
-  function findEmptyArcs(arcs) {
-    var nn = arcs.getVertexData().nn;
-    var ids = [];
-    for (var i=0, n=nn.length; i<n; i++) {
-      if (nn[i] === 0) {
-        ids.push(i);
-      }
+    function reset() {
+      box.hide();
+      dragInfo = null;
     }
-    return ids;
   }
 
   function loadScript(url, cb) {
@@ -12164,15 +12129,9 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
         turnOff();
       });
 
-      // hideBtn.on('mousedown', function() {
-      //   if (activeStyle) {
-      //     mapEl.css('visibility', 'hidden');
-      //     hidden = true;
-      //   }
-      // })
       clearBtn.on('click', function() {
         if (activeStyle) {
-          updateStyle(null);
+          turnOffBasemap();
           updateButtons();
         }
       });
@@ -12196,28 +12155,34 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       params.styles.forEach(function(style) {
         var btn = El('div').html(`<div class="basemap-style-btn"><img src="${style.icon}"></img></div><div class="basemap-style-label">${style.name}</div>`);
         btn.findChild('.basemap-style-btn').on('click', function() {
-          updateStyle(style == activeStyle ? null : style);
+          if (style == activeStyle) {
+            turnOffBasemap();
+          } else {
+            showBasemap(style);
+          }
           updateButtons();
         });
         btn.appendTo(list);
       });
     }
 
-    function updateStyle(style) {
-      activeStyle = style || null;
-      // TODO: consider enabling this
+    function turnOffBasemap() {
+      activeStyle = null;
+      gui.map.setDisplayCRS(null);
+      refresh();
+    }
+
+    function showBasemap(style) {
+      activeStyle = style;
+      // TODO: consider enabling dark basemap mode
       // Make sure that the selected layer style gets updated in gui-map.js
       // gui.state.dark_basemap = style && style.dark || false;
-      if (!style) {
-        gui.map.setDisplayCRS(null);
-        refresh();
-      } else if (map) {
+      if (map) {
         map.setStyle(style.url);
         refresh();
-      } else {
+      } else if (prepareMapView()) {
         initMap();
       }
-
     }
 
     function updateButtons() {
@@ -12227,8 +12192,9 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     }
 
     function turnOn() {
-      var activeLyr = gui.model.getActiveLayer();
-      var info = getDatasetCrsInfo(activeLyr.dataset);
+      // TODO: show basemap even if there is no data
+      var activeLyr = gui.model.getActiveLayer(); // may be null
+      var info = getDatasetCrsInfo(activeLyr?.dataset); // defaults to wgs84
       var dataCRS = info.crs || null;
       var displayCRS = gui.map.getDisplayCRS();
       var warning;
@@ -12271,9 +12237,9 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
 
     function getLonLatBounds() {
       var bbox = ext.getBounds().toArray();
-      var tr = fromWebMercator(bbox[2], bbox[3]);
-      var bl = fromWebMercator(bbox[0], bbox[1]);
-      return bl.concat(tr);
+      var bbox2 = fromWebMercator(bbox[0], bbox[1])
+          .concat(fromWebMercator(bbox[2], bbox[3]));
+      return bbox2;
     }
 
     function initMap() {
@@ -12331,6 +12297,15 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       return true;
     }
 
+    function prepareMapView() {
+      var crs = gui.map.getDisplayCRS();
+      if (!crs) return false;
+      if (!internal.isWebMercator(crs)) {
+        gui.map.setDisplayCRS(internal.parseCrsString('webmercator'));
+      }
+      return true;
+    }
+
     function refresh() {
       var crs = gui.map.getDisplayCRS();
       var off = !crs || !enabled() || !map || loading || !activeStyle;
@@ -12342,9 +12317,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
         return;
       }
 
-      if (!internal.isWebMercator(crs)) {
-        gui.map.setDisplayCRS(internal.parseCrsString('webmercator'));
-      }
+      prepareMapView();
       var bbox = getLonLatBounds();
       if (!checkBounds(bbox)) {
         // map does not display outside these bounds
@@ -12402,13 +12375,19 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
 
     model.on('update', onUpdate);
 
+    document.addEventListener('visibilitychange', function(e) {
+      // refresh map when browser tab is re-activated (Chrome on mac has been
+      // blanking the canvas after several other tabs are visited)
+      if (document.visibilityState == 'visible') drawLayers();
+    });
 
     // Update display of segment intersections
     this.setIntersectionLayer = function(lyr, dataset) {
       if (lyr == _intersectionLyr) return; // no change
       if (lyr) {
-        _intersectionLyr = getDisplayLayer(lyr, dataset, getDisplayOptions());
-        _intersectionLyr.style = getIntersectionStyle(_intersectionLyr.layer, getGlobalStyleOptions());
+        enhanceLayerForDisplay(lyr, dataset, getDisplayOptions());
+        _intersectionLyr = lyr;
+        _intersectionLyr.gui.style = getIntersectionStyle(_intersectionLyr.gui.displayLayer, getGlobalStyleOptions());
       } else {
         _intersectionLyr = null;
       }
@@ -12437,9 +12416,16 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     };
 
     this.getDisplayCRS = function() {
-      if (!_activeLyr || !_activeLyr.geographic) return null;
-      if (_activeLyr.dynamic_crs) return _activeLyr.dynamic_crs;
-      var info = getDatasetCrsInfo(_activeLyr.source.dataset);
+      if (!_activeLyr) {
+        return _dynamicCRS || internal.parseCrsString('wgs84');
+      }
+      if (!_activeLyr.gui.geographic) {
+        return null;
+      }
+      if (_activeLyr.gui.dynamic_crs) {
+        return _activeLyr.gui.dynamic_crs;
+      }
+      var info = getDatasetCrsInfo(_activeLyr.gui.source.dataset);
       return info.crs || null;
     };
 
@@ -12471,14 +12457,14 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       var newCRS = utils$1.isString(crs) ? internal.parseCrsString(crs) : crs;
       // TODO: handle case that old and new CRS are the same
       _dynamicCRS = newCRS;
-      if (!_activeLyr) return; // stop here if no layers have been selected
+      // if (!_activeLyr) return; // stop here if no layers have been selected
 
       // clear any stored FilteredArcs objects (so they will be recreated with the desired projection)
       clearAllDisplayArcs();
 
       // Reproject all visible map layers
       getContentLayers().forEach(function(lyr) {
-        projectDisplayLayer(lyr, newCRS);
+        projectLayerForDisplay(lyr, newCRS);
       });
 
       // kludge to make sure all layers have styles
@@ -12489,6 +12475,34 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       updateFullBounds();
     };
 
+    // Initialization just before displaying the map for the first time
+    this.init = function() {
+      if (_renderer) return;
+      _ext.setFullBounds(calcFullBounds());
+      _ext.resize();
+      _renderer = new LayerRenderer(gui, el);
+      gui.buttons.show();
+
+      if (opts.inspectorControl) {
+        _hit = new HitControl(gui, _ext, _mouse),
+        new InspectionControl2(gui, _hit);
+        new SelectionTool(gui, _ext, _hit),
+        new BoxTool(gui, _ext, _nav),
+        new RectangleControl(gui, _hit),
+        initInteractiveEditing(gui, _ext, _hit);
+        _hit.on('change', updateOverlayLayer);
+      }
+
+      _ext.on('change', function(e) {
+        if (_basemap) _basemap.refresh(); // keep basemap synced up (if enabled)
+        drawLayers(e.redraw ? '' : 'nav');
+      });
+
+      gui.on('resize', function() {
+        position.update(); // kludge to detect new map size after console toggle
+      });
+    };
+
     function getGlobalStyleOptions(opts) {
       var mode = gui.state.interaction_mode;
       return Object.assign({
@@ -12503,9 +12517,8 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       var prevLyr = _activeLyr || null;
       var fullBounds;
       var needReset;
-
       if (!prevLyr) {
-        initMap(); // first call
+        // initMap(); // first call
       }
 
       if (arcsMayHaveChanged(e.flags)) {
@@ -12529,9 +12542,14 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
         return;
       }
 
-      _activeLyr = getDisplayLayer(e.layer, e.dataset, getDisplayOptions());
-      _activeLyr.style = getActiveLayerStyle(_activeLyr.layer, getGlobalStyleOptions());
-      _activeLyr.active = true;
+      if (e.layer) {
+        enhanceLayerForDisplay(e.layer, e.dataset, getDisplayOptions());
+        _activeLyr = e.layer;
+        _activeLyr.gui.style = getActiveLayerStyle(_activeLyr.gui.displayLayer, getGlobalStyleOptions());
+        _activeLyr.active = true;
+      } else {
+        _activeLyr = null;
+      }
 
       if (popupCanStayOpen(e.flags)) {
         // data may have changed; if popup is open, it needs to be refreshed
@@ -12544,7 +12562,11 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       updateVisibleMapLayers();
       fullBounds = calcFullBounds();
 
-      if (!prevLyr || prevLyr.tabular || _activeLyr.tabular) {
+      if (prevLyr?.gui.tabular || _activeLyr?.gui.tabular) {
+        needReset = true;
+      } else if (_activeLyr && internal.layerIsEmpty(_activeLyr)) {
+        needReset = false;
+      } else if (!prevLyr) {
         needReset = true;
       } else {
         needReset = mapNeedsReset(fullBounds, _ext.getFullBounds(), _ext.getBounds(), e.flags);
@@ -12554,45 +12576,19 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
 
       if (needReset) {
         _ext.reset();
+        if (_basemap) _basemap.refresh();
       }
       drawLayers();
       map.dispatchEvent('updated');
     }
 
-    // Initialization just before displaying the map for the first time
-    function initMap() {
-      _ext.resize();
-      _renderer = new LayerRenderer(gui, el, _ext, _mouse);
-      gui.buttons.show();
-
-      if (opts.inspectorControl) {
-        _hit = new HitControl(gui, _ext, _mouse),
-        new InspectionControl2(gui, _hit);
-        new SelectionTool(gui, _ext, _hit),
-        new BoxTool(gui, _ext, _nav),
-        new RectangleControl(gui, _hit),
-        initInteractiveEditing(gui, _ext, _hit);
-        _hit.on('change', updateOverlayLayer);
-      }
-
-      _ext.on('change', function(e) {
-        if (_basemap) _basemap.refresh(); // keep basemap synced up (if enabled)
-        if (e.reset) return; // don't need to redraw map here if extent has been reset
-        drawLayers('nav');
-      });
-
-      gui.on('resize', function() {
-        position.update(); // kludge to detect new map size after console toggle
-      });
-    }
 
     function updateOverlayLayer(e) {
-      var style = getOverlayStyle(_activeLyr.layer, e, getGlobalStyleOptions());
+      var style = getOverlayStyle(_activeLyr.gui.displayLayer, e, getGlobalStyleOptions());
       if (style) {
-        _overlayLyr = utils$1.defaults({
-          layer: filterLayerByIds(_activeLyr.layer, style.ids),
-          style: style
-        }, _activeLyr);
+        var displayLayer = filterLayerByIds(_activeLyr.gui.displayLayer, style.ids);
+        var gui = Object.assign({}, _activeLyr.gui, {style, displayLayer});
+        _overlayLyr = utils$1.defaults({gui}, _activeLyr);
       } else {
         _overlayLyr = null;
       }
@@ -12623,12 +12619,13 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       var b = new Bounds();
       var layers = getContentLayers();
       layers.forEach(function(lyr) {
-        b.mergeBounds(lyr.bounds);
+        b.mergeBounds(lyr.gui.bounds);
       });
 
       if (!b.hasBounds()) {
         // assign bounds to empty layers, to prevent rendering errors downstream
-        b.setBounds(0,0,0,0);
+        // b.setBounds(0,0,0,0);
+        b.setBounds(projectLatLonBBox([11.28,33.43,32.26,46.04], _dynamicCRS));
       }
       return b;
     }
@@ -12646,19 +12643,18 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       var widthPx = _ext.width();
       var marginPct = widthPx < 700 && 3.5 || widthPx < 800 && 3 || 2.5;
       if (isTableView()) {
-        var n = internal.getFeatureCount(_activeLyr.layer);
+        var n = internal.getFeatureCount(_activeLyr);
         marginPct = n < 5 && 20 || n < 100 && 10 || 4;
       }
       b.scale(1 + marginPct / 100 * 2);
 
       // Inflate display bounding box by a tiny amount (gives extent to single-point layers and collapsed shapes)
       b.padBounds(1e-4, 1e-4, 1e-4, 1e-4);
-
       return b;
     }
 
     function isActiveLayer(lyr) {
-      return _activeLyr && lyr == _activeLyr.source.layer || false;
+      return _activeLyr && lyr == _activeLyr || false;
     }
 
     function isVisibleLayer(lyr) {
@@ -12666,12 +12662,12 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     }
 
     function isTableView() {
-      return !!_activeLyr.tabular;
+      return !!_activeLyr?.gui.tabular;
     }
 
     function findFrameLayer() {
       return getVisibleMapLayers().find(function(lyr) {
-        return internal.isFrameLayer(lyr.layer, lyr.arcs);
+        return internal.isFrameLayer(lyr.gui.displayLayer, lyr.gui.displayArcs);
       });
     }
 
@@ -12682,10 +12678,13 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
 
     function getFrameData() {
       var lyr = findFrameLayer();
-      return lyr && internal.getFrameLayerData(lyr.layer, lyr.arcs) || null;
+      return lyr && internal.getFrameLayerData(lyr, lyr.gui.displayArcs) || null;
     }
 
     function clearAllDisplayArcs() {
+      model.forEachLayer(function(lyr) {
+        if (lyr.gui) delete lyr.gui.arcCounts;
+      });
       model.getDatasets().forEach(function(o) {
         delete o.gui;
       });
@@ -12698,7 +12697,8 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
         if (isActiveLayer(o.layer)) {
           layers.push(_activeLyr);
         } else if (!isTableView()) {
-          layers.push(getDisplayLayer(o.layer, o.dataset, getDisplayOptions()));
+          enhanceLayerForDisplay(o.layer, o.dataset, getDisplayOptions());
+          layers.push(o.layer);
         }
       });
       _visibleLayers = layers;
@@ -12720,13 +12720,13 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
         return findActiveLayer(layers);
       }
       return layers.filter(function(o) {
-        return !!o.geographic;
+        return !!o.gui.geographic;
       });
     }
 
     function getDrawableContentLayers() {
       return getContentLayers().filter(function(lyr) {
-        if (isActiveLayer(lyr.layer) && lyr.layer.hidden) return false;
+        if (isActiveLayer(lyr) && lyr.hidden) return false;
         return true;
       });
     }
@@ -12740,31 +12740,33 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
 
     function updateLayerStyles(layers) {
       layers.forEach(function(mapLayer, i) {
+        var style;
         if (mapLayer.active) {
           // regenerating active style everytime, to support style change when
           // switching between outline and preview modes.
-          mapLayer.style = getActiveLayerStyle(mapLayer.layer, getGlobalStyleOptions());
-          if (mapLayer.style.type != 'styled' && layers.length > 1 && mapLayer.style.strokeColors) {
+          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).
-            mapLayer.style = utils$1.defaults({
-              strokeColors: [null, mapLayer.style.strokeColors[1]]
-            }, mapLayer.style);
+            style = utils$1.defaults({
+              strokeColors: [null, style.strokeColors[1]]
+            }, style);
           }
         } else {
-          if (mapLayer.layer == _activeLyr.layer) {
+          if (mapLayer == _activeLyr) {
             console.error("Error: shared map layer");
           }
-          mapLayer.style = getReferenceLayerStyle(mapLayer.layer, getGlobalStyleOptions());
+          style = getReferenceLayerStyle(mapLayer.gui.displayLayer, getGlobalStyleOptions());
         }
+        mapLayer.gui.style = style;
       });
     }
 
     function sortMapLayers(layers) {
       layers.sort(function(a, b) {
         // assume that each layer has a menu_order (assigned by updateLayerStackOrder())
-        return a.source.layer.menu_order - b.source.layer.menu_order;
+        return a.menu_order - b.menu_order;
       });
     }
 
@@ -12844,6 +12846,102 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     });
   }
 
+  function ContextMenu() {
+    var body = document.querySelector('body');
+    var menu = El('div').addClass('contextmenu rollover').appendTo(body);
+    var _open = false;
+    var _openCount = 0;
+    document.addEventListener('mousedown', close);
+
+    this.isOpen = function() {
+      return _open;
+    };
+
+    function close() {
+      var count = _openCount;
+      if (!_open) return;
+      setTimeout(function() {
+        if (count == _openCount) {
+          menu.hide();
+          _open = false;
+        }
+      }, 300);
+    }
+
+    function addMenuItem(label, func) {
+      El('div')
+        .appendTo(menu)
+        .addClass('contextmenu-item')
+        .html(label)
+        .on('click', func)
+        .show();
+    }
+
+    this.open = function(e, lyr) {
+      if (!lyr || !lyr.gui.geographic) return;
+      _open = true;
+      _openCount++;
+      var rspace = body.clientWidth - e.pageX;
+      var xoffs = 10;
+      menu.empty().show();
+      if (rspace > 150) {
+        menu.css('left', e.pageX + xoffs + 'px');
+        menu.css('right', null);
+      } else {
+        menu.css('right', (body.clientWidth - e.pageX + xoffs) + 'px');
+        menu.css('left', null);
+      }
+      menu.css('top', (e.pageY - 15) + 'px');
+
+      // menu contents
+      if (e.coordinates) {
+        addCopyCoords();
+      }
+      if (e.deleteVertex) {
+        addMenuItem('Delete vertex', e.deleteVertex);
+      }
+      if (e.ids?.length) {
+        addMenuItem('Copy as GeoJSON', copyGeoJSON);
+      }
+
+      function addCopyCoords() {
+        var bbox = internal.getLayerBounds(lyr, lyr.gui.source.dataset.arcs).toArray();
+        var coordStr = internal.getRoundedCoordString(e.coordinates, internal.getBoundsPrecisionForDisplay(bbox));
+        var displayStr = '• &nbsp;' + coordStr.replace(/-/g, '–').replace(',', ', ');
+        addMenuItem(displayStr, function() {
+          saveFileContentToClipboard(coordStr);
+        });
+      }
+
+      function copyGeoJSON() {
+        var opts = {
+          no_replace: true,
+          ids: e.ids,
+          quiet: true
+        };
+        var dataset = lyr.gui.source.dataset;
+        var layer = mapshaper.cmd.filterFeatures(lyr, dataset.arcs, opts);
+        // the drawing tool can send open paths with 'polygon' geometry type,
+        // should be changed to 'polyline'
+        if (layerHasOpenPaths(layer, dataset.arcs)) {
+          layer.geometry_type = 'polyline';
+        }
+        var features = internal.exportLayerAsGeoJSON(layer, dataset, {rfc7946: true, prettify: true}, true, 'string');
+        var str = internal.geojson.formatCollection({"type": "FeatureCollection"}, features);
+        saveFileContentToClipboard(str);
+      }
+    };
+  }
+
+
+  function layerHasOpenPaths(layer, arcs) {
+    var retn = false;
+    internal.editShapes(layer.shapes, function(part) {
+      if (!geom.pathIsClosed(part, arcs)) retn = true;
+    });
+    return retn;
+  }
+
   function GuiInstance(container, opts) {
     var gui = new ModeSwitcher();
     opts = utils$1.extend({
@@ -12862,20 +12960,21 @@ 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.map = new MshpMap(gui);
-    gui.interaction = new InteractionMode(gui);
     gui.session = new SessionHistory(gui);
+    gui.contextMenu = new ContextMenu();
     gui.undo = new Undo(gui);
-    gui.state = {};
-
+    gui.map = new MshpMap(gui);
     if (opts.saveControl) {
       new SessionSnapshots(gui);
     }
+    gui.interaction = new InteractionMode(gui);
+    gui.state = {};
 
     var msgCount = 0;
     var clearMsg;
 
     initModeRules(gui);
+    gui.map.init();
 
     gui.showProgressMessage = function(msg) {
       if (!gui.progressMessage) {
@@ -12988,9 +13087,10 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
         importOpts = getImportOpts(manifest),
         gui = new GuiInstance('body');
 
-    if (manifest.blurb) {
-      El('#splash-screen-blurb').text(manifest.blurb);
-    }
+    // TODO: re-enable the "blurb"
+    // if (manifest.blurb) {
+    //   El('#splash-screen-blurb').text(manifest.blurb);
+    // }
 
     new AlertControl(gui);
     new RepairControl(gui);
@@ -13021,17 +13121,19 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     });
 
     // Initial display configuration
-    gui.model.on('select', function() {
+    gui.on('mode', function(e) {
       if (dataLoaded) return;
       dataLoaded = true;
+      gui.buttons.show();
       El('#mode-buttons').show();
+      El('#splash-buttons').hide();
+      El('body').addClass('map-view');
       if (importOpts.display_all) {
         gui.model.getLayers().forEach(function(o) {
           gui.map.setLayerPinning(o, true);
         });
       }
       gui.console.runInitialCommands(getInitialConsoleCommands());
-
     });
   };