maplibre-gl-js-amplify 3.0.5 → 4.0.0

package/dist/maplibre-gl-js-amplify.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@aws-amplify/core'), require('@aws-amplify/geo'), require('maplibre-gl'), require('@maplibre/maplibre-gl-geocoder'), require('@turf/along'), require('@turf/circle'), require('@turf/length'), require('@turf/helpers'), require('debounce'), require('@mapbox/mapbox-gl-draw'), require('maplibre-gl-draw-circle')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@aws-amplify/core', '@aws-amplify/geo', 'maplibre-gl', '@maplibre/maplibre-gl-geocoder', '@turf/along', '@turf/circle', '@turf/length', '@turf/helpers', 'debounce', '@mapbox/mapbox-gl-draw', 'maplibre-gl-draw-circle'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.AmplifyMapLibre = {}, global.aws_amplify_core, global.aws_amplify_geo, global.maplibregl, global.MaplibreGeocoder, global.along, global.circle, global.length, global.helpers, global.debounce, global.MapboxDraw, global.maplibreGlDrawCircle));
-})(this, (function (exports, core, geo, maplibregl, MaplibreGeocoder, along, circle, length, helpers, debounce, MapboxDraw, maplibreGlDrawCircle) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@aws-amplify/core'), require('@aws-amplify/core/internals/utils'), require('@aws-amplify/geo'), require('maplibre-gl'), require('@maplibre/maplibre-gl-geocoder'), require('@turf/along'), require('@turf/circle'), require('@turf/length'), require('@turf/helpers'), require('debounce'), require('@mapbox/mapbox-gl-draw'), require('maplibre-gl-draw-circle')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@aws-amplify/core', '@aws-amplify/core/internals/utils', '@aws-amplify/geo', 'maplibre-gl', '@maplibre/maplibre-gl-geocoder', '@turf/along', '@turf/circle', '@turf/length', '@turf/helpers', 'debounce', '@mapbox/mapbox-gl-draw', 'maplibre-gl-draw-circle'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.AmplifyMapLibre = {}, global.aws_amplify_core, global.utils, global.aws_amplify_geo, global.maplibregl, global.MaplibreGeocoder, global.along, global.circle, global.length, global.helpers, global.debounce, global.MapboxDraw, global.maplibreGlDrawCircle));
+})(this, (function (exports, core, utils, geo, maplibregl, MaplibreGeocoder, along, circle, length, helpers, debounce, MapboxDraw, maplibreGlDrawCircle) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,8 +15,8 @@
 
     function isCoordinates(array) {
         return (Array.isArray(array) &&
-            typeof array[0] === "number" &&
-            typeof array[1] === "number");
+            typeof array[0] === 'number' &&
+            typeof array[1] === 'number');
     }
     function isCoordinatesArray(array) {
         return isCoordinates(array[0]);
@@ -24,16 +24,16 @@
     function isNamedLocation(object) {
         return (object &&
             Array.isArray(object.coordinates) &&
-            typeof object.coordinates[0] === "number" &&
-            typeof object.coordinates[1] === "number");
+            typeof object.coordinates[0] === 'number' &&
+            typeof object.coordinates[1] === 'number');
     }
     function isNamedLocationArray(array) {
         return isNamedLocation(array[0]);
     }
     function isGeofence(object) {
         return (object &&
-            typeof object.geofenceId === "string" &&
-            typeof object.geometry === "object");
+            typeof object.geofenceId === 'string' &&
+            typeof object.geometry === 'object');
     }
     function isGeofenceArray(array) {
         return Array.isArray(array) && isGeofence(array[0]);
@@ -45,16 +45,16 @@
         return Array.isArray(array) && isPolygon(array[0]);
     }
     function isGeoJsonSource(source) {
-        return source.type === "geojson";
+        return source.type === 'geojson';
     }
