@mapcomponents/react-maplibre 0.1.78 → 0.1.80

package/dist/index.esm.js

@@ -18,10 +18,6 @@ var Moveable = require('react-moveable');
 var turf = require('@turf/turf');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 var MapboxDraw = require('@mapbox/mapbox-gl-draw');
-var Point = require('@mapbox/point-geometry');
-var require$$0 = require('@mapbox/geojson-coords');
-var require$$1 = require('traverse');
-var require$$2 = require('@mapbox/extent');
 var ButtonGroup = require('@mui/material/ButtonGroup');
 var ControlPointIcon = require('@mui/icons-material/ControlPoint');
 var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
@@ -54,6 +50,8 @@ var d3 = require('d3');
 var TuneIcon = require('@mui/icons-material/Tune');
 var reactColor = require('react-color');
 var system = require('@mui/system');
+var ArrowCircleDownIcon = require('@mui/icons-material/ArrowCircleDown');
+var ArrowCircleUpIcon = require('@mui/icons-material/ArrowCircleUp');
 var PlaylistAddIcon = require('@mui/icons-material/PlaylistAdd');
 var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
 var AppBar = require('@mui/material/AppBar');
@@ -65,6 +63,12 @@ var react = require('@emotion/react');
 var _ = require('@mui/material/');
 var FileCopy = require('@mui/icons-material/FileCopy');
 var WallpaperIcon = require('@mui/icons-material/Wallpaper');
+var MuiSpeedDial = require('@mui/material/SpeedDial');
+var MoreVertIcon = require('@mui/icons-material/MoreVert');
+var SpeedDialAction = require('@mui/material/SpeedDialAction');
+var LayersIcon = require('@mui/icons-material/Layers');
+var DesignServicesIcon = require('@mui/icons-material/DesignServices');
+var PictureAsPdfIcon = require('@mui/icons-material/PictureAsPdf');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -97,10 +101,6 @@ var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
 var turf__namespace = /*#__PURE__*/_interopNamespace(turf);
 var MapboxDraw__default = /*#__PURE__*/_interopDefaultLegacy(MapboxDraw);
-var Point__default = /*#__PURE__*/_interopDefaultLegacy(Point);
-var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
-var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
-var require$$2__default = /*#__PURE__*/_interopDefaultLegacy(require$$2);
 var ButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(ButtonGroup);
 var ControlPointIcon__default = /*#__PURE__*/_interopDefaultLegacy(ControlPointIcon);
 var RemoveCircleOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(RemoveCircleOutlineIcon);
@@ -128,6 +128,8 @@ var FastForwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastForwardIco
 var FastRewindIcon__default = /*#__PURE__*/_interopDefaultLegacy(FastRewindIcon);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 var TuneIcon__default = /*#__PURE__*/_interopDefaultLegacy(TuneIcon);
+var ArrowCircleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowCircleDownIcon);
+var ArrowCircleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowCircleUpIcon);
 var PlaylistAddIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlaylistAddIcon);
 var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
 var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar);
@@ -137,6 +139,12 @@ var MenuIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuIcon);
 var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 var FileCopy__default = /*#__PURE__*/_interopDefaultLegacy(FileCopy);
 var WallpaperIcon__default = /*#__PURE__*/_interopDefaultLegacy(WallpaperIcon);
