mapshaper 0.6.81 → 0.6.83

package/www/mapshaper-gui.js

@@ -2564,18 +2564,6 @@
     return isProjectedLayer(lyr) ? lyr.gui.invertPoint(p[0], p[1]) : p;
   }
 
-  // bbox: display coords
-  // intended to work with rectangular projections like Mercator
-  function getBBoxCoords(lyr, bbox) {
-    if (!isProjectedLayer(lyr)) return bbox.concat();
-    var a = translateDisplayPoint(lyr, [bbox[0], bbox[1]]);
-    var b = translateDisplayPoint(lyr, [bbox[2], bbox[3]]);
-    var bounds = new internal.Bounds();
-    bounds.mergePoint(a[0], a[1]);
-    bounds.mergePoint(b[0], b[1]);
-    return bounds.toArray();
-  }
-
   function isProjectedLayer(lyr) {
     return !!lyr?.gui.invertPoint;
   }
@@ -3425,7 +3413,7 @@
   //
   function pointExceedsTolerance(p, points, tolerance) {
     if (points.length < 2) return false;
-    var p1 = points[0], p2, dist;
+    var p1 = points[0], p2, dist, angle;
     for (var i=1; i<points.length; i++) {
       p2 = points[i];
       dist = Math.sqrt(geom.pointSegDistSq(p2[0], p2[1], p1[0], p1[1], p[0], p[1]));
@@ -3434,6 +3422,15 @@
     return false;
   }
 
+  function getAvgPoint(points) {
+    var x=0, y=0;
+    for (var i=0; i<points.length; i++) {
+      x += points[i][0];
+      y += points[i][1];
+    }
+    return [x/points.length, y/points.length];
+  }
+
   function setZ(lyr, z) {
     lyr.gui.source.dataset.arcs.setRetainedInterval(z);
     if (isProjectedLayer(lyr)) {
@@ -5812,6 +5809,7 @@
     var ctrlDown = false;
     var metaDown = false;
     var altDown = false;
+    var spaceDown = false;
 
     function updateControlKeys(e) {
       shiftDown = e.shiftKey;
@@ -5819,15 +5817,22 @@
       metaDown = e.metaKey;
       altDown = e.altKey;
     }
+
+    function mouseIsPressed() {
+      return gui.map.getMouse().isDown();
+    }
+
     document.addEventListener('keyup', function(e) {
-      if (!GUI.isActiveInstance(gui)) return;
+      if (!GUI.isActiveInstance(gui) || e.repeat) return;
       // this can fail to fire if keyup occurs over a context menu
+      if (e.keyCode == 32) spaceDown = false;
       updateControlKeys(e);
       self.dispatchEvent('keyup', getEventData(e));
     });
 
     document.addEventListener('keydown', function(e) {
-      if (!GUI.isActiveInstance(gui)) return;
+      if (!GUI.isActiveInstance(gui) || e.repeat) return;
+      if (e.keyCode == 32) spaceDown = true;
       updateControlKeys(e);
       self.dispatchEvent('keydown', getEventData(e));
     });
@@ -5837,10 +5842,11 @@
       updateControlKeys(e);
     });
 
-    this.shiftIsPressed = function() { return shiftDown; };
-    this.ctrlIsPressed = function() { return ctrlDown; };
-    this.altIsPressed = function() { return altDown; };
-    this.metaIsPressed = function() { return metaDown; };
+    this.shiftIsPressed = () => shiftDown;
+    this.ctrlIsPressed = () => ctrlDown;
+    this.altIsPressed = () => altDown;
+    this.metaIsPressed = () => metaDown;
+    this.spaceIsPressed = () => spaceDown;
 
     this.onMenuSubmit = function(menuEl, cb) {
       gui.on('enter_key', function(e) {
@@ -5878,7 +5884,7 @@
 
     var menus = {
       standard: ['info', 'selection', 'box'],
-      empty: ['edit_points', 'edit_lines', 'edit_polygons'],
+      empty: ['edit_points', 'edit_lines', 'edit_polygons', 'box'],
       polygons: ['info', 'selection', 'box', 'edit_polygons'],
       rectangles: ['info', 'selection', 'box', 'rectangles'],
       lines: ['info', 'selection', 'box' , 'edit_lines'],
@@ -8056,7 +8062,6 @@
     var transientIds = []; // e.g. hit ids while dragging a box
     var drawingId = -1; // kludge to allow hit detection and drawing (different feature ids)
     var active = false;
-    var interactionMode;
     var targetLayer;
     var hitTest;
     var pinnedOn; // used in multi-edit mode (selection) for toggling pinning behavior
@@ -8066,16 +8071,11 @@
     var priority = 2;
 
     mouse.on('contextmenu', function(e) {
-      // shift key enables default menu (for development)
-      if (gui.keyboard.shiftIsPressed()) {
-        return;
-      }
       e.originalEvent.preventDefault();
-      if (!El('body').hasClass('map-view')) {
-        return;
+      if (El('body').hasClass('map-view')) {
+        triggerHitEvent('contextmenu', e);
       }
-      triggerHitEvent('contextmenu', e);
-    }, false);
+    });
 
     // init keyboard controls for pinned features
     gui.keyboard.on('keydown', function(evt) {
@@ -8117,11 +8117,14 @@
     };
 
     function updateHitTest(featureFilter) {
-      hitTest = getPointerHitTest(targetLayer, ext, interactionMode, featureFilter);
+      hitTest = getPointerHitTest(targetLayer, ext, interactionMode(), featureFilter);
+    }
+
+    function interactionMode() {
+      return gui.interaction.getMode();
     }
 
     function turnOn(mode) {
-      interactionMode = mode;
       active = true;
       updateHitTest();
     }
@@ -8136,12 +8139,8 @@
       }
     }
 
-    function hoverable() {
-      return !!interactionMode;
-    }
-
     function selectable() {
-      return interactionMode == 'selection';
+      return interactionMode() == 'selection';
     }
 
     function pinnable() {
@@ -8150,16 +8149,16 @@
     }
 
     function draggable() {
-      return interactionMode == 'vertices' || interactionMode == 'edit_points' ||
-        interactionMode == 'labels' || interactionMode == 'edit_lines' ||
-        interactionMode == 'edit_polygons';
+      var mode = interactionMode();
+      return mode == 'vertices' || mode == 'edit_points' ||
+        mode == 'labels' || mode == 'edit_lines' || mode == 'edit_polygons';
     }
 
     function clickable() {
+      var mode = interactionMode();
       // click used to pin popup and select features
-      return interactionMode == 'data' || interactionMode == 'info' ||
-      interactionMode == 'selection' || interactionMode == 'rectangles' ||
-      interactionMode == 'edit_points';
+      return mode == 'data' || mode == 'info' || mode == 'selection' ||
+      mode == 'rectangles' || mode == 'edit_points';
     }
 
     self.getHitId = function() {
@@ -8284,7 +8283,6 @@
     // (some modes do not support pinning)
     gui.on('interaction_mode_change', function(e) {
       self.clearSelection();
-      // if (e.mode == 'off' || e.mode == 'box') {
       if (gui.interaction.modeUsesHitDetection(e.mode)) {
         turnOn(e.mode);
       } else {
@@ -8317,7 +8315,7 @@
         updateSelectionState(convertClickDataToSelectionData(hitTest(e)));
       }
 
-      if (pinned && interactionMode == 'edit_points') {
+      if (pinned && interactionMode() == 'edit_points') {
         // kludge: intercept the click event if popup is turning off, so
         // a new point doesn't get made
         return;
@@ -8442,6 +8440,7 @@
 
     // check if an event is used in the current interaction mode
     function eventIsEnabled(type) {
+      var mode = interactionMode();
       if (!active) return false;
       if (type == 'click' && gui.keyboard.ctrlIsPressed()) {
         return false; // don't fire if context menu might open
@@ -8450,13 +8449,13 @@
         return false;
       }
       if (type == 'click' &&
-        (interactionMode == 'edit_lines' || interactionMode == 'edit_polygons')) {
+        (mode == 'edit_lines' || mode == 'edit_polygons')) {
         return true; // click events are triggered even if no shape is hit
       }
-      if (type == 'click' && interactionMode == 'edit_points') {
+      if (type == 'click' && mode == 'edit_points') {
         return true;
       }
-      if ((interactionMode == 'edit_lines' || interactionMode == 'edit_polygons') &&
+      if ((mode == 'edit_lines' || mode == 'edit_polygons') &&
           (type == 'hover' || type == 'dblclick')) {
         return true; // special case -- using hover for line drawing animation
       }
@@ -8477,7 +8476,7 @@
     }
 
     function possiblyStopPropagation(e) {
-      if (interactionMode == 'edit_lines' || interactionMode == 'edit_polygons') {
+      if (interactionMode() == 'edit_lines' || interactionMode() == 'edit_polygons') {
         // handled conditionally in the control
         return;
       }
@@ -8494,7 +8493,7 @@
     // evt: event data (may be a pointer event object, an ordinary object or null)
     function triggerHitEvent(type, evt) {
       var eventData = {
-        mode: interactionMode
+        mode: interactionMode()
       };
       if (evt) {
         // data coordinates
@@ -8813,6 +8812,11 @@
     element.addEventListener('mousedown', onAreaDown);
     element.addEventListener('dblclick', onAreaDblClick);
     document.addEventListener('contextmenu', function(e) {
+      if (!e.ctrlKey) {
+        e.preventDefault();
+      }
+    });
+    element.addEventListener('contextmenu', function(e) {
       _self.dispatchEvent('contextmenu', procMouseEvent(e));
     });
 
@@ -9090,9 +9094,9 @@
 
     box.getDataCoords = function() {
       if (!boxCoords) return null;
-      var dataBox = getBBoxCoords(gui.map.getActiveLayer(), boxCoords);
+      var lyr = gui.map.getActiveLayer();
+      var dataBox = lyr ? translateCoordsToLayerCRS(boxCoords, lyr) : translateCoordsToLatLon(boxCoords);
       fixBounds(dataBox);
-      // return internal.getRoundedCoords(dataBox, internal.getBoundsPrecisionForDisplay(dataBox));
       return dataBox;
     };
 
@@ -9127,6 +9131,26 @@
       }
     };
 
+    function translateCoordsToLatLon(bbox) {
+      var crs = gui.map.getDisplayCRS();
+      var a = internal.toLngLat([bbox[0], bbox[1]], crs);
+      var b = internal.toLngLat([bbox[2], bbox[3]], crs);
+      return a.concat(b);
+    }
+
+    // bbox: display coords
+    // intended to work with rectangular projections like Mercator
+    function translateCoordsToLayerCRS(bbox, lyr) {
+      if (!isProjectedLayer(lyr)) return bbox.concat();
+      var a = translateDisplayPoint(lyr, [bbox[0], bbox[1]]);
+      var b = translateDisplayPoint(lyr, [bbox[2], bbox[3]]);
+      var bounds = new internal.Bounds();
+      bounds.mergePoint(a[0], a[1]);
+      bounds.mergePoint(b[0], b[1]);
+      return bounds.toArray();
+    }
+
+    // get bbox coords in the display CRS
     function getBoxCoords(e) {
       var bbox = pixToCoords(e.a.concat(e.b), gui.map.getExtent());
       fixBounds(bbox);
@@ -9227,6 +9251,7 @@
         zoomBox = new HighlightBox(gui, {draggable: true, name: 'zoom-box'}), // .addClass('zooming'),
         shiftDrag = false,
         zoomScaleMultiplier = 1,
+        panCount = 0,
         inBtn, outBtn,
         dragStartEvt,
         _fx, _fy; // zoom foci, [0,1]
@@ -9278,6 +9303,7 @@
       // var lyr = gui.model.getActiveLayer()?.layer;
       // if (lyr && !internal.layerHasGeometry(lyr)) return;
       shiftDrag = !!e.shiftKey;
+      panCount = 0;
       if (shiftDrag) {
         if (useBoxZoom()) zoomBox.turnOn();
         dragStartEvt = e;
@@ -9289,9 +9315,18 @@
       if (disabled()) return;
       if (shiftDrag) {
         gui.dispatchEvent('shift_drag', getBoxData(e));
-      } else {
-        ext.pan(e.dx, e.dy);
+        return;
       }
+      if (++panCount == 1) {
+        El('body').addClass('pan');
+        setTimeout(function() {
+          var body = El('body');
+          if (body.hasClass('pan')) {
+            body.addClass('panning');
+          }
+        }, 100);
+      }
+      ext.pan(e.dx, e.dy);
     });
 
     mouse.on('dragend', function(e) {
@@ -9301,6 +9336,8 @@
         shiftDrag = false;
         gui.dispatchEvent('shift_drag_end', getBoxData(e));
         zoomBox.turnOff();
+      } else {
+        El('body').removeClass('panning').removeClass('pan');
       }
     });
 
@@ -10304,7 +10341,7 @@
     }
 
     function pencilIsActive() {
-      return cmdKeyDown() && active() && !vertexDragging() && !!pencilPoints;
+      return active() && (cmdKeyDown() || pathDrawing()) && !vertexDragging() && !!pencilPoints;
     }
 
     function polygonMode() {
@@ -10389,8 +10426,7 @@
     function showInstructions() {
       var isMac = navigator.userAgent.includes('Mac');
       var undoKey = isMac ? '⌘' : '^';
-      var drawKey = isMac ? '⌘' : 'Alt';
-      var msg = `Instructions: Click to start a path or add a point. ${drawKey}-drag draws a path. Drag points to reshape. Type ${undoKey}Z/${undoKey}Y to undo/redo.`;
+      var msg = `Instructions: click to start a path, click or drag to keep drawing. Drag vertices to reshape a path. Type ${undoKey}Z/${undoKey}Y to undo/redo.`;
         alert = showPopupAlert(msg, null, {
           non_blocking: true, max_width: '388px'});
     }
@@ -10449,8 +10485,15 @@
       drawingId = -1;
       hoverVertexInfo = null;
       prevClickEvent = prevHoverEvent = null;
+      updateCursor();
     }
 
+    gui.keyboard.on('keydown', function(e) {
+      if (active() && e.keyName == 'space') {
+        e.stopPropagation(); // prevent console from opening if shift-panning
+      }
+    }, null, 1);
+
     hit.on('contextmenu', function(e) {
       if (!active() || pathDrawing() || vertexDragging()) return;
       var target = hit.getHitTarget();
@@ -10482,11 +10525,21 @@
     });
 
     gui.map.getMouse().on('drag', function(e) {
-      if (!active() || !cmdKeyDown() || vertexDragging()) return;
+      if (!pencilIsActive()) {
+        if (!pencilPoints) {
+          // null points signals that a path was just completed -- block panning
+          e.stopPropagation();
+        }
+        return;
+      }
+      if (gui.keyboard.spaceIsPressed()) {
+        // pan if dragging with spacebar down
+        pencilPoints = []; // don't continue previous line after panning
+        return;
+      }
       e.stopPropagation(); // prevent panning
-      if (!pencilIsActive()) return;
       hoverVertexInfo = findPathStartInfo(e);
-      var xy = [e.x, e.y];
+      var xy = [e.x, e.y], xy2;
       var p = pixToDataCoords(e.x, e.y);
       if (!pathDrawing()) {
         pencilPoints = [xy];
@@ -10495,17 +10548,20 @@
         // start pencil-drawing when a path is started
         pencilPoints = [xy];
         extendCurrentPath(p);
-      } else if (hoverVertexInfo && pencilPoints.length > 2) {
+      } else if (polygonMode() && hoverVertexInfo && pencilPoints.length > 2) {
         // close path
         p = hoverVertexInfo.point;
         appendVertex$1(hit.getHitTarget(), p);
         extendCurrentPath(p);
         pencilPoints = null; // stop drawing
-      } else if (pointExceedsTolerance(xy, pencilPoints, 1.5)) {
-        xy = pencilPoints.pop();
-        p = pixToDataCoords(xy[0], xy[1]);
-        pencilPoints = [xy];
+      } else if (pencilPoints.length >= 2 && pointExceedsTolerance(xy, pencilPoints, 1.4)) {
+        xy2 = pencilPoints.pop();
+        p = pixToDataCoords(xy2[0], xy2[1]);
         extendCurrentPath(p);
+        // kludgy way to get a smoother line (could be better)
+        // not this pencilPoints = [getAvgPoint(pencilPoints), xy2, xy];
+        // not this pencilPoints = pencilPoints.slice(-2).concat([xy2, xy]);
+        pencilPoints = [getAvgPoint(pencilPoints.slice(-3).concat([xy2])), xy2, xy];
       } else {
         // skip this point, update the hover line
         pencilPoints.push(xy);
@@ -10624,9 +10680,11 @@
     }
 
     function updateCursor() {
-      gui.container.findChild('.map-layers').classed('drawing', active());
+      var el = gui.container.findChild('.map-layers');
+      el.classed('draw-tool', active());
       var useArrow = hoverVertexInfo && !hoverVertexInfo.extendable && !pathDrawing();
-      gui.container.findChild('.map-layers').classed('dragging', useArrow);
+      el.classed('dragging', useArrow);
+      el.classed('drawing', pathDrawing());
     }
 
     function vertexIsEndpoint(info, target) {
@@ -12063,7 +12121,7 @@
 
     new SimpleButton(popup.findChild('.select-btn')).on('click', function() {
       var coords = box.getDataCoords();
-      if (!coords) return;
+      if (!coords || noData()) return;
       gui.enterMode('selection_tool');
       gui.interaction.setMode('selection');
       // kludge to pass bbox to the selection tool
@@ -12072,6 +12130,10 @@
       });
     });
 
+    function noData() {
+      return !gui.model.getActiveLayer();
+    }
+
     new SimpleButton(popup.findChild('.clip-btn')).on('click', function() {
       runCommand('-clip bbox=' + box.getDataCoords().join(','));
     });
@@ -12129,7 +12191,9 @@
 
     function showCoords() {
       El(infoBtn.node()).addClass('selected-btn');
-      coords.text(box.getDataCoords().join(','));
+      var bbox = box.getDataCoords();
+      var rounded = internal.getRoundedCoords(bbox, internal.getBoundsPrecisionForDisplay(bbox));
+      coords.text(rounded.join(','));
       coords.show();
       GUI.selectElement(coords.node());
     }
@@ -12262,373 +12326,107 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     }
   }
 
-  function loadScript(url, cb) {
-    var script = document.createElement('script');
-    script.onload = cb;
-    script.src = url;
-    document.head.appendChild(script);
-  }
+  utils$1.inherit(MshpMap, EventDispatcher);
 
-  function loadStylesheet(url) {
-    var el = document.createElement('link');
-    el.rel = 'stylesheet';
-    el.type = 'text/css';
-    el.media = 'screen';
-    el.href = url;
-    document.head.appendChild(el);
-  }
+  function MshpMap(gui) {
+    var opts = gui.options,
+        el = gui.container.findChild('.map-layers').node(),
+        position = new ElementPosition(el),
+        model = gui.model,
+        map = this,
+        _mouse = new MouseArea(el, position),
+        _ext = new MapExtent(position),
+        _nav = new MapNav(gui, _ext, _mouse),
+        _visibleLayers = [], // cached visible map layers
+        _hit,
+        _intersectionLyr, _activeLyr, _overlayLyr,
+        _renderer, _dynamicCRS;
 
-  function Basemap(gui, ext) {
-    var menu = gui.container.findChild('.basemap-options');
-    // var hideBtn = new SimpleButton(menu.findChild('.hide-btn'));
-    var fadeBtn = new SimpleButton(menu.findChild('.fade-btn'));
-    var closeBtn = new SimpleButton(menu.findChild('.close2-btn'));
-    var clearBtn = new SimpleButton(menu.findChild('.clear-btn'));
-    var list = menu.findChild('.basemap-styles');
-    var container = gui.container.findChild('.basemap-container');
-    var basemapBtn = gui.container.findChild('.basemap-btn');
-    var basemapNote = gui.container.findChild('.basemap-note');
-    var basemapWarning = gui.container.findChild('.basemap-warning');
-    var mapEl = gui.container.findChild('.basemap');
-    var extentNote = El('div').addClass('basemap-prompt').appendTo(container).hide();
-    var params = window.mapboxParams;
-    var map;
-    var activeStyle;
-    var loading = false;
-    var faded = false;
+    _mouse.disable(); // wait for gui.focus() to activate mouse events
 
-    if (params) {
-      //  TODO: check page URL for compatibility with mapbox key
-      init();
-    } else {
-      basemapBtn.hide();
-    }
+    model.on('select', function(e) {
+      _intersectionLyr = null;
+      _overlayLyr = null;
+    });
 
-    function init() {
-      gui.addMode('basemap', turnOn, turnOff, basemapBtn);
+    gui.on('active', function() {
+      _mouse.enable();
+    });
 
-      closeBtn.on('click', function() {
-        gui.clearMode();
-        turnOff();
-      });
+    gui.on('inactive', function() {
+      _mouse.disable();
+    });
 
-      clearBtn.on('click', function() {
-        if (activeStyle) {
-          turnOffBasemap();
-          updateButtons();
-          closeMenu();
-        }
-      });
+    gui.on('map-needs-refresh', function() {
+      drawLayers();
+    });
 
-      fadeBtn.on('click', function() {
-        if (faded) {
-          mapEl.css('opacity', 1);
-          faded = false;
-          fadeBtn.text('Fade');
-        } else if (activeStyle) {
-          mapEl.css('opacity', 0.35);
-          faded = true;
-          fadeBtn.text('Unfade');
-        }
-      });
+    model.on('update', onUpdate);
 
-      gui.on('map_click', function() {
-        // close menu if user click on the map
-        if (gui.getMode() == 'basemap') gui.clearMode();
-      });
+    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();
+    });
 
-      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() {
-          if (style == activeStyle) {
-            turnOffBasemap();
-          } else {
-            showBasemap(style);
-          }
-          updateButtons();
-          closeMenu();
-        });
-        btn.appendTo(list);
-      });
-    }
+    // Update display of segment intersections
+    this.setIntersectionLayer = function(lyr, dataset) {
+      if (lyr == _intersectionLyr) return; // no change
+      if (lyr) {
+        enhanceLayerForDisplay(lyr, dataset, getDisplayOptions());
+        _intersectionLyr = lyr;
+        _intersectionLyr.gui.style = getIntersectionStyle(_intersectionLyr.gui.displayLayer, getGlobalStyleOptions());
+      } else {
+        _intersectionLyr = null;
+      }
+      // TODO: try to avoid redrawing layers twice (in some situations)
+      drawLayers();
+    };
 
-    // close and turn off mode
-    function closeMenu() {
-      setTimeout(function() {
-        gui.clearMode();
-      }, 200);
-    }
+    this.setLayerPinning = function(target, pinned) {
+      target.layer.pinned = !!pinned;
+    };
 
-    function turnOffBasemap() {
-      activeStyle = null;
-      gui.map.setDisplayCRS(null);
-      refresh();
-    }
+    this.translatePixelCoords = function(x, y) {
+      var p = _ext.translatePixelCoords(x, y);
+      if (!_dynamicCRS) return p;
+      return internal.toLngLat(p, _dynamicCRS);
+    };
 
-    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 (map) {
-        map.setStyle(style.url);
-        refresh();
-      } else if (prepareMapView()) {
-        initMap();
+    this.pixelCoordsToDisplayCoords = function(x, y) {
+      var p1 = _ext.translatePixelCoords(x, y);
+      var p2 = _ext.translatePixelCoords(x+1, y+1);
+      var crs = this.getDisplayCRS();
+      if (crs) {
+        p1 = internal.toLngLat(p1, crs) || p1;
+        p2 = internal.toLngLat(p2, crs) || p2;
       }
-    }
-
-    function updateButtons() {
-      list.findChildren('.basemap-style-btn').forEach(function(el, i) {
-        el.classed('active', params.styles[i] == activeStyle);
-      });
-    }
-
-    function turnOn() {
-      // 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;
+      return formatCoordsForDisplay(p1, p2);
+    };
 
-      if (!dataCRS || !displayCRS || !crsIsUsable(displayCRS) || !crsIsUsable(dataCRS)) {
-        warning = 'This data is incompatible with the basemaps.';
-        if (!internal.layerHasGeometry(activeLyr.layer)) {
-          warning += ' Reason: layer is missing geographic data';
-        } else if (!dataCRS) {
-          warning += ' Reason: unknown projection.';
-        }
+    // this.getCenterLngLat = function() {
+    //   var bounds = _ext.getBounds();
+    //   var crs = this.getDisplayCRS();
+    //   // TODO: handle case where active layer is a frame layer
+    //   if (!bounds.hasBounds() || !crs) {
+    //     return null;
+    //   }
+    //   return internal.toLngLat([bounds.centerX(), bounds.centerY()], crs);
+    // };
 
-        basemapWarning.html(warning).show();
-        basemapNote.hide();
-      } else {
-        basemapNote.show();
+    this.getDisplayCRS = function() {
+      if (!_activeLyr) {
+        return _dynamicCRS || internal.parseCrsString('wgs84');
       }
-      menu.show();
-    }
-
-    function turnOff() {
-      basemapWarning.hide();
-      basemapNote.hide();
-      menu.hide();
-    }
-
-    function enabled() {
-      return !!(mapEl && params);
-    }
-
-    function show() {
-      gui.container.addClass('basemap-on');
-      mapEl.node().style.display = 'block';
-    }
-
-    function hide() {
-      gui.container.removeClass('basemap-on');
-      mapEl.node().style.display = 'none';
-    }
-
-    function getLonLatBounds() {
-      var bbox = ext.getBounds().toArray();
-      var bbox2 = fromWebMercator(bbox[0], bbox[1])
-          .concat(fromWebMercator(bbox[2], bbox[3]));
-      return bbox2;
-    }
-
-    function initMap() {
-      if (!enabled() || map || loading) return;
-      loading = true;
-      loadStylesheet(params.css);
-      loadScript(params.js, function() {
-        map = new window.mapboxgl.Map({
-          accessToken: params.key,
-          logoPosition: 'bottom-left',
-          container: mapEl.node(),
-          style: activeStyle.url,
-          bounds: getLonLatBounds(),
-          doubleClickZoom: false,
-          dragPan: false,
-          dragRotate: false,
-          scrollZoom: false,
-          interactive: false,
-          keyboard: false,
-          maxPitch: 0,
-          renderWorldCopies: true // false // false prevents panning off the map
-        });
-        map.on('load', function() {
-          loading = false;
-          refresh();
-        });
-      });
-    }
-
-    // @bbox: latlon bounding box of current map extent
-    function checkBounds(bbox) {
-      var mpp = ext.getBounds().width() / ext.width();
-      var z = scaleToZoom(mpp);
-      var msg;
-      if (bbox[1] >= -85 && bbox[3] <= 85 && z <= 20) {
-        extentNote.hide();
-        return true;
-      }
-      if (z > 20) {
-        msg = 'zoom out';
-      } else if (bbox[1] > 0) {
-        msg = 'pan south';
-      } else if (bbox[3] < 0) {
-        msg = 'pan north';
-      } else {
-        msg = msg = 'zoom in';
-      }
-      extentNote.html(msg + ' to see the basemap').show();
-      return false;
-    }
-
-    function crsIsUsable(crs) {
-      if (!crs) return false;
-      if (!internal.isInvertibleCRS(crs)) return false;
-      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;
-      fadeBtn.active(!off);
-      clearBtn.active(!off);
-      if (off) {
-        hide();
-        extentNote.hide();
-        return;
-      }
-
-      prepareMapView();
-      var bbox = getLonLatBounds();
-      if (!checkBounds(bbox)) {
-        // map does not display outside these bounds
-        hide();
-      } else {
-        show();
-        map.resize();
-        map.fitBounds(bbox, {animate: false});
-      }
-    }
-
-    return {refresh: refresh}; // called by map when extent changes
-  }
-
-  utils$1.inherit(MshpMap, EventDispatcher);
-
-  function MshpMap(gui) {
-    var opts = gui.options,
-        el = gui.container.findChild('.map-layers').node(),
-        position = new ElementPosition(el),
-        model = gui.model,
-        map = this,
-        _mouse = new MouseArea(el, position),
-        _ext = new MapExtent(position),
-        _nav = new MapNav(gui, _ext, _mouse),
-        _visibleLayers = [], // cached visible map layers
-        _hit,
-        _basemap,
-        _intersectionLyr, _activeLyr, _overlayLyr,
-        _renderer, _dynamicCRS;
-
-    _basemap = new Basemap(gui, _ext);
-
-    _mouse.disable(); // wait for gui.focus() to activate mouse events
-
-    model.on('select', function(e) {
-      _intersectionLyr = null;
-      _overlayLyr = null;
-    });
-
-    gui.on('active', function() {
-      _mouse.enable();
-    });
-
-    gui.on('inactive', function() {
-      _mouse.disable();
-    });
-
-    gui.on('map-needs-refresh', function() {
-      drawLayers();
-    });
-
-    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) {
-        enhanceLayerForDisplay(lyr, dataset, getDisplayOptions());
-        _intersectionLyr = lyr;
-        _intersectionLyr.gui.style = getIntersectionStyle(_intersectionLyr.gui.displayLayer, getGlobalStyleOptions());
-      } else {
-        _intersectionLyr = null;
-      }
-      // TODO: try to avoid redrawing layers twice (in some situations)
-      drawLayers();
-    };
-
-    this.setLayerPinning = function(target, pinned) {
-      target.layer.pinned = !!pinned;
-    };
-
-    this.translatePixelCoords = function(x, y) {
-      var p = _ext.translatePixelCoords(x, y);
-      if (!_dynamicCRS) return p;
-      return internal.toLngLat(p, _dynamicCRS);
-    };
-
-    this.pixelCoordsToDisplayCoords = function(x, y) {
-      var p1 = _ext.translatePixelCoords(x, y);
-      var p2 = _ext.translatePixelCoords(x+1, y+1);
-      var crs = this.getDisplayCRS();
-      if (crs) {
-        p1 = internal.toLngLat(p1, crs) || p1;
-        p2 = internal.toLngLat(p2, crs) || p2;
-      }
-      return formatCoordsForDisplay(p1, p2);
-    };
-
-    // this.getCenterLngLat = function() {
-    //   var bounds = _ext.getBounds();
-    //   var crs = this.getDisplayCRS();
-    //   // TODO: handle case where active layer is a frame layer
-    //   if (!bounds.hasBounds() || !crs) {
-    //     return null;
-    //   }
-    //   return internal.toLngLat([bounds.centerX(), bounds.centerY()], crs);
-    // };
-
-    this.getDisplayCRS = function() {
-      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;
-    };
+      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;
+    };
 
     this.getExtent = function() {return _ext;};
     this.getMouse = function() {return _mouse;};
@@ -12694,7 +12492,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       }
 
       _ext.on('change', function(e) {
-        if (_basemap) _basemap.refresh(); // keep basemap synced up (if enabled)
+        gui?.basemap.refresh(); // keep basemap synced up (if enabled)
         drawLayers(e.redraw ? '' : 'nav');
       });
 
@@ -12773,7 +12571,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
 
       if (needReset) {
         _ext.reset();
-        if (_basemap) _basemap.refresh();
+        gui?.basemap.refresh();
       }
       drawLayers();
       map.dispatchEvent('updated');
@@ -13163,6 +12961,293 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     return retn;
   }
 
+  function loadScript(url, cb) {
+    var script = document.createElement('script');
+    script.onload = cb;
+    script.src = url;
+    document.head.appendChild(script);
+  }
+
+  function loadStylesheet(url) {
+    var el = document.createElement('link');
+    el.rel = 'stylesheet';
+    el.type = 'text/css';
+    el.media = 'screen';
+    el.href = url;
+    document.head.appendChild(el);
+  }
+
+  function Basemap(gui) {
+    var menu = gui.container.findChild('.basemap-options');
+    var fadeBtn = new SimpleButton(menu.findChild('.fade-btn'));
+    var closeBtn = new SimpleButton(menu.findChild('.close2-btn'));
+    var clearBtn = new SimpleButton(menu.findChild('.clear-btn'));
+    var menuButtons = menu.findChild('.basemap-styles');
+    var overlayButtons = gui.container.findChild('.basemap-overlay-buttons');
+    var container = gui.container.findChild('.basemap-container');
+    var basemapBtn = gui.container.findChild('.basemap-btn');
+    var basemapNote = gui.container.findChild('.basemap-note');
+    var basemapWarning = gui.container.findChild('.basemap-warning');
+    var mapEl = gui.container.findChild('.basemap');
+    var extentNote = El('div').addClass('basemap-prompt').appendTo(container).hide();
+    var params = window.mapboxParams;
+    var map;
+    var activeStyle;
+    var loading = false;
+    var faded = false;
+
+    if (params) {
+      //  TODO: check page URL for compatibility with mapbox key
+      init();
+    } else {
+      basemapBtn.hide();
+    }
+
+    function init() {
+      gui.addMode('basemap', turnOn, turnOff, basemapBtn);
+
+      closeBtn.on('click', function() {
+        gui.clearMode();
+        turnOff();
+      });
+
+      clearBtn.on('click', function() {
+        if (activeStyle) {
+          turnOffBasemap();
+          updateButtons();
+          closeMenu();
+        }
+      });
+
+      fadeBtn.on('click', function() {
+        if (faded) {
+          mapEl.css('opacity', 1);
+          faded = false;
+          fadeBtn.text('Fade');
+        } else if (activeStyle) {
+          mapEl.css('opacity', 0.35);
+          faded = true;
+          fadeBtn.text('Unfade');
+        }
+      });
+
+      gui.model.on('update', onUpdate);
+
+      gui.on('map_click', function() {
+        // close menu if user click on the map
+        if (gui.getMode() == 'basemap') gui.clearMode();
+      });
+
+      params.styles.forEach(function(style) {
+        El('div')
+        .html(`<div class="basemap-style-btn"><img src="${style.icon}"></img></div><div class="basemap-style-label">${style.name}</div>`)
+        .appendTo(menuButtons)
+        .findChild('.basemap-style-btn').on('click', onClick);
+
+        El('div').addClass('basemap-overlay-btn basemap-style-btn')
+          .html(`<img src="${style.icon}"></img>`).on('click', onClick)
+          .appendTo(overlayButtons);
+
+        function onClick() {
+          if (overlayButtons.hasClass('disabled')) return;
+          if (style == activeStyle) {
+            turnOffBasemap();
+          } else {
+            showBasemap(style);
+          }
+          updateButtons();
+          closeMenu();
+        }
+      });
+    }
+
+    // close and turn off mode
+    function closeMenu() {
+      setTimeout(function() {
+        gui.clearMode();
+      }, 200);
+    }
+
+    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 (map) {
+        map.setStyle(style.url);
+        refresh();
+      } else if (prepareMapView()) {
+        initMap();
+      }
+    }
+
+    function updateButtons() {
+      menuButtons.findChildren('.basemap-style-btn').forEach(function(el, i) {
+        el.classed('active', params.styles[i] == activeStyle);
+      });
+      overlayButtons.findChildren('.basemap-style-btn').forEach(function(el, i) {
+        el.classed('active', params.styles[i] == activeStyle);
+      });
+    }
+
+    function turnOn() {
+      onUpdate();
+      menu.show();
+    }
+
+    function onUpdate() {
+      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, note;
+
+
+      if (!dataCRS || !displayCRS || !crsIsUsable(displayCRS) || !crsIsUsable(dataCRS)) {
+        warning = 'This data is incompatible with the basemaps.';
+        if (!internal.layerHasGeometry(activeLyr.layer)) {
+          warning += ' Reason: layer is missing geographic data';
+        } else if (!dataCRS) {
+          warning += ' Reason: unknown projection.';
+        }
+        basemapWarning.html(warning).show();
+        basemapNote.hide();
+        overlayButtons.addClass('disabled');
+        activeStyle = null;
+        updateButtons();
+      } else {
+        note = `Your data ${activeStyle ? 'is' : 'will be'} displayed using the Mercator projection.`;
+        basemapNote.text(note).show();
+        overlayButtons.show();
+        overlayButtons.removeClass('disabled');
+      }
+    }
+
+    function turnOff() {
+      basemapWarning.hide();
+      basemapNote.hide();
+      menu.hide();
+    }
+
+    function enabled() {
+      return !!(mapEl && params);
+    }
+
+    function show() {
+      gui.container.addClass('basemap-on');
+      mapEl.node().style.display = 'block';
+    }
+
+    function hide() {
+      gui.container.removeClass('basemap-on');
+      mapEl.node().style.display = 'none';
+    }
+
+    function getLonLatBounds() {
+      var ext = gui.map.getExtent();
+      var bbox = ext.getBounds().toArray();
+      var bbox2 = fromWebMercator(bbox[0], bbox[1])
+          .concat(fromWebMercator(bbox[2], bbox[3]));
+      return bbox2;
+    }
+
+    function initMap() {
+      if (!enabled() || map || loading) return;
+      loading = true;
+      loadStylesheet(params.css);
+      loadScript(params.js, function() {
+        map = new window.mapboxgl.Map({
+          accessToken: params.key,
+          logoPosition: 'bottom-left',
+          container: mapEl.node(),
+          style: activeStyle.url,
+          bounds: getLonLatBounds(),
+          doubleClickZoom: false,
+          dragPan: false,
+          dragRotate: false,
+          scrollZoom: false,
+          interactive: false,
+          keyboard: false,
+          maxPitch: 0,
+          renderWorldCopies: true // false // false prevents panning off the map
+        });
+        map.on('load', function() {
+          loading = false;
+          refresh();
+        });
+      });
+    }
+
+    // @bbox: latlon bounding box of current map extent
+    function checkBounds(bbox) {
+      var ext = gui.map.getExtent();
+      var mpp = ext.getBounds().width() / ext.width();
+      var z = scaleToZoom(mpp);
+      var msg;
+      if (bbox[1] >= -85 && bbox[3] <= 85 && z <= 20) {
+        extentNote.hide();
+        return true;
+      }
+      if (z > 20) {
+        msg = 'zoom out';
+      } else if (bbox[1] > 0) {
+        msg = 'pan south';
+      } else if (bbox[3] < 0) {
+        msg = 'pan north';
+      } else {
+        msg = msg = 'zoom in';
+      }
+      extentNote.html(msg + ' to see the basemap').show();
+      return false;
+    }
+
+    function crsIsUsable(crs) {
+      if (!crs) return false;
+      if (!internal.isInvertibleCRS(crs)) return false;
+      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;
+      fadeBtn.active(!off);
+      clearBtn.active(!off);
+      if (off) {
+        hide();
+        extentNote.hide();
+        return;
+      }
+
+      prepareMapView();
+      var bbox = getLonLatBounds();
+      if (!checkBounds(bbox)) {
+        // map does not display outside these bounds
+        hide();
+      } else {
+        show();
+        map.resize();
+        map.fitBounds(bbox, {animate: false});
+      }
+    }
+
+    return {refresh, show: onUpdate};
+  }
+
   function GuiInstance(container, opts) {
     var gui = new ModeSwitcher();
     opts = utils$1.extend({
@@ -13180,6 +13265,7 @@ 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.basemap = new Basemap(gui);
     gui.session = new SessionHistory(gui);
     gui.contextMenu = new ContextMenu();
     gui.undo = new Undo(gui);
@@ -13345,6 +13431,7 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
       if (dataLoaded) return;
       dataLoaded = true;
       gui.buttons.show();
+      gui.basemap.show();
       El('#mode-buttons').show();
       El('#splash-buttons').hide();
       El('body').addClass('map-view');