-    const strHasLength = (str) => typeof str === "string" && str.length > 0;
+    const strHasLength = (str) => typeof str === 'string' && str.length > 0;
     const getFeaturesFromData = (data) => {
         let features;
         if (isCoordinatesArray(data)) {
             features = data.map((point) => {
                 return {
-                    type: "Feature",
-                    geometry: { type: "Point", coordinates: point },
+                    type: 'Feature',
+                    geometry: { type: 'Point', coordinates: point },
                     properties: { place_name: `Coordinates,${point}` },
                 };
             });
@@ -62,8 +62,8 @@
         else if (isNamedLocationArray(data)) {
             features = data.map((location) => {
                 return {
-                    type: "Feature",
-                    geometry: { type: "Point", coordinates: location.coordinates },
+                    type: 'Feature',
+                    geometry: { type: 'Point', coordinates: location.coordinates },
                     properties: { title: location.title, address: location.address },
                 };
             });
@@ -74,7 +74,7 @@
         return features;
     };
     const urlEncodePeriods = (str) => {
-        return str.replace(/\./g, "%2E");
+        return str.replace(/\./g, '%2E');
     };
     function validateCoordinates(coordinates) {
         const [lng, lat] = coordinates;
@@ -82,12 +82,14 @@
             throw new Error(`Invalid coordinates: [${lng},${lat}]`);
         }
         if (lat < -90 || lat > 90) {
-            const errorString = "Latitude must be between -90 and 90 degrees inclusive.";
+            const errorString = 'Latitude must be between -90 and 90 degrees inclusive.';
+            // eslint-disable-next-line no-console
             console.warn(errorString);
             throw new Error(errorString);
         }
         else if (lng < -180 || lng > 180) {
-            const errorString = "Longitude must be between -180 and 180 degrees inclusive.";
+            const errorString = 'Longitude must be between -180 and 180 degrees inclusive.';
+            // eslint-disable-next-line no-console
             console.warn(errorString);
             throw new Error(errorString);
         }
@@ -138,9 +140,10 @@
         constructor(currentCredentials, region) {
             this.refreshCredentials = () => __awaiter$3(this, void 0, void 0, function* () {
                 try {
-                    this.credentials = yield core.Credentials.get();
+                    this.credentials = (yield core.fetchAuthSession()).credentials;
                 }
                 catch (e) {
+                    // eslint-disable-next-line no-console
                     console.error(`Failed to refresh credentials: ${e}`);
                     throw e;
                 }
@@ -148,11 +151,11 @@
             this.refreshCredentialsWithRetry = () => __awaiter$3(this, void 0, void 0, function* () {
                 try {
                     const MAX_DELAY_MS = 5 * 60 * 1000; // 5 minutes
-                    yield core.jitteredExponentialRetry(this.refreshCredentials, [], MAX_DELAY_MS);
+                    yield utils.jitteredExponentialRetry(this.refreshCredentials, [], MAX_DELAY_MS);
                     // Refresh credentials on a timer because HubEvents do not trigger on credential refresh currently
                     this.activeTimeout && clearTimeout(this.activeTimeout);
                     // Refresh credentials when expiration time is later than now
-                    if (this.credentials.expiration.getTime() > (new Date()).getTime()) {
+                    if (this.credentials.expiration.getTime() > new Date().getTime()) {
                         const expiration = new Date(this.credentials.expiration);
                         const timeout = expiration.getTime() - new Date().getTime() - 10000; // Adds a 10 second buffer time before the next refresh
                         this.activeTimeout = window.setTimeout(this.refreshCredentialsWithRetry, Math.min(timeout, 3600000) // Set timeout to an hour if we somehow don't have a value for timeout
@@ -160,6 +163,7 @@
                     }
                 }
                 catch (e) {
+                    // eslint-disable-next-line no-console
                     console.error(`Failed to refresh credentials: ${e}`);
                 }
             });
@@ -171,18 +175,18 @@
              */
             this.transformRequest = (url, resourceType) => {
                 let styleUrl = url;
-                if (resourceType === "Style" && !url.includes("://")) {
+                if (resourceType === 'Style' && !url.includes('://')) {
                     if (this.region == undefined) {
-                        throw new Error("AWS region for map is undefined. Please verify that the region is set in aws-exports.js or that you are providing an AWS region parameter to createMap");
+                        throw new Error('AWS region for map is undefined. Please verify that the region is set in aws-exports.js or that you are providing an AWS region parameter to createMap');
                     }
                     styleUrl = `https://maps.geo.${this.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`;
                 }
                 const urlObject = new URL(styleUrl);
-                if (urlObject.hostname.endsWith(".amazonaws.com")) {
+                if (urlObject.hostname.endsWith('.amazonaws.com')) {
                     // only sign AWS requests (with the signature as part of the query string)
-                    urlObject.searchParams.append('x-amz-user-agent', encodeURIComponent(urlEncodePeriods(core.getAmplifyUserAgent())));
+                    urlObject.searchParams.append('x-amz-user-agent', encodeURIComponent(urlEncodePeriods(getAmplifyUserAgentString())));
                     return {
-                        url: core.Signer.signUrl(urlObject.href, {
+                        url: utils.Signer.signUrl(urlObject.href, {
                             access_key: this.credentials.accessKeyId,
                             secret_key: this.credentials.secretAccessKey,
                             session_token: this.credentials.sessionToken,
@@ -194,11 +198,12 @@
             this.region = region;
             this.activeTimeout = null;
             this.refreshCredentialsWithRetry();
-            core.Hub.listen("auth", (data) => {
+            core.Hub.listen('auth', (data) => {
                 switch (data.payload.event) {
-                    case "signIn":
-                    case "signOut":
-                    case "tokenRefresh":
+                    // This was removed from v6 but will be added back before GA
+                    case 'signedIn':
+                    case 'signedOut':
+                    case 'tokenRefresh':
                         this.refreshCredentialsWithRetry();
                         break;
                 }
@@ -208,7 +213,7 @@
     AmplifyMapLibreRequest.createMapLibreMap = (options) => __awaiter$3(void 0, void 0, void 0, function* () {
         const { region, mapConstructor = maplibregl.Map } = options, maplibreOption = __rest$2(options, ["region", "mapConstructor"]);
         const defaultMap = geo.Geo.getDefaultMap();
-        const amplifyRequest = new AmplifyMapLibreRequest(yield core.Credentials.get(), region || defaultMap.region);
+        const amplifyRequest = new AmplifyMapLibreRequest((yield core.fetchAuthSession()).credentials, region || defaultMap.region);
         const transformRequest = amplifyRequest.transformRequest;
         const map = new mapConstructor(Object.assign(Object.assign({}, maplibreOption), { style: options.style || defaultMap.mapName, // Amplify uses the name of the map in the maplibre style field,
             transformRequest }));
@@ -217,16 +222,26 @@
     const createMap = (options) => __awaiter$3(void 0, void 0, void 0, function* () {
         return AmplifyMapLibreRequest.createMapLibreMap(options);
     });
+    // TODO - Delete this and import from @aws-amplify/core when it is released
+    function getAmplifyUserAgentString() {
+        const userAgent = utils.getAmplifyUserAgent();
+        if (userAgent && typeof userAgent === 'object') {
+            return userAgent
+                .map(([agentKey, agentValue]) => `${agentKey}/${agentValue}`)
+                .join(' ');
+        }
+        return userAgent;
+    }
 
-    const COLOR_WHITE = "#fff";
-    const COLOR_BLACK = "#000";
-    const MARKER_COLOR = "#5d8aff";
-    const ACTIVE_MARKER_COLOR = "#ff9900";
-    const POPUP_BORDER_COLOR = "#0000001f";
-    const GEOFENCE_COLOR = "#2194f3";
-    const GEOFENCE_BORDER_COLOR = "#003560";
-    const GEOFENCE_VERTEX_COLOR = "#FF9900";
-    const LOCATION_MARKER = "M24.8133 38.533C18.76 31.493 13 28.8264 13 20.8264C13.4827 14.9864 16.552 9.67169 21.368 6.33302C33.768 -2.26165 50.824 5.78902 52.0667 20.8264C52.0667 28.613 46.5733 31.6797 40.6533 38.373C32.4933 47.5464 35.4 63.093 32.4933 63.093C29.72 63.093 32.4933 47.5464 24.8133 38.533ZM32.4933 8.23969C26.5573 8.23969 21.7467 13.0504 21.7467 18.9864C21.7467 24.9224 26.5573 29.733 32.4933 29.733C38.4293 29.733 43.24 24.9224 43.24 18.9864C43.24 13.0504 38.4293 8.23969 32.4933 8.23969Z";
+    const COLOR_WHITE = '#fff';
+    const COLOR_BLACK = '#000';
+    const MARKER_COLOR = '#5d8aff';
+    const ACTIVE_MARKER_COLOR = '#ff9900';
+    const POPUP_BORDER_COLOR = '#0000001f';
+    const GEOFENCE_COLOR = '#2194f3';
+    const GEOFENCE_BORDER_COLOR = '#003560';
+    const GEOFENCE_VERTEX_COLOR = '#FF9900';
+    const LOCATION_MARKER = 'M24.8133 38.533C18.76 31.493 13 28.8264 13 20.8264C13.4827 14.9864 16.552 9.67169 21.368 6.33302C33.768 -2.26165 50.824 5.78902 52.0667 20.8264C52.0667 28.613 46.5733 31.6797 40.6533 38.373C32.4933 47.5464 35.4 63.093 32.4933 63.093C29.72 63.093 32.4933 47.5464 24.8133 38.533ZM32.4933 8.23969C26.5573 8.23969 21.7467 13.0504 21.7467 18.9864C21.7467 24.9224 26.5573 29.733 32.4933 29.733C38.4293 29.733 43.24 24.9224 43.24 18.9864C43.24 13.0504 38.4293 8.23969 32.4933 8.23969Z';
     // Map styles exist due to an issue with Amazon Location Service not supporting the default set of maplibre fonts
     var MAP_STYLES;
     (function (MAP_STYLES) {
@@ -238,21 +253,21 @@
         MAP_STYLES["HERE_BERLIN"] = "VectorHereBerlin";
     })(MAP_STYLES || (MAP_STYLES = {}));
     const FONT_DEFAULT_BY_STYLE = {
-        [MAP_STYLES.ESRI_TOPOGRAPHIC]: "Noto Sans Regular",
-        [MAP_STYLES.ESRI_STREETS]: "Arial Regular",
-        [MAP_STYLES.ESRI_LIGHT_GRAY]: "Ubuntu Regular",
-        [MAP_STYLES.ESRI_DARK_GRAY]: "Ubuntu Regular",
-        [MAP_STYLES.ESRI_NAVIGATION]: "Arial Regular",
-        [MAP_STYLES.HERE_BERLIN]: "Fira GO Regular",
+        [MAP_STYLES.ESRI_TOPOGRAPHIC]: 'Noto Sans Regular',
+        [MAP_STYLES.ESRI_STREETS]: 'Arial Regular',
+        [MAP_STYLES.ESRI_LIGHT_GRAY]: 'Ubuntu Regular',
+        [MAP_STYLES.ESRI_DARK_GRAY]: 'Ubuntu Regular',
+        [MAP_STYLES.ESRI_NAVIGATION]: 'Arial Regular',
+        [MAP_STYLES.HERE_BERLIN]: 'Fira GO Regular',
     };
 
     function drawClusterLayer(sourceName, map, { fillColor: markerColor = MARKER_COLOR, smCircleSize: smallSize = 60, smThreshold: smallThreshold = 50, mdCircleSize: mediumSize = 100, mdThreshold: mediumThreshold = 100, lgCircleSize: largeSize = 140, lgThreshold: largeThreshold = 500, xlCircleSize: extraLargeSize = 180, borderWidth = 4, borderColor = COLOR_WHITE, clusterPaint, onClick, showCount, clusterCountLayout, fontColor = COLOR_WHITE, }, mapStyle) {
         const clusterLayerId = `${sourceName}-layer-clusters`;
         const clusterSymbolLayerId = `${sourceName}-layer-cluster-count`;
         // Use step expressions for clusters (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
-        const paintOptions = Object.assign({ "circle-color": [
-                "step",
-                ["get", "point_count"],
+        const paintOptions = Object.assign({ 'circle-color': [
+                'step',
+                ['get', 'point_count'],
                 markerColor,
                 smallThreshold,
                 markerColor,
@@ -260,9 +275,9 @@
                 markerColor,
                 largeThreshold,
                 markerColor,
-            ], "circle-radius": [
-                "step",
-                ["get", "point_count"],
+            ], 'circle-radius': [
+                'step',
+                ['get', 'point_count'],
                 smallSize,
                 smallThreshold,
                 mediumSize,
@@ -270,20 +285,20 @@
                 largeSize,
                 largeThreshold,
                 extraLargeSize,
-            ], "circle-stroke-width": borderWidth, "circle-stroke-color": borderColor }, clusterPaint);
+            ], 'circle-stroke-width': borderWidth, 'circle-stroke-color': borderColor }, clusterPaint);
         const defaultClusterLayer = {
             id: clusterLayerId,
-            type: "circle",
+            type: 'circle',
             source: sourceName,
-            filter: ["has", "point_count"],
+            filter: ['has', 'point_count'],
             paint: paintOptions,
         };
         map.addLayer(Object.assign({}, defaultClusterLayer));
         /*
          * Inspect cluster on click
          */
-        map.on("click", clusterLayerId, function (e) {
-            if (typeof onClick === "function")
+        map.on('click', clusterLayerId, function (e) {
+            if (typeof onClick === 'function')
                 onClick(e);
             const features = map.queryRenderedFeatures(e.point, {
                 layers: [clusterLayerId],
@@ -306,24 +321,24 @@
          */
         if (showCount) {
             const defaultLayoutOptions = {
-                "text-field": "{point_count_abbreviated}",
-                "text-size": 24,
+                'text-field': '{point_count_abbreviated}',
+                'text-size': 24,
             };
             const locationServiceStyle = mapStyle || geo.Geo.getDefaultMap().style;
             if (locationServiceStyle) {
-                defaultLayoutOptions["text-font"] = [
+                defaultLayoutOptions['text-font'] = [
                     FONT_DEFAULT_BY_STYLE[locationServiceStyle],
                 ];
             }
             const layoutOptions = Object.assign(Object.assign({}, defaultLayoutOptions), clusterCountLayout);
             const paintOptions = {
-                "text-color": fontColor,
+                'text-color': fontColor,
             };
             const defaultClusterCount = {
                 id: clusterSymbolLayerId,
-                type: "symbol",
+                type: 'symbol',
                 source: sourceName,
-                filter: ["has", "point_count"],
+                filter: ['has', 'point_count'],
                 layout: layoutOptions,
                 paint: paintOptions,
             };
@@ -341,10 +356,10 @@
             height: 64,
             data: new Uint8Array(64 * 64 * 4),
             onAdd: function () {
-                const canvas = document.createElement("canvas");
+                const canvas = document.createElement('canvas');
                 canvas.width = this.width;
                 canvas.height = this.height;
-                this.context = canvas.getContext("2d");
+                this.context = canvas.getContext('2d');
             },
             render: function () {
                 const context = this.context;
@@ -360,14 +375,14 @@
         };
     }
 
-    function getPopupRenderFunction(unclusteredLayerId, { popupBackgroundColor: background = COLOR_WHITE, popupBorderColor: borderColor = POPUP_BORDER_COLOR, popupBorderWidth: borderWidth = 2, popupFontColor: fontColor = COLOR_BLACK, popupPadding: padding = 20, popupBorderRadius: radius = 4, popupTitleFontWeight: fontWeight = "bold", }) {
+    function getPopupRenderFunction(unclusteredLayerId, { popupBackgroundColor: background = COLOR_WHITE, popupBorderColor: borderColor = POPUP_BORDER_COLOR, popupBorderWidth: borderWidth = 2, popupFontColor: fontColor = COLOR_BLACK, popupPadding: padding = 20, popupBorderRadius: radius = 4, popupTitleFontWeight: fontWeight = 'bold', }) {
         return (selectedFeature) => {
             let title, address;
             // Try to get Title and address from existing feature properties
             if (strHasLength(selectedFeature.properties.place_name)) {
-                const placeName = selectedFeature.properties.place_name.split(",");
+                const placeName = selectedFeature.properties.place_name.split(',');
                 title = placeName[0];
-                address = placeName.splice(1, placeName.length).join(",");
+                address = placeName.splice(1, placeName.length).join(',');
             }
             else if (strHasLength(selectedFeature.properties.title) ||
                 strHasLength(selectedFeature.properties.address)) {
@@ -375,7 +390,7 @@
                 address = selectedFeature.properties.address;
             }
             else {
-                title = "Coordinates";
+                title = 'Coordinates';
                 address = selectedFeature.geometry.coordinates;
             }
             const titleHtml = `<div class="${unclusteredLayerId}-popup-title" style="font-weight: ${fontWeight};">${title}</div>`;
@@ -386,7 +401,7 @@
                 popupHtml += titleHtml;
             if (address)
                 popupHtml += addressHtml;
-            popupHtml += "</div>";
+            popupHtml += '</div>';
             return popupHtml;
         };
     }
@@ -402,14 +417,14 @@
             }
         return t;
     };
-    const HIDE_TIP = "amplify-tip";
+    const HIDE_TIP = 'amplify-tip';
     function drawUnclusteredLayer(sourceName, map, _a) {
         var { showMarkerPopup = false } = _a, options = __rest$1(_a, ["showMarkerPopup"]);
         const unclusteredLayerId = `${sourceName}-layer-unclustered-point`;
         let selectedId = null;
         function deselectPoint() {
             if (selectedId !== null) {
-                map.setLayoutProperty(unclusteredLayerId, "icon-image", "inactive-marker");
+                map.setLayoutProperty(unclusteredLayerId, 'icon-image', 'inactive-marker');
                 selectedId = null;
             }
         }
@@ -419,11 +434,11 @@
         addUnclusteredMarkerImages(map, options);
         const defaultUnclusteredPoint = {
             id: unclusteredLayerId,
-            type: "symbol",
+            type: 'symbol',
             source: sourceName,
-            filter: ["!", ["has", "point_count"]],
+            filter: ['!', ['has', 'point_count']],
             layout: {
-                "icon-image": "inactive-marker",
+                'icon-image': 'inactive-marker',
             },
         };
         map.addLayer(Object.assign({}, defaultUnclusteredPoint));
@@ -433,28 +448,28 @@
         if (showMarkerPopup) {
             const element = document.getElementById(HIDE_TIP);
             if (!element) {
-                const style = document.createElement("style");
-                style.setAttribute("id", HIDE_TIP);
+                const style = document.createElement('style');
+                style.setAttribute('id', HIDE_TIP);
                 document.head.append(style);
-                style.textContent = ".mapboxgl-popup-tip { display: none; }";
+                style.textContent = '.mapboxgl-popup-tip { display: none; }';
             }
         }
-        map.on("click", function () {
+        map.on('click', function () {
             deselectPoint();
         });
         /*
          * Set active state on markers when clicked
          */
-        map.on("click", unclusteredLayerId, function (e) {
-            if (typeof options.onClick === "function")
+        map.on('click', unclusteredLayerId, function (e) {
+            if (typeof options.onClick === 'function')
                 options.onClick(e);
             selectedId = e.features[0].id;
-            map.setLayoutProperty(unclusteredLayerId, "icon-image", [
-                "match",
-                ["id"],
+            map.setLayoutProperty(unclusteredLayerId, 'icon-image', [
+                'match',
+                ['id'],
                 selectedId,
-                "active-marker",
-                "inactive-marker", // default
+                'active-marker',
+                'inactive-marker', // default
             ]);
             // If popup option is set show a popup on click
             if (showMarkerPopup) {
@@ -466,7 +481,7 @@
                         .setHTML(popupRender(selectedFeature))
                         .setOffset(15)
                         .addTo(map);
-                    popup.on("close", function () {
+                    popup.on('close', function () {
                         if (selectedId === selectedFeature.id)
                             deselectPoint();
                     });
@@ -476,14 +491,14 @@
         /*
          * Set cursor style to pointer when mousing over point layer
          */
-        map.on("mouseover", unclusteredLayerId, function () {
-            map.getCanvas().style.cursor = "pointer";
+        map.on('mouseover', unclusteredLayerId, function () {
+            map.getCanvas().style.cursor = 'pointer';
         });
         /*
          * Reset cursor style when the point layer
          */
-        map.on("mouseleave", unclusteredLayerId, () => {
-            map.getCanvas().style.cursor = "";
+        map.on('mouseleave', unclusteredLayerId, () => {
+            map.getCanvas().style.cursor = '';
         });
         return { unclusteredLayerId };
     }
@@ -504,8 +519,8 @@
                 strokeColor: selectedBorderColor,
                 lineWidth: selectedBorderWidth,
             });
-        map.addImage("inactive-marker", inactiveMarker, { pixelRatio: 2 });
-        map.addImage("active-marker", activeMarker, { pixelRatio: 2 });
+        map.addImage('inactive-marker', inactiveMarker, { pixelRatio: 2 });
+        map.addImage('active-marker', activeMarker, { pixelRatio: 2 });
     }
 
     /**
@@ -527,9 +542,9 @@
     function drawPoints(sourceName, data, map, { showCluster = true, clusterOptions = {}, unclusteredOptions: unclusteredMarkerOptions = {}, autoFit = true, } = {}, mapStyle) {
         var _a, _b;
         if (!map ||
-            typeof map.addSource !== "function" ||
-            typeof map.addLayer !== "function") {
-            throw new Error("Please use a maplibre map");
+            typeof map.addSource !== 'function' ||
+            typeof map.addLayer !== 'function') {
+            throw new Error('Please use a maplibre map');
         }
         /*
          * Convert data passed in as coordinates into features
@@ -540,9 +555,9 @@
          */
         const sourceId = sourceName;
         map.addSource(sourceId, {
-            type: "geojson",
+            type: 'geojson',
             data: {
-                type: "FeatureCollection",
+                type: 'FeatureCollection',
                 features,
             },
             cluster: showCluster,
@@ -567,25 +582,25 @@
         }
         // utility function for setting layer visibility to none
         const hide = () => {
-            map.setLayoutProperty(unclusteredLayerId, "visibility", "none");
+            map.setLayoutProperty(unclusteredLayerId, 'visibility', 'none');
             if (clusterLayerId)
-                map.setLayoutProperty(clusterLayerId, "visibility", "none");
+                map.setLayoutProperty(clusterLayerId, 'visibility', 'none');
             if (clusterSymbolLayerId)
-                map.setLayoutProperty(clusterSymbolLayerId, "visibility", "none");
+                map.setLayoutProperty(clusterSymbolLayerId, 'visibility', 'none');
         };
         // utility function for setting layer visibility to visible
         const show = () => {
-            map.setLayoutProperty(unclusteredLayerId, "visibility", "visible");
+            map.setLayoutProperty(unclusteredLayerId, 'visibility', 'visible');
             if (clusterLayerId)
-                map.setLayoutProperty(clusterLayerId, "visibility", "visible");
+                map.setLayoutProperty(clusterLayerId, 'visibility', 'visible');
             if (clusterSymbolLayerId)
-                map.setLayoutProperty(clusterSymbolLayerId, "visibility", "visible");
+                map.setLayoutProperty(clusterSymbolLayerId, 'visibility', 'visible');
         };
         // utility function updating the data source
         const setData = (data) => {
             const features = getFeaturesFromData(data);
             map.getSource(sourceId).setData({
-                type: "FeatureCollection",
+                type: 'FeatureCollection',
                 features,
             });
         };
@@ -601,18 +616,18 @@
     }
 
     function createDefaultIcon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        const iconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        const iconCircle = document.createElement("circle");
-        customIcon.setAttribute("viewBox", "0 0 64 64");
-        customIcon.setAttribute("width", "32");
-        customIcon.setAttribute("height", "32");
-        iconPath.setAttribute("d", LOCATION_MARKER);
-        iconPath.setAttribute("fill", "#5d8aff");
-        iconCircle.setAttribute("fill", "white");
-        iconCircle.setAttribute("cx", "50%");
-        iconCircle.setAttribute("cy", "50%");
-        iconCircle.setAttribute("r", "5");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        const iconCircle = document.createElement('circle');
+        customIcon.setAttribute('viewBox', '0 0 64 64');
+        customIcon.setAttribute('width', '32');
+        customIcon.setAttribute('height', '32');
+        iconPath.setAttribute('d', LOCATION_MARKER);
+        iconPath.setAttribute('fill', '#5d8aff');
+        iconCircle.setAttribute('fill', 'white');
+        iconCircle.setAttribute('cx', '50%');
+        iconCircle.setAttribute('cy', '50%');
+        iconCircle.setAttribute('r', '5');
         customIcon.appendChild(iconCircle);
         customIcon.appendChild(iconPath);
         return customIcon;
@@ -652,8 +667,8 @@
                     data.forEach((result) => {
                         const { geometry } = result, otherResults = __rest(result, ["geometry"]);
                         features.push({
-                            type: "Feature",
-                            geometry: { type: "Point", coordinates: geometry.point },
+                            type: 'Feature',
+                            geometry: { type: 'Point', coordinates: geometry.point },
                             properties: Object.assign({}, otherResults),
                             place_name: otherResults.label,
                             text: otherResults.label,
@@ -663,6 +678,7 @@
                 }
             }
             catch (e) {
+                // eslint-disable-next-line no-console
                 console.error(`Failed to forwardGeocode with error: ${e}`);
             }
             return { features };
@@ -676,8 +692,8 @@
                 if (data && data.geometry) {
                     const { geometry } = data, otherResults = __rest(data, ["geometry"]);
                     features.push({
-                        type: "Feature",
-                        geometry: { type: "Point", coordinates: geometry.point },
+                        type: 'Feature',
+                        geometry: { type: 'Point', coordinates: geometry.point },
                         properties: Object.assign({}, otherResults),
                         place_name: otherResults.label,
                         text: otherResults.label,
@@ -686,6 +702,7 @@
                 }
             }
             catch (e) {
+                // eslint-disable-next-line no-console
                 console.error(`Failed to reverseGeocode with error: ${e}`);
             }
             return { features };
@@ -702,6 +719,7 @@
                 suggestions.push(...response);
             }
             catch (e) {
+                // eslint-disable-next-line no-console
                 console.error(`Failed to get suggestions with error: ${e}`);
             }
             return { suggestions };
@@ -713,23 +731,22 @@
                 if (place) {
                     const { geometry } = place, otherResults = __rest(place, ["geometry"]);
                     feature = {
-                        type: "Feature",
-                        geometry: { type: "Point", coordinates: geometry.point },
+                        type: 'Feature',
+                        geometry: { type: 'Point', coordinates: geometry.point },
                         properties: Object.assign({}, otherResults),
                         place_name: otherResults.label,
                         text: otherResults.label,
                         center: geometry.point,
                     };
                 }
-                ;
             }
             catch (e) {
+                // eslint-disable-next-line no-console
                 console.error(`Failed to get place with error: ${e}`);
             }
             return { place: feature };
-        })
+        }),
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function createAmplifyGeocoder(options) {
         return new MaplibreGeocoder__default["default"](AmplifyGeocoderAPI, Object.assign({ maplibregl: maplibregl__default["default"], showResultMarkers: { element: createDefaultIcon() }, marker: { element: createDefaultIcon() }, 
             // autocomplete temporarily disabled by default until CLI is updated
@@ -742,9 +759,9 @@
             ? data.map((geofence) => geofence.geometry.polygon)
             : data;
         return {
-            type: "Feature",
+            type: 'Feature',
             geometry: {
-                type: "MultiPolygon",
+                type: 'MultiPolygon',
                 coordinates,
             },
             properties: {},
@@ -752,9 +769,9 @@
     };
     const getGeofenceFeatureFromPolygon = (polygon) => {
         return {
-            type: "Feature",
+            type: 'Feature',
             geometry: {
-                type: "Polygon",
+                type: 'Polygon',
                 coordinates: polygon,
             },
             properties: {},
@@ -766,13 +783,13 @@
         const neCoordinate = bounds.getNorthEast().toArray();
         const center = bounds.getCenter().toArray();
         const line = helpers.lineString([swCoordinate, center, neCoordinate]);
-        const distanceInMiles = length__default["default"](line, { units: "miles" });
+        const distanceInMiles = length__default["default"](line, { units: 'miles' });
         // Gets coordinates 1/4 along the line from each coordinate
         const southWestCoordinate = along__default["default"](line, distanceInMiles / 4, {
-            units: "miles",
+            units: 'miles',
         }).geometry.coordinates;
         const northeastCoordinate = along__default["default"](line, distanceInMiles * (3 / 4), {
-            units: "miles",
+            units: 'miles',
         }).geometry.coordinates;
         // Creates a polygon from the coordinates found along the line between the bounding coordinates in counter clockwise order starting from northeast most coordinate
         const polygon = [
@@ -786,9 +803,9 @@
         ];
         return {
             id,
-            type: "Feature",
+            type: 'Feature',
             geometry: {
-                type: "Polygon",
+                type: 'Polygon',
                 coordinates: polygon,
             },
             properties: {},
@@ -796,21 +813,21 @@
     };
     const getCircleFeatureFromCoords = (id, center, { bounds, radius }) => {
         if (!bounds && !radius) {
-            throw new Error("Circle requires a bounds or a radius");
+            throw new Error('Circle requires a bounds or a radius');
         }
         validateCoordinates(center);
         const circleRadius = radius !== null && radius !== void 0 ? radius : getDistanceFromBounds(bounds) / 8;
-        const circleFeature = circle__default["default"](center, circleRadius, { units: "miles" });
+        const circleFeature = circle__default["default"](center, circleRadius, { units: 'miles' });
         return {
             id,
-            type: "Feature",
+            type: 'Feature',
             properties: {
                 isCircle: true,
                 center,
                 radius: circleRadius,
             },
             geometry: {
-                type: "Polygon",
+                type: 'Polygon',
                 coordinates: circleFeature.geometry.coordinates,
             },
         };
@@ -820,7 +837,7 @@
         const neCoordinate = bounds.getNorthEast().toArray();
         const center = bounds.getCenter().toArray();
         const line = helpers.lineString([swCoordinate, center, neCoordinate]);
-        return length__default["default"](line, { units: "miles" });
+        return length__default["default"](line, { units: 'miles' });
     };
     const doesGeofenceExist = (id, loadedGeofences) => {
         return !!loadedGeofences[id];
@@ -833,7 +850,7 @@
     };
     const getDistanceBetweenCoordinates = (startCoord, endCoord) => {
         const line = helpers.lineString([startCoord, endCoord]);
-        const distanceInMiles = length__default["default"](line, { units: "miles" });
+        const distanceInMiles = length__default["default"](line, { units: 'miles' });
         return distanceInMiles;
     };
 
@@ -846,12 +863,12 @@
     function drawGeofences(sourceName, data, map, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!map ||
-            typeof map.addSource !== "function" ||
-            typeof map.addLayer !== "function") {
-            throw new Error("Please use a maplibre map");
+            typeof map.addSource !== 'function' ||
+            typeof map.addLayer !== 'function') {
+            throw new Error('Please use a maplibre map');
         }
         if (data.length > 0 && !isGeofenceArray(data) && !isPolygonArray(data)) {
-            throw new Error("Please pass in an array of Geofences or an array of Polygons");
+            throw new Error('Please pass in an array of Geofences or an array of Polygons');
         }
         /*
          * Data source for features
@@ -859,57 +876,57 @@
          */
         const sourceId = `${sourceName}`;
         map.addSource(sourceId, {
-            type: "geojson",
+            type: 'geojson',
             data: getGeofenceFeatureArray(data),
             generateId: true,
         });
-        const initialVisiblity = ((_a = options.visible) !== null && _a !== void 0 ? _a : true) ? "visible" : "none";
+        const initialVisiblity = ((_a = options.visible) !== null && _a !== void 0 ? _a : true) ? 'visible' : 'none';
         /*
          * Draw ui layers for source data
          */
         const fillLayerId = `${sourceName}-fill-layer`;
         map.addLayer({
             id: fillLayerId,
-            type: "fill",
+            type: 'fill',
             source: sourceId,
             layout: {
                 visibility: initialVisiblity,
             },
             paint: {
-                "fill-color": (_b = options.fillColor) !== null && _b !== void 0 ? _b : COLOR_BLACK,
-                "fill-opacity": (_c = options.fillOpacity) !== null && _c !== void 0 ? _c : FILL_OPACITY,
+                'fill-color': (_b = options.fillColor) !== null && _b !== void 0 ? _b : COLOR_BLACK,
+                'fill-opacity': (_c = options.fillOpacity) !== null && _c !== void 0 ? _c : FILL_OPACITY,
             },
         });
         // Add a black outline around the polygon.
         const outlineLayerId = `${sourceName}-outline-layer`;
         map.addLayer({
             id: outlineLayerId,
-            type: "line",
+            type: 'line',
             source: sourceId,
             layout: {
                 visibility: initialVisiblity,
             },
             paint: {
-                "line-color": (_d = options.borderColor) !== null && _d !== void 0 ? _d : COLOR_BLACK,
-                "line-opacity": (_e = options.borderOpacity) !== null && _e !== void 0 ? _e : BORDER_OPACITY,
-                "line-width": (_f = options.borderWidth) !== null && _f !== void 0 ? _f : BORDER_WIDTH,
-                "line-offset": (_g = options.borderOffset) !== null && _g !== void 0 ? _g : (((_h = options.borderWidth) !== null && _h !== void 0 ? _h : BORDER_WIDTH) / 2) * -1,
+                'line-color': (_d = options.borderColor) !== null && _d !== void 0 ? _d : COLOR_BLACK,
+                'line-opacity': (_e = options.borderOpacity) !== null && _e !== void 0 ? _e : BORDER_OPACITY,
+                'line-width': (_f = options.borderWidth) !== null && _f !== void 0 ? _f : BORDER_WIDTH,
+                'line-offset': (_g = options.borderOffset) !== null && _g !== void 0 ? _g : (((_h = options.borderWidth) !== null && _h !== void 0 ? _h : BORDER_WIDTH) / 2) * -1,
             },
         });
         // utility function for setting layer visibility to none
         const hide = () => {
-            map.setLayoutProperty(fillLayerId, "visibility", "none");
-            map.setLayoutProperty(outlineLayerId, "visibility", "none");
+            map.setLayoutProperty(fillLayerId, 'visibility', 'none');
+            map.setLayoutProperty(outlineLayerId, 'visibility', 'none');
         };
         // utility function for setting layer visibility to visible
         const show = () => {
-            map.setLayoutProperty(fillLayerId, "visibility", "visible");
-            map.setLayoutProperty(outlineLayerId, "visibility", "visible");
+            map.setLayoutProperty(fillLayerId, 'visibility', 'visible');
+            map.setLayoutProperty(outlineLayerId, 'visibility', 'visible');
         };
         // utility function for checking layer visibility
         const isVisible = () => {
-            const visibility = map.getLayoutProperty(fillLayerId, "visibility");
-            return visibility === "visible";
+            const visibility = map.getLayoutProperty(fillLayerId, 'visibility');
+            return visibility === 'visible';
         };
         // utility function for setting layer visibility to visible
         const setData = (data) => {
@@ -926,55 +943,55 @@
         };
     }
 
-    const EDIT_ICON_PATH = "M0.5 12.375V15.5H3.625L12.8417 6.28333L9.71667 3.15833L0.5 12.375ZM2.93333 13.8333H2.16667V13.0667L9.71667 5.51667L10.4833 6.28333L2.93333 13.8333ZM15.2583 2.69167L13.3083 0.741667C13.1417 0.575 12.9333 0.5 12.7167 0.5C12.5 0.5 12.2917 0.583333 12.1333 0.741667L10.6083 2.26667L13.7333 5.39167L15.2583 3.86667C15.5833 3.54167 15.5833 3.01667 15.2583 2.69167Z";
+    const EDIT_ICON_PATH = 'M0.5 12.375V15.5H3.625L12.8417 6.28333L9.71667 3.15833L0.5 12.375ZM2.93333 13.8333H2.16667V13.0667L9.71667 5.51667L10.4833 6.28333L2.93333 13.8333ZM15.2583 2.69167L13.3083 0.741667C13.1417 0.575 12.9333 0.5 12.7167 0.5C12.5 0.5 12.2917 0.583333 12.1333 0.741667L10.6083 2.26667L13.7333 5.39167L15.2583 3.86667C15.5833 3.54167 15.5833 3.01667 15.2583 2.69167Z';
     function createEditIcon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        const iconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        customIcon.setAttribute("viewBox", "0 0 16 16");
-        customIcon.setAttribute("width", "16");
-        customIcon.setAttribute("height", "16");
-        customIcon.setAttribute("fill", "none");
-        iconPath.setAttribute("d", EDIT_ICON_PATH);
-        iconPath.setAttribute("fill", "white");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        customIcon.setAttribute('viewBox', '0 0 16 16');
+        customIcon.setAttribute('width', '16');
+        customIcon.setAttribute('height', '16');
+        customIcon.setAttribute('fill', 'none');
+        iconPath.setAttribute('d', EDIT_ICON_PATH);
+        iconPath.setAttribute('fill', 'white');
         customIcon.appendChild(iconPath);
         return customIcon;
     }
-    const TRASH_ICON_PATH = "M9.33317 5.5V13.8333H2.6665V5.5H9.33317ZM8.08317 0.5H3.9165L3.08317 1.33333H0.166504V3H11.8332V1.33333H8.9165L8.08317 0.5ZM10.9998 3.83333H0.999837V13.8333C0.999837 14.75 1.74984 15.5 2.6665 15.5H9.33317C10.2498 15.5 10.9998 14.75 10.9998 13.8333V3.83333Z";
+    const TRASH_ICON_PATH = 'M9.33317 5.5V13.8333H2.6665V5.5H9.33317ZM8.08317 0.5H3.9165L3.08317 1.33333H0.166504V3H11.8332V1.33333H8.9165L8.08317 0.5ZM10.9998 3.83333H0.999837V13.8333C0.999837 14.75 1.74984 15.5 2.6665 15.5H9.33317C10.2498 15.5 10.9998 14.75 10.9998 13.8333V3.83333Z';
     function createTrashIcon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        const iconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        customIcon.setAttribute("viewBox", "0 0 12 16");
-        customIcon.setAttribute("width", "12");
-        customIcon.setAttribute("height", "16");
-        customIcon.setAttribute("fill", "none");
-        iconPath.setAttribute("d", TRASH_ICON_PATH);
-        iconPath.setAttribute("fill", "white");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        customIcon.setAttribute('viewBox', '0 0 12 16');
+        customIcon.setAttribute('width', '12');
+        customIcon.setAttribute('height', '16');
+        customIcon.setAttribute('fill', 'none');
+        iconPath.setAttribute('d', TRASH_ICON_PATH);
+        iconPath.setAttribute('fill', 'white');
         customIcon.appendChild(iconPath);
         return customIcon;
     }
     function createPopupStep1Icon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        customIcon.setAttribute("viewBox", "0 0 38 38");
-        customIcon.setAttribute("width", "38");
-        customIcon.setAttribute("height", "38");
-        customIcon.setAttribute("fill", "none");
-        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-        circle.setAttribute("cx", "19");
-        circle.setAttribute("cy", "18");
-        circle.setAttribute("r", "8");
-        circle.setAttribute("fill", "#FF9900");
-        const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path1.setAttribute("d", "M19 0L23.3302 7.5H14.6699L19 0Z");
-        path1.setAttribute("fill", "#003560");
-        const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path2.setAttribute("d", "M19 36.5L14.6698 29H23.3301L19 36.5Z");
-        path2.setAttribute("fill", "#003560");
-        const path3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path3.setAttribute("d", "M0 18.33L7.5 13.9999L7.5 22.6602L0 18.33Z");
-        path3.setAttribute("fill", "#003560");
-        const path4 = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path4.setAttribute("d", "M37.5 18.3301L30 22.6603V14L37.5 18.3301Z");
-        path4.setAttribute("fill", "#003560");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        customIcon.setAttribute('viewBox', '0 0 38 38');
+        customIcon.setAttribute('width', '38');
+        customIcon.setAttribute('height', '38');
+        customIcon.setAttribute('fill', 'none');
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', '19');
+        circle.setAttribute('cy', '18');
+        circle.setAttribute('r', '8');
+        circle.setAttribute('fill', '#FF9900');
+        const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path1.setAttribute('d', 'M19 0L23.3302 7.5H14.6699L19 0Z');
+        path1.setAttribute('fill', '#003560');
+        const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path2.setAttribute('d', 'M19 36.5L14.6698 29H23.3301L19 36.5Z');
+        path2.setAttribute('fill', '#003560');
+        const path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path3.setAttribute('d', 'M0 18.33L7.5 13.9999L7.5 22.6602L0 18.33Z');
+        path3.setAttribute('fill', '#003560');
+        const path4 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path4.setAttribute('d', 'M37.5 18.3301L30 22.6603V14L37.5 18.3301Z');
+        path4.setAttribute('fill', '#003560');
         customIcon.appendChild(circle);
         customIcon.appendChild(path1);
         customIcon.appendChild(path2);
@@ -983,107 +1000,107 @@
         return customIcon;
     }
     function createPopupStep2Icon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        customIcon.setAttribute("viewBox", "0 0 42 27");
-        customIcon.setAttribute("width", "42");
-        customIcon.setAttribute("height", "27");
-        customIcon.setAttribute("fill", "none");
-        const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-        line.setAttribute("y1", "8");
-        line.setAttribute("x2", "42");
-        line.setAttribute("y2", "8");
-        line.setAttribute("stroke", "black");
-        line.setAttribute("stroke-width", "2");
-        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-        circle.setAttribute("cx", "21");
-        circle.setAttribute("cy", "8");
-        circle.setAttribute("r", "8");
-        circle.setAttribute("fill", "#FF9900");
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path.setAttribute("d", "M21 6.17822V22.488L24.6951 19.4356L27.172 26.1782L29.0399 25.3582L26.6035 18.57L31.4762 17.9322L21 6.17822Z");
-        path.setAttribute("fill", "#003560");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        customIcon.setAttribute('viewBox', '0 0 42 27');
+        customIcon.setAttribute('width', '42');
+        customIcon.setAttribute('height', '27');
+        customIcon.setAttribute('fill', 'none');
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('y1', '8');
+        line.setAttribute('x2', '42');
+        line.setAttribute('y2', '8');
+        line.setAttribute('stroke', 'black');
+        line.setAttribute('stroke-width', '2');
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', '21');
+        circle.setAttribute('cy', '8');
+        circle.setAttribute('r', '8');
+        circle.setAttribute('fill', '#FF9900');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M21 6.17822V22.488L24.6951 19.4356L27.172 26.1782L29.0399 25.3582L26.6035 18.57L31.4762 17.9322L21 6.17822Z');
+        path.setAttribute('fill', '#003560');
         customIcon.appendChild(line);
         customIcon.appendChild(circle);
         customIcon.appendChild(path);
         return customIcon;
     }
     function createPopupStep3Icon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        customIcon.setAttribute("viewBox", "0 0 32 32");
-        customIcon.setAttribute("width", "32");
-        customIcon.setAttribute("height", "32");
-        customIcon.setAttribute("fill", "none");
-        const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        rect.setAttribute("y", "1");
-        rect.setAttribute("x", "1");
-        rect.setAttribute("width", "30");
-        rect.setAttribute("height", "30");
-        rect.setAttribute("fill", "#2196F3");
-        rect.setAttribute("fill-opacity", "0.4");
-        rect.setAttribute("stroke", "#003560");
-        rect.setAttribute("stroke-width", "2");
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path.setAttribute("d", "M11 6V22.3098L14.6951 19.2574L17.172 26L19.0399 25.18L16.6035 18.3918L21.4762 17.754L11 6Z");
-        path.setAttribute("fill", "#003560");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        customIcon.setAttribute('viewBox', '0 0 32 32');
+        customIcon.setAttribute('width', '32');
+        customIcon.setAttribute('height', '32');
+        customIcon.setAttribute('fill', 'none');
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('y', '1');
+        rect.setAttribute('x', '1');
+        rect.setAttribute('width', '30');
+        rect.setAttribute('height', '30');
+        rect.setAttribute('fill', '#2196F3');
+        rect.setAttribute('fill-opacity', '0.4');
+        rect.setAttribute('stroke', '#003560');
+        rect.setAttribute('stroke-width', '2');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M11 6V22.3098L14.6951 19.2574L17.172 26L19.0399 25.18L16.6035 18.3918L21.4762 17.754L11 6Z');
+        path.setAttribute('fill', '#003560');
         customIcon.appendChild(rect);
         customIcon.appendChild(path);
         return customIcon;
     }
     function createPopupStep4Icon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        customIcon.setAttribute("viewBox", "0 0 64 20");
-        customIcon.setAttribute("width", "64");
-        customIcon.setAttribute("height", "20");
-        customIcon.setAttribute("fill", "none");
-        const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        rect.setAttribute("y", "0.5");
-        rect.setAttribute("x", "0.5");
-        rect.setAttribute("width", "63");
-        rect.setAttribute("height", "19");
-        rect.setAttribute("rx", "3.5");
-        rect.setAttribute("stroke", "#014478");
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path.setAttribute("d", "M14.4148 15C17.517 15 19.3118 13.076 19.3118 9.89418C19.3118 6.72727 17.517 4.81818 14.5192 4.81818H11.1186V15H14.4148ZM12.6548 13.6577V6.16051H14.4247C16.652 6.16051 17.8004 7.4929 17.8004 9.89418C17.8004 12.3054 16.652 13.6577 14.3303 13.6577H12.6548ZM24.394 15.1541C26.0595 15.1541 27.2377 14.3338 27.5758 13.0909L26.1689 12.8374C25.9004 13.5582 25.2541 13.9261 24.4089 13.9261C23.1362 13.9261 22.2811 13.1009 22.2413 11.6293H27.6703V11.1023C27.6703 8.34304 26.0197 7.2642 24.2896 7.2642C22.1618 7.2642 20.7598 8.88494 20.7598 11.2315C20.7598 13.603 22.1419 15.1541 24.394 15.1541ZM22.2463 10.5156C22.3059 9.43182 23.0914 8.49219 24.2995 8.49219C25.4529 8.49219 26.2086 9.3473 26.2136 10.5156H22.2463ZM30.8061 4.81818H29.3196V15H30.8061V4.81818ZM36.0971 15.1541C37.7626 15.1541 38.9409 14.3338 39.2789 13.0909L37.872 12.8374C37.6035 13.5582 36.9572 13.9261 36.112 13.9261C34.8393 13.9261 33.9842 13.1009 33.9444 11.6293H39.3734V11.1023C39.3734 8.34304 37.7228 7.2642 35.9927 7.2642C33.8649 7.2642 32.4629 8.88494 32.4629 11.2315C32.4629 13.603 33.845 15.1541 36.0971 15.1541ZM33.9494 10.5156C34.0091 9.43182 34.7946 8.49219 36.0027 8.49219C37.1561 8.49219 37.9118 9.3473 37.9167 10.5156H33.9494ZM44.5874 7.36364H43.0213V5.53409H41.5348V7.36364H40.4162V8.55682H41.5348V13.0661C41.5298 14.4531 42.5888 15.1243 43.7621 15.0994C44.2344 15.0945 44.5526 15.005 44.7266 14.9403L44.4581 13.7124C44.3587 13.7322 44.1747 13.777 43.9361 13.777C43.4538 13.777 43.0213 13.6179 43.0213 12.7578V8.55682H44.5874V7.36364ZM49.4409 15.1541C51.1064 15.1541 52.2846 14.3338 52.6227 13.0909L51.2157 12.8374C50.9473 13.5582 50.301 13.9261 49.4558 13.9261C48.1831 13.9261 47.3279 13.1009 47.2882 11.6293H52.7172V11.1023C52.7172 8.34304 51.0666 7.2642 49.3365 7.2642C47.2086 7.2642 45.8066 8.88494 45.8066 11.2315C45.8066 13.603 47.1887 15.1541 49.4409 15.1541ZM47.2931 10.5156C47.3528 9.43182 48.1383 8.49219 49.3464 8.49219C50.4998 8.49219 51.2555 9.3473 51.2605 10.5156H47.2931Z");
-        path.setAttribute("fill", "black");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        customIcon.setAttribute('viewBox', '0 0 64 20');
+        customIcon.setAttribute('width', '64');
+        customIcon.setAttribute('height', '20');
+        customIcon.setAttribute('fill', 'none');
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('y', '0.5');
+        rect.setAttribute('x', '0.5');
+        rect.setAttribute('width', '63');
+        rect.setAttribute('height', '19');
+        rect.setAttribute('rx', '3.5');
+        rect.setAttribute('stroke', '#014478');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M14.4148 15C17.517 15 19.3118 13.076 19.3118 9.89418C19.3118 6.72727 17.517 4.81818 14.5192 4.81818H11.1186V15H14.4148ZM12.6548 13.6577V6.16051H14.4247C16.652 6.16051 17.8004 7.4929 17.8004 9.89418C17.8004 12.3054 16.652 13.6577 14.3303 13.6577H12.6548ZM24.394 15.1541C26.0595 15.1541 27.2377 14.3338 27.5758 13.0909L26.1689 12.8374C25.9004 13.5582 25.2541 13.9261 24.4089 13.9261C23.1362 13.9261 22.2811 13.1009 22.2413 11.6293H27.6703V11.1023C27.6703 8.34304 26.0197 7.2642 24.2896 7.2642C22.1618 7.2642 20.7598 8.88494 20.7598 11.2315C20.7598 13.603 22.1419 15.1541 24.394 15.1541ZM22.2463 10.5156C22.3059 9.43182 23.0914 8.49219 24.2995 8.49219C25.4529 8.49219 26.2086 9.3473 26.2136 10.5156H22.2463ZM30.8061 4.81818H29.3196V15H30.8061V4.81818ZM36.0971 15.1541C37.7626 15.1541 38.9409 14.3338 39.2789 13.0909L37.872 12.8374C37.6035 13.5582 36.9572 13.9261 36.112 13.9261C34.8393 13.9261 33.9842 13.1009 33.9444 11.6293H39.3734V11.1023C39.3734 8.34304 37.7228 7.2642 35.9927 7.2642C33.8649 7.2642 32.4629 8.88494 32.4629 11.2315C32.4629 13.603 33.845 15.1541 36.0971 15.1541ZM33.9494 10.5156C34.0091 9.43182 34.7946 8.49219 36.0027 8.49219C37.1561 8.49219 37.9118 9.3473 37.9167 10.5156H33.9494ZM44.5874 7.36364H43.0213V5.53409H41.5348V7.36364H40.4162V8.55682H41.5348V13.0661C41.5298 14.4531 42.5888 15.1243 43.7621 15.0994C44.2344 15.0945 44.5526 15.005 44.7266 14.9403L44.4581 13.7124C44.3587 13.7322 44.1747 13.777 43.9361 13.777C43.4538 13.777 43.0213 13.6179 43.0213 12.7578V8.55682H44.5874V7.36364ZM49.4409 15.1541C51.1064 15.1541 52.2846 14.3338 52.6227 13.0909L51.2157 12.8374C50.9473 13.5582 50.301 13.9261 49.4558 13.9261C48.1831 13.9261 47.3279 13.1009 47.2882 11.6293H52.7172V11.1023C52.7172 8.34304 51.0666 7.2642 49.3365 7.2642C47.2086 7.2642 45.8066 8.88494 45.8066 11.2315C45.8066 13.603 47.1887 15.1541 49.4409 15.1541ZM47.2931 10.5156C47.3528 9.43182 48.1383 8.49219 49.3464 8.49219C50.4998 8.49219 51.2555 9.3473 51.2605 10.5156H47.2931Z');
+        path.setAttribute('fill', 'black');
         customIcon.appendChild(rect);
         customIcon.appendChild(path);
         return customIcon;
     }
     function createDeleteSuccessIcon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        customIcon.setAttribute("viewBox", "0 0 12 12");
-        customIcon.setAttribute("width", "12");
-        customIcon.setAttribute("height", "12");
-        customIcon.setAttribute("fill", "none");
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path.setAttribute("d", "M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM6 10.8C3.354 10.8 1.2 8.646 1.2 6C1.2 3.354 3.354 1.2 6 1.2C8.646 1.2 10.8 3.354 10.8 6C10.8 8.646 8.646 10.8 6 10.8ZM8.754 3.348L4.8 7.302L3.246 5.754L2.4 6.6L4.8 9L9.6 4.2L8.754 3.348Z");
-        path.setAttribute("fill", "white");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        customIcon.setAttribute('viewBox', '0 0 12 12');
+        customIcon.setAttribute('width', '12');
+        customIcon.setAttribute('height', '12');
+        customIcon.setAttribute('fill', 'none');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M6 0C2.688 0 0 2.688 0 6C0 9.312 2.688 12 6 12C9.312 12 12 9.312 12 6C12 2.688 9.312 0 6 0ZM6 10.8C3.354 10.8 1.2 8.646 1.2 6C1.2 3.354 3.354 1.2 6 1.2C8.646 1.2 10.8 3.354 10.8 6C10.8 8.646 8.646 10.8 6 10.8ZM8.754 3.348L4.8 7.302L3.246 5.754L2.4 6.6L4.8 9L9.6 4.2L8.754 3.348Z');
+        path.setAttribute('fill', 'white');
         customIcon.appendChild(path);
         return customIcon;
     }
     function createCloseIcon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        customIcon.setAttribute("viewBox", "0 0 12 12");
-        customIcon.setAttribute("width", "12");
-        customIcon.setAttribute("height", "12");
-        customIcon.setAttribute("fill", "none");
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path.setAttribute("d", "M10.773 2.28762L9.71231 1.22696L6 4.93927L2.28769 1.22696L1.22703 2.28762L4.93934 5.99993L1.22703 9.71224L2.28769 10.7729L6 7.06059L9.71231 10.7729L10.773 9.71224L7.06066 5.99993L10.773 2.28762Z");
-        path.setAttribute("fill", "white");
-        path.setAttribute("fill-rule", "evenodd");
-        path.setAttribute("clip-rule", "evenodd");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        customIcon.setAttribute('viewBox', '0 0 12 12');
+        customIcon.setAttribute('width', '12');
+        customIcon.setAttribute('height', '12');
+        customIcon.setAttribute('fill', 'none');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M10.773 2.28762L9.71231 1.22696L6 4.93927L2.28769 1.22696L1.22703 2.28762L4.93934 5.99993L1.22703 9.71224L2.28769 10.7729L6 7.06059L9.71231 10.7729L10.773 9.71224L7.06066 5.99993L10.773 2.28762Z');
+        path.setAttribute('fill', 'white');
+        path.setAttribute('fill-rule', 'evenodd');
+        path.setAttribute('clip-rule', 'evenodd');
         customIcon.appendChild(path);
         return customIcon;
     }
     function createErrorIcon() {
-        const customIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        customIcon.setAttribute("viewBox", "0 0 12 10");
-        customIcon.setAttribute("width", "12");
-        customIcon.setAttribute("height", "10");
-        customIcon.setAttribute("fill", "none");
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path.setAttribute("d", "M0 10H11.5789L5.78947 0L0 10ZM6.31579 8.42105H5.26316V7.36842H6.31579V8.42105ZM6.31579 6.31579H5.26316V4.21053H6.31579V6.31579Z");
-        path.setAttribute("fill", "#FF5050");
+        const customIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        customIcon.setAttribute('viewBox', '0 0 12 10');
+        customIcon.setAttribute('width', '12');
+        customIcon.setAttribute('height', '10');
+        customIcon.setAttribute('fill', 'none');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M0 10H11.5789L5.78947 0L0 10ZM6.31579 8.42105H5.26316V7.36842H6.31579V8.42105ZM6.31579 6.31579H5.26316V4.21053H6.31579V6.31579Z');
+        path.setAttribute('fill', '#FF5050');
         customIcon.appendChild(path);
         return customIcon;
     }
@@ -1116,7 +1133,7 @@
             if (map._controlPositions[positionName]) {
                 return;
             }
-            const positionContainer = document.createElement("div");
+            const positionContainer = document.createElement('div');
             positionContainer.className = `maplibregl-ctrl-${positionName}`;
             map._controlContainer.appendChild(positionContainer);
             map._controlPositions[positionName] = positionContainer;
@@ -1125,16 +1142,16 @@
          * Create Geofence Controls
          *************************************************************/
         function createGeofenceCreateContainer(isCircle) {
-            const container = createElement("div", "geofence-ctrl-create-prompt-container", geofenceControlContainer);
-            _createContainer = createElement("div", "geofence-ctrl-create-prompt", container);
+            const container = createElement('div', 'geofence-ctrl-create-prompt-container', geofenceControlContainer);
+            _createContainer = createElement('div', 'geofence-ctrl-create-prompt', container);
             if (isCircle) {
                 /* Create buttons to switch between different modes */
-                const buttonContainer = createElement("div", "geofence-ctrl-create-prompt-buttons", _createContainer);
-                const circleModeButton = createElement("div", "geofence-ctrl-create-prompt-button-circle geofence-ctrl-create-prompt-button", buttonContainer);
-                circleModeButton.addEventListener("click", () => {
+                const buttonContainer = createElement('div', 'geofence-ctrl-create-prompt-buttons', _createContainer);
+                const circleModeButton = createElement('div', 'geofence-ctrl-create-prompt-button-circle geofence-ctrl-create-prompt-button', buttonContainer);
+                circleModeButton.addEventListener('click', () => {
                     // Change button selected style
-                    circleModeButton.classList.add("geofence-ctrl-create-prompt-selected");
-                    polygonModeButton.classList.remove("geofence-ctrl-create-prompt-selected");
+                    circleModeButton.classList.add('geofence-ctrl-create-prompt-selected');
+                    polygonModeButton.classList.remove('geofence-ctrl-create-prompt-selected');
                     // Switch info box mode
                     if (_polygonModeContainer) {
                         removeElement(_polygonModeContainer);
@@ -1142,15 +1159,15 @@
                     }
                     if (!_circleModeContainer)
                         createCircleModeCreateContainer(_createContainer);
-                    geofenceControl.changeMode("draw_circle");
+                    geofenceControl.changeMode('draw_circle');
                 });
-                circleModeButton.innerHTML = "Circle";
-                const polygonModeButton = createElement("div", "geofence-ctrl-create-prompt-button-polygon geofence-ctrl-create-prompt-button", buttonContainer);
-                polygonModeButton.addEventListener("click", () => {
-                    geofenceControl.changeMode("draw_polygon");
+                circleModeButton.innerHTML = 'Circle';
+                const polygonModeButton = createElement('div', 'geofence-ctrl-create-prompt-button-polygon geofence-ctrl-create-prompt-button', buttonContainer);
+                polygonModeButton.addEventListener('click', () => {
+                    geofenceControl.changeMode('draw_polygon');
                     // Change button selected style
-                    polygonModeButton.classList.add("geofence-ctrl-create-prompt-selected");
-                    circleModeButton.classList.remove("geofence-ctrl-create-prompt-selected");
+                    polygonModeButton.classList.add('geofence-ctrl-create-prompt-selected');
+                    circleModeButton.classList.remove('geofence-ctrl-create-prompt-selected');
                     // Switch info box mode
                     if (_circleModeContainer) {
                         removeElement(_circleModeContainer);
@@ -1159,8 +1176,8 @@
                     if (!_polygonModeContainer)
                         createPolygonModeCreateContainer(_createContainer);
                 });
-                polygonModeButton.innerHTML = "Custom";
-                circleModeButton.classList.add("geofence-ctrl-create-prompt-selected");
+                polygonModeButton.innerHTML = 'Custom';
+                circleModeButton.classList.add('geofence-ctrl-create-prompt-selected');
                 createCircleModeCreateContainer(_createContainer);
             }
             else {
@@ -1168,45 +1185,45 @@
             }
         }
         function createCircleModeCreateContainer(container) {
-            _circleModeContainer = createElement("div", "geofence-ctrl-create-circle-mode-container", container);
-            const radiusTitle = createElement("div", "geofence-ctrl-create-circle-mode-title", _circleModeContainer);
-            radiusTitle.innerHTML = "Radius";
-            _geofenceCreateRadiusInput = createElement("input", "geofence-ctrl-create-circle-mode-input", _circleModeContainer);
-            _geofenceCreateRadiusInput.addEventListener("keydown", debounce.debounce(geofenceControl.updateInputRadius, 200));
+            _circleModeContainer = createElement('div', 'geofence-ctrl-create-circle-mode-container', container);
+            const radiusTitle = createElement('div', 'geofence-ctrl-create-circle-mode-title', _circleModeContainer);
+            radiusTitle.innerHTML = 'Radius';
+            _geofenceCreateRadiusInput = createElement('input', 'geofence-ctrl-create-circle-mode-input', _circleModeContainer);
+            _geofenceCreateRadiusInput.addEventListener('keydown', debounce.debounce(geofenceControl.updateInputRadius, 200));
         }
         function createPolygonModeCreateContainer(container) {
-            _polygonModeContainer = createElement("div", "geofence-ctrl-create-polygon-mode-container", container);
-            const moreInfoContainer = createElement("div", "geofence-ctrl-create-polygon-mode-info-container", _polygonModeContainer);
-            const moreInfoIcon = createElement("div", "geofence-ctrl-create-polygon-mode-icon", moreInfoContainer);
-            const letterI = createElement("div", "geofence-ctrl-create-polygon-mode-info-icon", moreInfoIcon);
-            letterI.innerHTML = "i";
-            const moreInfo = createElement("div", "geofence-ctrl-create-polygon-mode-title", moreInfoContainer);
-            moreInfo.innerHTML = "How it works?";
-            const resetButton = createElement("div", "geofence-ctrl-create-polygon-mode-reset-button geofence-ctrl-button", _polygonModeContainer);
-            resetButton.innerHTML = "Reset";
-            resetButton.addEventListener("click", () => {
+            _polygonModeContainer = createElement('div', 'geofence-ctrl-create-polygon-mode-container', container);
+            const moreInfoContainer = createElement('div', 'geofence-ctrl-create-polygon-mode-info-container', _polygonModeContainer);
+            const moreInfoIcon = createElement('div', 'geofence-ctrl-create-polygon-mode-icon', moreInfoContainer);
+            const letterI = createElement('div', 'geofence-ctrl-create-polygon-mode-info-icon', moreInfoIcon);
+            letterI.innerHTML = 'i';
+            const moreInfo = createElement('div', 'geofence-ctrl-create-polygon-mode-title', moreInfoContainer);
+            moreInfo.innerHTML = 'How it works?';
+            const resetButton = createElement('div', 'geofence-ctrl-create-polygon-mode-reset-button geofence-ctrl-button', _polygonModeContainer);
+            resetButton.innerHTML = 'Reset';
+            resetButton.addEventListener('click', () => {
                 geofenceControl.resetGeofence();
             });
             // Add popup onClick
             const popup = createPolygonModeInfoPopup(moreInfoIcon);
-            moreInfoContainer.addEventListener("click", () => {
-                popup.classList.toggle("show");
+            moreInfoContainer.addEventListener('click', () => {
+                popup.classList.toggle('show');
             });
         }
         function createPolygonModeInfoPopup(container) {
-            const popupContainer = createElement("div", "geofence-ctrl-create-polygon-mode-popup-container", container);
-            const popup = createElement("div", "geofence-ctrl-create-polygon-mode-popup", popupContainer);
-            createPopupStep(popup, "Move dots to desired position", createPopupStep1Icon());
-            createPopupStep(popup, "Click on a border to create a dot", createPopupStep2Icon());
-            createPopupStep(popup, "Click into shape to move", createPopupStep3Icon());
-            createPopupStep(popup, "Press delete to remove a dot", createPopupStep4Icon());
+            const popupContainer = createElement('div', 'geofence-ctrl-create-polygon-mode-popup-container', container);
+            const popup = createElement('div', 'geofence-ctrl-create-polygon-mode-popup', popupContainer);
+            createPopupStep(popup, 'Move dots to desired position', createPopupStep1Icon());
+            createPopupStep(popup, 'Click on a border to create a dot', createPopupStep2Icon());
+            createPopupStep(popup, 'Click into shape to move', createPopupStep3Icon());
+            createPopupStep(popup, 'Press delete to remove a dot', createPopupStep4Icon());
             return popup;
         }
         function createPopupStep(container, text, image) {
-            const popupStep = createElement("div", "geofence-ctrl-create-polygon-mode-popup-step", container);
-            const popupStepImage = createElement("div", "geofence-ctrl-create-polygon-mode-popup-step-image", popupStep);
+            const popupStep = createElement('div', 'geofence-ctrl-create-polygon-mode-popup-step', container);
+            const popupStepImage = createElement('div', 'geofence-ctrl-create-polygon-mode-popup-step-image', popupStep);
             popupStepImage.appendChild(image);
-            const popupStepText = createElement("div", "geofence-ctrl-create-polygon-mode-popup-step-text", popupStep);
+            const popupStepText = createElement('div', 'geofence-ctrl-create-polygon-mode-popup-step-text', popupStep);
             popupStepText.innerHTML = text;
         }
         function removeGeofenceCreateContainer() {
@@ -1219,10 +1236,10 @@
          * Geofence List
          *************************************************************/
         function createGeofenceListContainer() {
-            const geofenceListContainer = createElement("div", "geofence-ctrl-list-container", geofenceControlContainer);
+            const geofenceListContainer = createElement('div', 'geofence-ctrl-list-container', geofenceControlContainer);
             createGeofenceListHeader(geofenceListContainer);
-            _geofenceList = createElement("div", "geofence-ctrl-list", geofenceListContainer);
-            _geofenceList.addEventListener("scroll", () => {
+            _geofenceList = createElement('div', 'geofence-ctrl-list', geofenceListContainer);
+            _geofenceList.addEventListener('scroll', () => {
                 const { scrollHeight, scrollTop, clientHeight } = _geofenceList;
                 if (scrollTop + clientHeight >= scrollHeight - 20) {
                     geofenceControl.loadMoreGeofences();
@@ -1230,43 +1247,43 @@
             });
         }
         function createGeofenceListHeader(geofenceListContainer) {
-            const header = createElement("div", "geofence-ctrl-list-header", geofenceListContainer);
-            _geofenceTitle = createElement("div", "geofence-ctrl-list-header-title", header);
-            _geofenceTitle.innerHTML = "Geofences (0)";
-            _checkBoxAllAndCreateContainer = createElement("div", "geofence-ctrl-list-header-checkbox-create-container", header);
+            const header = createElement('div', 'geofence-ctrl-list-header', geofenceListContainer);
+            _geofenceTitle = createElement('div', 'geofence-ctrl-list-header-title', header);
+            _geofenceTitle.innerHTML = 'Geofences (0)';
+            _checkBoxAllAndCreateContainer = createElement('div', 'geofence-ctrl-list-header-checkbox-create-container', header);
             createCheckboxAllContainer(_checkBoxAllAndCreateContainer);
         }
         function createCheckboxAllContainer(geofenceListContainer) {
-            _checkBoxAllContainer = createElement("div", "geofence-ctrl-list-checkbox-all-container", geofenceListContainer);
-            _checkboxAll = createElement("input", "geofence-ctrl-list-checkbox-all", _checkBoxAllContainer);
-            _checkboxAll.type = "checkbox";
-            _checkboxAll.addEventListener("click", function () {
+            _checkBoxAllContainer = createElement('div', 'geofence-ctrl-list-checkbox-all-container', geofenceListContainer);
+            _checkboxAll = createElement('input', 'geofence-ctrl-list-checkbox-all', _checkBoxAllContainer);
+            _checkboxAll.type = 'checkbox';
+            _checkboxAll.addEventListener('click', function () {
                 if (_checkboxAll.checked) {
                     geofenceControl.displayAllGeofences();
-                    checkboxAllText.innerHTML = "Deselect All";
+                    checkboxAllText.innerHTML = 'Deselect All';
                 }
                 else {
                     geofenceControl.hideAllGeofences();
-                    checkboxAllText.innerHTML = "Select All";
+                    checkboxAllText.innerHTML = 'Select All';
                 }
             });
-            const checkboxAllText = createElement("div", "geofence-ctrl-list-checkbox-all-title", _checkBoxAllContainer);
-            checkboxAllText.innerHTML = "Select all";
-            _addGeofencebutton = createElement("div", "geofence-ctrl-list-header-add-button", _checkBoxAllContainer);
-            _addGeofencebutton.innerHTML = "+ Add";
-            _addGeofencebutton.addEventListener("click", () => {
+            const checkboxAllText = createElement('div', 'geofence-ctrl-list-checkbox-all-title', _checkBoxAllContainer);
+            checkboxAllText.innerHTML = 'Select all';
+            _addGeofencebutton = createElement('div', 'geofence-ctrl-list-header-add-button', _checkBoxAllContainer);
+            _addGeofencebutton.innerHTML = '+ Add';
+            _addGeofencebutton.addEventListener('click', () => {
                 createAddGeofenceContainer();
             });
         }
         function renderListItem(geofence) {
-            const container = createElement("li", "geofence-ctrl-list-item-container", _geofenceList);
+            const container = createElement('li', 'geofence-ctrl-list-item-container', _geofenceList);
             container.id = `list-item-${geofence.geofenceId}`;
-            const listItem = createElement("li", "geofence-ctrl-list-item", container);
-            const leftContainer = createElement("div", "geofence-ctrl-list-item-left-container", listItem);
-            const checkbox = createElement("input", "geofence-ctrl-list-item-checkbox", leftContainer);
+            const listItem = createElement('li', 'geofence-ctrl-list-item', container);
+            const leftContainer = createElement('div', 'geofence-ctrl-list-item-left-container', listItem);
+            const checkbox = createElement('input', 'geofence-ctrl-list-item-checkbox', leftContainer);
             checkbox.id = `list-item-checkbox-${geofence.geofenceId}`;
-            checkbox.type = "checkbox";
-            checkbox.addEventListener("click", function () {
+            checkbox.type = 'checkbox';
+            checkbox.addEventListener('click', function () {
                 if (checkbox.checked) {
                     geofenceControl.displayGeofence(geofence.geofenceId);
                     geofenceControl.fitGeofence(geofence.geofenceId);
@@ -1275,48 +1292,48 @@
                     geofenceControl.hideGeofence(geofence.geofenceId);
                 }
             });
-            const rightContainer = createElement("div", "geofence-ctrl-list-item-right-container", listItem);
-            const geofenceTitleContainer = createElement("div", "geofence-ctrl-list-item-title-container", rightContainer);
-            geofenceTitleContainer.addEventListener("mouseover", function () {
+            const rightContainer = createElement('div', 'geofence-ctrl-list-item-right-container', listItem);
+            const geofenceTitleContainer = createElement('div', 'geofence-ctrl-list-item-title-container', rightContainer);
+            geofenceTitleContainer.addEventListener('mouseover', function () {
                 geofenceControl.displayHighlightedGeofence(geofence.geofenceId);
             });
-            geofenceTitleContainer.addEventListener("mouseout", function () {
+            geofenceTitleContainer.addEventListener('mouseout', function () {
                 geofenceControl.hideHighlightedGeofence();
             });
-            const geofenceTitle = createElement("div", "geofence-ctrl-list-item-title", geofenceTitleContainer);
+            const geofenceTitle = createElement('div', 'geofence-ctrl-list-item-title', geofenceTitleContainer);
             geofenceTitle.innerHTML = geofence.geofenceId;
-            const editButton = createElement("div", "geofence-ctrl-edit-button", geofenceTitleContainer);
-            editButton.addEventListener("click", function () {
+            const editButton = createElement('div', 'geofence-ctrl-edit-button', geofenceTitleContainer);
+            editButton.addEventListener('click', function () {
                 geofenceControl.editGeofence(geofence.geofenceId);
                 createEditControls(listItem, rightContainer, leftContainer, geofence.geofenceId);
-                listItem.classList.remove("geofence-ctrl-list-item");
-                listItem.classList.add("geofence-ctrl-list-selected-item");
+                listItem.classList.remove('geofence-ctrl-list-item');
+                listItem.classList.add('geofence-ctrl-list-selected-item');
             });
             editButton.appendChild(createEditIcon());
         }
         function createEditControls(item, rightContainer, leftContainer, id) {
-            const editContainer = createElement("div", "geofence-ctrl-list-item-controls", rightContainer);
+            const editContainer = createElement('div', 'geofence-ctrl-list-item-controls', rightContainer);
             const deleteButton = renderDeleteButton(leftContainer, id);
             const removeEditContainer = () => {
-                item.classList.remove("geofence-ctrl-list-selected-item");
-                item.classList.add("geofence-ctrl-list-item");
+                item.classList.remove('geofence-ctrl-list-selected-item');
+                item.classList.add('geofence-ctrl-list-item');
                 removeElement(editContainer);
                 removeElement(deleteButton);
             };
-            const cancelButton = createElement("div", "geofence-ctrl-cancel-button", editContainer);
-            cancelButton.classList.add("geofence-ctrl-button");
-            cancelButton.innerHTML = "Cancel";
-            cancelButton.addEventListener("click", () => {
+            const cancelButton = createElement('div', 'geofence-ctrl-cancel-button', editContainer);
+            cancelButton.classList.add('geofence-ctrl-button');
+            cancelButton.innerHTML = 'Cancel';
+            cancelButton.addEventListener('click', () => {
                 geofenceControl.setEditingModeEnabled(false);
                 removeEditContainer();
             });
-            const saveGeofenceButton = createElement("div", "geofence-ctrl-save-button geofence-ctrl-button", editContainer);
-            saveGeofenceButton.addEventListener("click", () => __awaiter$1(this, void 0, void 0, function* () {
+            const saveGeofenceButton = createElement('div', 'geofence-ctrl-save-button geofence-ctrl-button', editContainer);
+            saveGeofenceButton.addEventListener('click', () => __awaiter$1(this, void 0, void 0, function* () {
                 yield geofenceControl.saveGeofence();
                 removeEditContainer();
             }));
-            saveGeofenceButton.title = "Save";
-            saveGeofenceButton.innerHTML = "Save";
+            saveGeofenceButton.title = 'Save';
+            saveGeofenceButton.innerHTML = 'Save';
         }
         /************************************************************
          * Add Geofence Controls
@@ -1334,20 +1351,20 @@
         }
         function createAddGeofenceContainer() {
             hideCheckboxAllContainer();
-            _addGeofenceContainer = createElement("div", "geofence-ctrl-add-geofence-container", _checkBoxAllAndCreateContainer);
-            const addGeofencePrompt = createElement("div", "geofence-ctrl-add-geofence", _addGeofenceContainer);
-            const nameInput = createElement("input", "geofence-ctrl-add-geofence-input", addGeofencePrompt);
-            nameInput.placeholder = "Enter name";
-            const buttonContainer = createElement("div", "geofence-ctrl-add-geofence-buttons", addGeofencePrompt);
-            const cancelButton = createElement("div", "geofence-ctrl-add-geofence-cancel-button geofence-ctrl-button ", buttonContainer);
-            cancelButton.innerHTML = "Cancel";
-            cancelButton.addEventListener("click", () => {
+            _addGeofenceContainer = createElement('div', 'geofence-ctrl-add-geofence-container', _checkBoxAllAndCreateContainer);
+            const addGeofencePrompt = createElement('div', 'geofence-ctrl-add-geofence', _addGeofenceContainer);
+            const nameInput = createElement('input', 'geofence-ctrl-add-geofence-input', addGeofencePrompt);
+            nameInput.placeholder = 'Enter name';
+            const buttonContainer = createElement('div', 'geofence-ctrl-add-geofence-buttons', addGeofencePrompt);
+            const cancelButton = createElement('div', 'geofence-ctrl-add-geofence-cancel-button geofence-ctrl-button ', buttonContainer);
+            cancelButton.innerHTML = 'Cancel';
+            cancelButton.addEventListener('click', () => {
                 removeAddGeofenceContainer();
                 geofenceControl.setEditingModeEnabled(false);
             });
-            const saveButton = createElement("div", "geofence-ctrl-button geofence-ctrl-save-button", buttonContainer);
-            saveButton.innerHTML = "Save";
-            saveButton.addEventListener("click", function () {
+            const saveButton = createElement('div', 'geofence-ctrl-button geofence-ctrl-save-button', buttonContainer);
+            saveButton.innerHTML = 'Save';
+            saveButton.addEventListener('click', function () {
                 return __awaiter$1(this, void 0, void 0, function* () {
                     clearAddGeofenceError();
                     const output = yield geofenceControl.createGeofence(escape(nameInput.value));
@@ -1361,41 +1378,41 @@
             if (_errorDiv) {
                 return;
             }
-            _errorDiv = createElement("div", "geofence-ctrl-add-geofence-error", _addGeofenceContainer);
-            const errorIconContainer = createElement("div", "geofence-ctrl-add-geofence-error-icon", _errorDiv);
+            _errorDiv = createElement('div', 'geofence-ctrl-add-geofence-error', _addGeofenceContainer);
+            const errorIconContainer = createElement('div', 'geofence-ctrl-add-geofence-error-icon', _errorDiv);
             errorIconContainer.appendChild(createErrorIcon());
-            const errorText = createElement("div", "geofence-ctrl-add-geofence-error-text", _errorDiv);
+            const errorText = createElement('div', 'geofence-ctrl-add-geofence-error-text', _errorDiv);
             errorText.innerHTML = error;
         }
         /************************************************************
          * Delete Controls
          *************************************************************/
         function renderDeleteButton(container, id) {
-            const deleteButton = createElement("div", "geofence-ctrl-delete-button", container);
-            deleteButton.classList.add("geofence-ctrl-button");
-            deleteButton.addEventListener("click", function () {
+            const deleteButton = createElement('div', 'geofence-ctrl-delete-button', container);
+            deleteButton.classList.add('geofence-ctrl-button');
+            deleteButton.addEventListener('click', function () {
                 createConfirmDeleteContainer(id);
             });
             deleteButton.appendChild(createTrashIcon());
             return deleteButton;
         }
         function createConfirmDeleteContainer(geofenceId) {
-            _deleteGeofenceContainer = createElement("div", "geofence-ctrl-delete-prompt-container", geofenceControlContainer);
-            const deleteGeofencePrompt = createElement("div", "geofence-ctrl-delete-prompt", _deleteGeofenceContainer);
-            const title = createElement("div", "geofence-ctrl-delete-geofence-title", deleteGeofencePrompt);
+            _deleteGeofenceContainer = createElement('div', 'geofence-ctrl-delete-prompt-container', geofenceControlContainer);
+            const deleteGeofencePrompt = createElement('div', 'geofence-ctrl-delete-prompt', _deleteGeofenceContainer);
+            const title = createElement('div', 'geofence-ctrl-delete-geofence-title', deleteGeofencePrompt);
             title.innerHTML = `Are you sure you want to delete <strong>${geofenceId}</strong>?`;
             createDeleteButtonsContainer(deleteGeofencePrompt, geofenceId);
         }
         function createDeleteButtonsContainer(container, geofenceId) {
-            const deleteButtonsContainer = createElement("div", "geofence-ctrl-delete-geofence-buttons", container);
-            const cancelButton = createElement("div", "geofence-ctrl-delete-geofence-cancel-button", deleteButtonsContainer);
-            cancelButton.innerHTML = "Cancel";
-            cancelButton.addEventListener("click", () => {
+            const deleteButtonsContainer = createElement('div', 'geofence-ctrl-delete-geofence-buttons', container);
+            const cancelButton = createElement('div', 'geofence-ctrl-delete-geofence-cancel-button', deleteButtonsContainer);
+            cancelButton.innerHTML = 'Cancel';
+            cancelButton.addEventListener('click', () => {
                 removeElement(_deleteGeofenceContainer);
             });
-            const confirmDeleteButton = createElement("div", "geofence-ctrl-delete-geofence-confirm-button", deleteButtonsContainer);
-            confirmDeleteButton.innerHTML = "Delete";
-            confirmDeleteButton.addEventListener("click", function () {
+            const confirmDeleteButton = createElement('div', 'geofence-ctrl-delete-geofence-confirm-button', deleteButtonsContainer);
+            confirmDeleteButton.innerHTML = 'Delete';
+            confirmDeleteButton.addEventListener('click', function () {
                 return __awaiter$1(this, void 0, void 0, function* () {
                     const id = yield geofenceControl.deleteGeofence(geofenceId);
                     if (id) {
@@ -1407,19 +1424,19 @@
             });
         }
         function createDeleteResultContainer(success) {
-            _deletePopdownContainer = createElement("div", "geofence-ctrl-delete-popdown-container", geofenceControlContainer);
-            const deletePopdown = createElement("div", "geofence-ctrl-delete-popdown", _deletePopdownContainer);
-            const deletePopdownCloseButton = createElement("div", "geofence-ctrl-delete-popdown-close-button", _deletePopdownContainer);
+            _deletePopdownContainer = createElement('div', 'geofence-ctrl-delete-popdown-container', geofenceControlContainer);
+            const deletePopdown = createElement('div', 'geofence-ctrl-delete-popdown', _deletePopdownContainer);
+            const deletePopdownCloseButton = createElement('div', 'geofence-ctrl-delete-popdown-close-button', _deletePopdownContainer);
             deletePopdownCloseButton.appendChild(createCloseIcon());
-            deletePopdownCloseButton.addEventListener("click", () => {
+            deletePopdownCloseButton.addEventListener('click', () => {
                 removeElement(_deletePopdownContainer);
             });
-            const deleteSuccessIcon = createElement("div", "geofence-ctrl-delete-popdown-icon", deletePopdown);
+            const deleteSuccessIcon = createElement('div', 'geofence-ctrl-delete-popdown-icon', deletePopdown);
             deleteSuccessIcon.appendChild(createDeleteSuccessIcon());
-            const deletePopdownText = createElement("div", "geofence-ctrl-delete-popdown-text", deletePopdown);
+            const deletePopdownText = createElement('div', 'geofence-ctrl-delete-popdown-text', deletePopdown);
             deletePopdownText.innerHTML = success
-                ? "Geofence was deleted successfully"
-                : "Geofence failed to delete";
+                ? 'Geofence was deleted successfully'
+                : 'Geofence failed to delete';
         }
         /************************************************************
          * Utility Methods
@@ -1436,17 +1453,17 @@
         function setGeofenceListEnabled(enabled) {
             _checkboxAll.disabled = !enabled;
             enabled
-                ? _addGeofencebutton.classList.remove("geofence-ctrl-noHover")
-                : _addGeofencebutton.classList.add("geofence-ctrl-noHover");
-            const inputs = document.getElementsByClassName("geofence-ctrl-list-item-checkbox");
+                ? _addGeofencebutton.classList.remove('geofence-ctrl-noHover')
+                : _addGeofencebutton.classList.add('geofence-ctrl-noHover');
+            const inputs = document.getElementsByClassName('geofence-ctrl-list-item-checkbox');
             for (let i = 0; i < inputs.length; i++) {
                 inputs.item(i).disabled = !enabled;
             }
-            const items = document.getElementsByClassName("geofence-ctrl-list-item-container");
+            const items = document.getElementsByClassName('geofence-ctrl-list-item-container');
             for (let i = 0; i < items.length; i++) {
                 enabled
-                    ? items.item(i).classList.remove("geofence-ctrl-noHover")
-                    : items.item(i).classList.add("geofence-ctrl-noHover");
+                    ? items.item(i).classList.remove('geofence-ctrl-noHover')
+                    : items.item(i).classList.add('geofence-ctrl-noHover');
             }
         }
         function getCheckboxAllValue() {
@@ -1460,10 +1477,10 @@
                 _geofenceCreateRadiusInput.value = `${radius}`;
         }
         function hideCheckboxAllContainer() {
-            _checkBoxAllContainer.style.display = "none";
+            _checkBoxAllContainer.style.display = 'none';
         }
         function showCheckboxAllContainer() {
-            _checkBoxAllContainer.style.display = "flex";
+            _checkBoxAllContainer.style.display = 'flex';
         }
         return {
             registerControlPosition,
@@ -1488,7 +1505,7 @@
         constructor(map, ui) {
             this._mapBoxDraw = new MapboxDraw__default["default"]({
                 displayControlsDefault: false,
-                defaultMode: "simple_select",
+                defaultMode: 'simple_select',
                 userProperties: true,
                 controls: {
                     trash: true,
@@ -1498,54 +1515,54 @@
                     // ACTIVE (being drawn)
                     // polygon fill
                     {
-                        id: "gl-draw-polygon-fill",
-                        type: "fill",
-                        filter: ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+                        id: 'gl-draw-polygon-fill',
+                        type: 'fill',
+                        filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
                         paint: {
-                            "fill-color": GEOFENCE_COLOR,
-                            "fill-outline-color": GEOFENCE_COLOR,
-                            "fill-opacity": 0.3,
+                            'fill-color': GEOFENCE_COLOR,
+                            'fill-outline-color': GEOFENCE_COLOR,
+                            'fill-opacity': 0.3,
                         },
                     },
                     // polygon mid points
                     {
-                        id: "gl-draw-polygon-midpoint",
-                        type: "circle",
-                        filter: ["all", ["==", "$type", "Point"], ["==", "meta", "midpoint"]],
+                        id: 'gl-draw-polygon-midpoint',
+                        type: 'circle',
+                        filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
                         paint: {
-                            "circle-radius": 5,
-                            "circle-color": GEOFENCE_VERTEX_COLOR,
+                            'circle-radius': 5,
+                            'circle-color': GEOFENCE_VERTEX_COLOR,
                         },
                     },
                     // polygon border
                     {
-                        id: "gl-draw-polygon-stroke-active",
-                        type: "line",
-                        filter: ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+                        id: 'gl-draw-polygon-stroke-active',
+                        type: 'line',
+                        filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
                         layout: {
-                            "line-cap": "round",
-                            "line-join": "round",
+                            'line-cap': 'round',
+                            'line-join': 'round',
                         },
                         paint: {
-                            "line-color": GEOFENCE_BORDER_COLOR,
-                            "line-width": 4,
+                            'line-color': GEOFENCE_BORDER_COLOR,
+                            'line-width': 4,
                         },
                     },
                     // vertex circle
                     {
-                        id: "gl-draw-polygon-and-line-vertex-active",
-                        type: "circle",
+                        id: 'gl-draw-polygon-and-line-vertex-active',
+                        type: 'circle',
                         filter: [
-                            "all",
-                            ["==", "meta", "vertex"],
-                            ["==", "$type", "Point"],
-                            ["!=", "mode", "static"],
+                            'all',
+                            ['==', 'meta', 'vertex'],
+                            ['==', '$type', 'Point'],
+                            ['!=', 'mode', 'static'],
                         ],
                         paint: {
-                            "circle-radius": 8,
-                            "circle-color": GEOFENCE_VERTEX_COLOR,
-                            "circle-stroke-color": GEOFENCE_BORDER_COLOR,
-                            "circle-stroke-width": 1,
+                            'circle-radius': 8,
+                            'circle-color': GEOFENCE_VERTEX_COLOR,
+                            'circle-stroke-color': GEOFENCE_BORDER_COLOR,
+                            'circle-stroke-width': 1,
                         },
                     },
                 ],
@@ -1563,7 +1580,7 @@
             const isCircle = data.properties.isCircle;
             this.enable(isCircle);
             this._mapBoxDraw.add(data);
-            this._mapBoxDraw.changeMode("direct_select", {
+            this._mapBoxDraw.changeMode('direct_select', {
                 featureId: data.id,
             });
         }
@@ -1580,7 +1597,7 @@
             if (this._map.hasControl(this._mapBoxDraw)) {
                 return;
             }
-            this._map.addControl(this._mapBoxDraw, "bottom-right");
+            this._map.addControl(this._mapBoxDraw, 'bottom-right');
             this._ui.createGeofenceCreateContainer(isCircle);
         }
         /**
@@ -1644,7 +1661,7 @@
          Public Methods for AmplifyGeofenceControl
          **********************************************************************/
         getDefaultPosition() {
-            return "full-screen";
+            return 'full-screen';
         }
         onRemove() {
             this._ui.removeElement(this._container);
@@ -1652,41 +1669,41 @@
         // Reorders MapLibre canvas class names to fix a mapbox draw bug - https://github.com/mapbox/mapbox-gl-draw/pull/1079
         reorderMapLibreClassNames() {
             const mapCanvas = document
-                .getElementsByClassName("maplibregl-canvas")
+                .getElementsByClassName('maplibregl-canvas')
                 .item(0);
             if (mapCanvas) {
-                mapCanvas.className = "mapboxgl-canvas maplibregl-canvas";
+                mapCanvas.className = 'mapboxgl-canvas maplibregl-canvas';
             }
         }
         onAdd(map) {
             this._map = map;
             this.reorderMapLibreClassNames();
-            this._container = createElement("div", "geofence-ctrl maplibregl-ctrl");
+            this._container = createElement('div', 'geofence-ctrl maplibregl-ctrl');
             this._ui = AmplifyGeofenceControlUI(this, this._container);
             this._amplifyDraw = new AmplifyMapDraw(map, this._ui);
-            this._ui.registerControlPosition(map, "full-screen");
+            this._ui.registerControlPosition(map, 'full-screen');
             this._ui.createGeofenceListContainer();
             // Draw the geofences source to the map so we can update it on geofences load/creation
-            this._map.once("load", function () {
+            this._map.once('load', function () {
                 // Prevents warnings on multiple re-renders, especially when rendered in react
-                if (this._map.getSource("displayedGeofences")) {
+                if (this._map.getSource('displayedGeofences')) {
                     return;
                 }
-                this._drawGeofencesOutput = drawGeofences("displayedGeofences", [], this._map, {
+                this._drawGeofencesOutput = drawGeofences('displayedGeofences', [], this._map, {
                     fillColor: GEOFENCE_COLOR,
                     borderColor: GEOFENCE_BORDER_COLOR,
                     borderOpacity: 1,
                 });
-                this._highlightedGeofenceOutput = drawGeofences("highlightedGeofence", [], this._map, {
+                this._highlightedGeofenceOutput = drawGeofences('highlightedGeofence', [], this._map, {
                     fillColor: GEOFENCE_COLOR,
                     borderColor: GEOFENCE_BORDER_COLOR,
                     borderOpacity: 1,
                     borderWidth: 6,
                 });
                 this.loadInitialGeofences();
-                map.addControl(new maplibregl__default["default"].NavigationControl({ showCompass: false }), "bottom-right");
+                map.addControl(new maplibregl__default["default"].NavigationControl({ showCompass: false }), 'bottom-right');
             }.bind(this));
-            this._map.on("draw.update", () => {
+            this._map.on('draw.update', () => {
                 const coordinates = this._amplifyDraw._mapBoxDraw.getAll().features[0].geometry.coordinates[0];
                 const radius = getDistanceBetweenCoordinates(coordinates[0], coordinates[Math.floor(coordinates.length / 2)]) / 2;
                 this._ui.updateGeofenceRadius(radius.toFixed(2));
@@ -1696,15 +1713,15 @@
         createGeofence(geofenceId) {
             return __awaiter(this, void 0, void 0, function* () {
                 if (!geofenceId || geofenceId.length === 0) {
-                    this._ui.createAddGeofencePromptError("Geofence ID is empty.");
+                    this._ui.createAddGeofencePromptError('Geofence ID is empty.');
                     return;
                 }
                 if (!isValidGeofenceId(geofenceId)) {
-                    this._ui.createAddGeofencePromptError("Geofence ID contains special characters.");
+                    this._ui.createAddGeofencePromptError('Geofence ID contains special characters.');
                     return;
                 }
                 if (isExistingGeofenceId(geofenceId, this._loadedGeofences)) {
-                    this._ui.createAddGeofencePromptError("Geofence ID already exists.");
+                    this._ui.createAddGeofencePromptError('Geofence ID already exists.');
                     return;
                 }
                 return this.saveGeofence(geofenceId);
@@ -1716,7 +1733,7 @@
                 const idToSave = geofenceId || this._editingGeofenceId;
                 const response = yield geo.Geo.saveGeofences({
                     geofenceId: idToSave,
-                    geometry: { polygon: feature.geometry["coordinates"] },
+                    geometry: { polygon: feature.geometry['coordinates'] },
                 });
                 if (response.errors[0]) {
                     const err = response.errors[0];
@@ -1725,7 +1742,7 @@
                 const success = response.successes[0];
                 const savedGeofence = {
                     geofenceId: success.geofenceId,
-                    geometry: { polygon: feature.geometry["coordinates"] },
+                    geometry: { polygon: feature.geometry['coordinates'] },
                 };
                 // render geofence to the map and add it to the list
                 this._loadGeofence(savedGeofence);
@@ -1828,7 +1845,7 @@
         displayAllGeofences() {
             this._displayedGeofences.push(...Object.values(this._loadedGeofences));
             this._updateDisplayedGeofences();
-            const checkboxes = document.getElementsByClassName("geofence-ctrl-list-item-checkbox");
+            const checkboxes = document.getElementsByClassName('geofence-ctrl-list-item-checkbox');
             Array.from(checkboxes).forEach((checkbox) => (checkbox.checked = this._ui.getCheckboxAllValue()));
             this.fitAllGeofences();
         }
@@ -1862,7 +1879,7 @@
         hideAllGeofences() {
             this._displayedGeofences = [];
             this._updateDisplayedGeofences();
-            const checkboxes = document.getElementsByClassName("geofence-ctrl-list-item-checkbox");
+            const checkboxes = document.getElementsByClassName('geofence-ctrl-list-item-checkbox');
             Array.from(checkboxes).forEach((checkbox) => (checkbox.checked = this._ui.getCheckboxAllValue()));
         }
         _updateDisplayedGeofences() {
@@ -1872,6 +1889,7 @@
         displayHighlightedGeofence(geofenceId) {
             const geofence = this._loadedGeofences[geofenceId];
             if (!geofence) {
+                // eslint-disable-next-line no-console
                 console.warn(`Geofence with id ${geofenceId} does not exist`);
                 return;
             }
@@ -1888,7 +1906,7 @@
         changeMode(mode) {
             // erase existing mapbox draw content
             this._amplifyDraw.delete(this._editingGeofenceId);
-            if (mode === "draw_circle") {
+            if (mode === 'draw_circle') {
                 this._amplifyDraw.drawCircularGeofence(this._editingGeofenceId);
             }
             else {
@@ -1922,8 +1940,8 @@
             this._amplifyDraw.drawCircularGeofence(this._editingGeofenceId, radius);
         }
         addEditableGeofence() {
-            this._editingGeofenceId = "tempGeofence";
-            this._amplifyDraw.drawCircularGeofence("tempGeofence");
+            this._editingGeofenceId = 'tempGeofence';
+            this._amplifyDraw.drawCircularGeofence('tempGeofence');
             this.setEditingModeEnabled(true);
         }
     }