+var MuiSpeedDial__default = /*#__PURE__*/_interopDefaultLegacy(MuiSpeedDial);
+var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
+var SpeedDialAction__default = /*#__PURE__*/_interopDefaultLegacy(SpeedDialAction);
+var LayersIcon__default = /*#__PURE__*/_interopDefaultLegacy(LayersIcon);
+var DesignServicesIcon__default = /*#__PURE__*/_interopDefaultLegacy(DesignServicesIcon);
+var PictureAsPdfIcon__default = /*#__PURE__*/_interopDefaultLegacy(PictureAsPdfIcon);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -772,8 +780,9 @@ var darkDefault = styles.createTheme({
 var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode === 'light' ? lightDefault : darkDefault)), { palette: __assign({ mode: mode }, (mode === 'dark'
         ? {
             primary: {
-                main: '#009FE3',
+                main: '#009EE0',
             },
+            secondary: { main: '#747577' },
             background: {
                 default: '#222222',
                 paper: '#414141',
@@ -786,15 +795,16 @@ var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode ===
         }
         : {
             primary: {
-                main: '#009FE3',
+                main: '#009EE0',
             },
+            secondary: { main: '#747577' },
             background: {
                 default: '#fff',
                 paper: '#fdfdfd',
                 icon: '#bdbdbd',
             },
             text: {
-                primary: '#111',
+                primary: '#1A171B',
                 secondary: '#121212',
                 contrast: '#fff',
             },
@@ -930,6 +940,7 @@ function LayerContextProvider(props) {
         setSymbolLayers(symbolLayers);
     };
     React.useEffect(function () {
+        console.log('layers', layers);
         if (layers.filter(function (el) { return !(el === null || el === void 0 ? void 0 : el.id); }).length) {
             var _layers = __spreadArray([], layers, true);
             _layers.forEach(function (el) {
@@ -940,6 +951,27 @@ function LayerContextProvider(props) {
             setLayers(_layers);
         }
     }, [layers]);
+    var moveLayer = React.useCallback(function (layerId, getNewPos) {
+        var _a;
+        var targetLayer = (_a = layers === null || layers === void 0 ? void 0 : layers.filter) === null || _a === void 0 ? void 0 : _a.call(layers, function (el) { return el.id === layerId; });
+        if (targetLayer.length > 0) {
+            var newLayers = __spreadArray([], layers, true);
+            var element = targetLayer[0];
+            var idx = layers.indexOf(element);
+            var newPos = getNewPos(idx);
+            if (newPos >= 0 && newPos <= layers.length - 1) {
+                newLayers.splice(idx, 1);
+                newLayers.splice(newPos, 0, element);
+                setLayers(newLayers);
+            }
+        }
+    }, [layers]);
+    var moveDown = React.useCallback(function (layerId) {
+        moveLayer(layerId, function (idx) { return idx + 1; });
+    }, [moveLayer]);
+    var moveUp = React.useCallback(function (layerId) {
+        moveLayer(layerId, function (idx) { return idx - 1; });
+    }, [moveLayer]);
     var value = {
         layers: layers,
         setLayers: setLayers,
@@ -951,6 +983,8 @@ function LayerContextProvider(props) {
         vtLayerConfig: vtLayerConfig,
         tileUrl: tileUrl,
         setTileUrl: setTileUrl,
+        moveUp: moveUp,
+        moveDown: moveDown,
     };
     return React__default["default"].createElement(LayerContext.Provider, { value: value }, props.children);
 }
@@ -2030,1323 +2064,10 @@ MlCreatePdfForm.defaultProps = {
     mapId: undefined,
 };
 
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var classes = {
-  CONTROL_BASE: 'mapboxgl-ctrl',
-  CONTROL_PREFIX: 'mapboxgl-ctrl-',
-  CONTROL_BUTTON: 'mapbox-gl-draw_ctrl-draw-btn',
-  CONTROL_BUTTON_LINE: 'mapbox-gl-draw_line',
-  CONTROL_BUTTON_POLYGON: 'mapbox-gl-draw_polygon',
-  CONTROL_BUTTON_POINT: 'mapbox-gl-draw_point',
-  CONTROL_BUTTON_TRASH: 'mapbox-gl-draw_trash',
-  CONTROL_BUTTON_COMBINE_FEATURES: 'mapbox-gl-draw_combine',
-  CONTROL_BUTTON_UNCOMBINE_FEATURES: 'mapbox-gl-draw_uncombine',
-  CONTROL_GROUP: 'mapboxgl-ctrl-group',
-  ATTRIBUTION: 'mapboxgl-ctrl-attrib',
-  ACTIVE_BUTTON: 'active',
-  BOX_SELECT: 'mapbox-gl-draw_boxselect'
-};
-var cursors = {
-  ADD: 'add',
-  MOVE: 'move',
-  DRAG: 'drag',
-  POINTER: 'pointer',
-  NONE: 'none'
-};
-var types$1 = {
-  POLYGON: 'polygon',
-  LINE: 'line_string',
-  POINT: 'point'
-};
-var geojsonTypes = {
-  FEATURE: 'Feature',
-  POLYGON: 'Polygon',
-  LINE_STRING: 'LineString',
-  POINT: 'Point',
-  FEATURE_COLLECTION: 'FeatureCollection',
-  MULTI_PREFIX: 'Multi',
-  MULTI_POINT: 'MultiPoint',
-  MULTI_LINE_STRING: 'MultiLineString',
-  MULTI_POLYGON: 'MultiPolygon'
-};
-var events = {
-  CREATE: 'draw.create',
-  DELETE: 'draw.delete',
-  UPDATE: 'draw.update',
-  SELECTION_CHANGE: 'draw.selectionchange',
-  MODE_CHANGE: 'draw.modechange',
-  ACTIONABLE: 'draw.actionable',
-  RENDER: 'draw.render',
-  COMBINE_FEATURES: 'draw.combine',
-  UNCOMBINE_FEATURES: 'draw.uncombine'
-};
-var updateActions = {
-  MOVE: 'move',
-  CHANGE_COORDINATES: 'change_coordinates'
-};
-var meta = {
-  FEATURE: 'feature',
-  MIDPOINT: 'midpoint',
-  VERTEX: 'vertex'
-};
-var activeStates = {
-  ACTIVE: 'true',
-  INACTIVE: 'false'
-};
-var LAT_MIN$1 = -90;
-var LAT_RENDERED_MIN$1 = -85;
-var LAT_MAX$1 = 90;
-var LAT_RENDERED_MAX$1 = 85;
-var LNG_MIN$1 = -270;
-var LNG_MAX$1 = 270;
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-function isOfMetaType(type) {
-  return function (e) {
-    var featureTarget = e.featureTarget;
-    if (!featureTarget) return false;
-    if (!featureTarget.properties) return false;
-    return featureTarget.properties.meta === type;
-  };
-}
-function isShiftMousedown(e) {
-  if (!e.originalEvent) return false;
-  if (!e.originalEvent.shiftKey) return false;
-  return e.originalEvent.button === 0;
-}
-function isActiveFeature(e) {
-  if (!e.featureTarget) return false;
-  if (!e.featureTarget.properties) return false;
-  return e.featureTarget.properties.active === activeStates.ACTIVE && e.featureTarget.properties.meta === meta.FEATURE;
-}
-function isInactiveFeature(e) {
-  if (!e.featureTarget) return false;
-  if (!e.featureTarget.properties) return false;
-  return e.featureTarget.properties.active === activeStates.INACTIVE && e.featureTarget.properties.meta === meta.FEATURE;
-}
-function noTarget(e) {
-  return e.featureTarget === undefined;
-}
-function isFeature(e) {
-  if (!e.featureTarget) return false;
-  if (!e.featureTarget.properties) return false;
-  return e.featureTarget.properties.meta === meta.FEATURE;
-}
-function isVertex$1(e) {
-  var featureTarget = e.featureTarget;
-  if (!featureTarget) return false;
-  if (!featureTarget.properties) return false;
-  return featureTarget.properties.meta === meta.VERTEX;
-}
-function isShiftDown(e) {
-  if (!e.originalEvent) return false;
-  return e.originalEvent.shiftKey === true;
-}
-function isEscapeKey(e) {
-  return e.keyCode === 27;
-}
-function isEnterKey(e) {
-  return e.keyCode === 13;
-}
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var doubleClickZoom = {
-  enable: function enable(ctx) {
-    setTimeout(function () {
-      // First check we've got a map and some context.
-      if (!ctx.map || !ctx.map.doubleClickZoom || !ctx._ctx || !ctx._ctx.store || !ctx._ctx.store.getInitialConfigValue) return;
-      // Now check initial state wasn't false (we leave it disabled if so)
-      if (!ctx._ctx.store.getInitialConfigValue("doubleClickZoom")) return;
-      ctx.map.doubleClickZoom.enable();
-    }, 0);
-  },
-  disable: function disable(ctx) {
-    setTimeout(function () {
-      if (!ctx.map || !ctx.map.doubleClickZoom) return;
-      // Always disable here, as it's necessary in some cases.
-      ctx.map.doubleClickZoom.disable();
-    }, 0);
-  }
-};
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-function isEventAtCoordinates(event, coordinates) {
-  if (!event.lngLat) return false;
-  return event.lngLat.lng === coordinates[0] && event.lngLat.lat === coordinates[1];
-}
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-
-/**
- * Returns GeoJSON for a Point representing the
- * vertex of another feature.
- *
- * @param {string} parentId
- * @param {Array<number>} coordinates
- * @param {string} path - Dot-separated numbers indicating exactly
- *	 where the point exists within its parent feature's coordinates.
- * @param {boolean} selected
- * @return {GeoJSON} Point
- */
-var create_vertex = function create_vertex(parentId, coordinates, path, selected) {
-  return {
-    type: geojsonTypes.FEATURE,
-    properties: {
-      meta: meta.VERTEX,
-      parent: parentId,
-      coord_path: path,
-      active: selected ? activeStates.ACTIVE : activeStates.INACTIVE
-    },
-    geometry: {
-      type: geojsonTypes.POINT,
-      coordinates: coordinates
-    }
-  };
-};
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var CustomPolygonMode = {};
-CustomPolygonMode.onSetup = function () {
-  console.log("Change mode: custom polygon");
-  var polygon = this.newFeature({
-    type: geojsonTypes.FEATURE,
-    properties: {},
-    geometry: {
-      type: geojsonTypes.POLYGON,
-      coordinates: [[]]
-    }
-  });
-  this.addFeature(polygon);
-  this.clearSelectedFeatures();
-  doubleClickZoom.disable(this);
-  this.updateUIClasses({
-    mouse: cursors.ADD
-  });
-  this.activateUIButton(types$1.POLYGON);
-  this.setActionableState({
-    trash: true
-  });
-  return {
-    polygon: polygon,
-    currentVertexPosition: 0
-  };
-};
-CustomPolygonMode.clickAnywhere = function (state, e) {
-  if (state.currentVertexPosition > 0 && isEventAtCoordinates(e, state.polygon.coordinates[0][state.currentVertexPosition - 1])) {
-    return this.changeMode("custom_select", {
-      featureIds: [state.polygon.id]
-    });
-  }
-  this.updateUIClasses({
-    mouse: cursors.ADD
-  });
-  state.polygon.updateCoordinate("0.".concat(state.currentVertexPosition), e.lngLat.lng, e.lngLat.lat);
-  state.currentVertexPosition++;
-  state.polygon.updateCoordinate("0.".concat(state.currentVertexPosition), e.lngLat.lng, e.lngLat.lat);
-  this.map.fire(events.CREATE, {
-    features: [state.polygon.toGeoJSON()]
-  });
-};
-CustomPolygonMode.clickOnVertex = function (state) {
-  return this.changeMode("custom_select", {
-    featureIds: [state.polygon.id]
-  });
-};
-CustomPolygonMode.onMouseMove = function (state, e) {
-  state.polygon.updateCoordinate("0.".concat(state.currentVertexPosition), e.lngLat.lng, e.lngLat.lat);
-  if (isVertex$1(e)) {
-    this.updateUIClasses({
-      mouse: cursors.POINTER
-    });
-  }
-};
-CustomPolygonMode.onTap = CustomPolygonMode.onClick = function (state, e) {
-  if (isVertex$1(e)) return this.clickOnVertex(state, e);
-  return this.clickAnywhere(state, e);
-};
-CustomPolygonMode.onKeyUp = function (state, e) {
-  if (isEscapeKey(e)) {
-    this.deleteFeature([state.polygon.id], {
-      silent: true
-    });
-    this.changeMode("custom_select");
-  } else if (isEnterKey(e)) {
-    this.changeMode("custom_select", {
-      featureIds: [state.polygon.id]
-    });
-  }
-};
-CustomPolygonMode.onStop = function (state) {
-  this.updateUIClasses({
-    mouse: cursors.NONE
-  });
-  doubleClickZoom.enable(this);
-  this.activateUIButton();
-
-  // check to see if we've deleted this feature
-  if (this.getFeature(state.polygon.id) === undefined) return;
-
-  //remove last added coordinate
-  state.polygon.removeCoordinate("0.".concat(state.currentVertexPosition));
-  if (state.polygon.isValid()) {
-    this.map.fire(events.CREATE, {
-      features: [state.polygon.toGeoJSON()]
-    });
-  } else {
-    this.deleteFeature([state.polygon.id], {
-      silent: true
-    });
-    this.changeMode("custom_select", {}, {
-      silent: true
-    });
-  }
-};
-CustomPolygonMode.toDisplayFeatures = function (state, geojson, display) {
-  var isActivePolygon = geojson.properties.id === state.polygon.id;
-  geojson.properties.active = isActivePolygon ? activeStates.ACTIVE : activeStates.INACTIVE;
-  if (!isActivePolygon) return display(geojson);
-
-  // Don't render a polygon until it has two positions
-  // (and a 3rd which is just the first repeated)
-  if (geojson.geometry.coordinates.length === 0) return;
-  var coordinateCount = geojson.geometry.coordinates[0].length;
-  // 2 coordinates after selecting a draw type
-  // 3 after creating the first point
-  if (coordinateCount < 3) {
-    return;
-  }
-  geojson.properties.meta = meta.FEATURE;
-  display(create_vertex(state.polygon.id, geojson.geometry.coordinates[0][0], "0.0", false));
-  if (coordinateCount > 3) {
-    // Add a start position marker to the map, clicking on this will finish the feature
-    // This should only be shown when we're in a valid spot
-    var endPos = geojson.geometry.coordinates[0].length - 3;
-    display(create_vertex(state.polygon.id, geojson.geometry.coordinates[0][endPos], "0.".concat(endPos), false));
-  }
-  if (coordinateCount <= 4) {
-    // If we've only drawn two positions (plus the closer),
-    // make a LineString instead of a Polygon
-    var lineCoordinates = [[geojson.geometry.coordinates[0][0][0], geojson.geometry.coordinates[0][0][1]], [geojson.geometry.coordinates[0][1][0], geojson.geometry.coordinates[0][1][1]]];
-    // create an initial vertex so that we can track the first point on mobile devices
-    display({
-      type: geojsonTypes.FEATURE,
-      properties: geojson.properties,
-      geometry: {
-        coordinates: lineCoordinates,
-        type: geojsonTypes.LINE_STRING
-      }
-    });
-    if (coordinateCount === 3) {
-      return;
-    }
-  }
-  // render the Polygon
-  return display(geojson);
-};
-CustomPolygonMode.onTrash = function (state) {
-  this.deleteFeature([state.polygon.id], {
-    silent: true
-  });
-  this.changeMode("custom_select");
-};
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-
-/**
- * Returns a Point representing a mouse event's position
- * relative to a containing element.
- *
- * @param {MouseEvent} mouseEvent
- * @param {Node} container
- * @returns {Point}
- */
-function mouseEventPoint(mouseEvent, container) {
-  var rect = container.getBoundingClientRect();
-  return new Point__default["default"](mouseEvent.clientX - rect.left - (container.clientLeft || 0), mouseEvent.clientY - rect.top - (container.clientTop || 0));
-}
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var create_midpoint = function create_midpoint(parent, startVertex, endVertex) {
-  var startCoord = startVertex.geometry.coordinates;
-  var endCoord = endVertex.geometry.coordinates;
-
-  // If a coordinate exceeds the projection, we can't calculate a midpoint,
-  // so run away
-  if (startCoord[1] > LAT_RENDERED_MAX$1 || startCoord[1] < LAT_RENDERED_MIN$1 || endCoord[1] > LAT_RENDERED_MAX$1 || endCoord[1] < LAT_RENDERED_MIN$1) {
-    return null;
-  }
-  var mid = {
-    lng: (startCoord[0] + endCoord[0]) / 2,
-    lat: (startCoord[1] + endCoord[1]) / 2
-  };
-  return {
-    type: geojsonTypes.FEATURE,
-    properties: {
-      meta: meta.MIDPOINT,
-      parent: parent,
-      lng: mid.lng,
-      lat: mid.lat,
-      coord_path: endVertex.properties.coord_path
-    },
-    geometry: {
-      type: geojsonTypes.POINT,
-      coordinates: [mid.lng, mid.lat]
-    }
-  };
-};
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-function createSupplementaryPoints(geojson) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var basePath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var _geojson$geometry = geojson.geometry,
-    type = _geojson$geometry.type,
-    coordinates = _geojson$geometry.coordinates;
-  var featureId = geojson.properties && geojson.properties.id;
-  var supplementaryPoints = [];
-  if (type === geojsonTypes.POINT) {
-    // For points, just create a vertex
-    supplementaryPoints.push(create_vertex(featureId, coordinates, basePath, isSelectedPath(basePath)));
-  } else if (type === geojsonTypes.POLYGON) {
-    // Cycle through a Polygon's rings and
-    // process each line
-    coordinates.forEach(function (line, lineIndex) {
-      processLine(line, basePath !== null ? "".concat(basePath, ".").concat(lineIndex) : String(lineIndex));
-    });
-  } else if (type === geojsonTypes.LINE_STRING) {
-    processLine(coordinates, basePath);
-  } else if (type.indexOf(geojsonTypes.MULTI_PREFIX) === 0) {
-    processMultiGeometry();
-  }
-  function processLine(line, lineBasePath) {
-    var firstPointString = "";
-    var lastVertex = null;
-    line.forEach(function (point, pointIndex) {
-      var pointPath = lineBasePath !== undefined && lineBasePath !== null ? "".concat(lineBasePath, ".").concat(pointIndex) : String(pointIndex);
-      var vertex = create_vertex(featureId, point, pointPath, isSelectedPath(pointPath));
-
-      // If we're creating midpoints, check if there was a
-      // vertex before this one. If so, add a midpoint
-      // between that vertex and this one.
-      if (options.midpoints && lastVertex) {
-        var midpoint = create_midpoint(featureId, lastVertex, vertex);
-        if (midpoint) {
-          supplementaryPoints.push(midpoint);
-        }
-      }
-      lastVertex = vertex;
-
-      // A Polygon line's last point is the same as the first point. If we're on the last
-      // point, we want to draw a midpoint before it but not another vertex on it
-      // (since we already a vertex there, from the first point).
-      var stringifiedPoint = JSON.stringify(point);
-      if (firstPointString !== stringifiedPoint) {
-        supplementaryPoints.push(vertex);
-      }
-      if (pointIndex === 0) {
-        firstPointString = stringifiedPoint;
-      }
-    });
-  }
-  function isSelectedPath(path) {
-    if (!options.selectedPaths) return false;
-    return options.selectedPaths.indexOf(path) !== -1;
-  }
-
-  // Split a multi-geometry into constituent
-  // geometries, and accumulate the supplementary points
-  // for each of those constituents
-  function processMultiGeometry() {
-    var subType = type.replace(geojsonTypes.MULTI_PREFIX, "");
-    coordinates.forEach(function (subCoordinates, index) {
-      var subFeature = {
-        type: geojsonTypes.FEATURE,
-        properties: geojson.properties,
-        geometry: {
-          type: subType,
-          coordinates: subCoordinates
-        }
-      };
-      supplementaryPoints = supplementaryPoints.concat(createSupplementaryPoints(subFeature, options, index));
-    });
-  }
-  return supplementaryPoints;
-}
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-function StringSet(items) {
-  this._items = {};
-  this._nums = {};
-  this._length = items ? items.length : 0;
-  if (!items) return;
-  for (var i = 0, l = items.length; i < l; i++) {
-    this.add(items[i]);
-    if (items[i] === undefined) continue;
-    if (typeof items[i] === 'string') this._items[items[i]] = i;else this._nums[items[i]] = i;
-  }
-}
-StringSet.prototype.add = function (x) {
-  if (this.has(x)) return this;
-  this._length++;
-  if (typeof x === 'string') this._items[x] = this._length;else this._nums[x] = this._length;
-  return this;
-};
-StringSet.prototype["delete"] = function (x) {
-  if (this.has(x) === false) return this;
-  this._length--;
-  delete this._items[x];
-  delete this._nums[x];
-  return this;
-};
-StringSet.prototype.has = function (x) {
-  if (typeof x !== 'string' && typeof x !== 'number') return false;
-  return this._items[x] !== undefined || this._nums[x] !== undefined;
-};
-StringSet.prototype.values = function () {
-  var _this = this;
-  var values = [];
-  Object.keys(this._items).forEach(function (k) {
-    values.push({
-      k: k,
-      v: _this._items[k]
-    });
-  });
-  Object.keys(this._nums).forEach(function (k) {
-    values.push({
-      k: JSON.parse(k),
-      v: _this._nums[k]
-    });
-  });
-  return values.sort(function (a, b) {
-    return a.v - b.v;
-  }).map(function (a) {
-    return a.k;
-  });
-};
-StringSet.prototype.clear = function () {
-  this._length = 0;
-  this._items = {};
-  this._nums = {};
-  return this;
-};
-
-var geojsonExtentExports = {};
-var geojsonExtent = {
-  get exports(){ return geojsonExtentExports; },
-  set exports(v){ geojsonExtentExports = v; },
-};
-
-var geojsonCoords = require$$0__default["default"],
-  traverse = require$$1__default["default"],
-  extent = require$$2__default["default"];
-var geojsonTypesByDataAttributes = {
-  features: ['FeatureCollection'],
-  coordinates: ['Point', 'MultiPoint', 'LineString', 'MultiLineString', 'Polygon', 'MultiPolygon'],
-  geometry: ['Feature'],
-  geometries: ['GeometryCollection']
-};
-var dataAttributes = Object.keys(geojsonTypesByDataAttributes);
-geojsonExtent.exports = function (_) {
-  return getExtent(_).bbox();
-};
-geojsonExtentExports.polygon = function (_) {
-  return getExtent(_).polygon();
-};
-geojsonExtentExports.bboxify = function (_) {
-  return traverse(_).map(function (value) {
-    if (!value) return;
-    var isValid = dataAttributes.some(function (attribute) {
-      if (value[attribute]) {
-        return geojsonTypesByDataAttributes[attribute].indexOf(value.type) !== -1;
-      }
-      return false;
-    });
-    if (isValid) {
-      value.bbox = getExtent(value).bbox();
-      this.update(value);
-    }
-  });
-};
-function getExtent(_) {
-  var ext = extent(),
-    coords = geojsonCoords(_);
-  for (var i = 0; i < coords.length; i++) ext.include(coords[i]);
-  return ext;
-}
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var LAT_MIN = LAT_MIN$1,
-  LAT_MAX = LAT_MAX$1,
-  LAT_RENDERED_MIN = LAT_RENDERED_MIN$1,
-  LAT_RENDERED_MAX = LAT_RENDERED_MAX$1,
-  LNG_MIN = LNG_MIN$1,
-  LNG_MAX = LNG_MAX$1;
-
-// Ensure that we do not drag north-south far enough for
-// - any part of any feature to exceed the poles
-// - any feature to be completely lost in the space between the projection's
-//	 edge and the poles, such that it couldn't be re-selected and moved back
-var constrain_feature_movement = function constrain_feature_movement(geojsonFeatures, delta) {
-  // "inner edge" = a feature's latitude closest to the equator
-  var northInnerEdge = LAT_MIN;
-  var southInnerEdge = LAT_MAX;
-  // "outer edge" = a feature's latitude furthest from the equator
-  var northOuterEdge = LAT_MIN;
-  var southOuterEdge = LAT_MAX;
-  var westEdge = LNG_MAX;
-  var eastEdge = LNG_MIN;
-  geojsonFeatures.forEach(function (feature) {
-    var bounds = geojsonExtentExports(feature);
-    var featureSouthEdge = bounds[1];
-    var featureNorthEdge = bounds[3];
-    var featureWestEdge = bounds[0];
-    var featureEastEdge = bounds[2];
-    if (featureSouthEdge > northInnerEdge) northInnerEdge = featureSouthEdge;
-    if (featureNorthEdge < southInnerEdge) southInnerEdge = featureNorthEdge;
-    if (featureNorthEdge > northOuterEdge) northOuterEdge = featureNorthEdge;
-    if (featureSouthEdge < southOuterEdge) southOuterEdge = featureSouthEdge;
-    if (featureWestEdge < westEdge) westEdge = featureWestEdge;
-    if (featureEastEdge > eastEdge) eastEdge = featureEastEdge;
-  });
-
-  // These changes are not mutually exclusive: we might hit the inner
-  // edge but also have hit the outer edge and therefore need
-  // another readjustment
-  var constrainedDelta = delta;
-  if (northInnerEdge + constrainedDelta.lat > LAT_RENDERED_MAX) {
-    constrainedDelta.lat = LAT_RENDERED_MAX - northInnerEdge;
-  }
-  if (northOuterEdge + constrainedDelta.lat > LAT_MAX) {
-    constrainedDelta.lat = LAT_MAX - northOuterEdge;
-  }
-  if (southInnerEdge + constrainedDelta.lat < LAT_RENDERED_MIN) {
-    constrainedDelta.lat = LAT_RENDERED_MIN - southInnerEdge;
-  }
-  if (southOuterEdge + constrainedDelta.lat < LAT_MIN) {
-    constrainedDelta.lat = LAT_MIN - southOuterEdge;
-  }
-  if (westEdge + constrainedDelta.lng <= LNG_MIN) {
-    constrainedDelta.lng += Math.ceil(Math.abs(constrainedDelta.lng) / 360) * 360;
-  }
-  if (eastEdge + constrainedDelta.lng >= LNG_MAX) {
-    constrainedDelta.lng -= Math.ceil(Math.abs(constrainedDelta.lng) / 360) * 360;
-  }
-  return constrainedDelta;
-};
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var move_features = function move_features(features, delta) {
-  var constrainedDelta = constrain_feature_movement(features.map(function (feature) {
-    return feature.toGeoJSON();
-  }), delta);
-  features.forEach(function (feature) {
-    var currentCoordinates = feature.getCoordinates();
-    var moveCoordinate = function moveCoordinate(coord) {
-      var point = {
-        lng: coord[0] + constrainedDelta.lng,
-        lat: coord[1] + constrainedDelta.lat
-      };
-      return [point.lng, point.lat];
-    };
-    var moveRing = function moveRing(ring) {
-      return ring.map(function (coord) {
-        return moveCoordinate(coord);
-      });
-    };
-    var moveMultiPolygon = function moveMultiPolygon(multi) {
-      return multi.map(function (ring) {
-        return moveRing(ring);
-      });
-    };
-    var nextCoordinates;
-    if (feature.type === geojsonTypes.POINT) {
-      nextCoordinates = moveCoordinate(currentCoordinates);
-    } else if (feature.type === geojsonTypes.LINE_STRING || feature.type === geojsonTypes.MULTI_POINT) {
-      nextCoordinates = currentCoordinates.map(moveCoordinate);
-    } else if (feature.type === geojsonTypes.POLYGON || feature.type === geojsonTypes.MULTI_LINE_STRING) {
-      nextCoordinates = currentCoordinates.map(moveRing);
-    } else if (feature.type === geojsonTypes.MULTI_POLYGON) {
-      nextCoordinates = currentCoordinates.map(moveMultiPolygon);
-    }
-    feature.incomingCoords(nextCoordinates);
-  });
-};
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var CustomSelectMode = {};
-CustomSelectMode.onSetup = function (opts) {
-  var _this = this;
-  console.log("Change mode: custom select");
-
-  // turn the opts into state.
-  var state = {
-    dragMoveLocation: null,
-    boxSelectStartLocation: null,
-    boxSelectElement: undefined,
-    boxSelecting: false,
-    canBoxSelect: false,
-    dragMoving: false,
-    canDragMove: false,
-    initiallySelectedFeatureIds: opts.featureIds || []
-  };
-  this.setSelected(state.initiallySelectedFeatureIds.filter(function (id) {
-    return _this.getFeature(id) !== undefined;
-  }));
-  this.fireActionable();
-  this.setActionableState({
-    combineFeatures: true,
-    uncombineFeatures: true,
-    trash: true
-  });
-  return state;
-};
-CustomSelectMode.fireUpdate = function () {
-  this.map.fire(events.UPDATE, {
-    action: updateActions.MOVE,
-    features: this.getSelected().map(function (f) {
-      return f.toGeoJSON();
-    })
-  });
-};
-CustomSelectMode.fireActionable = function () {
-  var _this2 = this;
-  var selectedFeatures = this.getSelected();
-  var multiFeatures = selectedFeatures.filter(function (feature) {
-    return _this2.isInstanceOf("MultiFeature", feature);
-  });
-  var combineFeatures = false;
-  if (selectedFeatures.length > 1) {
-    combineFeatures = true;
-    var featureType = selectedFeatures[0].type.replace("Multi", "");
-    selectedFeatures.forEach(function (feature) {
-      if (feature.type.replace("Multi", "") !== featureType) {
-        combineFeatures = false;
-      }
-    });
-  }
-  var uncombineFeatures = multiFeatures.length > 0;
-  var trash = selectedFeatures.length > 0;
-  this.setActionableState({
-    combineFeatures: combineFeatures,
-    uncombineFeatures: uncombineFeatures,
-    trash: trash
-  });
-};
-CustomSelectMode.getUniqueIds = function (allFeatures) {
-  if (!allFeatures.length) return [];
-  var ids = allFeatures.map(function (s) {
-    return s.properties.id;
-  }).filter(function (id) {
-    return id !== undefined;
-  }).reduce(function (memo, id) {
-    memo.add(id);
-    return memo;
-  }, new StringSet());
-  return ids.values();
-};
-CustomSelectMode.stopExtendedInteractions = function (state) {
-  if (state.boxSelectElement) {
-    if (state.boxSelectElement.parentNode) state.boxSelectElement.parentNode.removeChild(state.boxSelectElement);
-    state.boxSelectElement = null;
-  }
-  this.map.dragPan.enable();
-  state.boxSelecting = false;
-  state.canBoxSelect = false;
-  state.dragMoving = false;
-  state.canDragMove = false;
-};
-CustomSelectMode.onStop = function () {
-  doubleClickZoom.enable(this);
-};
-CustomSelectMode.onMouseMove = function (state) {
-  // On mousemove that is not a drag, stop extended interactions.
-  // This is useful if you drag off the canvas, release the button,
-  // then move the mouse back over the canvas --- we don't allow the
-  // interaction to continue then, but we do let it continue if you held
-  // the mouse button that whole time
-  return this.stopExtendedInteractions(state);
-};
-CustomSelectMode.onMouseOut = function (state) {
-  // As soon as you mouse leaves the canvas, update the feature
-  if (state.dragMoving) return this.fireUpdate();
-};
-CustomSelectMode.onTap = CustomSelectMode.onClick = function (state, e) {
-  // Click (with or without shift) on no feature
-  if (noTarget(e)) return this.clickAnywhere(state, e); // also tap
-  if (isOfMetaType(meta.VERTEX)(e)) return this.clickOnVertex(state, e); //tap
-  if (isFeature(e)) return this.clickOnFeature(state, e);
-};
-CustomSelectMode.clickAnywhere = function (state) {
-  var _this3 = this;
-  // Clear the re-render selection
-  var wasSelected = this.getSelectedIds();
-  if (wasSelected.length) {
-    this.clearSelectedFeatures();
-    wasSelected.forEach(function (id) {
-      return _this3.doRender(id);
-    });
-  }
-  doubleClickZoom.enable(this);
-  this.stopExtendedInteractions(state);
-};
-CustomSelectMode.clickOnVertex = function (state, e) {
-  // Enter direct select mode
-  this.changeMode("custom_direct_select", {
-    featureId: e.featureTarget.properties.parent,
-    coordPath: e.featureTarget.properties.coord_path,
-    startPos: e.lngLat
-    //		groupMove_vertices: matchingVertices,
-  });
-
-  this.updateUIClasses({
-    mouse: cursors.MOVE
-  });
-};
-CustomSelectMode.startOnActiveFeature = function (state, e) {
-  // Stop any already-underway extended interactions
-  this.stopExtendedInteractions(state);
-
-  // Disable map.dragPan immediately so it can't start
-  this.map.dragPan.disable();
-
-  // Re-render it and enable drag move
-  this.doRender(e.featureTarget.properties.id);
-
-  // Set up the state for drag moving
-  state.canDragMove = true;
-  state.dragMoveLocation = e.lngLat;
-};
-CustomSelectMode.clickOnFeature = function (state, e) {
-  var _this4 = this;
-  // Stop everything
-  doubleClickZoom.disable(this);
-  this.stopExtendedInteractions(state);
-  var isShiftClick = isShiftDown(e);
-  var selectedFeatureIds = this.getSelectedIds();
-  var featureId = e.featureTarget.properties.id;
-  var isFeatureSelected = this.isSelected(featureId);
-
-  // Click (without shift) on any selected feature but a point
-  if (!isShiftClick && isFeatureSelected && this.getFeature(featureId).type !== geojsonTypes.POINT) {
-    // Enter direct select mode
-    return this.changeMode("custom_direct_select", {
-      featureId: featureId
-    });
-  }
-
-  // Shift-click on a selected feature
-  if (isFeatureSelected && isShiftClick) {
-    // Deselect it
-    this.deselect(featureId);
-    this.updateUIClasses({
-      mouse: cursors.POINTER
-    });
-    if (selectedFeatureIds.length === 1) {
-      doubleClickZoom.enable(this);
-    }
-    // Shift-click on an unselected feature
-  } else if (!isFeatureSelected && isShiftClick) {
-    // Add it to the selection
-    this.select(featureId);
-    this.updateUIClasses({
-      mouse: cursors.MOVE
-    });
-    // Click (without shift) on an unselected feature
-  } else if (!isFeatureSelected && !isShiftClick) {
-    // Make it the only selected feature
-    selectedFeatureIds.forEach(function (id) {
-      return _this4.doRender(id);
-    });
-    this.setSelected(featureId);
-    this.updateUIClasses({
-      mouse: cursors.MOVE
-    });
-  }
-
-  // No matter what, re-render the clicked feature
-  this.doRender(featureId);
-};
-CustomSelectMode.onMouseDown = function (state, e) {
-  if (isActiveFeature(e)) return this.startOnActiveFeature(state, e);
-  if (this.drawConfig.boxSelect && isShiftMousedown(e)) return this.startBoxSelect(state, e);
-};
-CustomSelectMode.startBoxSelect = function (state, e) {
-  this.stopExtendedInteractions(state);
-  this.map.dragPan.disable();
-  // Enable box select
-  state.boxSelectStartLocation = mouseEventPoint(e.originalEvent, this.map.getContainer());
-  state.canBoxSelect = true;
-};
-CustomSelectMode.onTouchStart = function (state, e) {
-  if (isActiveFeature(e)) return this.startOnActiveFeature(state, e);
-};
-CustomSelectMode.onDrag = function (state, e) {
-  if (state.canDragMove) return this.dragMove(state, e);
-  if (this.drawConfig.boxSelect && state.canBoxSelect) return this.whileBoxSelect(state, e);
-};
-CustomSelectMode.whileBoxSelect = function (state, e) {
-  state.boxSelecting = true;
-  this.updateUIClasses({
-    mouse: cursors.ADD
-  });
-
-  // Create the box node if it doesn't exist
-  if (!state.boxSelectElement) {
-    state.boxSelectElement = document.createElement("div");
-    state.boxSelectElement.classList.add(classes.BOX_SELECT);
-    this.map.getContainer().appendChild(state.boxSelectElement);
-  }
-
-  // Adjust the box node's width and xy position
-  var current = mouseEventPoint(e.originalEvent, this.map.getContainer());
-  var minX = Math.min(state.boxSelectStartLocation.x, current.x);
-  var maxX = Math.max(state.boxSelectStartLocation.x, current.x);
-  var minY = Math.min(state.boxSelectStartLocation.y, current.y);
-  var maxY = Math.max(state.boxSelectStartLocation.y, current.y);
-  var translateValue = "translate(".concat(minX, "px, ").concat(minY, "px)");
-  state.boxSelectElement.style.transform = translateValue;
-  state.boxSelectElement.style.WebkitTransform = translateValue;
-  state.boxSelectElement.style.width = "".concat(maxX - minX, "px");
-  state.boxSelectElement.style.height = "".concat(maxY - minY, "px");
-};
-CustomSelectMode.dragMove = function (state, e) {
-  // Dragging when drag move is enabled
-  state.dragMoving = true;
-  e.originalEvent.stopPropagation();
-  var delta = {
-    lng: e.lngLat.lng - state.dragMoveLocation.lng,
-    lat: e.lngLat.lat - state.dragMoveLocation.lat
-  };
-  move_features(this.getSelected(), delta);
-  state.dragMoveLocation = e.lngLat;
-};
-CustomSelectMode.onMouseUp = function (state, e) {
-  var _this5 = this;
-  // End any extended interactions
-  if (state.dragMoving) {
-    this.fireUpdate();
-  } else if (state.boxSelecting) {
-    var bbox = [state.boxSelectStartLocation, mouseEventPoint(e.originalEvent, this.map.getContainer())];
-    var featuresInBox = this.featuresAt(null, bbox, "click");
-    var idsToSelect = this.getUniqueIds(featuresInBox).filter(function (id) {
-      return !_this5.isSelected(id);
-    });
-    if (idsToSelect.length) {
-      this.select(idsToSelect);
-      idsToSelect.forEach(function (id) {
-        return _this5.doRender(id);
-      });
-      this.updateUIClasses({
-        mouse: cursors.MOVE
-      });
-    }
-  }
-  this.stopExtendedInteractions(state);
-};
-CustomSelectMode.toDisplayFeatures = function (state, geojson, display) {
-  geojson.properties.active = this.isSelected(geojson.properties.id) ? activeStates.ACTIVE : activeStates.INACTIVE;
-  display(geojson);
-  this.fireActionable();
-  if (geojson.properties.active !== activeStates.ACTIVE || geojson.geometry.type === geojsonTypes.POINT) return;
-  createSupplementaryPoints(geojson).forEach(display);
-};
-CustomSelectMode.onTrash = function () {
-  this.deleteFeature(this.getSelectedIds());
-  this.fireActionable();
-};
-CustomSelectMode.onCombineFeatures = function () {
-  var selectedFeatures = this.getSelected();
-  if (selectedFeatures.length === 0 || selectedFeatures.length < 2) return;
-  var coordinates = [],
-    featuresCombined = [];
-  var featureType = selectedFeatures[0].type.replace("Multi", "");
-  for (var i = 0; i < selectedFeatures.length; i++) {
-    var feature = selectedFeatures[i];
-    if (feature.type.replace("Multi", "") !== featureType) {
-      return;
-    }
-    if (feature.type.includes("Multi")) {
-      feature.getCoordinates().forEach(function (subcoords) {
-        coordinates.push(subcoords);
-      });
-    } else {
-      coordinates.push(feature.getCoordinates());
-    }
-    featuresCombined.push(feature.toGeoJSON());
-  }
-  if (featuresCombined.length > 1) {
-    var multiFeature = this.newFeature({
-      type: geojsonTypes.FEATURE,
-      properties: featuresCombined[0].properties,
-      geometry: {
-        type: "Multi".concat(featureType),
-        coordinates: coordinates
-      }
-    });
-    this.addFeature(multiFeature);
-    this.deleteFeature(this.getSelectedIds(), {
-      silent: true
-    });
-    this.setSelected([multiFeature.id]);
-    this.map.fire(events.COMBINE_FEATURES, {
-      createdFeatures: [multiFeature.toGeoJSON()],
-      deletedFeatures: featuresCombined
-    });
-  }
-  this.fireActionable();
-};
-CustomSelectMode.onUncombineFeatures = function () {
-  var _this6 = this;
-  var selectedFeatures = this.getSelected();
-  if (selectedFeatures.length === 0) return;
-  var createdFeatures = [];
-  var featuresUncombined = [];
-  var _loop = function _loop() {
-    var feature = selectedFeatures[i];
-    if (_this6.isInstanceOf("MultiFeature", feature)) {
-      feature.getFeatures().forEach(function (subFeature) {
-        _this6.addFeature(subFeature);
-        subFeature.properties = feature.properties;
-        createdFeatures.push(subFeature.toGeoJSON());
-        _this6.select([subFeature.id]);
-      });
-      _this6.deleteFeature(feature.id, {
-        silent: true
-      });
-      featuresUncombined.push(feature.toGeoJSON());
-    }
-  };
-  for (var i = 0; i < selectedFeatures.length; i++) {
-    _loop();
-  }
-  if (createdFeatures.length > 1) {
-    this.map.fire(events.UNCOMBINE_FEATURES, {
-      createdFeatures: createdFeatures,
-      deletedFeatures: featuresUncombined
-    });
-  }
-  this.fireActionable();
-};
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var drawUtils = {
-  getMatchingVertices: function getMatchingVertices(vertex, featureId, allFeatures, map) {
-    // number of decimals should probably be dynamic depending on zoom level
-    var decimals = 5;
-    var matchingVertices = [];
-    var v_lng = vertex[0].toFixed(decimals);
-    var v_lat = vertex[1].toFixed(decimals);
-    for (var i = 0; i < allFeatures.length; i++) {
-      if (allFeatures[i].id !== featureId) {
-        for (var k = 0; k < allFeatures[i].geometry.coordinates.length; k++) {
-          for (var m = 0; m < allFeatures[i].geometry.coordinates[k].length; m++) {
-            if (v_lng === allFeatures[i].geometry.coordinates[k][m][0].toFixed(decimals) && v_lat === allFeatures[i].geometry.coordinates[k][m][1].toFixed(decimals)) {
-              matchingVertices.push({
-                featureId: allFeatures[i].id,
-                coord_path: k + "." + m,
-                //feature: map.getFeature(allFeatures[i].id),
-                lng: allFeatures[i].geometry.coordinates[k][m][0],
-                lat: allFeatures[i].geometry.coordinates[k][m][1]
-              });
-            }
-          }
-        }
-      }
-    }
-    return matchingVertices;
-  },
-  getDrawInstance: function getDrawInstance(map) {
-    for (var i = map._controls.length - 1; i >= 0; i--) {
-      var _map$_controls$i, _map$_controls$i$mode;
-      if (((_map$_controls$i = map._controls[i]) === null || _map$_controls$i === void 0 ? void 0 : (_map$_controls$i$mode = _map$_controls$i.modes) === null || _map$_controls$i$mode === void 0 ? void 0 : _map$_controls$i$mode.SIMPLE_SELECT) === "simple_select") {
-        return map._controls[i];
-      }
-    }
-    return null;
-  }
-};
-
-/**
- * Code from https://github.com/mapbox/mapbox-gl-draw
- * and licensed under ISC
- */
-var isVertex = isOfMetaType(meta.VERTEX);
-var isMidpoint = isOfMetaType(meta.MIDPOINT);
-var DirectSelect = {};
-
-// INTERNAL FUNCTIONS
-
-DirectSelect.fireUpdate = function () {
-  this.map.fire(events.UPDATE, {
-    action: updateActions.CHANGE_COORDINATES,
-    features: this.getSelected().map(function (f) {
-      return f.toGeoJSON();
-    })
-  });
-};
-DirectSelect.fireActionable = function (state) {
-  this.setActionableState({
-    combineFeatures: false,
-    uncombineFeatures: false,
-    trash: state.selectedCoordPaths.length > 0
-  });
-};
-DirectSelect.startDragging = function (state, e) {
-  this.map.dragPan.disable();
-  state.canDragMove = true;
-  state.dragMoveLocation = e.lngLat;
-};
-DirectSelect.stopDragging = function (state) {
-  this.map.dragPan.enable();
-  state.dragMoving = false;
-  state.canDragMove = false;
-  state.dragMoveLocation = null;
-};
-DirectSelect.onVertex = function (state, e) {
-  this.startDragging(state, e);
-  var about = e.featureTarget.properties;
-  var selectedIndex = state.selectedCoordPaths.indexOf(about.coord_path);
-  if (!isShiftDown(e) && selectedIndex === -1) {
-    state.selectedCoordPaths = [about.coord_path];
-  } else if (isShiftDown(e) && selectedIndex === -1) {
-    state.selectedCoordPaths.push(about.coord_path);
-  }
-
-  // currently this work with single selected vertices only
-  var allFeatures = drawUtils.getDrawInstance(this.map).getAll();
-  var matchingVertices = drawUtils.getMatchingVertices(e.featureTarget._geometry.coordinates, e.featureTarget.properties.parent, allFeatures.features, this.map);
-  state.groupMove_vertices = matchingVertices;
-  for (var i = 0; i < state.groupMove_vertices.length; i++) {
-    state.groupMove_vertices[i].feature = this.getFeature(state.groupMove_vertices[i].featureId);
-  }
-  var selectedCoordinates = this.pathsToCoordinates(state.featureId, state.selectedCoordPaths);
-  this.setSelectedCoordinates(selectedCoordinates);
-};
-DirectSelect.onMidpoint = function (state, e) {
-  this.startDragging(state, e);
-  var about = e.featureTarget.properties;
-  state.feature.addCoordinate(about.coord_path, about.lng, about.lat);
-  this.fireUpdate();
-  state.selectedCoordPaths = [about.coord_path];
-};
-DirectSelect.pathsToCoordinates = function (featureId, paths) {
-  return paths.map(function (coord_path) {
-    return {
-      feature_id: featureId,
-      coord_path: coord_path
-    };
-  });
-};
-DirectSelect.onFeature = function (state, e) {
-  if (state.selectedCoordPaths.length === 0) this.startDragging(state, e);else this.stopDragging(state);
-};
-DirectSelect.dragFeature = function (state, e, delta) {
-  move_features(this.getSelected(), delta);
-  state.dragMoveLocation = e.lngLat;
-};
-DirectSelect.dragVertex = function (state, e, delta) {
-  var selectedCoords = state.selectedCoordPaths.map(function (coord_path) {
-    return state.feature.getCoordinate(coord_path);
-  });
-  var selectedCoordPoints = selectedCoords.map(function (coords) {
-    return {
-      type: geojsonTypes.FEATURE,
-      properties: {},
-      geometry: {
-        type: geojsonTypes.POINT,
-        coordinates: coords
-      }
-    };
-  });
-  var constrainedDelta = constrain_feature_movement(selectedCoordPoints, delta);
-  for (var i = 0; i < selectedCoords.length; i++) {
-    var coord = selectedCoords[i];
-    state.feature.updateCoordinate(state.selectedCoordPaths[i], coord[0] + constrainedDelta.lng, coord[1] + constrainedDelta.lat);
-    for (var k = 0; k < state.groupMove_vertices.length; k++) {
-      var coord_path_m = state.groupMove_vertices[k].coord_path.split(".");
-      if (typeof coord_path_m[0] !== "undefined" && typeof coord_path_m[1] !== "undefined" && typeof state.groupMove_vertices[k].feature.coordinates[coord_path_m[0]] !== "undefined" && typeof state.groupMove_vertices[k].feature.coordinates[coord_path_m[0]][coord_path_m[1]] !== "undefined") {
-        var coord_m = state.groupMove_vertices[k].feature.coordinates[coord_path_m[0]][coord_path_m[1]];
-        state.groupMove_vertices[k].feature.updateCoordinate(state.groupMove_vertices[k].coord_path, coord_m[0] + constrainedDelta.lng, coord_m[1] + constrainedDelta.lat);
-      }
-    }
-  }
-};
-DirectSelect.clickNoTarget = function () {
-  this.changeMode("custom_select");
-};
-DirectSelect.clickInactive = function () {
-  this.changeMode("custom_select");
-};
-DirectSelect.clickActiveFeature = function (state) {
-  state.selectedCoordPaths = [];
-  this.clearSelectedCoordinates();
-  state.feature.changed();
-};
-
-// EXTERNAL FUNCTIONS
-
-DirectSelect.onSetup = function (opts) {
-  var featureId = opts.featureId;
-  var feature = this.getFeature(featureId);
-  if (!feature) {
-    throw new Error("You must provide a featureId to enter direct_select mode");
-  }
-  if (feature.type === geojsonTypes.POINT) {
-    throw new TypeError("direct_select mode doesn't handle point features");
-  }
-  var state = {
-    featureId: featureId,
-    feature: feature,
-    dragMoveLocation: opts.startPos || null,
-    dragMoving: false,
-    canDragMove: false,
-    selectedCoordPaths: opts.coordPath ? [opts.coordPath] : [],
-    groupMove_vertices: opts.groupMove_vertices ? opts.groupMove_vertices : []
-  };
-  this.setSelectedCoordinates(this.pathsToCoordinates(featureId, state.selectedCoordPaths));
-  this.setSelected(featureId);
-  doubleClickZoom.disable(this);
-  this.setActionableState({
-    trash: true
-  });
-  return state;
-};
-DirectSelect.onStop = function () {
-  doubleClickZoom.enable(this);
-  this.clearSelectedCoordinates();
-};
-DirectSelect.toDisplayFeatures = function (state, geojson, push) {
-  if (state.featureId === geojson.properties.id) {
-    geojson.properties.active = activeStates.ACTIVE;
-    push(geojson);
-    createSupplementaryPoints(geojson, {
-      map: this.map,
-      midpoints: true,
-      selectedPaths: state.selectedCoordPaths
-    }).forEach(push);
-  } else {
-    geojson.properties.active = activeStates.INACTIVE;
-    push(geojson);
-  }
-  this.fireActionable(state);
-};
-DirectSelect.onTrash = function (state) {
-  // Uses number-aware sorting to make sure '9' < '10'. Comparison is reversed because we want them
-  // in reverse order so that we can remove by index safely.
-  state.selectedCoordPaths.sort(function (a, b) {
-    return b.localeCompare(a, "en", {
-      numeric: true
-    });
-  }).forEach(function (id) {
-    return state.feature.removeCoordinate(id);
-  });
-  this.fireUpdate();
-  state.selectedCoordPaths = [];
-  this.clearSelectedCoordinates();
-  this.fireActionable(state);
-  if (state.feature.isValid() === false) {
-    this.deleteFeature([state.featureId]);
-    this.changeMode("custom_select", {});
-  }
-};
-DirectSelect.onMouseMove = function (state, e) {
-  // On mousemove that is not a drag, stop vertex movement.
-  var isFeature = isActiveFeature(e);
-  var onVertex = isVertex(e);
-  var noCoords = state.selectedCoordPaths.length === 0;
-  if (isFeature && noCoords) this.updateUIClasses({
-    mouse: cursors.MOVE
-  });else if (onVertex && !noCoords) this.updateUIClasses({
-    mouse: cursors.MOVE
-  });else this.updateUIClasses({
-    mouse: cursors.NONE
-  });
-  this.stopDragging(state);
-};
-DirectSelect.onMouseOut = function (state) {
-  // As soon as you mouse leaves the canvas, update the feature
-  if (state.dragMoving) this.fireUpdate();
-};
-DirectSelect.onTouchStart = DirectSelect.onMouseDown = function (state, e) {
-  if (isVertex(e)) return this.onVertex(state, e);
-  if (isActiveFeature(e)) return this.onFeature(state, e);
-  if (isMidpoint(e)) return this.onMidpoint(state, e);
-};
-DirectSelect.onDrag = function (state, e) {
-  if (state.canDragMove !== true) return;
-  state.dragMoving = true;
-  e.originalEvent.stopPropagation();
-  var delta = {
-    lng: e.lngLat.lng - state.dragMoveLocation.lng,
-    lat: e.lngLat.lat - state.dragMoveLocation.lat
-  };
-  if (state.selectedCoordPaths.length > 0) this.dragVertex(state, e, delta);else this.dragFeature(state, e, delta);
-  state.dragMoveLocation = e.lngLat;
-};
-DirectSelect.onClick = function (state, e) {
-  if (noTarget(e)) return this.clickNoTarget(state, e);
-  if (isActiveFeature(e)) return this.clickActiveFeature(state, e);
-  if (isInactiveFeature(e)) return this.clickInactive(state, e);
-  this.stopDragging(state);
-};
-DirectSelect.onTap = function (state, e) {
-  if (noTarget(e)) return this.clickNoTarget(state, e);
-  if (isActiveFeature(e)) return this.clickActiveFeature(state, e);
-  if (isInactiveFeature(e)) return this.clickInactive(state, e);
-};
-DirectSelect.onTouchEnd = DirectSelect.onMouseUp = function (state) {
-  if (state.dragMoving) {
-    this.fireUpdate();
-  }
-  this.stopDragging(state);
-};
-
 /**
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
-var MlFeatureEditor = function (props) {
+var useFeatureEditor = function (props) {
     var draw = React.useRef();
     var mapHook = useMap({
         mapId: props.mapId,
@@ -3354,14 +2075,15 @@ var MlFeatureEditor = function (props) {
     });
     var drawToolsInitialized = React.useRef(false);
     var _a = React.useState(false), drawToolsReady = _a[0], setDrawToolsReady = _a[1];
-    var modeChangeHandler = function (e) {
+    var _b = React.useState(), feature = _b[0], setFeature = _b[1];
+    var modeChangeHandler = React.useCallback(function (e) {
         console.log('MlFeatureEditor mode change to ' + e.mode);
         //setDrawMode(e.mode);
         if (typeof props.onFinish === 'function' &&
-            (e.mode === 'custom_select' || e.mode === 'simple_select')) {
+            (e.mode === 'simple_select')) {
             props.onFinish();
         }
-    };
+    }, [props.onFinish]);
     React.useEffect(function () {
         var _a;
         if (mapHook.map && !drawToolsInitialized.current) {
@@ -3376,20 +2098,16 @@ var MlFeatureEditor = function (props) {
             }
             draw.current = new MapboxDraw__default["default"]({
                 displayControlsDefault: false,
-                defaultMode: props.mode || 'custom_select',
+                defaultMode: props.mode || 'simple_select',
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
-                modes: Object.assign({
-                    custom_polygon: CustomPolygonMode,
-                    custom_select: CustomSelectMode,
-                    custom_direct_select: DirectSelect,
-                }, MapboxDraw__default["default"].modes),
+                modes: Object.assign({}, MapboxDraw__default["default"].modes),
             });
             mapHook.map.addControl(draw.current, 'top-left', mapHook.componentId);
             mapHook.map.on('draw.modechange', modeChangeHandler, mapHook.componentId);
             setDrawToolsReady(true);
         }
-    }, [mapHook.map, props, drawToolsInitialized]);
+    }, [mapHook.map, props, drawToolsInitialized, modeChangeHandler]);
     React.useEffect(function () {
         if (!mapHook.map || !drawToolsReady)
             return;
@@ -3397,8 +2115,9 @@ var MlFeatureEditor = function (props) {
             var _a, _b;
             if (draw.current) {
                 // update drawnFeatures state object
+                var currentFeatureCollection = (_b = (_a = draw.current).getAll) === null || _b === void 0 ? void 0 : _b.call(_a);
+                setFeature(currentFeatureCollection === null || currentFeatureCollection === void 0 ? void 0 : currentFeatureCollection.features);
                 if (typeof props.onChange === 'function') {
-                    var currentFeatureCollection = (_b = (_a = draw.current).getAll) === null || _b === void 0 ? void 0 : _b.call(_a);
                     props.onChange(currentFeatureCollection === null || currentFeatureCollection === void 0 ? void 0 : currentFeatureCollection.features);
                 }
             }
@@ -3415,17 +2134,38 @@ var MlFeatureEditor = function (props) {
     React.useEffect(function () {
         var _a;
         if (draw.current && ((_a = props.geojson) === null || _a === void 0 ? void 0 : _a.geometry)) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             draw.current.set({ type: 'FeatureCollection', features: [props.geojson] });
         }
     }, [props.geojson, drawToolsReady]);
     React.useEffect(function () {
-        if (props.mode && draw.current) {
+        var _a, _b, _c, _d;
+        if (props.mode && draw.current && ((_b = (_a = draw.current) === null || _a === void 0 ? void 0 : _a.getMode) === null || _b === void 0 ? void 0 : _b.call(_a)) !== props.mode) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            draw.current.changeMode(props.mode);
+            (_d = (_c = draw.current) === null || _c === void 0 ? void 0 : _c.changeMode) === null || _d === void 0 ? void 0 : _d.call(_c, props.mode);
+            if (props.mode !== 'simple_select' && props.mode !== 'direct_select') {
+                draw.current.set({ type: 'FeatureCollection', features: [] });
+            }
         }
-    }, [props.mode]);
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }, [props.mode, mapHook.map]);
+    return {
+        feature: feature,
+        drawToolsReady: drawToolsReady,
+        draw: draw.current
+    };
+};
+
+var MlFeatureEditor = function (props) {
+    useFeatureEditor({
+        mode: props.mode,
+        geojson: props.geojson,
+        onChange: props.onChange,
+        onFinish: props.onFinish,
+        mapId: props.mapId,
+    });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null));
 };
 
 var legalLayerTypes = [
@@ -3571,6 +2311,14 @@ function useLayer(props) {
             layerPaintConfRef.current = paintString;
         }
     }, [props.options, mapHook.map]);
+    React.useEffect(function () {
+        if (!props.insertBeforeLayer ||
+            !mapHook.map ||
+            !mapHook.map.getLayer(props.insertBeforeLayer) ||
+            !mapHook.map.getLayer(layerId.current))
+            return;
+        mapHook.map.moveLayer(layerId.current, props.insertBeforeLayer);
+    }, [mapHook.map, props.insertBeforeLayer]);
     React.useEffect(function () {
         return function () {
             initializedRef.current = false;
@@ -3869,7 +2617,7 @@ function getUnitLabel(measureType) {
 }
 var MlMeasureTool = function (props) {
     var _a = React.useState(0), length = _a[0], setLength = _a[1];
-    var _b = React.useState([undefined]), currentFeatures = _b[0], setCurrentFeatures = _b[1];
+    var _b = React.useState([]), currentFeatures = _b[0], setCurrentFeatures = _b[1];
     React.useEffect(function () {
         if (currentFeatures[0]) {
             setLength(props.measureType === "polygon"
@@ -3880,7 +2628,7 @@ var MlMeasureTool = function (props) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(MlFeatureEditor, { onChange: function (features) {
                 setCurrentFeatures(features);
-            }, mode: props.measureType === "polygon" ? "custom_polygon" : "draw_line_string" }),
+            }, mode: props.measureType === "polygon" ? "draw_polygon" : "draw_line_string" }),
         length.toFixed(2),
         " ",
         getUnitLabel(props.unit),
@@ -6429,16 +5177,17 @@ var MlWmsLoader = function (props) {
         setFeatureInfoLngLat(undefined);
         setFeatureInfoContent(undefined);
     };
-    var getFeatureInfo = React.useCallback(
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    function (ev) {
+    var getFeatureInfo = React.useCallback(function (ev) {
         var _a, _b, _c;
         if (!mapHook.map)
             return;
         resetFeatureInfo();
-        var _bounds = mapHook.map.getBounds();
-        var _sw = lngLatToMeters(_bounds._sw);
-        var _ne = lngLatToMeters(_bounds._ne);
+        var unprojected = mapHook.map.unproject([ev.point.x, ev.point.y]);
+        var point = turf__namespace.point([unprojected.lng, unprojected.lat]);
+        var buffered = turf__namespace.buffer(point, 50, { units: 'meters' });
+        var _bbox = turf__namespace.bbox(buffered);
+        var _sw = lngLatToMeters({ lng: _bbox[0], lat: _bbox[1] });
+        var _ne = lngLatToMeters({ lng: _bbox[2], lat: _bbox[3] });
         var bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
         var _getFeatureInfoUrlParams = {
             REQUEST: 'GetFeatureInfo',
@@ -6454,15 +5203,15 @@ var MlWmsLoader = function (props) {
             QUERY_LAYERS: layers
                 .map(function (layer) { return (layer.visible && layer.queryable ? layer.Name : undefined); })
                 .filter(function (n) { return n; }),
-            WIDTH: mapHook === null || mapHook === void 0 ? void 0 : mapHook.map._container.clientWidth,
-            HEIGHT: mapHook === null || mapHook === void 0 ? void 0 : mapHook.map._container.clientHeight,
+            WIDTH: 100,
+            HEIGHT: 100,
             srs: 'EPSG:3857',
             CRS: 'EPSG:3857',
             version: '1.3.0',
-            X: ev.point.x,
-            Y: ev.point.y,
-            I: ev.point.x,
-            J: ev.point.y,
+            X: 50,
+            Y: 50,
+            I: 50,
+            J: 50,
             buffer: '50',
         };
         var _gfiUrl = getFeatureInfoUrl;
@@ -6562,6 +5311,7 @@ var MlWmsLoader = function (props) {
             React__default["default"].createElement(material.Box, null, error))),
         wmsUrl && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(ListItem__default["default"], { secondaryAction: React__default["default"].createElement(React__default["default"].Fragment, null,
+                    props.buttons,
                     props.featureInfoEnabled && (React__default["default"].createElement(IconButton__default["default"], { sx: {
                             padding: '4px',
                             marginTop: '-3px',
@@ -7166,11 +5916,11 @@ var MlOrderLayers = function (props) {
     var _a;
     return (React__default["default"].createElement(React__default["default"].Fragment, null, (_a = props === null || props === void 0 ? void 0 : props.layerIds) === null || _a === void 0 ? void 0 : _a.map(function (layer, idx) {
         var _a;
-        return (React__default["default"].createElement(MlLayer, __assign({ layerId: 'order-' + layer, options: {
+        return (React__default["default"].createElement(MlLayer, __assign({ layerId: layer, options: {
                 display: 'none',
             }, key: layer }, (idx > 0
             ? {
-                insertBeforeLayer: 'order-' + ((_a = props === null || props === void 0 ? void 0 : props.layerIds) === null || _a === void 0 ? void 0 : _a[idx - 1]),
+                insertBeforeLayer: (_a = props === null || props === void 0 ? void 0 : props.layerIds) === null || _a === void 0 ? void 0 : _a[idx - 1],
             }
             : { insertBeforeLayer: props.insertBeforeLayer }))));
     })));
@@ -7180,6 +5930,41 @@ MlOrderLayers.defaultProps = {
     insertBeforeLayer: undefined,
 };
 
+/**
+ * Create Terrain Layer Component
+ *
+ */
+var MlTerrainLayer = function (props) {
+    var mapHook = useMap({ mapId: 'map_1' });
+    React.useEffect(function () {
+        if (!mapHook.map)
+            return;
+        if (!mapHook.map.map.getSource('terrain')) {
+            mapHook.map.map.addSource('terrain', __assign({ type: 'raster-dem', encoding: 'mapbox', maxzoom: 12, minzoom: 4 }, props.sourceOptions));
+        }
+        mapHook.map.map.setTerrain(__assign({ source: 'terrain', exaggeration: 1 }, props.terrainOptions));
+        mapHook.map.addLayer({
+            id: 'hills',
+            type: 'hillshade',
+            source: 'terrain',
+            layout: { visibility: 'visible' },
+            paint: { 'hillshade-shadow-color': 'rgba(71,59,36,0.4)' },
+        });
+        return function () {
+            var _a, _b;
+            (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setTerrain(null);
+            if ((_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.map.getSource('terrain')) {
+                mapHook.map.map.removeLayer('hills');
+                mapHook.map.map.removeSource('terrain');
+            }
+        };
+    }, [mapHook.map, props.sourceOptions, props.terrainOptions]);
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+};
+MlTerrainLayer.defaultProps = {
+    mapId: undefined,
+};
+
 /**
  * Component template
  *
@@ -7782,13 +6567,9 @@ function LayerListItem(_a) {
         return undefined;
     }, [layerComponent]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        !((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(material.ListItem, { sx: {
-                paddingRight: configurable ? '56px' : 0,
-                paddingLeft: 0,
-                paddingTop: 0,
-                paddingBottom: '4px',
-            }, secondaryAction: configurable && ((_g = Object.keys(paintProps)) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(material.IconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "visibility", onClick: function () {
+        !((_f = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _f === void 0 ? void 0 : _f.layers) && (React__default["default"].createElement(material.ListItem, { sx: __assign({ paddingRight: configurable ? '56px' : 0, paddingLeft: 0, paddingTop: 0, paddingBottom: '4px' }, props.listItemSx), secondaryAction: configurable && ((_g = Object.keys(paintProps)) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null, props === null || props === void 0 ? void 0 :
+                props.buttons,
+                React__default["default"].createElement(material.IconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "settings", onClick: function () {
                         setPaintPropsFormVisible(function (current) {
                             return !current;
                         });
@@ -7817,7 +6598,7 @@ function LayerListItem(_a) {
                 React__default["default"].createElement(material.Checkbox, { disabled: !visible, checked: localVisible, sx: { padding: 0 }, onClick: function () {
                         setLocalVisible(function (val) { return !val; });
                     } })),
-            React__default["default"].createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description }))),
+            React__default["default"].createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } }))),
         _layerComponent,
         !((_h = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _h === void 0 ? void 0 : _h.layers) &&
             Object.keys(paintProps).length > 0 &&
@@ -7829,26 +6610,68 @@ LayerListItem.defaultProps = {
     type: 'layer',
     visible: true,
     showDeleteButton: false,
+    buttons: React__default["default"].createElement(React__default["default"].Fragment, null),
 };
 
 function LayerListItemFactory(props) {
     var _a, _b;
     var layerContext = useLayerContext();
+    var orderLayers = React.useMemo(function () {
+        var layerIds = __spreadArray(__spreadArray([
+            'order-background'
+        ], __spreadArray([], layerContext.layers, true).map(function (_el, idx) { return 'content_order_' + idx; }), true), [
+            'order-labels',
+        ], false);
+        return layerIds.reverse();
+    }, [layerContext.layers]);
+    var layers = React.useMemo(function () {
+        if (props.layers)
+            return props.layers;
+        if (layerContext === null || layerContext === void 0 ? void 0 : layerContext.layers)
+            return layerContext.layers;
+        return [];
+    }, [props.layers, layerContext.layers]);
+    var setLayers = React.useMemo(function () {
+        if (props.setLayers)
+            return props.setLayers;
+        return layerContext.setLayers;
+    }, [props.setLayers, layerContext.setLayers]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(MlOrderLayers, { layerIds: ['labels', 'content', 'background'] }),
-        ((_a = layerContext === null || layerContext === void 0 ? void 0 : layerContext.backgroundLayers) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(LayerListItem, { layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.backgroundLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-background' })), setLayerState: function (state) {
-                layerContext.setBackgroundLayers(state === null || state === void 0 ? void 0 : state.layers);
-            }, visible: true, configurable: true, type: "layer", name: "Background" })),
-        props.layers.map(function (layer, idx) {
+        React__default["default"].createElement(MlOrderLayers, { layerIds: orderLayers, insertBeforeLayer: '_background' }),
+        ((_a = layerContext === null || layerContext === void 0 ? void 0 : layerContext.symbolLayers) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(LayerListItem, { key: 'background_labels', layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.symbolLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-labels' })), setLayerState: function (state) {
+                return layerContext.setSymbolLayers(state === null || state === void 0 ? void 0 : state.layers);
+            }, visible: true, configurable: true, type: "layer", name: "Labels" })),
+        __spreadArray([], layers, true).map(function (layer, idx) {
             var _a, _b;
             if (!(layer === null || layer === void 0 ? void 0 : layer.id))
                 return null;
             switch (layer.type) {
                 case 'geojson':
                     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(LayerListItem, { key: layer.id, name: (layer === null || layer === void 0 ? void 0 : layer.name) || ((_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.type) + ' layer' || 'unnamed layer', layerComponent: React__default["default"].createElement(MlGeoJsonLayer, __assign({}, layer.config, { mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: (props === null || props === void 0 ? void 0 : props.insertBeforeLayer) || 'order-content' })), setLayerState: function (layerConfig) {
-                                var _a;
-                                return (_a = props.setLayers) === null || _a === void 0 ? void 0 : _a.call(props, function (current) {
+                        React__default["default"].createElement(LayerListItem, { key: layer.id, name: (layer === null || layer === void 0 ? void 0 : layer.name) || ((_a = layer === null || layer === void 0 ? void 0 : layer.config) === null || _a === void 0 ? void 0 : _a.type) + ' layer' || 'unnamed layer', layerComponent: React__default["default"].createElement(MlGeoJsonLayer, __assign({}, layer.config, { mapId: props === null || props === void 0 ? void 0 : props.mapId, layerId: layer.id, insertBeforeLayer: 'content_order_' + (layers.length - 1 - idx) })), buttons: React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(material.IconButton, { disabled: idx === layers.length - 1, onClick: function () {
+                                        layerContext.moveDown(layer.id || '');
+                                    }, sx: {
+                                        padding: '4px',
+                                        marginTop: '-3px',
+                                        background: 'none',
+                                        "&:hover": {
+                                            background: "none"
+                                        }
+                                    } },
+                                    React__default["default"].createElement(ArrowCircleDownIcon__default["default"], null)),
+                                React__default["default"].createElement(material.IconButton, { disabled: idx === 0, onClick: function () {
+                                        layerContext.moveUp(layer.id || '');
+                                    }, sx: {
+                                        padding: '4px',
+                                        marginTop: '-3px',
+                                        background: 'none',
+                                        "&:hover": {
+                                            background: "none"
+                                        }
+                                    } },
+                                    React__default["default"].createElement(ArrowCircleUpIcon__default["default"], null))), setLayerState: function (layerConfig) {
+                                return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                     var _layers = __spreadArray([], current, true);
                                     if (layerConfig === false) {
                                         _layers.splice(idx, 1);
@@ -7861,9 +6684,8 @@ function LayerListItemFactory(props) {
                             }, configurable: true, showDeleteButton: true })));
                 case 'wms':
                     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(MlWmsLoader, __assign({}, layer.config, { key: layer.id, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: (props === null || props === void 0 ? void 0 : props.insertBeforeLayer) || 'order-content', onConfigChange: function (layerConfig) {
-                                var _a;
-                                (_a = props === null || props === void 0 ? void 0 : props.setLayers) === null || _a === void 0 ? void 0 : _a.call(props, function (current) {
+                        React__default["default"].createElement(MlWmsLoader, __assign({}, layer.config, { key: layer.id, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'content_order_' + (layers.length - 1 - idx), onConfigChange: function (layerConfig) {
+                                setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                     var _layers = __spreadArray([], current, true);
                                     if (layerConfig === false) {
                                         _layers.splice(idx, 1);
@@ -7874,27 +6696,48 @@ function LayerListItemFactory(props) {
                                     return _layers;
                                 });
                             }, featureInfoActive: ((_b = layer === null || layer === void 0 ? void 0 : layer.config) === null || _b === void 0 ? void 0 : _b.featureInfoActive) || false, setFeatureInfoActive: function (updateFunction) {
-                                var _a;
-                                (_a = props === null || props === void 0 ? void 0 : props.setLayers) === null || _a === void 0 ? void 0 : _a.call(props, function (current) {
+                                setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                     var _a;
                                     var _layers = __spreadArray([], current, true);
                                     if (typeof updateFunction === 'function') {
-                                        _layers[idx].config.featureInfoActive = updateFunction(((_a = _layers[idx].config) === null || _a === void 0 ? void 0 : _a.featureInfoActive) || false);
+                                        _layers[idx].config.featureInfoActive =
+                                            updateFunction(((_a = _layers[idx].config) === null || _a === void 0 ? void 0 : _a.featureInfoActive) || false);
                                     }
                                     return _layers;
                                 });
-                            }, showDeleteButton: true }))));
+                            }, showDeleteButton: true, buttons: React__default["default"].createElement(React__default["default"].Fragment, null,
+                                React__default["default"].createElement(material.IconButton, { disabled: idx === layers.length - 1, onClick: function () {
+                                        layerContext.moveDown(layer.id || '');
+                                    }, sx: {
+                                        padding: '4px',
+                                        marginTop: '-3px',
+                                        background: 'none',
+                                        "&:hover": {
+                                            background: "none"
+                                        }
+                                    } },
+                                    React__default["default"].createElement(ArrowCircleDownIcon__default["default"], null)),
+                                React__default["default"].createElement(material.IconButton, { disabled: idx === 0, onClick: function () {
+                                        layerContext.moveUp(layer.id || '');
+                                    }, sx: {
+                                        padding: '4px',
+                                        marginTop: '-3px',
+                                        background: 'none',
+                                        "&:hover": {
+                                            background: "none"
+                                        }
+                                    } },
+                                    React__default["default"].createElement(ArrowCircleUpIcon__default["default"], null))) }))));
                 default:
                     return null;
             }
         }),
-        ((_b = layerContext === null || layerContext === void 0 ? void 0 : layerContext.symbolLayers) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React__default["default"].createElement(LayerListItem, { layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.symbolLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-labels' })), setLayerState: function (state) {
-                return layerContext.setSymbolLayers(state === null || state === void 0 ? void 0 : state.layers);
-            }, visible: true, configurable: true, type: "layer", name: "Labels" }))));
+        ((_b = layerContext === null || layerContext === void 0 ? void 0 : layerContext.backgroundLayers) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React__default["default"].createElement(LayerListItem, { key: 'background_geometry', layerComponent: React__default["default"].createElement(MlVectorTileLayer, __assign({}, layerContext.vtLayerConfig, { layers: layerContext.backgroundLayers, mapId: props === null || props === void 0 ? void 0 : props.mapId, insertBeforeLayer: 'order-background' })), setLayerState: function (state) {
+                layerContext.setBackgroundLayers(state === null || state === void 0 ? void 0 : state.layers);
+            }, visible: true, configurable: true, type: "layer", name: "Background" }))));
 }
 LayerListItemFactory.defaultProps = {
     mapId: undefined,
-    layers: [],
 };
 
 var types = [
@@ -20987,6 +19830,40 @@ SelectStyleButton.defaultProps = {
     defaultStyles: true,
 };
 
+var actions = [
+    { icon: React__default["default"].createElement(PictureAsPdfIcon__default["default"], null), name: 'Create PDF' },
+    { icon: React__default["default"].createElement(DesignServicesIcon__default["default"], null), name: 'Sketch' },
+    { icon: React__default["default"].createElement(LayersIcon__default["default"], null), name: 'Layers' },
+    { icon: React__default["default"].createElement(WallpaperIcon__default["default"], null), name: 'Background' },
+];
+/*
+ * SpeedDial Button, which opens up options for Background, Layers, Sketch and Create PDF
+ */
+var SpeedDial = function () {
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var handleOpen = function (_event, reason) {
+        if (reason === 'toggle') {
+            setOpen(true);
+        }
+    };
+    var handleClose = function () { return setOpen(false); };
+    var theme = getTheme('light');
+    return (React__default["default"].createElement(Box__default["default"], { sx: {
+            height: 330,
+            transform: 'translateZ(0px)',
+            flexGrow: 1,
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            width: '100px',
+            zIndex: '1000',
+        } },
+        React__default["default"].createElement(MuiSpeedDial__default["default"], { ariaLabel: "SpeedDial tooltip example", sx: { position: 'absolute', bottom: 16, right: 16 }, icon: open ? React__default["default"].createElement(CloseIcon__default["default"], { fontSize: "large" }) : React__default["default"].createElement(MoreVertIcon__default["default"], { fontSize: "large" }), onClick: open ? handleClose : handleOpen, onOpen: handleOpen, open: open }, actions.map(function (action) { return (React__default["default"].createElement(SpeedDialAction__default["default"], { key: action.name, icon: action.icon, tooltipTitle: action.name, tooltipOpen: true, onClick: handleClose, FabProps: { sx: { color: theme.palette.secondary.main } } })); }))));
+};
+SpeedDial.defaultProps = {
+    mapId: undefined,
+};
+
 exports.AddLayerButton = AddLayerButton;
 exports.AddLayerPopup = AddLayerPopup;
 exports.ColorPicker = PaintPropsColorPicker;
@@ -21034,6 +19911,7 @@ exports.MlScaleReference = MlScaleReference;
 exports.MlShareMapState = MlShareMapState;
 exports.MlSpatialElevationProfile = MlSpatialElevationProfile;
 exports.MlTemporalController = MlTemporalController;
+exports.MlTerrainLayer = MlTerrainLayer;
 exports.MlTransitionGeoJsonLayer = MlTransitionGeoJsonLayer;
 exports.MlVectorTileLayer = MlVectorTileLayer;
 exports.MlWmsFeatureInfoPopup = MlWmsFeatureInfoPopup;
@@ -21049,12 +19927,14 @@ exports.Sidebar = Sidebar;
 exports.SimpleDataContext = SimpleDataContext;
 exports.SimpleDataProvider = SimpleDataProvider;
 exports.SolarizedStyle = SolarizedStyle;
+exports.SpeedDial = SpeedDial;
 exports.TopToolbar = TopToolbar;
 exports.UploadButton = UploadButton;
 exports.WmsLayerForm = WmsLayerForm;
 exports.getTheme = getTheme;
 exports.useCameraFollowPath = useCameraFollowPath;
 exports.useExportMap = useExportMap;
+exports.useFeatureEditor = useFeatureEditor;
 exports.useFilterData = useFilterData;
 exports.useGpx = useGpx;
 exports.useLayer = useLayer;