@mapcomponents/react-maplibre 0.1.85 → 0.1.86

package/dist/index.esm.js

@@ -27,6 +27,7 @@ var Divider = require('@mui/material/Divider');
 var useMediaQuery = require('@mui/material/useMediaQuery');
 var syncMove = require('@mapbox/mapbox-gl-sync-move');
 var Paper = require('@mui/material/Paper');
+var xmldom = require('@xmldom/xmldom');
 var helpers = require('@turf/helpers');
 var WMSCapabilities = require('wms-capabilities');
 var InfoIcon = require('@mui/icons-material/Info');
@@ -109,6 +110,7 @@ var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
 var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
 var syncMove__default = /*#__PURE__*/_interopDefaultLegacy(syncMove);
 var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
+var xmldom__namespace = /*#__PURE__*/_interopNamespace(xmldom);
 var WMSCapabilities__default = /*#__PURE__*/_interopDefaultLegacy(WMSCapabilities);
 var InfoIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoIcon);
 var List__default = /*#__PURE__*/_interopDefaultLegacy(List);
@@ -783,7 +785,18 @@ var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode ===
             },
             topToolbar: { barColor: '#000' },
             navigation: { navColor: '#313131', navHover: '#747577' },
-            compass: { compColor: '#313131', compHover: '#747577' },
+            GPS: {
+                GPSActiveColor: '#fff',
+                GPSInactiveColor: '#fff',
+                GPSActiveBackgroundColor: '#747577',
+            },
+            compass: {
+                compColor: '#313131',
+                compHover: '#747577',
+                compStroke: '#d3dce1',
+                compNorth: '#cf003f',
+                compSouth: '#d3dcf0',
+            },
         }
         : {
             primary: {
@@ -796,7 +809,18 @@ var getDesignTokens = function (mode) { return (__assign(__assign({}, (mode ===
             },
             topToolbar: { barColor: '#fff' },
             navigation: { navColor: '#fff', navHover: '#f5f5f5' },
-            compass: { compColor: '#fff', compHover: '#f5f5f5' },
+            GPS: {
+                GPSActiveColor: '#009EE0',
+                GPSInactiveColor: '#000',
+                GPSActiveBackgroundColor: '#fff',
+            },
+            compass: {
+                compColor: '#fff',
+                compHover: '#f5f5f5',
+                compStroke: '#009ee0',
+                compNorth: '#cf003f',
+                compSouth: '#d3dcf0',
+            },
         })) })); };
 var getTheme = function (mode) {
     var _a;
@@ -1359,8 +1383,6 @@ var MlCenterPosition = function (props) {
 };
 MlCenterPosition.defaultProps = {
     mapId: undefined,
-    onColor: '#ececec',
-    offColor: '#666',
 };
 
 /**
@@ -2763,7 +2785,12 @@ var MlFollowGps = function (props) {
         isFollowed && userLocationGeoJson && (React__default["default"].createElement(MlGeoJsonLayer, { geojson: userLocationGeoJson, type: 'circle', paint: __assign({ 'circle-color': '#009ee0', 'circle-radius': 5, 'circle-stroke-color': '#fafaff', 'circle-stroke-width': 1 }, props.circlePaint), insertBeforeLayer: props.insertBeforeLayer })),
         React__default["default"].createElement(material.Button, { variant: "navtools", sx: {
                 zIndex: 1002,
-                color: isFollowed ? props.onColor : props.offColor,
+                color: isFollowed
+                    ? function (theme) { return theme.palette.GPS.GPSActiveColor; }
+                    : function (theme) { return theme.palette.GPS.GPSInactiveColor; },
+                backgroundColor: isFollowed
+                    ? function (theme) { return theme.palette.GPS.GPSActiveBackgroundColor; }
+                    : function (theme) { return theme.palette.navigation.navColor; },
             }, disabled: locationAccessDenied, onClick: function () {
                 setIsFollowed(!isFollowed);
             } },
@@ -2771,7 +2798,6 @@ var MlFollowGps = function (props) {
 };
 MlFollowGps.defaultProps = {
     mapId: undefined,
-    onColor: '#ececec',
     offColor: '#666',
     showAccuracyCircle: true,
     showUserLocation: true,
@@ -2934,16 +2960,29 @@ var CompassBox = material.styled(material.Box)(function (_a) {
         },
         _b.circle = {
             fill: theme.palette.compass.compColor,
+            stroke: theme.palette.compass.compStroke,
+        },
+        _b.path = {
+            fill: theme.palette.compass.compStroke,
         },
         _b['&:hover circle'] = {
             fill: theme.palette.compass.compHover,
         },
         _b);
 });
-var NeedleBox = material.styled(material.Box)({
-    position: 'absolute',
-    right: '21.4px',
-    top: '6px',
+var NeedleBox = material.styled(material.Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        position: 'absolute',
+        right: '21.4px',
+        top: '6px',
+        'path:nth-of-type(2)': {
+            fill: theme.palette.compass.compSouth,
+        },
+        'path:nth-of-type(1)': {
+            fill: theme.palette.compass.compNorth,
+        },
+    });
 });
 /**
  * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
@@ -3042,7 +3081,7 @@ var MlNavigationTools = function (props) {
     }, [mapHook.map]);
     return (React__default["default"].createElement(Box__default["default"], { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column', right: mediaIsMobile ? '15px' : '25px', bottom: mediaIsMobile ? '20px' : '30px' }, (mediaIsMobile ? { margin: '80px 10px 50px 10px' } : { marginTop: '50px' })), props.sx) },
         React__default["default"].createElement(MlNavigationCompass, null),
-        props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch }, pitch < 59 ? '2D' : '3D')),
+        props.show3DButton && (React__default["default"].createElement(Button__default["default"], { variant: "navtools", onClick: adjustPitch }, pitch < 59 ? '3D' : '2D')),
         props.showFollowGpsButton && React__default["default"].createElement(MlFollowGps, null),
         props.showCenterLocationButton && React__default["default"].createElement(MlCenterPosition, null),
         React__default["default"].createElement(ButtonGroup__default["default"], { orientation: "vertical", sx: {
@@ -3898,7 +3937,7 @@ var toGeoJSON = function () {
     if (x) {
       norm(x);
     }
-    return x && x.textContent || "";
+    return x && x.textContent || '';
   }
   // get the contents of multiple text nodes, if present
   function getMulti(x, ys) {
@@ -3917,11 +3956,11 @@ var toGeoJSON = function () {
   }
   // get one coordinate from a coordinate array, if any
   function coord1(v) {
-    return numarray(v.replace(removeSpace, "").split(","));
+    return numarray(v.replace(removeSpace, '').split(','));
   }
   // get all coordinates from a coordinate array as [[],[]]
   function coord(v) {
-    var coords = v.replace(trimSpace, "").split(splitSpace),
+    var coords = v.replace(trimSpace, '').split(splitSpace),
       o = [];
     for (var i = 0; i < coords.length; i++) {
       o.push(coord1(coords[i]));
@@ -3929,11 +3968,11 @@ var toGeoJSON = function () {
     return o;
   }
   function coordPair(x) {
-    var ll = [attrf(x, "lon"), attrf(x, "lat")],
-      ele = get1(x, "ele"),
+    var ll = [attrf(x, 'lon'), attrf(x, 'lat')],
+      ele = get1(x, 'ele'),
       // handle namespaced attribute in browser
-      heartRate = get1(x, "gpxtpx:hr") || get1(x, "hr"),
-      time = get1(x, "time"),
+      heartRate = get1(x, 'gpxtpx:hr') || get1(x, 'hr'),
+      time = get1(x, 'time'),
       e;
     if (ele) {
       e = parseFloat(nodeVal(ele));
@@ -3951,22 +3990,21 @@ var toGeoJSON = function () {
   // create a new feature collection parent object
   function fc() {
     return {
-      type: "FeatureCollection",
+      type: 'FeatureCollection',
       features: []
     };
   }
   var serializer;
-  if (typeof XMLSerializer !== "undefined") {
+  if (typeof XMLSerializer !== 'undefined') {
     /* istanbul ignore next */
     serializer = new XMLSerializer();
   } else {
-    var isNodeEnv = (typeof process === "undefined" ? "undefined" : _typeof(process)) === "object" && !process.browser;
-    var isTitaniumEnv = (typeof Titanium === "undefined" ? "undefined" : _typeof(Titanium)) === "object";
-    if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === "object" && (isNodeEnv || isTitaniumEnv)) {
-      // eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
-      serializer = new (require("xmldom").XMLSerializer)();
+    var isNodeEnv = (typeof process === "undefined" ? "undefined" : _typeof(process)) === 'object' && !process.browser;
+    var isTitaniumEnv = (typeof Titanium === "undefined" ? "undefined" : _typeof(Titanium)) === 'object';
+    if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object' && (isNodeEnv || isTitaniumEnv)) {
+      serializer = xmldom__namespace.XMLSerializer;
     } else {
-      throw new Error("Unable to initialize serializer");
+      throw new Error('Unable to initialize serializer');
     }
   }
   function xml2str(str) {
@@ -3986,32 +4024,32 @@ var toGeoJSON = function () {
         styleMapIndex = {},
         // atomic geospatial types supported by KML - MultiGeometry is
         // handled separately
-        geotypes = ["Polygon", "LineString", "Point", "Track", "gx:Track"],
+        geotypes = ['Polygon', 'LineString', 'Point', 'Track', 'gx:Track'],
         // all root placemarks in the file
-        placemarks = get(doc, "Placemark"),
-        styles = get(doc, "Style"),
-        styleMaps = get(doc, "StyleMap");
+        placemarks = get(doc, 'Placemark'),
+        styles = get(doc, 'Style'),
+        styleMaps = get(doc, 'StyleMap');
       for (var k = 0; k < styles.length; k++) {
         var hash = okhash(xml2str(styles[k])).toString(16);
-        styleIndex["#" + attr(styles[k], "id")] = hash;
+        styleIndex['#' + attr(styles[k], 'id')] = hash;
         styleByHash[hash] = styles[k];
       }
       for (var l = 0; l < styleMaps.length; l++) {
-        styleIndex["#" + attr(styleMaps[l], "id")] = okhash(xml2str(styleMaps[l])).toString(16);
-        var pairs = get(styleMaps[l], "Pair");
+        styleIndex['#' + attr(styleMaps[l], 'id')] = okhash(xml2str(styleMaps[l])).toString(16);
+        var pairs = get(styleMaps[l], 'Pair');
         var pairsMap = {};
         for (var m = 0; m < pairs.length; m++) {
-          pairsMap[nodeVal(get1(pairs[m], "key"))] = nodeVal(get1(pairs[m], "styleUrl"));
+          pairsMap[nodeVal(get1(pairs[m], 'key'))] = nodeVal(get1(pairs[m], 'styleUrl'));
         }
-        styleMapIndex["#" + attr(styleMaps[l], "id")] = pairsMap;
+        styleMapIndex['#' + attr(styleMaps[l], 'id')] = pairsMap;
       }
       for (var j = 0; j < placemarks.length; j++) {
         gj.features = gj.features.concat(getPlacemark(placemarks[j]));
       }
       function kmlColor(v) {
         var color, opacity;
-        v = v || "";
-        if (v.substr(0, 1) === "#") {
+        v = v || '';
+        if (v.substr(0, 1) === '#') {
           v = v.substr(1);
         }
         if (v.length === 6 || v.length === 3) {
@@ -4019,20 +4057,20 @@ var toGeoJSON = function () {
         }
         if (v.length === 8) {
           opacity = parseInt(v.substr(0, 2), 16) / 255;
-          color = "#" + v.substr(6, 2) + v.substr(4, 2) + v.substr(2, 2);
+          color = '#' + v.substr(6, 2) + v.substr(4, 2) + v.substr(2, 2);
         }
         return [color, isNaN(opacity) ? undefined : opacity];
       }
       function gxCoord(v) {
-        return numarray(v.split(" "));
+        return numarray(v.split(' '));
       }
       function gxCoords(root) {
-        var elems = get(root, "coord"),
+        var elems = get(root, 'coord'),
           coords = [],
           times = [];
-        if (elems.length === 0) elems = get(root, "gx:coord");
+        if (elems.length === 0) elems = get(root, 'gx:coord');
         for (var i = 0; i < elems.length; i++) coords.push(gxCoord(nodeVal(elems[i])));
-        var timeElems = get(root, "when");
+        var timeElems = get(root, 'when');
         for (var j = 0; j < timeElems.length; j++) times.push(nodeVal(timeElems[j]));
         return {
           coords: coords,
@@ -4047,44 +4085,44 @@ var toGeoJSON = function () {
           k,
           geoms = [],
           coordTimes = [];
-        if (get1(root, "MultiGeometry")) {
-          return getGeometry(get1(root, "MultiGeometry"));
+        if (get1(root, 'MultiGeometry')) {
+          return getGeometry(get1(root, 'MultiGeometry'));
         }
-        if (get1(root, "MultiTrack")) {
-          return getGeometry(get1(root, "MultiTrack"));
+        if (get1(root, 'MultiTrack')) {
+          return getGeometry(get1(root, 'MultiTrack'));
         }
-        if (get1(root, "gx:MultiTrack")) {
-          return getGeometry(get1(root, "gx:MultiTrack"));
+        if (get1(root, 'gx:MultiTrack')) {
+          return getGeometry(get1(root, 'gx:MultiTrack'));
         }
         for (i = 0; i < geotypes.length; i++) {
           geomNodes = get(root, geotypes[i]);
           if (geomNodes) {
             for (j = 0; j < geomNodes.length; j++) {
               geomNode = geomNodes[j];
-              if (geotypes[i] === "Point") {
+              if (geotypes[i] === 'Point') {
                 geoms.push({
-                  type: "Point",
-                  coordinates: coord1(nodeVal(get1(geomNode, "coordinates")))
+                  type: 'Point',
+                  coordinates: coord1(nodeVal(get1(geomNode, 'coordinates')))
                 });
-              } else if (geotypes[i] === "LineString") {
+              } else if (geotypes[i] === 'LineString') {
                 geoms.push({
-                  type: "LineString",
-                  coordinates: coord(nodeVal(get1(geomNode, "coordinates")))
+                  type: 'LineString',
+                  coordinates: coord(nodeVal(get1(geomNode, 'coordinates')))
                 });
-              } else if (geotypes[i] === "Polygon") {
-                var rings = get(geomNode, "LinearRing"),
+              } else if (geotypes[i] === 'Polygon') {
+                var rings = get(geomNode, 'LinearRing'),
                   coords = [];
                 for (k = 0; k < rings.length; k++) {
-                  coords.push(coord(nodeVal(get1(rings[k], "coordinates"))));
+                  coords.push(coord(nodeVal(get1(rings[k], 'coordinates'))));
                 }
                 geoms.push({
-                  type: "Polygon",
+                  type: 'Polygon',
                   coordinates: coords
                 });
-              } else if (geotypes[i] === "Track" || geotypes[i] === "gx:Track") {
+              } else if (geotypes[i] === 'Track' || geotypes[i] === 'gx:Track') {
                 var track = gxCoords(geomNode);
                 geoms.push({
-                  type: "LineString",
+                  type: 'LineString',
                   coordinates: track.coords
                 });
                 if (track.times.length) coordTimes.push(track.times);
@@ -4101,22 +4139,22 @@ var toGeoJSON = function () {
         var geomsAndTimes = getGeometry(root),
           i,
           properties = {},
-          name = nodeVal(get1(root, "name")),
-          address = nodeVal(get1(root, "address")),
-          styleUrl = nodeVal(get1(root, "styleUrl")),
-          description = nodeVal(get1(root, "description")),
-          timeSpan = get1(root, "TimeSpan"),
-          timeStamp = get1(root, "TimeStamp"),
-          extendedData = get1(root, "ExtendedData"),
-          lineStyle = get1(root, "LineStyle"),
-          polyStyle = get1(root, "PolyStyle"),
-          visibility = get1(root, "visibility");
+          name = nodeVal(get1(root, 'name')),
+          address = nodeVal(get1(root, 'address')),
+          styleUrl = nodeVal(get1(root, 'styleUrl')),
+          description = nodeVal(get1(root, 'description')),
+          timeSpan = get1(root, 'TimeSpan'),
+          timeStamp = get1(root, 'TimeStamp'),
+          extendedData = get1(root, 'ExtendedData'),
+          lineStyle = get1(root, 'LineStyle'),
+          polyStyle = get1(root, 'PolyStyle'),
+          visibility = get1(root, 'visibility');
         if (!geomsAndTimes.geoms.length) return [];
         if (name) properties.name = name;
         if (address) properties.address = address;
         if (styleUrl) {
-          if (styleUrl[0] !== "#") {
-            styleUrl = "#" + styleUrl;
+          if (styleUrl[0] !== '#') {
+            styleUrl = '#' + styleUrl;
           }
           properties.styleUrl = styleUrl;
           if (styleIndex[styleUrl]) {
@@ -4129,13 +4167,13 @@ var toGeoJSON = function () {
           // Try to populate the lineStyle or polyStyle since we got the style hash
           var style = styleByHash[properties.styleHash];
           if (style) {
-            if (!lineStyle) lineStyle = get1(style, "LineStyle");
-            if (!polyStyle) polyStyle = get1(style, "PolyStyle");
-            var iconStyle = get1(style, "IconStyle");
+            if (!lineStyle) lineStyle = get1(style, 'LineStyle');
+            if (!polyStyle) polyStyle = get1(style, 'PolyStyle');
+            var iconStyle = get1(style, 'IconStyle');
             if (iconStyle) {
-              var icon = get1(iconStyle, "Icon");
+              var icon = get1(iconStyle, 'Icon');
               if (icon) {
-                var href = nodeVal(get1(icon, "href"));
+                var href = nodeVal(get1(icon, 'href'));
                 if (href) properties.icon = href;
               }
             }
@@ -4143,44 +4181,44 @@ var toGeoJSON = function () {
         }
         if (description) properties.description = description;
         if (timeSpan) {
-          var begin = nodeVal(get1(timeSpan, "begin"));
-          var end = nodeVal(get1(timeSpan, "end"));
+          var begin = nodeVal(get1(timeSpan, 'begin'));
+          var end = nodeVal(get1(timeSpan, 'end'));
           properties.timespan = {
             begin: begin,
             end: end
           };
         }
         if (timeStamp) {
-          properties.timestamp = nodeVal(get1(timeStamp, "when"));
+          properties.timestamp = nodeVal(get1(timeStamp, 'when'));
         }
         if (lineStyle) {
-          var linestyles = kmlColor(nodeVal(get1(lineStyle, "color"))),
+          var linestyles = kmlColor(nodeVal(get1(lineStyle, 'color'))),
             color = linestyles[0],
             opacity = linestyles[1],
-            width = parseFloat(nodeVal(get1(lineStyle, "width")));
+            width = parseFloat(nodeVal(get1(lineStyle, 'width')));
           if (color) properties.stroke = color;
-          if (!isNaN(opacity)) properties["stroke-opacity"] = opacity;
-          if (!isNaN(width)) properties["stroke-width"] = width;
+          if (!isNaN(opacity)) properties['stroke-opacity'] = opacity;
+          if (!isNaN(width)) properties['stroke-width'] = width;
         }
         if (polyStyle) {
-          var polystyles = kmlColor(nodeVal(get1(polyStyle, "color"))),
+          var polystyles = kmlColor(nodeVal(get1(polyStyle, 'color'))),
             pcolor = polystyles[0],
             popacity = polystyles[1],
-            fill = nodeVal(get1(polyStyle, "fill")),
-            outline = nodeVal(get1(polyStyle, "outline"));
+            fill = nodeVal(get1(polyStyle, 'fill')),
+            outline = nodeVal(get1(polyStyle, 'outline'));
           if (pcolor) properties.fill = pcolor;
-          if (!isNaN(popacity)) properties["fill-opacity"] = popacity;
-          if (fill) properties["fill-opacity"] = fill === "1" ? properties["fill-opacity"] || 1 : 0;
-          if (outline) properties["stroke-opacity"] = outline === "1" ? properties["stroke-opacity"] || 1 : 0;
+          if (!isNaN(popacity)) properties['fill-opacity'] = popacity;
+          if (fill) properties['fill-opacity'] = fill === '1' ? properties['fill-opacity'] || 1 : 0;
+          if (outline) properties['stroke-opacity'] = outline === '1' ? properties['stroke-opacity'] || 1 : 0;
         }
         if (extendedData) {
-          var datas = get(extendedData, "Data"),
-            simpleDatas = get(extendedData, "SimpleData");
+          var datas = get(extendedData, 'Data'),
+            simpleDatas = get(extendedData, 'SimpleData');
           for (i = 0; i < datas.length; i++) {
-            properties[datas[i].getAttribute("name")] = nodeVal(get1(datas[i], "value"));
+            properties[datas[i].getAttribute('name')] = nodeVal(get1(datas[i], 'value'));
           }
           for (i = 0; i < simpleDatas.length; i++) {
-            properties[simpleDatas[i].getAttribute("name")] = nodeVal(simpleDatas[i]);
+            properties[simpleDatas[i].getAttribute('name')] = nodeVal(simpleDatas[i]);
           }
         }
         if (visibility) {
@@ -4190,23 +4228,23 @@ var toGeoJSON = function () {
           properties.coordTimes = geomsAndTimes.coordTimes.length === 1 ? geomsAndTimes.coordTimes[0] : geomsAndTimes.coordTimes;
         }
         var feature = {
-          type: "Feature",
+          type: 'Feature',
           geometry: geomsAndTimes.geoms.length === 1 ? geomsAndTimes.geoms[0] : {
-            type: "GeometryCollection",
+            type: 'GeometryCollection',
             geometries: geomsAndTimes.geoms
           },
           properties: properties
         };
-        if (attr(root, "id")) feature.id = attr(root, "id");
+        if (attr(root, 'id')) feature.id = attr(root, 'id');
         return [feature];
       }
       return gj;
     },
     gpx: function gpx(doc) {
       var i,
-        tracks = get(doc, "trk"),
-        routes = get(doc, "rte"),
-        waypoints = get(doc, "wpt"),
+        tracks = get(doc, 'trk'),
+        routes = get(doc, 'rte'),
+        waypoints = get(doc, 'wpt'),
         // a feature collection
         gj = fc(),
         feature;
@@ -4250,13 +4288,13 @@ var toGeoJSON = function () {
         };
       }
       function getTrack(node) {
-        var segments = get(node, "trkseg"),
+        var segments = get(node, 'trkseg'),
           track = [],
           times = [],
           heartRates = [],
           line;
         for (var i = 0; i < segments.length; i++) {
-          line = getPoints(segments[i], "trkpt");
+          line = getPoints(segments[i], 'trkpt');
           if (line) {
             if (line.line) track.push(line.line);
             if (line.times && line.times.length) times.push(line.times);
@@ -4276,28 +4314,28 @@ var toGeoJSON = function () {
         }
         if (track.length === 0) return;
         var properties = getProperties(node);
-        extend(properties, getLineStyle(get1(node, "extensions")));
+        extend(properties, getLineStyle(get1(node, 'extensions')));
         if (times.length) properties.coordTimes = track.length === 1 ? times[0] : times;
         if (heartRates.length) properties.heartRates = track.length === 1 ? heartRates[0] : heartRates;
         return {
-          type: "Feature",
+          type: 'Feature',
           properties: properties,
           geometry: {
-            type: track.length === 1 ? "LineString" : "MultiLineString",
+            type: track.length === 1 ? 'LineString' : 'MultiLineString',
             coordinates: track.length === 1 ? track[0] : track
           }
         };
       }
       function getRoute(node) {
-        var line = getPoints(node, "rtept");
+        var line = getPoints(node, 'rtept');
         if (!line.line) return;
         var prop = getProperties(node);
-        extend(prop, getLineStyle(get1(node, "extensions")));
+        extend(prop, getLineStyle(get1(node, 'extensions')));
         var routeObj = {
-          type: "Feature",
+          type: 'Feature',
           properties: prop,
           geometry: {
-            type: "LineString",
+            type: 'LineString',
             coordinates: line.line
           }
         };
@@ -4305,12 +4343,12 @@ var toGeoJSON = function () {
       }
       function getPoint(node) {
         var prop = getProperties(node);
-        extend(prop, getMulti(node, ["sym"]));
+        extend(prop, getMulti(node, ['sym']));
         return {
-          type: "Feature",
+          type: 'Feature',
           properties: prop,
           geometry: {
-            type: "Point",
+            type: 'Point',
             coordinates: coordPair(node).coordinates
           }
         };
@@ -4318,28 +4356,28 @@ var toGeoJSON = function () {
       function getLineStyle(extensions) {
         var style = {};
         if (extensions) {
-          var lineStyle = get1(extensions, "line");
+          var lineStyle = get1(extensions, 'line');
           if (lineStyle) {
-            var color = nodeVal(get1(lineStyle, "color")),
-              opacity = parseFloat(nodeVal(get1(lineStyle, "opacity"))),
-              width = parseFloat(nodeVal(get1(lineStyle, "width")));
+            var color = nodeVal(get1(lineStyle, 'color')),
+              opacity = parseFloat(nodeVal(get1(lineStyle, 'opacity'))),
+              width = parseFloat(nodeVal(get1(lineStyle, 'width')));
             if (color) style.stroke = color;
-            if (!isNaN(opacity)) style["stroke-opacity"] = opacity;
+            if (!isNaN(opacity)) style['stroke-opacity'] = opacity;
             // GPX width is in mm, convert to px with 96 px per inch
-            if (!isNaN(width)) style["stroke-width"] = width * 96 / 25.4;
+            if (!isNaN(width)) style['stroke-width'] = width * 96 / 25.4;
           }
         }
         return style;
       }
       function getProperties(node) {
-        var prop = getMulti(node, ["name", "cmt", "desc", "type", "time", "keywords"]),
-          links = get(node, "link");
+        var prop = getMulti(node, ['name', 'cmt', 'desc', 'type', 'time', 'keywords']),
+          links = get(node, 'link');
         if (links.length) prop.links = [];
         for (var i = 0, link; i < links.length; i++) {
           link = {
-            href: attr(links[i], "href")
+            href: attr(links[i], 'href')
           };
-          extend(link, getMulti(links[i], ["text", "type"]));
+          extend(link, getMulti(links[i], ['text', 'type']));
           prop.links.push(link);
         }
         return prop;
@@ -6771,14 +6809,12 @@ LayerListItemVectorLayer.defaultProps = {
     configurable: true,
 };
 
-var TuneIconButton = material.styled(material.IconButton)(function (showDeleteButton) { return ({
-    marginRight: showDeleteButton ? '4px' : '1000px',
+var TuneIconButton = material.styled(material.IconButton)({
     padding: '4px',
     marginTop: '-3px',
-}); });
+});
 var DeleteIconButton = material.styled(material.IconButton)({
-    padding: '4px',
-    marginTop: '-3px',
+    marginLeft: '20px',
 });
 function LayerListItem(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -6861,28 +6897,12 @@ function LayerListItem(_a) {
     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(ListItemStyled, { sx: __assign({}, 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(TuneIconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "settings", onClick: function () {
+                React__default["default"].createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
                         setPaintPropsFormVisible(function (current) {
                             return !current;
                         });
                     } },
-                    React__default["default"].createElement(iconsMaterial.Tune, null)),
-                props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () {
-                            if (typeof setLayerState === 'function') {
-                                setShowDeletionConfirmationDialog(true);
-                            }
-                        } },
-                        React__default["default"].createElement(iconsMaterial.Delete, null)),
-                    showDeletionConfirmationDialog && (React__default["default"].createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
-                            if (typeof setLayerState === 'function') {
-                                deletedRef.current = true;
-                                setLayerState(false);
-                                setShowDeletionConfirmationDialog(false);
-                            }
-                        }, onCancel: function () {
-                            setShowDeletionConfirmationDialog(false);
-                        }, title: "Delete layer", text: "Are you sure you want to delete this layer?" })))))) : undefined },
+                    React__default["default"].createElement(iconsMaterial.Tune, null)))) : undefined },
             React__default["default"].createElement(CheckboxListItemIcon, null,
                 React__default["default"].createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
                         setLocalVisible(function (val) { return !val; });
@@ -6892,7 +6912,24 @@ function LayerListItem(_a) {
         !((_h = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _h === void 0 ? void 0 : _h.layers) &&
             Object.keys(paintProps).length > 0 &&
             configurable &&
-            paintPropsFormVisible && (React__default["default"].createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType })),
+            paintPropsFormVisible && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () {
+                        if (typeof setLayerState === 'function') {
+                            setShowDeletionConfirmationDialog(true);
+                        }
+                    } },
+                    React__default["default"].createElement(iconsMaterial.Delete, null)),
+                showDeletionConfirmationDialog && (React__default["default"].createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
+                        if (typeof setLayerState === 'function') {
+                            deletedRef.current = true;
+                            setLayerState(false);
+                            setShowDeletionConfirmationDialog(false);
+                        }
+                    }, onCancel: function () {
+                        setShowDeletionConfirmationDialog(false);
+                    }, title: "Delete layer", text: "Are you sure you want to delete this layer?" })))),
+            React__default["default"].createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType }))),
         ((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React__default["default"].createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_m = (_l = (_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) === null || _l === void 0 ? void 0 : _l.map) === null || _m === void 0 ? void 0 : _m.call(_l, function (_el, idx) { return (React__default["default"].createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
 }
 LayerListItem.defaultProps = {