@versatiles/style 5.8.2 → 5.8.4

package/dist/index.js

@@ -236,7 +236,7 @@ function randomColor(options) {
     function randomWithin(range) {
         //Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
         seed = (seed * 9301 + 49297) % 233280;
-        return Math.floor(range[0] + seed / 233280.0 * (range[1] - range[0]));
+        return Math.floor(range[0] + (seed / 233280.0) * (range[1] - range[0]));
     }
 }
 function inputToSeed(input) {
@@ -261,14 +261,81 @@ function initColorDictionary() {
             brightnessRange: [colorful[1], greyest[1]],
         });
     };
-    defineColor('monochrome', null, [[0, 0], [100, 0]]);
-    defineColor('red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
-    defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
-    defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
-    defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
-    defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
-    defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
-    defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
+    defineColor('monochrome', null, [
+        [0, 0],
+        [100, 0],
+    ]);
+    defineColor('red', [-26, 18], [
+        [20, 100],
+        [30, 92],
+        [40, 89],
+        [50, 85],
+        [60, 78],
+        [70, 70],
+        [80, 60],
+        [90, 55],
+        [100, 50],
+    ]);
+    defineColor('orange', [18, 46], [
+        [20, 100],
+        [30, 93],
+        [40, 88],
+        [50, 86],
+        [60, 85],
+        [70, 70],
+        [100, 70],
+    ]);
+    defineColor('yellow', [46, 62], [
+        [25, 100],
+        [40, 94],
+        [50, 89],
+        [60, 86],
+        [70, 84],
+        [80, 82],
+        [90, 80],
+        [100, 75],
+    ]);
+    defineColor('green', [62, 178], [
+        [30, 100],
+        [40, 90],
+        [50, 85],
+        [60, 81],
+        [70, 74],
+        [80, 64],
+        [90, 50],
+        [100, 40],
+    ]);
+    defineColor('blue', [178, 257], [
+        [20, 100],
+        [30, 86],
+        [40, 80],
+        [50, 74],
+        [60, 60],
+        [70, 52],
+        [80, 44],
+        [90, 39],
+        [100, 35],
+    ]);
+    defineColor('purple', [257, 282], [
+        [20, 100],
+        [30, 87],
+        [40, 79],
+        [50, 70],
+        [60, 65],
+        [70, 59],
+        [80, 52],
+        [90, 45],
+        [100, 42],
+    ]);
+    defineColor('pink', [282, 334], [
+        [20, 100],
+        [30, 90],
+        [40, 86],
+        [60, 84],
+        [80, 80],
+        [90, 75],
+        [100, 73],
+    ]);
     return dict;
 }
 function getColorInfo(hue) {
@@ -370,7 +437,9 @@ class RGB extends Color {
             return `#${r}${g}${b}`.toUpperCase();
         }
         else {
-            const a = Math.round(this.a * 255).toString(16).padStart(2, '0');
+            const a = Math.round(this.a * 255)
+                .toString(16)
+                .padStart(2, '0');
             return `#${r}${g}${b}${a}`.toUpperCase();
         }
     }
@@ -408,7 +477,6 @@ class RGB extends Color {
             s = delta / (2 - max - min);
         return new HSL(h, s * 100, l * 100, this.a);
     }
