@record-evolution/widget-mapbox 1.4.11 → 1.4.13

package/dist/widget-mapbox.js

@@ -2092,25 +2092,23 @@ function validateWCAG2Parms(parms) {
 class WidgetMapbox extends s$1 {
     constructor() {
         super();
-        this.inputData = undefined;
         this.map = undefined;
         this.dataSets = [];
         this.dataSources = new Map();
         this.colors = new Map();
-        this.version = '1.4.11';
+        this.version = '1.4.13';
         this.resizeObserver = new ResizeObserver(() => {
             var _a;
             (_a = this.map) === null || _a === void 0 ? void 0 : _a.resize();
             this.fitBounds();
         });
-        mapboxgl.accessToken = 'pk.eyJ1IjoibWFya29wZSIsImEiOiJjazc1OWlsNjkwN2pyM2VxajV1eGRnYzgwIn0.3lVksk1nej_0KnWjCkBDAA';
+        mapboxgl.accessToken =
+            'pk.eyJ1IjoibWFya29wZSIsImEiOiJjazc1OWlsNjkwN2pyM2VxajV1eGRnYzgwIn0.3lVksk1nej_0KnWjCkBDAA';
     }
     update(changedProperties) {
-        changedProperties.forEach((propName) => {
-            if (propName === 'inputData') {
-                this.transformInputData();
-            }
-        });
+        if (changedProperties.has('inputData')) {
+            this.transformInputData();
+        }
         super.update(changedProperties);
     }
     firstUpdated() {
@@ -2122,7 +2120,7 @@ class WidgetMapbox extends s$1 {
     fitBounds() {
         const bounds = new mapboxgl.LngLatBounds();
         this.dataSources.forEach((col) => {
-            col.features.forEach(f => {
+            col.features.forEach((f) => {
                 var _a;
                 // @ts-ignore
                 if ((_a = f.geometry.coordinates) === null || _a === void 0 ? void 0 : _a.length)
@@ -2130,7 +2128,7 @@ class WidgetMapbox extends s$1 {
             });
         });
         if (!bounds.isEmpty()) {
-            this.map.fitBounds(bounds, { maxZoom: 14, padding: 16, duration: 100, });
+            this.map.fitBounds(bounds, { maxZoom: 14, padding: 16, duration: 100 });
         }
     }
     transformInputData() {
@@ -2141,7 +2139,7 @@ class WidgetMapbox extends s$1 {
             this.createMap();
         }
         // choose random color if dataseries has none and store it for furure updates
-        this.inputData.dataseries.forEach(ds => {
+        this.inputData.dataseries.forEach((ds) => {
             var _a;
             if (!this.colors.has(ds.label)) {
                 ds.color = (_a = ds.color) !== null && _a !== void 0 ? _a : tinycolor.random().toString();
@@ -2151,39 +2149,45 @@ class WidgetMapbox extends s$1 {
         // console.log('The input data', this.inputData.dataseries[0], this.inputData.dataseries[1])
         // Pivot inputData if required
         this.dataSets = [];
-        this.inputData.dataseries.forEach(ds => {
-            var _a;
+        this.inputData.dataseries.forEach((ds) => {
+            var _a, _b;
             const color = this.colors.get(ds.label);
-            const distincts = [...new Set(ds.data.map((d) => d.pivot))];
-            const derivedColors = tinycolor(color).monochromatic(distincts.length).map((c) => c.toHexString());
+            const distincts = [...new Set((_a = ds.data) === null || _a === void 0 ? void 0 : _a.map((d) => d.pivot))];
+            const derivedColors = tinycolor(color)
+                .monochromatic(distincts.length)
+                .map((c) => c.toHexString());
             if (distincts.length > 1) {
                 distincts.forEach((piv, i) => {
+                    var _a, _b;
                     const pds = {
-                        label: `${ds.label} ${piv}`,
+                        label: `${piv}-${(_a = ds.label) !== null && _a !== void 0 ? _a : ''}`,
                         order: ds.order,
                         type: ds.type,
                         latestValues: ds.latestValues,
                         color: derivedColors[i],
                         config: ds.config,
-                        data: ds.data.filter(d => d.pivot === piv)
+                        data: (_b = ds.data) === null || _b === void 0 ? void 0 : _b.filter((d) => d.pivot === piv)
                     };
                     this.dataSets.push(pds);
                 });
             }
             else {
-                ds.color = (_a = ds.color) !== null && _a !== void 0 ? _a : this.colors[ds.label];
+                ds.color = (_b = ds.color) !== null && _b !== void 0 ? _b : this.colors[ds.label];
                 this.dataSets.push(ds);
             }
         });
         this.inputData.dataseries = [];
         // Filter for latest Values
-        this.dataSets.forEach(ds => {
-            if (ds.latestValues > 0)
-                ds.data = ds.data.splice(-ds.latestValues);
+        this.dataSets.forEach((ds) => {
+            var _a;
+            if ((ds === null || ds === void 0 ? void 0 : ds.latestValues) && (ds === null || ds === void 0 ? void 0 : ds.latestValues) > 0)
+                ds.data = (_a = ds.data) === null || _a === void 0 ? void 0 : _a.splice(-ds.latestValues);
         });
         // console.log('mapbox datasets', this.dataSets)
         // create geojson sources
-        this.dataSets.sort((a, b) => b.order - a.order).forEach(ds => {
+        this.dataSets
+            // .sort((a, b) => b.order - a.order)
+            .forEach((ds) => {
             this.dataSources.set('input:' + ds.label, {
                 type: 'FeatureCollection',
                 features: this.createGEOJson(ds)
@@ -2194,15 +2198,23 @@ class WidgetMapbox extends s$1 {
         });
     }
     createGEOJson(ds) {
+        var _a, _b, _c, _d, _e;
+        (_a = ds.data) === null || _a === void 0 ? void 0 : _a.forEach((p) => {
+            p = {
+                lon: Number(p.lon),
+                lat: Number(p.lat),
+                alt: Number(p.alt),
+                value: Number(p.value),
+                pivot: p.pivot
+            };
+        });
         if (ds.type !== 'line') {
-            const features = ds.data
-                .filter(p => p.lon !== undefined
-                && p.lat !== undefined
-                && p.value !== undefined
-                && typeof p.lon === 'number'
-                && typeof p.lat === 'number'
-                && typeof p.value === 'number')
-                .map(p => {
+            const features = (_b = ds.data) === null || _b === void 0 ? void 0 : _b.filter((p) => p.lon !== undefined &&
+                p.lat !== undefined &&
+                p.value !== undefined &&
+                typeof p.lon === 'number' &&
+                typeof p.lat === 'number' &&
+                typeof p.value === 'number').map((p) => {
                 const point = {
                     type: 'Feature',
                     geometry: {
@@ -2210,16 +2222,14 @@ class WidgetMapbox extends s$1 {
                         coordinates: [p.lon, p.lat]
                     },
                     properties: {
-                        value: Math.round(p.value)
+                        value: p.value ? Math.round(p.value) : undefined
                     }
                 };
                 return point;
             });
             return features;
         }
-        const line = ds.data.reverse()
-            .filter(p => p.lon !== undefined && p.lat !== undefined)
-            .map(p => [p.lon, p.lat, p.alt]);
+        const line = (_e = (_d = (_c = ds === null || ds === void 0 ? void 0 : ds.data) === null || _c === void 0 ? void 0 : _c.reverse()) === null || _d === void 0 ? void 0 : _d.filter((p) => p.lon !== undefined && p.lat !== undefined)) === null || _e === void 0 ? void 0 : _e.map((p) => [p.lon, p.lat, p === null || p === void 0 ? void 0 : p.alt]);
         const feature = {
             type: 'Feature',
             geometry: {
@@ -2231,99 +2241,100 @@ class WidgetMapbox extends s$1 {
         return [feature];
     }
     addCircleLayer(dataSet) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!dataSet)
             return;
         const layerConfig = {
-            'id': dataSet.label + ':circle',
-            'type': 'circle',
-            'source': 'input:' + dataSet.label,
-            'paint': {
-                ...dataSet.config['circle'],
-                "circle-radius": ['get', 'value'],
-                "circle-radius-transition": {
+            id: dataSet.label + ':circle',
+            type: 'circle',
+            source: 'input:' + dataSet.label,
+            paint: {
+                ...(_a = dataSet.config) === null || _a === void 0 ? void 0 : _a['circle'],
+                'circle-radius': ['get', 'value'],
+                'circle-radius-transition': {
                     duration: 1000,
                     delay: 0
                 },
-                "circle-color": dataSet.color
-            },
+                'circle-color': dataSet.color
+            }
             // Place polygons under labels, roads and buildings.
             // 'aeroway-polygon'
         };
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.addLayer(layerConfig);
-        if (!dataSet.config['symbol'])
+        (_b = this.map) === null || _b === void 0 ? void 0 : _b.addLayer(layerConfig);
+        if (!((_c = dataSet.config) === null || _c === void 0 ? void 0 : _c['symbol']))
             return;
         const layerConfig2 = {
-            'id': dataSet.label + ':symbol',
-            'type': 'symbol',
-            'source': 'input:' + dataSet.label,
+            id: dataSet.label + ':symbol',
+            type: 'symbol',
+            source: 'input:' + dataSet.label,
             layout: {
                 'text-field': ['get', 'value'],
                 'text-size': dataSet.config['symbol']['text-size'],
-                'text-anchor': 'center',
+                'text-anchor': 'center'
             },
             paint: {
-                'text-color': dataSet.config['symbol']['text-color'],
+                'text-color': dataSet.config['symbol']['text-color']
             }
             // Place polygons under labels, roads and buildings.
             // 'aeroway-polygon'
         };
-        (_b = this.map) === null || _b === void 0 ? void 0 : _b.addLayer(layerConfig2);
+        (_d = this.map) === null || _d === void 0 ? void 0 : _d.addLayer(layerConfig2);
     }
     addSymbolLayer(dataSet) {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!dataSet)
             return;
         const layerConfig = {
-            'id': dataSet.label + ':symbol',
-            'type': 'symbol',
-            'source': 'input:' + dataSet.label,
+            id: dataSet.label + ':symbol',
+            type: 'symbol',
+            source: 'input:' + dataSet.label,
             layout: {
                 'text-field': ['get', 'value'],
-                'text-size': dataSet.config['symbol']['text-size'],
+                'text-size': (_b = (_a = dataSet.config) === null || _a === void 0 ? void 0 : _a['symbol']) === null || _b === void 0 ? void 0 : _b['text-size'],
                 'text-anchor': 'center',
-                'icon-image': dataSet.config.symbol['icon-image'],
-                'icon-size': dataSet.config.symbol['icon-size']
+                'icon-image': (_d = (_c = dataSet.config) === null || _c === void 0 ? void 0 : _c.symbol) === null || _d === void 0 ? void 0 : _d['icon-image'],
+                'icon-size': (_f = (_e = dataSet.config) === null || _e === void 0 ? void 0 : _e.symbol) === null || _f === void 0 ? void 0 : _f['icon-size']
             },
             paint: {
-                'text-color': dataSet.config['symbol']['text-color'],
+                'text-color': (_h = (_g = dataSet.config) === null || _g === void 0 ? void 0 : _g['symbol']) === null || _h === void 0 ? void 0 : _h['text-color']
             }
             // Place polygons under labels, roads and buildings.
             // 'aeroway-polygon'
         };
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.addLayer(layerConfig);
+        (_j = this.map) === null || _j === void 0 ? void 0 : _j.addLayer(layerConfig);
     }
     addHeatmapLayer(dataSet) {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!dataSet)
             return;
-        const min = Math.min(...dataSet.data.map(p => p.value));
-        const max = Math.max(...dataSet.data.map(p => p.value));
+        const values = (_b = (_a = dataSet.data) === null || _a === void 0 ? void 0 : _a.map((p) => p === null || p === void 0 ? void 0 : p.value).filter((v) => v !== undefined)) !== null && _b !== void 0 ? _b : [];
+        const min = Math.min(...values);
+        const max = Math.max(...values);
         const layerConfig = {
-            'id': dataSet.label + ':heatmap',
-            'type': 'heatmap',
-            'source': 'input:' + dataSet.label,
+            id: dataSet.label + ':heatmap',
+            type: 'heatmap',
+            source: 'input:' + dataSet.label,
             paint: {
-                ...dataSet.config.heatmap,
+                ...(_c = dataSet.config) === null || _c === void 0 ? void 0 : _c.heatmap,
                 'heatmap-color': [
-                    "interpolate",
-                    ["linear"],
-                    ["heatmap-density"],
-                    0, "rgba(0, 0, 255, 0)",
-                    0.1, "royalblue",
-                    0.3, "cyan",
-                    0.5, "lime",
-                    0.7, "yellow",
-                    1, "tomato"
-                ],
-                // Increase the heatmap weight based on frequency and property magnitude
-                'heatmap-weight': [
                     'interpolate',
                     ['linear'],
-                    ['get', 'value'],
-                    min, 0,
-                    max, 3
+                    ['heatmap-density'],
+                    0,
+                    'rgba(0, 0, 255, 0)',
+                    0.1,
+                    'royalblue',
+                    0.3,
+                    'cyan',
+                    0.5,
+                    'lime',
+                    0.7,
+                    'yellow',
+                    1,
+                    'tomato'
                 ],
+                // Increase the heatmap weight based on frequency and property magnitude
+                'heatmap-weight': ['interpolate', ['linear'], ['get', 'value'], min, 0, max, 3],
                 // // Increase the heatmap color weight weight by zoom level
                 // // heatmap-intensity is a multiplier on top of heatmap-weight
                 // 'heatmap-intensity': [
@@ -2338,8 +2349,10 @@ class WidgetMapbox extends s$1 {
                     'interpolate',
                     ['linear'],
                     ['get', 'value'],
-                    min, 30,
-                    max, 30 + dataSet.config.heatmap['heatmap-radius']
+                    min,
+                    30,
+                    max,
+                    30 + ((_f = (_e = (_d = dataSet.config) === null || _d === void 0 ? void 0 : _d.heatmap) === null || _e === void 0 ? void 0 : _e['heatmap-radius']) !== null && _f !== void 0 ? _f : 0)
                 ],
                 'heatmap-radius-transition': {
                     duration: 1000,
@@ -2357,36 +2370,36 @@ class WidgetMapbox extends s$1 {
             // Place polygons under labels, roads and buildings.
             // 'aeroway-polygon'
         };
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.addLayer(layerConfig);
+        (_g = this.map) === null || _g === void 0 ? void 0 : _g.addLayer(layerConfig);
     }
     addLineLayer(dataSet) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if (!dataSet)
             return;
         const layerConfig = {
-            'id': dataSet.label + ':line',
-            'type': 'line',
-            'source': 'input:' + dataSet.label,
+            id: dataSet.label + ':line',
+            type: 'line',
+            source: 'input:' + dataSet.label,
             layout: {
-                'line-cap': 'round',
+                'line-cap': 'round'
             },
             paint: {
-                ...dataSet.config.line,
-                "line-color": dataSet.color,
+                ...(_a = dataSet.config) === null || _a === void 0 ? void 0 : _a.line,
+                'line-color': dataSet.color
             }
             // Place polygons under labels, roads and buildings.
             // 'aeroway-polygon'
         };
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.addLayer(layerConfig);
-        if (!dataSet.config.symbol['icon-image'])
+        (_b = this.map) === null || _b === void 0 ? void 0 : _b.addLayer(layerConfig);
+        if (!((_d = (_c = dataSet.config) === null || _c === void 0 ? void 0 : _c.symbol) === null || _d === void 0 ? void 0 : _d['icon-image']))
             return;
         const layerConfig2 = {
-            'id': dataSet.label + ':symbol',
-            'type': 'symbol',
-            'source': 'input:' + dataSet.label,
+            id: dataSet.label + ':symbol',
+            type: 'symbol',
+            source: 'input:' + dataSet.label,
             layout: {
                 'icon-image': dataSet.config.symbol['icon-image'],
-                'icon-size': dataSet.config.symbol['icon-size'],
+                'icon-size': dataSet.config.symbol['icon-size']
             },
             paint: {
                 'icon-color': dataSet.color
@@ -2394,7 +2407,7 @@ class WidgetMapbox extends s$1 {
             // Place polygons under labels, roads and buildings.
             // 'aeroway-polygon'
         };
-        (_b = this.map) === null || _b === void 0 ? void 0 : _b.addLayer(layerConfig2);
+        (_e = this.map) === null || _e === void 0 ? void 0 : _e.addLayer(layerConfig2);
     }
     syncDataLayers() {
         var _a, _b, _c;
@@ -2404,14 +2417,17 @@ class WidgetMapbox extends s$1 {
         mySources.forEach(([label]) => {
             if (!this.dataSources.has(label)) {
                 // remove all layers using this source
-                this.map.getStyle().layers.filter((la) => la.id === label + ':' + la.type).forEach((la) => {
+                this.map
+                    .getStyle()
+                    .layers.filter((la) => la.id === label + ':' + la.type)
+                    .forEach((la) => {
                     this.map.removeLayer(la.id);
                 });
                 this.map.removeSource(label);
             }
         });
-        // add new layers or update the data of existing layers 
-        this.dataSets.forEach(ds => {
+        // add new layers or update the data of existing layers
+        this.dataSets.forEach((ds) => {
             var _a;
             const fc = this.dataSources.get('input:' + ds.label);
             const src = this.map.getSource('input:' + ds.label);
@@ -2452,29 +2468,35 @@ class WidgetMapbox extends s$1 {
             }
         }
         this.map.addLayer({
-            'id': '3d-buildings',
-            'source': 'composite',
+            id: '3d-buildings',
+            source: 'composite',
             'source-layer': 'building',
-            'filter': ['==', 'extrude', 'true'],
-            'type': 'fill-extrusion',
-            'minzoom': 14,
-            'paint': {
+            filter: ['==', 'extrude', 'true'],
+            type: 'fill-extrusion',
+            minzoom: 14,
+            paint: {
                 'fill-extrusion-color': '#aaa',
                 // use an 'interpolate' expression to add a smooth transition effect to the
                 // buildings as the user zooms in
                 'fill-extrusion-height': [
-                    "interpolate", ["linear"],
-                    ["zoom"],
-                    14, 0,
-                    14.05, ["get", "height"]
+                    'interpolate',
+                    ['linear'],
+                    ['zoom'],
+                    14,
+                    0,
+                    14.05,
+                    ['get', 'height']
                 ],
                 'fill-extrusion-base': [
-                    "interpolate", ["linear"],
-                    ["zoom"],
-                    14, 0,
-                    14.05, ["get", "min_height"]
+                    'interpolate',
+                    ['linear'],
+                    ['zoom'],
+                    14,
+                    0,
+                    14.05,
+                    ['get', 'min_height']
                 ],
-                'fill-extrusion-opacity': .6
+                'fill-extrusion-opacity': 0.6
             }
         }, labelLayerId);
     }
@@ -2486,7 +2508,7 @@ class WidgetMapbox extends s$1 {
         this.map = new mapboxgl.Map({
             container: (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.getElementById('map'),
             style: `mapbox://styles/mapbox/${(_d = this.mapStyle) !== null && _d !== void 0 ? _d : 'light-v11'}`,
-            center: [8.6841700, 50.1155200],
+            center: [8.68417, 50.11552],
             zoom: 1.8,
             attributionControl: false
         });
@@ -2506,96 +2528,106 @@ class WidgetMapbox extends s$1 {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return x `
-      <link href="https://api.mapbox.com/mapbox-gl-js/v${mapboxgl.version}/mapbox-gl.css" rel="stylesheet">
-      <div class="wrapper">
-        <header>
-            <div class="title">
-              <h3 class="paging" ?active=${(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.title}>${(_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.settings) === null || _d === void 0 ? void 0 : _d.title}</h3>
-              <p class="paging" ?active=${(_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.settings) === null || _f === void 0 ? void 0 : _f.subTitle}>${(_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.settings) === null || _h === void 0 ? void 0 : _h.subTitle}</p>
-            </div>
-            <div class="legend paging" ?active=${(_k = (_j = this === null || this === void 0 ? void 0 : this.inputData) === null || _j === void 0 ? void 0 : _j.settings) === null || _k === void 0 ? void 0 : _k.showLegend}>
-              ${c(this.dataSets, ds => ds.label, ds => {
+            <link
+                href="https://api.mapbox.com/mapbox-gl-js/v${mapboxgl.version}/mapbox-gl.css"
+                rel="stylesheet"
+            />
+            <div class="wrapper">
+                <header>
+                    <div class="title">
+                        <h3 class="paging" ?active=${(_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.title}>
+                            ${(_d = (_c = this.inputData) === null || _c === void 0 ? void 0 : _c.settings) === null || _d === void 0 ? void 0 : _d.title}
+                        </h3>
+                        <p class="paging" ?active=${(_f = (_e = this.inputData) === null || _e === void 0 ? void 0 : _e.settings) === null || _f === void 0 ? void 0 : _f.subTitle}>
+                            ${(_h = (_g = this.inputData) === null || _g === void 0 ? void 0 : _g.settings) === null || _h === void 0 ? void 0 : _h.subTitle}
+                        </p>
+                    </div>
+                    <div class="legend paging" ?active=${(_k = (_j = this === null || this === void 0 ? void 0 : this.inputData) === null || _j === void 0 ? void 0 : _j.settings) === null || _k === void 0 ? void 0 : _k.showLegend}>
+                        ${c(this.dataSets, (ds) => ds.label, (ds) => {
             return x `
-              <div class="label">
-                <div style="background: ${ds.color}; width: 24px; height: 12px;"></div>
-                <div>${ds.label}</div>
-              </div>
-              `;
+                                    <div class="label">
+                                        <div
+                                            style="background: ${ds.color}; width: 24px; height: 12px;"
+                                        ></div>
+                                        <div>${ds.label}</div>
+                                    </div>
+                                `;
         })}
+                    </div>
+                </header>
+                <div id="map"></div>
             </div>
-        </header>
-        <div id="map"></div>
-      </div>
-    `;
+        `;
     }
 }
 WidgetMapbox.styles = i$3 `
-    :host {
-      display: block;
-      color: var(--re-bar-text-color, #000);
-      font-family: sans-serif;
-      padding: 16px;
-      box-sizing: border-box;
-      margin: auto;
-    }
+        :host {
+            display: block;
+            color: var(--re-bar-text-color, #000);
+            font-family: sans-serif;
+            padding: 16px;
+            box-sizing: border-box;
+            margin: auto;
+        }
 
-    .paging:not([active]) { display: none !important; }
+        .paging:not([active]) {
+            display: none !important;
+        }
 
-    header {
-      display: flex;
-      margin: 0 0 16px 0;
-      gap: 24px;
-      justify-content: space-between;
-    }
-    h3 {
-      margin: 0;
-      max-width: 300px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    p {
-      margin: 10px 0 0 0;
-      max-width: 300px;
-      font-size: 14px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      line-height: 17px;
-    }
+        header {
+            display: flex;
+            margin: 0 0 16px 0;
+            gap: 24px;
+            justify-content: space-between;
+        }
+        h3 {
+            margin: 0;
+            max-width: 300px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        p {
+            margin: 10px 0 0 0;
+            max-width: 300px;
+            font-size: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            line-height: 17px;
+        }
 
-    .wrapper {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      width: 100%;
-    }
-    #map {
-      flex: 1;
-    }
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+        }
+        #map {
+            flex: 1;
+        }
 
-    .title {
-      white-space: nowrap;
-    }
-    
-    .legend {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-    }
+        .title {
+            white-space: nowrap;
+        }
 
-    .label {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      gap: 8px
-    }
+        .legend {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
 
-    a.mapboxgl-ctrl-logo {
-      display: none;
-    }
+        .label {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            gap: 8px;
+        }
 
-  `;
+        a.mapboxgl-ctrl-logo {
+            display: none;
+        }
+    `;
 __decorate([
     n({ type: Object })
 ], WidgetMapbox.prototype, "inputData", void 0);
@@ -2611,7 +2643,7 @@ __decorate([
 __decorate([
     r$1()
 ], WidgetMapbox.prototype, "colors", void 0);
-window.customElements.define('widget-mapbox-1.4.11', WidgetMapbox);
+window.customElements.define('widget-mapbox-1.4.13', WidgetMapbox);
 
 export { WidgetMapbox };
 //# sourceMappingURL=widget-mapbox.js.map