-    ;
     /**
      * Converts the RGB color to an HSV color.
      *
@@ -433,9 +501,9 @@ class RGB extends Color {
             if (r === v)
                 h = bdif - gdif;
             else if (g === v)
-                h = (1 / 3) + rdif - bdif;
+                h = 1 / 3 + rdif - bdif;
             else if (b === v)
-                h = (2 / 3) + gdif - rdif;
+                h = 2 / 3 + gdif - rdif;
             if (h < 0)
                 h += 1;
             else if (h > 1)
@@ -551,7 +619,7 @@ class RGB extends Color {
         if (value > 1)
             value = 1;
         const a = 1 - Math.abs(value);
-        const b = (value < 0) ? 0 : 255 * value;
+        const b = value < 0 ? 0 : 255 * value;
         return new RGB(this.r * a + b, this.g * a + b, this.b * a + b, this.a);
     }
     /**
@@ -682,7 +750,7 @@ class HSV extends Color {
         const v = this.v / 100;
         const k = (2 - s) * v;
         const q = k < 1 ? k : 2 - k;
-        return new HSL(this.h, q == 0 ? 0 : 100 * s * v / q, 100 * k / 2, this.a);
+        return new HSL(this.h, q == 0 ? 0 : (100 * s * v) / q, (100 * k) / 2, this.a);
     }
     /**
      * Returns the current HSV color.
@@ -983,19 +1051,12 @@ function getShortbreadTemplate() {
         sources: {
             'versatiles-shortbread': {
                 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-                tiles: [
-                    'https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}',
-                ],
+                tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
                 type: 'vector',
                 scheme: 'xyz',
-                bounds: [
-                    -180,
-                    -85.0511287798066,
-                    180,
-                    85.0511287798066,
-                ],
+                bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
                 minzoom: 0,
-                maxzoom
+                maxzoom,
             },
         },
         layers: [],
@@ -1006,7 +1067,7 @@ function getShortbreadLayers(option) {
     const { language } = option;
     let nameField = ['get', 'name'];
     if (language) {
-        nameField = ['coalesce', ['get', 'name_' + language], ['get', 'name']];
+        nameField = ['case', ['to-boolean', ['get', 'name_' + language]], ['get', 'name_' + language], ['get', 'name']];
     }
     return [
         // background
@@ -1016,14 +1077,27 @@ function getShortbreadLayers(option) {
         // land
         {
             id: 'land-glacier',
-            type: 'fill', 'source-layer': 'water_polygons',
+            type: 'fill',
+            'source-layer': 'water_polygons',
             filter: ['all', ['==', 'kind', 'glacier']],
         },
         ...[
             { id: 'commercial', kinds: ['commercial', 'retail'] },
             { id: 'industrial', kinds: ['industrial', 'quarry', 'railway'] },
             { id: 'residential', kinds: ['garages', 'residential'] },
-            { id: 'agriculture', kinds: ['brownfield', 'farmland', 'farmyard', 'greenfield', 'greenhouse_horticulture', 'orchard', 'plant_nursery', 'vineyard'] },
+            {
+                id: 'agriculture',
+                kinds: [
+                    'brownfield',
+                    'farmland',
+                    'farmyard',
+                    'greenfield',
+                    'greenhouse_horticulture',
+                    'orchard',
+                    'plant_nursery',
+                    'vineyard',
+                ],
+            },
             { id: 'waste', kinds: ['landfill'] },
             { id: 'park', kinds: ['park', 'village_green', 'recreation_ground'] },
             { id: 'garden', kinds: ['allotments', 'garden'] },
@@ -1039,45 +1113,63 @@ function getShortbreadLayers(option) {
             id: 'land-' + id,
             type: 'fill',
             'source-layer': 'land',
-            filter: ['all',
-                ['in', 'kind', ...kinds],
-            ],
+            filter: ['all', ['in', 'kind', ...kinds]],
         })),
         // water-lines
         ...['river', 'canal', 'stream', 'ditch'].map((t) => ({
             id: 'water-' + t,
             type: 'line',
             'source-layer': 'water_lines',
-            filter: ['all',
-                ['in', 'kind', t],
-                ['!=', 'tunnel', true],
-                ['!=', 'bridge', true],
-            ],
+            filter: ['all', ['in', 'kind', t], ['!=', 'tunnel', true], ['!=', 'bridge', true]],
         })),
         // water polygons
         {
             id: 'water-area',
-            type: 'fill', 'source-layer': 'water_polygons',
+            type: 'fill',
+            'source-layer': 'water_polygons',
             filter: ['==', 'kind', 'water'],
         },
         {
             id: 'water-area-river',
-            type: 'fill', 'source-layer': 'water_polygons',
+            type: 'fill',
+            'source-layer': 'water_polygons',
             filter: ['==', 'kind', 'river'],
         },
         {
             id: 'water-area-small',
-            type: 'fill', 'source-layer': 'water_polygons',
+            type: 'fill',
+            'source-layer': 'water_polygons',
             filter: ['in', 'kind', 'reservoir', 'basin', 'dock'],
         },
         // dam
         { id: 'water-dam-area', type: 'fill', 'source-layer': 'dam_polygons', filter: ['==', 'kind', 'dam'] },
         { id: 'water-dam', type: 'line', 'source-layer': 'dam_lines', filter: ['==', 'kind', 'dam'] },
         // pier
-        { id: 'water-pier-area', type: 'fill', 'source-layer': 'pier_polygons', filter: ['in', 'kind', 'pier', 'breakwater', 'groyne'] },
-        { id: 'water-pier', type: 'line', 'source-layer': 'pier_lines', filter: ['in', 'kind', 'pier', 'breakwater', 'groyne'] },
+        {
+            id: 'water-pier-area',
+            type: 'fill',
+            'source-layer': 'pier_polygons',
+            filter: ['in', 'kind', 'pier', 'breakwater', 'groyne'],
+        },
+        {
+            id: 'water-pier',
+            type: 'line',
+            'source-layer': 'pier_lines',
+            filter: ['in', 'kind', 'pier', 'breakwater', 'groyne'],
+        },
         // site
-        ...['danger_area', 'sports_center', 'university', 'college', 'school', 'hospital', 'prison', 'parking', 'bicycle_parking', 'construction'].map((t) => ({
+        ...[
+            'danger_area',
+            'sports_center',
+            'university',
+            'college',
+            'school',
+            'hospital',
+            'prison',
+            'parking',
+            'bicycle_parking',
+            'construction',
+        ].map((t) => ({
             id: 'site-' + t.replace(/_/g, ''),
             type: 'fill',
             'source-layer': 'sites',
@@ -1086,32 +1178,44 @@ function getShortbreadLayers(option) {
         // airport
         {
             id: 'airport-area',
-            type: 'fill', 'source-layer': 'street_polygons', filter: ['in', 'kind', 'runway', 'taxiway'],
+            type: 'fill',
+            'source-layer': 'street_polygons',
+            filter: ['in', 'kind', 'runway', 'taxiway'],
         },
         {
             id: 'airport-taxiway:outline',
-            type: 'line', 'source-layer': 'streets', filter: ['==', 'kind', 'taxiway'],
+            type: 'line',
+            'source-layer': 'streets',
+            filter: ['==', 'kind', 'taxiway'],
         },
         {
             id: 'airport-runway:outline',
-            type: 'line', 'source-layer': 'streets', filter: ['==', 'kind', 'runway'],
+            type: 'line',
+            'source-layer': 'streets',
+            filter: ['==', 'kind', 'runway'],
         },
         {
             id: 'airport-taxiway',
-            type: 'line', 'source-layer': 'streets', filter: ['==', 'kind', 'taxiway'],
+            type: 'line',
+            'source-layer': 'streets',
+            filter: ['==', 'kind', 'taxiway'],
         },
         {
             id: 'airport-runway',
-            type: 'line', 'source-layer': 'streets', filter: ['==', 'kind', 'runway'],
+            type: 'line',
+            'source-layer': 'streets',
+            filter: ['==', 'kind', 'runway'],
         },
         // building
         {
             id: 'building:outline',
-            type: 'fill', 'source-layer': 'buildings',
+            type: 'fill',
+            'source-layer': 'buildings',
         },
         {
             id: 'building',
-            type: 'fill', 'source-layer': 'buildings',
+            type: 'fill',
+            'source-layer': 'buildings',
         },
         // tunnel-, street-, bridges-bridge
         ...['tunnel', 'street', 'bridge'].flatMap((c) => {
@@ -1126,7 +1230,10 @@ function getShortbreadLayers(option) {
                     suffixes = [':outline', ''];
                     break;
                 case 'street':
-                    filter = [['!=', 'bridge', true], ['!=', 'tunnel', true]];
+                    filter = [
+                        ['!=', 'bridge', true],
+                        ['!=', 'tunnel', true],
+                    ];
                     prefix = '';
                     suffixes = [':outline', ''];
                     break;
@@ -1150,85 +1257,64 @@ function getShortbreadLayers(option) {
                     type: 'fill',
                     'source-layer': 'bridges',
                 });
-            suffixes.forEach(suffix => {
+            suffixes.forEach((suffix) => {
                 // pedestrian zone — no outline
                 if (suffix === ':outline')
                     results.push({
                         id: prefix + 'street-pedestrian-zone',
                         type: 'fill',
                         'source-layer': 'street_polygons',
-                        filter: ['all',
-                            ...filter,
-                            ['==', 'kind', 'pedestrian'],
-                        ],
+                        filter: ['all', ...filter, ['==', 'kind', 'pedestrian']],
                     });
                 // non-car streets
-                ['footway', 'steps', 'path', 'cycleway'].forEach(t => {
+                ['footway', 'steps', 'path', 'cycleway'].forEach((t) => {
                     results.push({
                         id: prefix + 'way-' + t.replace(/_/g, '') + suffix,
                         type: 'line',
                         'source-layer': 'streets',
-                        filter: ['all',
-                            ...filter,
-                            ['in', 'kind', t],
-                        ],
+                        filter: ['all', ...filter, ['in', 'kind', t]],
                     });
                 });
                 // no links
-                ['track', 'pedestrian', 'service', 'living_street', 'residential', 'unclassified'].forEach(t => {
+                ['track', 'pedestrian', 'service', 'living_street', 'residential', 'unclassified'].forEach((t) => {
                     results.push({
                         id: prefix + 'street-' + t.replace(/_/g, '') + suffix,
                         type: 'line',
                         'source-layer': 'streets',
-                        filter: ['all',
-                            ['==', 'kind', t],
-                            ...filter,
-                        ],
+                        filter: ['all', ['==', 'kind', t], ...filter],
                     });
                 });
                 // no links, bicycle=designated
                 if (suffix === '')
-                    ['track', 'pedestrian', 'service', 'living_street', 'residential', 'unclassified'].forEach(t => {
+                    ['track', 'pedestrian', 'service', 'living_street', 'residential', 'unclassified'].forEach((t) => {
                         results.push({
                             id: prefix + 'street-' + t.replace(/_/g, '') + '-bicycle',
                             type: 'line',
                             'source-layer': 'streets',
-                            filter: ['all',
-                                ['==', 'kind', t],
-                                ['==', 'bicycle', 'designated'],
-                                ...filter,
-                            ],
+                            filter: ['all', ['==', 'kind', t], ['==', 'bicycle', 'designated'], ...filter],
                         });
                     });
                 // links
-                ['tertiary', 'secondary', 'primary', 'trunk', 'motorway'].forEach(t => {
+                ['tertiary', 'secondary', 'primary', 'trunk', 'motorway'].forEach((t) => {
                     results.push({
                         id: prefix + 'street-' + t.replace(/_/g, '') + '-link' + suffix,
                         type: 'line',
                         'source-layer': 'streets',
-                        filter: ['all',
-                            ...filter,
-                            ['in', 'kind', t],
-                            ['==', 'link', true],
-                        ],
+                        filter: ['all', ...filter, ['in', 'kind', t], ['==', 'link', true]],
                     });
                 });
                 // main
-                ['tertiary', 'secondary', 'primary', 'trunk', 'motorway'].forEach(t => {
+                ['tertiary', 'secondary', 'primary', 'trunk', 'motorway'].forEach((t) => {
                     results.push({
                         id: prefix + 'street-' + t.replace(/_/g, '') + suffix,
                         type: 'line',
                         'source-layer': 'streets',
-                        filter: ['all',
-                            ...filter,
-                            ['in', 'kind', t],
-                            ['!=', 'link', true],
-                        ],
+                        filter: ['all', ...filter, ['in', 'kind', t], ['!=', 'link', true]],
                     });
                 });
             });
             // separate outline for trains
-            [':outline', ''].forEach(suffix => {
+            [':outline', ''].forEach((suffix) => {
                 // with service distinction
                 ['rail', 'light_rail', 'subway', 'narrow_gauge', 'tram'].reverse().forEach((t) => {
                     // main rail
@@ -1236,22 +1322,14 @@ function getShortbreadLayers(option) {
                         id: prefix + 'transport-' + t.replace(/_/g, '') + suffix,
                         type: 'line',
                         'source-layer': 'streets',
-                        filter: ['all',
-                            ['in', 'kind', t],
-                            ['!has', 'service'],
-                            ...filter,
-                        ],
+                        filter: ['all', ['in', 'kind', t], ['!has', 'service'], ...filter],
                     });
                     // service rail (crossover, siding, spur, yard)
                     results.push({
                         id: prefix + 'transport-' + t.replace(/_/g, '') + '-service' + suffix,
                         type: 'line',
                         'source-layer': 'streets',
-                        filter: ['all',
-                            ['in', 'kind', t],
-                            ['has', 'service'],
-                            ...filter,
-                        ],
+                        filter: ['all', ['in', 'kind', t], ['has', 'service'], ...filter],
                     });
                 });
                 // other transport
@@ -1260,23 +1338,19 @@ function getShortbreadLayers(option) {
                         id: prefix + 'transport-' + t.replace(/_/g, '') + suffix,
                         type: 'line',
                         'source-layer': 'streets',
-                        filter: ['all',
-                            ['in', 'kind', t],
-                            ...filter,
-                        ],
+                        filter: ['all', ['in', 'kind', t], ...filter],
                     });
                 });
                 if (c === 'street') {
                     // aerialway, no bridges, above street evel
-                    ['cable_car', 'gondola', 'goods', 'chair_lift', 'drag_lift', 't-bar', 'j-bar', 'platter', 'rope-tow'].reverse().forEach((t) => {
+                    ['cable_car', 'gondola', 'goods', 'chair_lift', 'drag_lift', 't-bar', 'j-bar', 'platter', 'rope-tow']
+                        .reverse()
+                        .forEach((t) => {
                         results.push({
                             id: 'aerialway-' + t.replace(/[_-]+/g, '') + suffix,
                             type: 'line',
                             'source-layer': 'aerialways',
-                            filter: ['all',
-                                ...filter,
-                                ['in', 'kind', t],
-                            ],
+                            filter: ['all', ...filter, ['in', 'kind', t]],
                         });
                     });
                     // ferry — only on street level
@@ -1302,7 +1376,8 @@ function getShortbreadLayers(option) {
                 id: 'boundary-country' + suffix,
                 type: 'line',
                 'source-layer': 'boundaries',
-                filter: ['all',
+                filter: [
+                    'all',
                     ['==', 'admin_level', 2],
                     ['!=', 'maritime', true],
                     ['!=', 'disputed', true],
@@ -1313,7 +1388,8 @@ function getShortbreadLayers(option) {
                 id: 'boundary-country-disputed' + suffix,
                 type: 'line',
                 'source-layer': 'boundaries',
-                filter: ['all',
+                filter: [
+                    'all',
                     ['==', 'admin_level', 2],
                     ['==', 'disputed', true],
                     ['!=', 'maritime', true],
@@ -1324,7 +1400,8 @@ function getShortbreadLayers(option) {
                 id: 'boundary-country-maritime' + suffix,
                 type: 'line',
                 'source-layer': 'boundaries',
-                filter: ['all',
+                filter: [
+                    'all',
                     ['==', 'admin_level', 2],
                     ['==', 'maritime', true],
                     ['!=', 'disputed', true],
@@ -1335,7 +1412,8 @@ function getShortbreadLayers(option) {
                 id: 'boundary-state' + suffix,
                 type: 'line',
                 'source-layer': 'boundaries',
-                filter: ['all',
+                filter: [
+                    'all',
                     ['==', 'admin_level', 4],
                     ['!=', 'maritime', true],
                     ['!=', 'disputed', true],
@@ -1377,7 +1455,14 @@ function getShortbreadLayers(option) {
             layout: { 'text-field': nameField },
         })),
         // label-place of small places
-        ...[/*'locality', 'island', 'farm', 'dwelling',*/ 'neighbourhood', 'quarter', 'suburb', 'hamlet', 'village', 'town'].map((id) => ({
+        ...[
+            /*'locality', 'island', 'farm', 'dwelling',*/ 'neighbourhood',
+            'quarter',
+            'suburb',
+            'hamlet',
+            'village',
+            'town',
+        ].map((id) => ({
             id: 'label-place-' + id.replace(/_/g, ''),
             type: 'symbol',
             'source-layer': 'place_labels',
@@ -1404,31 +1489,21 @@ function getShortbreadLayers(option) {
             id: 'label-boundary-country-small',
             type: 'symbol',
             'source-layer': 'boundary_labels',
-            filter: ['all',
-                ['in', 'admin_level', 2, '2'],
-                ['<=', 'way_area', 10000000],
-            ],
+            filter: ['all', ['in', 'admin_level', 2, '2'], ['<=', 'way_area', 10000000]],
             layout: { 'text-field': nameField },
         },
         {
             id: 'label-boundary-country-medium',
             type: 'symbol',
             'source-layer': 'boundary_labels',
-            filter: ['all',
-                ['in', 'admin_level', 2, '2'],
-                ['<', 'way_area', 90000000],
-                ['>', 'way_area', 10000000],
-            ],
+            filter: ['all', ['in', 'admin_level', 2, '2'], ['<', 'way_area', 90000000], ['>', 'way_area', 10000000]],
             layout: { 'text-field': nameField },
         },
         {
             id: 'label-boundary-country-large',
             type: 'symbol',
             'source-layer': 'boundary_labels',
-            filter: ['all',
-                ['in', 'admin_level', 2, '2'],
-                ['>=', 'way_area', 90000000],
-            ],
+            filter: ['all', ['in', 'admin_level', 2, '2'], ['>=', 'way_area', 90000000]],
             layout: { 'text-field': nameField },
         },
         // marking
@@ -1436,7 +1511,8 @@ function getShortbreadLayers(option) {
             id: 'marking-oneway', // streets → oneway
             type: 'symbol',
             'source-layer': 'streets',
-            filter: ['all',
+            filter: [
+                'all',
                 ['==', 'oneway', true],
                 ['in', 'kind', 'trunk', 'primary', 'secondary', 'tertiary', 'unclassified', 'residential', 'living_street'],
             ],
@@ -1453,7 +1529,8 @@ function getShortbreadLayers(option) {
             id: 'marking-oneway-reverse', // oneway_reverse
             type: 'symbol',
             'source-layer': 'streets',
-            filter: ['all',
+            filter: [
+                'all',
                 ['==', 'oneway_reverse', true],
                 ['in', 'kind', 'trunk', 'primary', 'secondary', 'tertiary', 'unclassified', 'residential', 'living_street'],
             ],
@@ -1470,10 +1547,7 @@ function getShortbreadLayers(option) {
             id: 'marking-bicycle', // bicycle=designated or kind=cycleway
             type: 'symbol',
             'source-layer': 'streets',
-            filter: ['all',
-                ['==', 'bicycle', 'designated'],
-                ['==', 'kind', 'cycleway'],
-            ],
+            filter: ['all', ['==', 'bicycle', 'designated'], ['==', 'kind', 'cycleway']],
             layout: {
                 'symbol-placement': 'line',
                 'symbol-spacing': 50,
@@ -1498,50 +1572,35 @@ function getShortbreadLayers(option) {
             id: 'symbol-transit-subway',
             type: 'symbol',
             'source-layer': 'public_transport',
-            filter: ['all',
-                ['in', 'kind', 'station', 'halt'],
-                ['==', 'station', 'subway'],
-            ],
+            filter: ['all', ['in', 'kind', 'station', 'halt'], ['==', 'station', 'subway']],
             layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-lightrail',
             type: 'symbol',
             'source-layer': 'public_transport',
-            filter: ['all',
-                ['in', 'kind', 'station', 'halt'],
-                ['==', 'station', 'light_rail'],
-            ],
+            filter: ['all', ['in', 'kind', 'station', 'halt'], ['==', 'station', 'light_rail']],
             layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-station',
             type: 'symbol',
             'source-layer': 'public_transport',
-            filter: ['all',
-                ['in', 'kind', 'station', 'halt'],
-                ['!in', 'station', 'light_rail', 'subway'],
-            ],
+            filter: ['all', ['in', 'kind', 'station', 'halt'], ['!in', 'station', 'light_rail', 'subway']],
             layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-airfield',
             type: 'symbol',
             'source-layer': 'public_transport',
-            filter: ['all',
-                ['==', 'kind', 'aerodrome'],
-                ['!has', 'iata'],
-            ],
+            filter: ['all', ['==', 'kind', 'aerodrome'], ['!has', 'iata']],
             layout: { 'text-field': nameField },
         },
         {
             id: 'symbol-transit-airport',
             type: 'symbol',
             'source-layer': 'public_transport',
-            filter: ['all',
-                ['==', 'kind', 'aerodrome'],
-                ['has', 'iata'],
-            ],
+            filter: ['all', ['==', 'kind', 'aerodrome'], ['has', 'iata']],
             layout: { 'text-field': nameField },
         },
     ];
@@ -1910,7 +1969,12 @@ const propertyDefs = [
     { parent: 'layout', types: 'symbol', key: 'text-rotation-alignment', valueType: 'enum' },
     { parent: 'layout', types: 'symbol', key: 'text-size', short: 'size', valueType: 'number' },
     { parent: 'layout', types: 'symbol', key: 'text-transform', valueType: 'enum' },
-    { parent: 'layout', types: 'symbol', key: 'text-variable-anchor-offset', valueType: 'variableAnchorOffsetCollection' },
+    {
+        parent: 'layout',
+        types: 'symbol',
+        key: 'text-variable-anchor-offset',
+        valueType: 'variableAnchorOffsetCollection',
+    },
     { parent: 'layout', types: 'symbol', key: 'text-variable-anchor', valueType: 'array' },
     { parent: 'layout', types: 'symbol', key: 'text-writing-mode', valueType: 'array' },
     { parent: 'paint', types: 'background', key: 'background-color', short: 'color', valueType: 'color' },
@@ -1991,7 +2055,8 @@ function deepClone(obj) {
             case 'string':
             case 'undefined':
                 return obj;
-            default: throw new Error(`Not implemented yet: "${type}" case`);
+            default:
+                throw new Error(`Not implemented yet: "${type}" case`);
         }
     }
     if (isSimpleObject(obj)) {
@@ -2103,7 +2168,7 @@ function basename(url) {
 }
 
 function decorate(layers, rules, recolor) {
-    const layerIds = layers.map(l => l.id);
+    const layerIds = layers.map((l) => l.id);
     const layerIdSet = new Set(layerIds);
     // Initialize a new map to hold final styles for layers
     const layerStyles = new Map();
@@ -2112,25 +2177,25 @@ function decorate(layers, rules, recolor) {
         if (layerStyle == null)
             return;
         // Expand any braces in IDs and filter them through a RegExp if necessary
-        const ids = expandTop(idDef).flatMap(id => {
+        const ids = expandTop(idDef).flatMap((id) => {
             if (!id.includes('*'))
                 return id;
-            const regExpString = id.replace(/[^a-z_:-]/g, c => {
+            const regExpString = id.replace(/[^a-z_:-]/g, (c) => {
                 if (c === '*')
                     return '[a-z_-]*';
                 throw new Error('unknown char to process. Do not know how to make a RegExp from: ' + JSON.stringify(c));
             });
             const regExp = new RegExp(`^${regExpString}$`, 'i');
-            return layerIds.filter(layerId => regExp.test(layerId));
+            return layerIds.filter((layerId) => regExp.test(layerId));
         });
-        ids.forEach(id => {
+        ids.forEach((id) => {
             if (!layerIdSet.has(id))
                 return;
             layerStyles.set(id, deepMerge(layerStyles.get(id) ?? {}, layerStyle));
         });
     });
     // Deep clone the original layers and apply styles
-    return layers.flatMap(layer => {
+    return layers.flatMap((layer) => {
         // Get the id and style of the layer
         const layerStyle = layerStyles.get(layer.id);
         // Don't export layers that have no style
@@ -2145,11 +2210,11 @@ function decorate(layers, rules, recolor) {
             if (ruleValue == null)
                 continue;
             // CamelCase to not-camel-case
-            const ruleKey = ruleKeyCamelCase.replace(/[A-Z]/g, c => '-' + c.toLowerCase());
+            const ruleKey = ruleKeyCamelCase.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
             const propertyDefs = propertyLookup.get(layer.type + '/' + ruleKey);
             if (!propertyDefs)
                 continue;
-            propertyDefs.forEach(propertyDef => {
+            propertyDefs.forEach((propertyDef) => {
                 const { key } = propertyDef;
                 let value = ruleValue;
                 switch (propertyDef.valueType) {
@@ -2167,7 +2232,8 @@ function decorate(layers, rules, recolor) {
                     case 'number':
                         value = processExpression(value);
                         break;
-                    default: throw new Error(`unknown propertyDef.valueType "${propertyDef.valueType}" for key "${key}"`);
+                    default:
+                        throw new Error(`unknown propertyDef.valueType "${propertyDef.valueType}" for key "${key}"`);
                 }
                 switch (propertyDef.parent) {
                     case 'layer':
@@ -2324,22 +2390,64 @@ function recolor(color, opt) {
     return color;
 }
 
-const styleBuilderColorKeys = ['agriculture', 'boundary', 'building', 'buildingbg', 'burial', 'commercial', 'construction', 'cycle', 'danger', 'disputed', 'education', 'foot', 'glacier', 'grass', 'hospital', 'industrial', 'label', 'labelHalo', 'land', 'leisure', 'motorway', 'motorwaybg', 'park', 'parking', 'poi', 'prison', 'rail', 'residential', 'rock', 'sand', 'shield', 'street', 'streetbg', 'subway', 'symbol', 'trunk', 'trunkbg', 'waste', 'water', 'wetland', 'wood'];
+const styleBuilderColorKeys = [
+    'agriculture',
+    'boundary',
+    'building',
+    'buildingbg',
+    'burial',
+    'commercial',
+    'construction',
+    'cycle',
+    'danger',
+    'disputed',
+    'education',
+    'foot',
+    'glacier',
+    'grass',
+    'hospital',
+    'industrial',
+    'label',
+    'labelHalo',
+    'land',
+    'leisure',
+    'motorway',
+    'motorwaybg',
+    'park',
+    'parking',
+    'poi',
+    'prison',
+    'rail',
+    'residential',
+    'rock',
+    'sand',
+    'shield',
+    'street',
+    'streetbg',
+    'subway',
+    'symbol',
+    'trunk',
+    'trunkbg',
+    'waste',
+    'water',
+    'wetland',
+    'wood',
+];
 
 // StyleBuilder class definition
 class StyleBuilder {
     #sourceName = 'versatiles-shortbread';
     build(options) {
         options ??= {};
-        // @ts-expect-error globalThis may be undefined in some environments
-        const baseUrl = options.baseUrl ?? globalThis?.document?.location?.origin ?? 'https://tiles.versatiles.org';
-        const glyphs = options.glyphs ?? '/assets/glyphs/{fontstack}/{range}.pbf';
-        const sprite = options.sprite ?? [{ id: 'basics', url: '/assets/sprites/basics/sprites' }];
-        const tiles = options.tiles ?? ['/tiles/osm/{z}/{x}/{y}'];
-        const bounds = options.bounds ?? [-180, -85.0511287798066, 180, 85.0511287798066];
-        const hideLabels = options.hideLabels ?? false;
-        const language = options.language ?? null;
-        const recolorOptions = options.recolor ?? getDefaultRecolorFlags();
+        const defaults = this.getDefaultOptions();
+        const baseUrl = options.baseUrl ?? defaults.baseUrl;
+        const glyphs = options.glyphs ?? defaults.glyphs;
+        const sprite = options.sprite ?? defaults.sprite;
+        const tiles = options.tiles ?? defaults.tiles;
+        const bounds = options.bounds ?? defaults.bounds;
+        const hideLabels = options.hideLabels ?? defaults.hideLabels;
+        const language = options.language ?? defaults.language;
+        const recolorOptions = options.recolor ?? defaults.recolor;
         const colors = this.getColors(this.defaultColors);
         if (options.colors) {
             let key;
@@ -2369,7 +2477,7 @@ class StyleBuilder {
         const layerStyleRules = this.getStyleRules(styleRuleOptions);
         // get shortbread layers
         const layerDefinitions = getShortbreadLayers({ language });
-        let layers = layerDefinitions.map(layer => {
+        let layers = layerDefinitions.map((layer) => {
             switch (layer.type) {
                 case 'background':
                     return layer;
@@ -2387,7 +2495,7 @@ class StyleBuilder {
         layers = decorate(layers, layerStyleRules, new CachedRecolor(recolorOptions));
         // hide labels, if wanted
         if (hideLabels)
-            layers = layers.filter(l => l.type !== 'symbol');
+            layers = layers.filter((l) => l.type !== 'symbol');
         style.layers = layers;
         style.name = 'versatiles-' + this.name.toLowerCase();
         style.glyphs = resolveUrl(baseUrl, glyphs);
@@ -2399,7 +2507,7 @@ class StyleBuilder {
         }
         const source = style.sources[this.#sourceName];
         if ('tiles' in source)
-            source.tiles = tiles.map(url => resolveUrl(baseUrl, url));
+            source.tiles = tiles.map((url) => resolveUrl(baseUrl, url));
         if ('bounds' in source)
             source.bounds = bounds;
         return style;
@@ -2411,18 +2519,14 @@ class StyleBuilder {
     }
     getDefaultOptions() {
         return {
-            baseUrl: '',
-            bounds: [
-                -180,
-                -85.0511287798066,
-                180,
-                85.0511287798066
-            ],
-            glyphs: '',
-            sprite: '',
-            tiles: [],
+            // @ts-expect-error globalThis may be undefined in some environments
+            baseUrl: globalThis?.document?.location?.origin ?? 'https://tiles.versatiles.org',
+            bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
+            glyphs: '/assets/glyphs/{fontstack}/{range}.pbf',
+            sprite: [{ id: 'basics', url: '/assets/sprites/basics/sprites' }],
+            tiles: ['/tiles/osm/{z}/{x}/{y}'],
             hideLabels: false,
-            language: undefined,
+            language: '',
             colors: deepClone(this.defaultColors),
             fonts: deepClone(this.defaultFonts),
             recolor: getDefaultRecolorFlags(),
@@ -2530,7 +2634,7 @@ class Colorful extends StyleBuilder {
         const { colors, fonts } = options;
         return {
             // background
-            'background': {
+            background: {
                 color: colors.land,
             },
             // boundary
@@ -2684,7 +2788,8 @@ class Colorful extends StyleBuilder {
                 color: colors.buildingbg,
                 opacity: { 14: 0, 15: 1 },
             },
-            'building': {
+            building: {
+                // fake 2.5d with translate
                 color: colors.building,
                 opacity: { 14: 0, 15: 1 },
                 fillTranslate: [-2, -2],
@@ -2717,7 +2822,7 @@ class Colorful extends StyleBuilder {
                 opacity: { 13: 0, 14: 1 },
             },
             // bridge
-            'bridge': {
+            bridge: {
                 color: colors.land.darken(0.02),
                 fillAntialias: true,
                 opacity: 0.8,
@@ -2763,37 +2868,37 @@ class Colorful extends StyleBuilder {
                 opacity: 0.5,
             },
             'bridge-street-motorway:bridge': {
-                size: { '5': 0, '6': 3, '10': 7, '14': 7, '16': 20, '18': 53, '19': 118, '20': 235 }
+                size: { '5': 0, '6': 3, '10': 7, '14': 7, '16': 20, '18': 53, '19': 118, '20': 235 },
             },
             'bridge-street-trunk:bridge': {
-                size: { '7': 0, '8': 3, '10': 6, '14': 8, '16': 17, '18': 50, '19': 104, '20': 202 }
+                size: { '7': 0, '8': 3, '10': 6, '14': 8, '16': 17, '18': 50, '19': 104, '20': 202 },
             },
             'bridge-street-primary:bridge': {
-                size: { '8': 0, '9': 1, '10': 6, '14': 8, '16': 17, '18': 50, '19': 104, '20': 202 }
+                size: { '8': 0, '9': 1, '10': 6, '14': 8, '16': 17, '18': 50, '19': 104, '20': 202 },
             },
             'bridge-street-secondary:bridge': {
                 size: { '11': 3, '14': 7, '16': 11, '18': 42, '19': 95, '20': 193 },
-                opacity: { '11': 0, '12': 1 }
+                opacity: { '11': 0, '12': 1 },
             },
             'bridge-street-motorway-link:bridge': {
                 minzoom: 12,
-                size: { '12': 3, '14': 4, '16': 10, '18': 20, '20': 56 }
+                size: { '12': 3, '14': 4, '16': 10, '18': 20, '20': 56 },
             },
             'bridge-street-{trunk,primary,secondary}-link:bridge': {
                 minzoom: 13,
-                size: { '12': 3, '14': 4, '16': 10, '18': 20, '20': 56 }
+                size: { '12': 3, '14': 4, '16': 10, '18': 20, '20': 56 },
             },
             'bridge-street-{tertiary,tertiary-link,unclassified,residential,livingstreet,pedestrian}*:bridge': {
                 size: { '12': 3, '14': 4, '16': 8, '18': 36, '19': 90, '20': 179 },
-                opacity: { '12': 0, '13': 1 }
+                opacity: { '12': 0, '13': 1 },
             },
             'bridge-street-{service,track}:bridge': {
                 size: { '14': 3, '16': 6, '18': 25, '19': 67, '20': 134 },
-                opacity: { '14': 0, '15': 1 }
+                opacity: { '14': 0, '15': 1 },
             },
             'bridge-way-*:bridge': {
                 size: { '15': 0, '16': 7, '18': 10, '19': 17, '20': 31 },
-                minzoom: 15
+                minzoom: 15,
             },
             // special color: motorway
             '{bridge-,}street-motorway{-link,}:outline': {
@@ -3223,177 +3328,285 @@ class Colorful extends StyleBuilder {
                 color: colors.poi,
             },
             'poi-amenity': {
-                image: ['match',
+                image: [
+                    'match',
                     ['get', 'amenity'],
-                    'arts_centre', 'basics:icon-art_gallery',
-                    'atm', 'basics:icon-atm',
-                    'bank', 'basics:icon-bank',
-                    'bar', 'basics:icon-bar',
-                    'bench', 'basics:icon-bench',
-                    'bicycle_rental', 'basics:icon-bicycle_share',
-                    'biergarten', 'basics:icon-beergarden',
-                    'cafe', 'basics:icon-cafe',
-                    'car_rental', 'basics:icon-car_rental',
-                    'car_sharing', 'basics:icon-car_rental',
-                    'car_wash', 'basics:icon-car_wash',
-                    'cinema', 'basics:icon-cinema',
+                    'arts_centre',
+                    'basics:icon-art_gallery',
+                    'atm',
+                    'basics:icon-atm',
+                    'bank',
+                    'basics:icon-bank',
+                    'bar',
+                    'basics:icon-bar',
+                    'bench',
+                    'basics:icon-bench',
+                    'bicycle_rental',
+                    'basics:icon-bicycle_share',
+                    'biergarten',
+                    'basics:icon-beergarden',
+                    'cafe',
+                    'basics:icon-cafe',
+                    'car_rental',
+                    'basics:icon-car_rental',
+                    'car_sharing',
+                    'basics:icon-car_rental',
+                    'car_wash',
+                    'basics:icon-car_wash',
+                    'cinema',
+                    'basics:icon-cinema',
                     //'clinic', 'basics:icon-clinic',
-                    'college', 'basics:icon-college',
-                    'community_centre', 'basics:icon-community',
+                    'college',
+                    'basics:icon-college',
+                    'community_centre',
+                    'basics:icon-community',
                     //'courthouse', 'basics:icon-courthouse',
-                    'dentist', 'basics:icon-dentist',
-                    'doctors', 'basics:icon-doctor',
-                    'dog_park', 'basics:icon-dog_park',
-                    'drinking_water', 'basics:icon-drinking_water',
-                    'embassy', 'basics:icon-embassy',
-                    'fast_food', 'basics:icon-fast_food',
-                    'fire_station', 'basics:icon-fire_station',
+                    'dentist',
+                    'basics:icon-dentist',
+                    'doctors',
+                    'basics:icon-doctor',
+                    'dog_park',
+                    'basics:icon-dog_park',
+                    'drinking_water',
+                    'basics:icon-drinking_water',
+                    'embassy',
+                    'basics:icon-embassy',
+                    'fast_food',
+                    'basics:icon-fast_food',
+                    'fire_station',
+                    'basics:icon-fire_station',
                     //'food_court', 'basics:icon-food_court',
-                    'fountain', 'basics:icon-fountain',
-                    'grave_yard', 'basics:icon-cemetery',
-                    'hospital', 'basics:icon-hospital',
-                    'hunting_stand', 'basics:icon-huntingstand',
-                    'library', 'basics:icon-library',
-                    'marketplace', 'basics:icon-marketplace',
-                    'nightclub', 'basics:icon-nightclub',
-                    'nursing_home', 'basics:icon-nursinghome',
-                    'pharmacy', 'basics:icon-pharmacy',
-                    'place_of_worship', 'basics:icon-place_of_worship',
-                    'playground', 'basics:icon-playground',
-                    'police', 'basics:icon-police',
-                    'post_box', 'basics:icon-postbox',
-                    'post_office', 'basics:icon-post',
-                    'prison', 'basics:icon-prison',
-                    'pub', 'basics:icon-beer',
+                    'fountain',
+                    'basics:icon-fountain',
+                    'grave_yard',
+                    'basics:icon-cemetery',
+                    'hospital',
+                    'basics:icon-hospital',
+                    'hunting_stand',
+                    'basics:icon-huntingstand',
+                    'library',
+                    'basics:icon-library',
+                    'marketplace',
+                    'basics:icon-marketplace',
+                    'nightclub',
+                    'basics:icon-nightclub',
+                    'nursing_home',
+                    'basics:icon-nursinghome',
+                    'pharmacy',
+                    'basics:icon-pharmacy',
+                    'place_of_worship',
+                    'basics:icon-place_of_worship',
+                    'playground',
+                    'basics:icon-playground',
+                    'police',
+                    'basics:icon-police',
+                    'post_box',
+                    'basics:icon-postbox',
+                    'post_office',
+                    'basics:icon-post',
+                    'prison',
+                    'basics:icon-prison',
+                    'pub',
+                    'basics:icon-beer',
                     //'public_building', 'basics:icon-public_building',
-                    'recycling', 'basics:icon-recycling',
-                    'restaurant', 'basics:icon-restaurant',
-                    'school', 'basics:icon-school',
-                    'shelter', 'basics:icon-shelter',
-                    'telephone', 'basics:icon-telephone',
-                    'theatre', 'basics:icon-theatre',
-                    'toilets', 'basics:icon-toilet',
-                    'townhall', 'basics:icon-town_hall',
+                    'recycling',
+                    'basics:icon-recycling',
+                    'restaurant',
+                    'basics:icon-restaurant',
+                    'school',
+                    'basics:icon-school',
+                    'shelter',
+                    'basics:icon-shelter',
+                    'telephone',
+                    'basics:icon-telephone',
+                    'theatre',
+                    'basics:icon-theatre',
+                    'toilets',
+                    'basics:icon-toilet',
+                    'townhall',
+                    'basics:icon-town_hall',
                     //'university', 'basics:icon-university',
-                    'vending_machine', 'basics:icon-vendingmachine',
-                    'veterinary', 'basics:icon-veterinary',
-                    'waste_basket', 'basics:icon-waste_basket',
+                    'vending_machine',
+                    'basics:icon-vendingmachine',
+                    'veterinary',
+                    'basics:icon-veterinary',
+                    'waste_basket',
+                    'basics:icon-waste_basket',
                     '',
                 ],
             },
             'poi-leisure': {
-                image: ['match',
+                image: [
+                    'match',
                     ['get', 'leisure'],
-                    'golf_course', 'basics:icon-golf',
-                    'ice_rink', 'basics:icon-icerink',
-                    'pitch', 'basics:icon-pitch',
+                    'golf_course',
+                    'basics:icon-golf',
+                    'ice_rink',
+                    'basics:icon-icerink',
+                    'pitch',
+                    'basics:icon-pitch',
                     //'sports_centre', 'basics:icon-sports_centre',
-                    'stadium', 'basics:icon-stadium',
-                    'swimming_pool', 'basics:icon-swimming',
-                    'water_park', 'basics:icon-waterpark',
+                    'stadium',
+                    'basics:icon-stadium',
+                    'swimming_pool',
+                    'basics:icon-swimming',
+                    'water_park',
+                    'basics:icon-waterpark',
                     'basics:icon-sports',
                 ],
             },
             'poi-tourism': {
-                image: ['match',
+                image: [
+                    'match',
                     ['get', 'tourism'],
                     //'alpine_hut', 'basics:icon-alpine_hut',
                     //'bed_and_breakfast', 'basics:icon-bed_and_breakfast',
                     //'camp_site', 'basics:icon-camp_site',
                     //'caravan_site', 'basics:icon-caravan_site',
-                    'chalet', 'basics:icon-chalet',
+                    'chalet',
+                    'basics:icon-chalet',
                     //'guest_house', 'basics:icon-guest_house',
                     //'hostel', 'basics:icon-hostel',
                     //'hotel', 'basics:icon-hotel',
-                    'information', 'basics:transport-information',
+                    'information',
+                    'basics:transport-information',
                     //'motel', 'basics:icon-motel',
-                    'picnic_site', 'basics:icon-picnic_site',
+                    'picnic_site',
+                    'basics:icon-picnic_site',
                     //'theme_park', 'basics:icon-theme_park',
-                    'viewpoint', 'basics:icon-viewpoint',
-                    'zoo', 'basics:icon-zoo',
+                    'viewpoint',
+                    'basics:icon-viewpoint',
+                    'zoo',
+                    'basics:icon-zoo',
                     '',
                 ],
             },
             'poi-shop': {
-                image: ['match',
+                image: [
+                    'match',
                     ['get', 'shop'],
-                    'alcohol', 'basics:icon-alcohol_shop',
-                    'bakery', 'basics:icon-bakery',
-                    'beauty', 'basics:icon-beauty',
-                    'beverages', 'basics:icon-beverages',
+                    'alcohol',
+                    'basics:icon-alcohol_shop',
+                    'bakery',
+                    'basics:icon-bakery',
+                    'beauty',
+                    'basics:icon-beauty',
+                    'beverages',
+                    'basics:icon-beverages',
                     //'bicycle', 'basics:icon-bicycle',
-                    'books', 'basics:icon-books',
-                    'butcher', 'basics:icon-butcher',
+                    'books',
+                    'basics:icon-books',
+                    'butcher',
+                    'basics:icon-butcher',
                     //'car', 'basics:icon-car',
-                    'chemist', 'basics:icon-chemist',
-                    'clothes', 'basics:icon-clothes',
+                    'chemist',
+                    'basics:icon-chemist',
+                    'clothes',
+                    'basics:icon-clothes',
                     //'computer', 'basics:icon-computer',
                     //'convinience', 'basics:icon-convinience',
                     //'department_store', 'basics:icon-department_store',
-                    'doityourself', 'basics:icon-doityourself',
-                    'dry_cleaning', 'basics:icon-drycleaning',
-                    'florist', 'basics:icon-florist',
-                    'furniture', 'basics:icon-furniture',
-                    'garden_centre', 'basics:icon-garden_centre',
-                    'general', 'basics:icon-shop',
-                    'gift', 'basics:icon-gift',
-                    'greengrocer', 'basics:icon-greengrocer',
-                    'hairdresser', 'basics:icon-hairdresser',
-                    'hardware', 'basics:icon-hardware',
-                    'jewelry', 'basics:icon-jewelry_store',
-                    'kiosk', 'basics:icon-kiosk',
-                    'laundry', 'basics:icon-laundry',
+                    'doityourself',
+                    'basics:icon-doityourself',
+                    'dry_cleaning',
+                    'basics:icon-drycleaning',
+                    'florist',
+                    'basics:icon-florist',
+                    'furniture',
+                    'basics:icon-furniture',
+                    'garden_centre',
+                    'basics:icon-garden_centre',
+                    'general',
+                    'basics:icon-shop',
+                    'gift',
+                    'basics:icon-gift',
+                    'greengrocer',
+                    'basics:icon-greengrocer',
+                    'hairdresser',
+                    'basics:icon-hairdresser',
+                    'hardware',
+                    'basics:icon-hardware',
+                    'jewelry',
+                    'basics:icon-jewelry_store',
+                    'kiosk',
+                    'basics:icon-kiosk',
+                    'laundry',
+                    'basics:icon-laundry',
                     //'mall', 'basics:icon-mall',
                     //'mobile_phone', 'basics:icon-mobile_phone',
-                    'newsagent', 'basics:icon-newsagent',
-                    'optican', 'basics:icon-optician',
-                    'outdoor', 'basics:icon-outdoor',
-                    'shoes', 'basics:icon-shoes',
-                    'sports', 'basics:icon-sports',
-                    'stationery', 'basics:icon-stationery',
+                    'newsagent',
+                    'basics:icon-newsagent',
+                    'optican',
+                    'basics:icon-optician',
+                    'outdoor',
+                    'basics:icon-outdoor',
+                    'shoes',
+                    'basics:icon-shoes',
+                    'sports',
+                    'basics:icon-sports',
+                    'stationery',
+                    'basics:icon-stationery',
                     //'supermarket', 'basics:icon-supermarket',
-                    'toys', 'basics:icon-toys',
-                    'travel_agency', 'basics:icon-travel_agent',
-                    'video', 'basics:icon-video',
+                    'toys',
+                    'basics:icon-toys',
+                    'travel_agency',
+                    'basics:icon-travel_agent',
+                    'video',
+                    'basics:icon-video',
                     'basics:icon-shop',
                 ],
             },
             'poi-man_made': {
-                image: ['match',
+                image: [
+                    'match',
                     ['get', 'man_made'],
-                    'lighthouse', 'basics:icon-lighthouse',
-                    'surveillance', 'basics:icon-surveillance',
-                    'tower', 'basics:icon-observation_tower',
+                    'lighthouse',
+                    'basics:icon-lighthouse',
+                    'surveillance',
+                    'basics:icon-surveillance',
+                    'tower',
+                    'basics:icon-observation_tower',
                     //'wastewater_plant', 'basics:icon-wastewater_plant',
                     //'water_well', 'basics:icon-water_well',
                     //'water_works', 'basics:icon-water_works',
-                    'watermill', 'basics:icon-watermill',
-                    'windmill', 'basics:icon-windmill',
+                    'watermill',
+                    'basics:icon-watermill',
+                    'windmill',
+                    'basics:icon-windmill',
                     '',
                 ],
             },
             'poi-historic': {
-                image: ['match',
+                image: [
+                    'match',
                     ['get', 'historic'],
                     //'archaelogical_site', 'basics:icon-archaelogical_site',
-                    'artwork', 'basics:icon-artwork',
+                    'artwork',
+                    'basics:icon-artwork',
                     //'battlefield', 'basics:icon-battlefield',
-                    'castle', 'basics:icon-castle',
+                    'castle',
+                    'basics:icon-castle',
                     //'fort', 'basics:icon-fort',
                     //'memorial', 'basics:icon-memorial',
-                    'monument', 'basics:icon-monument',
+                    'monument',
+                    'basics:icon-monument',
                     //'ruins', 'basics:icon-ruins',
                     //'wayside_cross', 'basics:icon-wayside_cross',
-                    'wayside_shrine', 'basics:icon-shrine',
+                    'wayside_shrine',
+                    'basics:icon-shrine',
                     'basics:icon-historic',
                 ],
             },
             'poi-emergency': {
-                image: ['match',
+                image: [
+                    'match',
                     ['get', 'emergency'],
-                    'defibrillator', 'basics:icon-defibrillator',
-                    'fire_hydrant', 'basics:icon-hydrant',
-                    'phone', 'basics:icon-emergency_phone',
+                    'defibrillator',
+                    'basics:icon-defibrillator',
+                    'fire_hydrant',
+                    'basics:icon-hydrant',
+                    'phone',
+                    'basics:icon-emergency_phone',
                     '',
                 ],
             },
@@ -3421,7 +3634,7 @@ class Eclipse extends Colorful {
     name = 'Eclipse';
     constructor() {
         super();
-        this.transformDefaultColors(color => color.invertLuminosity());
+        this.transformDefaultColors((color) => color.invertLuminosity());
     }
 }
 
@@ -3429,7 +3642,7 @@ class Graybeard extends Colorful {
     name = 'Graybeard';
     constructor() {
         super();
-        this.transformDefaultColors(color => color.saturate(-1));
+        this.transformDefaultColors((color) => color.saturate(-1));
     }
 }
 
@@ -3437,7 +3650,7 @@ class Shadow extends Colorful {
     name = 'Shadow';
     constructor() {
         super();
-        this.transformDefaultColors(color => color.saturate(-1).invert().brightness(0.2));
+        this.transformDefaultColors((color) => color.saturate(-1).invert().brightness(0.2));
     }
 }
 
@@ -3506,7 +3719,7 @@ class Neutrino extends Colorful {
     getStyleRules(options) {
         const { colors, fonts } = options;
         return {
-            'background': {
+            background: {
                 color: colors.land,
             },
             'boundary-{country,state}': {
@@ -3577,11 +3790,11 @@ class Neutrino extends Colorful {
             'site-{bicycleparking,parking}': {
                 color: colors.commercial,
             },
-            'building': {
+            building: {
                 color: colors.building,
                 opacity: { 14: 0, 15: 1 },
             },
-            'bridge': {
+            bridge: {
                 color: colors.land.darken(0.01),
             },
             '{tunnel-,bridge-,}street-*': {
@@ -3865,9 +4078,9 @@ const neutrino = getStyleBuilder(Neutrino);
 getStyleBuilder(Empty);
 
 /**
-* Checks if an object adheres to the TileJSON specification.
-* Throws errors if the object does not conform to the expected structure or types.
-*/
+ * Checks if an object adheres to the TileJSON specification.
+ * Throws errors if the object does not conform to the expected structure or types.
+ */
 function isTileJSONSpecification(spec) {
     if (typeof spec !== 'object' || spec === null) {
         throw Error('spec must be an object');
@@ -3881,7 +4094,7 @@ function isTileJSONSpecification(spec) {
         throw Error('spec.attribution must be a string if present');
     }
     if (obj.bounds != null) {
-        if (!Array.isArray(obj.bounds) || obj.bounds.length !== 4 || obj.bounds.some(num => typeof num !== 'number')) {
+        if (!Array.isArray(obj.bounds) || obj.bounds.length !== 4 || obj.bounds.some((num) => typeof num !== 'number')) {
             throw Error('spec.bounds must be an array of four numbers if present');
         }
         const a = obj.bounds;
@@ -3899,7 +4112,7 @@ function isTileJSONSpecification(spec) {
             throw Error('spec.bounds[1] must be smaller than spec.bounds[3]');
     }
     if (obj.center != null) {
-        if (!Array.isArray(obj.center) || obj.center.length !== 2 || obj.center.some(num => typeof num !== 'number')) {
+        if (!Array.isArray(obj.center) || obj.center.length !== 2 || obj.center.some((num) => typeof num !== 'number')) {
             throw Error('spec.center must be an array of two numbers if present');
         }
         const a = obj.center;
@@ -3908,25 +4121,25 @@ function isTileJSONSpecification(spec) {
         if (a[1] < -90 || a[1] > 90)
             throw Error('spec.center[1] must be between -90 and 90');
     }
-    if (obj.data != null && (!Array.isArray(obj.data) || obj.data.some(url => typeof url !== 'string'))) {
+    if (obj.data != null && (!Array.isArray(obj.data) || obj.data.some((url) => typeof url !== 'string'))) {
         throw Error('spec.data must be an array of strings if present');
     }
     if (obj.description != null && typeof obj.description !== 'string') {
         throw Error('spec.description must be a string if present');
     }
-    if (obj.fillzoom != null && (typeof obj.fillzoom !== 'number' || (obj.fillzoom < 0))) {
+    if (obj.fillzoom != null && (typeof obj.fillzoom !== 'number' || obj.fillzoom < 0)) {
         throw Error('spec.fillzoom must be a positive integer if present');
     }
-    if (obj.grids != null && (!Array.isArray(obj.grids) || obj.grids.some(url => typeof url !== 'string'))) {
+    if (obj.grids != null && (!Array.isArray(obj.grids) || obj.grids.some((url) => typeof url !== 'string'))) {
         throw Error('spec.grids must be an array of strings if present');
     }
     if (obj.legend != null && typeof obj.legend !== 'string') {
         throw Error('spec.legend must be a string if present');
     }
-    if (obj.minzoom != null && (typeof obj.minzoom !== 'number' || (obj.minzoom < 0))) {
+    if (obj.minzoom != null && (typeof obj.minzoom !== 'number' || obj.minzoom < 0)) {
         throw Error('spec.minzoom must be a positive integer if present');
     }
-    if (obj.maxzoom != null && (typeof obj.maxzoom !== 'number' || (obj.maxzoom < 0))) {
+    if (obj.maxzoom != null && (typeof obj.maxzoom !== 'number' || obj.maxzoom < 0)) {
         throw Error('spec.maxzoom must be a positive integer if present');
     }
     if (obj.name != null && typeof obj.name !== 'string') {
@@ -3938,7 +4151,7 @@ function isTileJSONSpecification(spec) {
     if (obj.template != null && typeof obj.template !== 'string') {
         throw Error('spec.template must be a string if present');
     }
-    if (!Array.isArray(obj.tiles) || obj.tiles.length === 0 || obj.tiles.some(url => typeof url !== 'string')) {
+    if (!Array.isArray(obj.tiles) || obj.tiles.length === 0 || obj.tiles.some((url) => typeof url !== 'string')) {
         throw Error('spec.tiles must be an array of strings');
     }
     return true;
@@ -3946,7 +4159,7 @@ function isTileJSONSpecification(spec) {
 function isRasterTileJSONSpecification(spec) {
     if (!isTileJSONSpecification(spec))
         ;
-    if (('vector_layers' in spec) && (spec.vector_layers != null))
+    if ('vector_layers' in spec && spec.vector_layers != null)
         return false;
     return true;
 }
@@ -3966,7 +4179,7 @@ function guessStyle(tileJSON, options) {
     tileJSON = deepClone(tileJSON);
     if (options && options.baseUrl) {
         const { baseUrl } = options;
-        tileJSON.tiles = tileJSON.tiles.map(url => resolveUrl(baseUrl, url));
+        tileJSON.tiles = tileJSON.tiles.map((url) => resolveUrl(baseUrl, url));
     }
     if (!isTileJSONSpecification(tileJSON))
         ;
@@ -3995,9 +4208,36 @@ function isShortbread(spec) {
         return false;
     if (!Array.isArray(spec.vector_layers))
         return false;
-    const layerIds = new Set(spec.vector_layers.map(l => String(l.id)));
-    const shortbreadIds = ['place_labels', 'boundaries', 'boundary_labels', 'addresses', 'water_lines', 'water_lines_labels', 'dam_lines', 'dam_polygons', 'pier_lines', 'pier_polygons', 'bridges', 'street_polygons', 'streets_polygons_labels', 'ferries', 'streets', 'street_labels', 'street_labels_points', 'aerialways', 'public_transport', 'buildings', 'water_polygons', 'ocean', 'water_polygons_labels', 'land', 'sites', 'pois'];
-    return shortbreadIds.every(id => layerIds.has(id));
+    const layerIds = new Set(spec.vector_layers.map((l) => String(l.id)));
+    const shortbreadIds = [
+        'place_labels',
+        'boundaries',
+        'boundary_labels',
+        'addresses',
+        'water_lines',
+        'water_lines_labels',
+        'dam_lines',
+        'dam_polygons',
+        'pier_lines',
+        'pier_polygons',
+        'bridges',
+        'street_polygons',
+        'streets_polygons_labels',
+        'ferries',
+        'streets',
+        'street_labels',
+        'street_labels_points',
+        'aerialways',
+        'public_transport',
+        'buildings',
+        'water_polygons',
+        'ocean',
+        'water_polygons_labels',
+        'land',
+        'sites',
+        'pois',
+    ];
+    return shortbreadIds.every((id) => layerIds.has(id));
 }
 function getShortbreadStyle(spec, builderOption) {
     return colorful({
@@ -4027,7 +4267,7 @@ function getShortbreadStyle(spec, builderOption) {
 function getInspectorStyle(spec) {
     const sourceName = 'vectorSource';
     const layers = { background: [], circle: [], line: [], fill: [] };
-    layers.background.push({ 'id': 'background', 'type': 'background', 'paint': { 'background-color': '#fff' } });
+    layers.background.push({ id: 'background', type: 'background', paint: { 'background-color': '#fff' } });
     spec.vector_layers.forEach((vector_layer) => {
         let luminosity = 'bright', saturation, hue;
         if (/water|ocean|lake|sea|river/.test(vector_layer.id))
@@ -4086,12 +4326,7 @@ function getInspectorStyle(spec) {
         sources: {
             [sourceName]: sourceFromSpec(spec, 'vector'),
         },
-        layers: [
-            ...layers.background,
-            ...layers.fill,
-            ...layers.line,
-            ...layers.circle,
-        ],
+        layers: [...layers.background, ...layers.fill, ...layers.line, ...layers.circle],
     };
 }
 function getRasterStyle(spec) {
@@ -4101,11 +4336,13 @@ function getRasterStyle(spec) {
         sources: {
             [sourceName]: sourceFromSpec(spec, 'raster'),
         },
-        layers: [{
+        layers: [
+            {
                 id: 'raster',
                 type: 'raster',
                 source: sourceName,
-            }],
+            },
+        ],
     };
 }
 function sourceFromSpec(spec, type) {