geostyler-mapbox-parser - npm Package Compare versions

Comparing version 3.1.1 to 4.0.0

build/dist/MapboxStyleParser.d.ts

 import { PointSymbolizer, Rule, Style, StyleParser, Symbolizer, FillSymbolizer, LineSymbolizer, IconSymbolizer, TextSymbolizer, Filter, SymbolizerKind, MarkSymbolizer, ScaleDenominator, UnsupportedProperties, ReadStyleResult, GeoStylerBooleanFunction, GeoStylerStringFunction, WriteStyleResult } from 'geostyler-style';
-type MapboxLayerType = 'fill' | 'line' | 'symbol' | 'circle' | 'heatmap' | 'fill-extrusion' | 'raster' | 'hillshade' | 'background';
+import { AnyLayer, AnyLayout, AnyPaint, CircleLayout, CirclePaint, CustomLayerInterface, FillLayer, FillLayout, FillPaint, LineLayer, LineLayout, LinePaint, SymbolLayout, SymbolPaint, Style as MapboxStyle, Sources, Expression } from 'mapbox-gl';
+/**
+ * The style representation of mapbox-gl but with optional sources, as these are
+ * not required for reading the style and get stripped when writing.
+ */
+export type MbStyle = Omit<MapboxStyle, 'sources'> & {
+    sources?: Sources;
+};
+type NoneCustomLayer = Exclude<AnyLayer, CustomLayerInterface>;
+/**
+ * Generated ids contain information about the position of a layer inside the
+ * geostyler-style:
+ * r* -> rule index
+ * sy* -> symbolizer index
+ * st* -> mapboxlayer index
+ */
+type LayerId = AnyLayer['id'];
+type GeoStylerRef = {
+    rules: {
+        name?: string;
+        symbolizers?: LayerId[][];
+    }[];
+};
 type SymbolType = {
@@ -11,4 +33,5 @@ textSymbolizer?: TextSymbolizer;
 };
-export declare class MapboxStyleParser implements StyleParser {
+export declare class MapboxStyleParser implements StyleParser<Omit<MbStyle, 'sources'>> {
     static title: string;
+    private static readonly fillSymbolizerStrokeProperties;
     title: string;
@@ -18,6 +41,80 @@ /**
      */
-    unsupportedProperties: UnsupportedProperties;
+    unsupportedProperties: {
+        Symbolizer: {
+            FillSymbolizer: {
+                fillOpacity: {
+                    support: "none";
+                    info: string;
+                };
+                outlineWidthUnit: "none";
+            };
+            LineSymbolizer: {
+                dashOffset: "none";
+                graphicStroke: "none";
+                gapWidthUnit: "none";
+                spacing: "none";
+                spacingUnit: "none";
+                widthUnit: "none";
+            };
+            MarkSymbolizer: {
+                support: "partial";
+                wellKnownName: {
+                    support: "partial";
+                    info: string;
+                };
+                opacity: {
+                    support: "none";
+                    info: string;
+                };
+            };
+            IconSymbolizer: {
+                haloOpacity: "none";
+                haloWidthUnit: "none";
+                sizeUnit: "none";
+            };
+            RasterSymbolizer: "none";
+            TextSymbolizer: {
+                fontStyle: "none";
+                fontWeight: "none";
+                haloOpacity: "none";
+                haloWidthUnit: "none";
+                letterSpacingUnit: "none";
+                lineHeightUnit: "none";
+            };
+        };
+        Function: {
+            numberFormat: "none";
+            strAbbreviate: "none";
+            strCapitalize: "none";
+            strDefaultIfBlank: "none";
+            strEndsWith: "none";
+            strEqualsIgnoreCase: "none";
+            strIndexOf: "none";
+            strLastIndexOf: "none";
+            strMatches: "none";
+            strReplace: "none";
+            strStartsWith: "none";
+            strStripAccents: "none";
+            strSubstringStart: "none";
+            strSubstring: {
+                support: "partial";
+                info: string;
+            };
+            strTrim: "none";
+            exp: {
+                support: "partial";
+                info: string;
+            };
+            atan2: "none";
+            random: "none";
+            rint: "none";
+            toDegrees: "none";
+            toRadians: "none";
+            double2bool: "none";
+        };
+    };
     ignoreConversionErrors: boolean;
     pretty: boolean;
-    _spriteBaseUrl: string;
+    private mbMetadata;
+    private spriteBaseUrl;
     constructor(options?: OptionsType);
@@ -29,5 +126,5 @@ isSymbolType(s: Symbolizer | SymbolType): s is SymbolType;
      * @param type A Mapbox Style Layer
-     * @return A GeoStylerStyle-SymbolizerKind
+     * @return A GeoStylerStyle SymbolizerKind 'Symbol' or 'Circle'
      */
-    getSymbolizerKindFromMapboxLayerType(type: string): SymbolizerKind | 'Symbol' | 'Circle';
+    getSymbolizerKindFromMapboxLayerType(type: AnyLayer['type']): SymbolizerKind | 'Symbol' | 'Circle';
     /**
@@ -39,12 +136,4 @@ * Creates a GeoStylerStyle-TextSymbolizer label from a Mapbox Layer Paint Symbol text-field
      */
-    getLabelFromTextField(label: string | any[]): (string | undefined);
+    getLabelFromTextField(label: string | Expression): (string | GeoStylerStringFunction | undefined);
     /**
-     * Creates a GeoStylerStyle-MarkSymbolizer from a Mapbox Style Layer
-     *
-     * @param paint A Mapbox paint
-     * @param layout A Mapbox layout
-     * @return A GeoStylerStyle-MarkSymbolizer
-     */
-    getMarkSymbolizerFromMapboxLayer(paint: any, layout: any): MarkSymbolizer;
-    /**
      * Creates an image url based on the sprite baseurl and the sprite name.
@@ -66,3 +155,3 @@ *
      */
-    getCircleSymbolizerFromMapboxLayer(paint: any, layout: any): MarkSymbolizer;
+    getMarkSymbolizerFromMapboxCircleLayer(paint: CirclePaint, layout: CircleLayout): MarkSymbolizer | undefined;
     /**
@@ -75,3 +164,3 @@ * Creates a GeoStylerStyle-IconSymbolizer from a Mapbox Style Layer
      */
-    getIconSymbolizerFromMapboxLayer(paint: any, layout: any): IconSymbolizer;
+    getIconSymbolizerFromMapboxSymbolLayer(paint: SymbolPaint, layout: SymbolLayout): IconSymbolizer | undefined;
     /**
@@ -84,3 +173,3 @@ * Creates a GeoStylerStyle-TextSymbolizer from a Mapbox Style Layer
      */
-    getTextSymbolizerFromMapboxLayer(paint: any, layout: any): TextSymbolizer;
+    getTextSymbolizerFromMapboxLayer(paint: SymbolPaint, layout: SymbolLayout): TextSymbolizer | undefined;
     /**
@@ -93,3 +182,3 @@ * Creates a GeoStylerStyle-FillSymbolizer from a Mapbox Style Layer.
      */
-    getFillSymbolizerFromMapboxLayer(paint: any, layout: any): FillSymbolizer;
+    getFillSymbolizerFromMapboxFillLayer(paint: FillPaint, layout: FillLayout): FillSymbolizer;
     getPatternOrGradientFromMapboxLayer(icon: any): IconSymbolizer | undefined;
@@ -103,3 +192,3 @@ /**
      */
-    getLineSymbolizerFromMapboxLayer(paint: any, layout: any): LineSymbolizer;
+    getLineSymbolizerFromMapboxLineLayer(paint: LinePaint, layout: LineLayout): LineSymbolizer;
     /**
@@ -112,3 +201,3 @@ * Creates GeoStyler-Style TextSymbolizer and IconSymbolizer from
      */
-    getIconTextSymbolizersFromMapboxLayer(paint: any, layout: any): SymbolType;
+    getIconTextSymbolizersFromMapboxSymbolLayer(paint: SymbolPaint, layout: SymbolLayout): Symbolizer[];
     /**
@@ -122,3 +211,7 @@ * Creates a GeoStylerStyle-Symbolizer from a Mapbox Style Layer
      */
-    getSymbolizerFromMapboxLayer(paint: any, layout: any, type: string): Symbolizer | SymbolType | undefined;
+    getSymbolizersFromMapboxLayer({ paint, layout, type }: {
+        paint?: AnyPaint;
+        layout?: AnyLayout;
+        type: AnyLayer['type'];
+    }): Symbolizer[];
     /**
@@ -130,3 +223,3 @@ * Creates a GeoStylerStyle-Filter from a Mapbox Style Layer Filter
      */
-    getFilterFromMapboxFilter(filter: any[]): Filter;
+    getFilterFromMapboxFilter(filter?: any[]): Filter | undefined;
     /**
@@ -141,41 +234,9 @@ * Creates a GeoStylerStyle-ScaleDenominator from a Mapvox Style Layer Min/Max Zoom
     /**
-     * Merges the baseFilter and the attribute filter to a single filter.
-     * If both filters are defined, they will be merged via '&&' operator.
-     * If only one of the filters is defined, the defined filter will be returned.
+     * This merges all the passed symbolizers into one if possbile.
      *
-     * @param baseFilter The value of the mapbox layer's filter property
-     * @param filter The value of the mapbox paint attribute filter
+     * @param symbolizers The array of geostyler-style Symbolizers
+     * @returns
      */
-    mergeFilters(baseFilter: Filter | undefined, filter: Filter | undefined): Filter | undefined;
+    mergeSymbolizers(symbolizers: Symbolizer[]): Symbolizer;
     /**
-     * Compares an arbitrary number of filters for equality
-     *
-     * @param filters Array of mapbox filters
-     */
-    equalMapboxAttributeFilters(filters: any[]): boolean;
-    /**
-     * Creates valid GeoStyler-Style Symbolizers from possibly invalid Symbolizers.
-     * Symbolizers are invalid if at least one of their attributes' values is a mapbox filter expression.
-     * This function detects such expressions and creates a symbolizer for each possible outcome.
-     * Related property values will be set accordingly. Thus, creating valid Symbolizers.
-     *
-     * IMPORTANT: Currently only the 'case' filter expression is supported. Furthermore, handling of multiple properties
-     * with filter expressions is only supported if all filter expressions are equal. Otherwise errors will be thrown.
-     *
-     * @param tmpSymbolizer A possibly invalid GeoStyler-Style Symbolizer
-     * @return Array of valid Symbolizers and optional mapbox filters
-     */
-    mapboxAttributeFiltersToSymbolizer(tmpSymbolizer: Symbolizer): {
-        filter?: Filter;
-        symbolizers: Symbolizer[];
-    }[];
-    /**
-     * Creates GeoStyler-Style Rules from a mapbox paint object.
-     *
-     * @param paint A mapbox layer paint object
-     * @param type The type of the mapbox layer
-     * @return Array of GeoStyler-Style Rules
-     */
-    mapboxPaintToGeoStylerRules(paint: any, layout: any, type: string): Rule[];
-    /**
      * Creates a GeoStyler-Style Rule from a mapbox layer.
@@ -186,3 +247,3 @@ *
      */
-    mapboxLayerToGeoStylerRules(layer: any): Rule[];
+    mapboxLayersToGeoStylerRules(layers: NoneCustomLayer[]): Rule[];
     /**
@@ -194,3 +255,3 @@ * Creates a GeoStylerStyle-Style from a Mapbox Style
      */
-    mapboxLayerToGeoStylerStyle(mapboxStyle: any): Style;
+    mapboxStyleToGeoStylerStyle(mapboxStyle: MbStyle): Style;
     /**
@@ -203,3 +264,3 @@ * The readStyle implementation of the GeoStyler-Style StylerParser interface.
      */
-    readStyle(mapboxStyle: any): Promise<ReadStyleResult>;
+    readStyle(mapboxStyle: MbStyle): Promise<ReadStyleResult>;
     /**
@@ -212,3 +273,3 @@ * The writeStyle implementation of the GeoStyler-Style StyleParser interface.
      */
-    writeStyle(geoStylerStyle: Style): Promise<WriteStyleResult<string>>;
+    writeStyle(geoStylerStyle: Style): Promise<WriteStyleResult<Omit<MbStyle, 'sources'>>>;
     /**
@@ -220,3 +281,3 @@ * Write a Mapbox Style Object based on a GeoStylerStyle.
      */
-    geoStylerStyleToMapboxObject(geoStylerStyle: Style): any;
+    geoStylerStyleToMapboxObject(geoStylerStyle: Style): Omit<MbStyle, 'sources'>;
     /**
@@ -228,3 +289,6 @@ * Creates a layer for each Rule and each Symbolizer.
      */
-    getMapboxLayersFromRules(rules: Rule[]): any[];
+    getMapboxLayersFromRules(rules: Rule[]): {
+        layers: NoneCustomLayer[];
+        geoStylerRef: GeoStylerRef;
+    };
     /**
@@ -244,3 +308,3 @@ * Get the mapbox zoomlevel from a scaleDenominator.
      */
-    getMapboxFilterFromFilter(filter: Filter): any[];
+    getMapboxFilterFromFilter(filter: Filter): Expression;
     /**
@@ -250,10 +314,21 @@ * Creates a Mapbox Layer Paint object and the layerType from a GeoStylerStyle-Symbolizer
      * @param symbolizer A GeoStylerStyle-Symbolizer
-     * @return {layertype, paint} An object consisting of the MapboxLayerType and the Mapbox Layer Paint
+     * @return [{layerType, paint, layout}] A list of objects consisting of the MapboxLayerType,
+     *    the Mapbox Layer Paint and Layout
      */
     getStyleFromSymbolizer(symbolizer: Symbolizer): {
-        layerType: MapboxLayerType;
-        paint: any;
-        layout: any;
-    };
+        type: NoneCustomLayer['type'];
+        paint?: AnyPaint;
+        layout?: AnyLayout;
+    }[];
     /**
+     * Splits a fill symbolizer having outline properties into a fill and line styles
+     *
+     * @param symbolizer
+     * @returns
+     */
+    getSplitStyleFromFillSymbolizer(symbolizer: FillSymbolizer): [
+        Omit<FillLayer, 'id'>,
+        Omit<LineLayer, 'id'>
+    ];
+    /**
      * Creates a Mapbox Layer Paint object from a GeostylerStyle-FillSymbolizer
@@ -264,3 +339,3 @@ *
      */
-    getPaintFromFillSymbolizer(symbolizer: FillSymbolizer): any;
+    getPaintFromFillSymbolizer(symbolizer: FillSymbolizer): FillPaint;
     /**
@@ -272,3 +347,3 @@ * Creates a Mapbox Layer Layout object from a GeostylerStyle-FillSymbolizer
      */
-    getLayoutFromFillSymbolizer(symbolizer: FillSymbolizer): any;
+    getLayoutFromFillSymbolizer(symbolizer: FillSymbolizer): FillLayout;
     /**
@@ -294,3 +369,3 @@ * Creates a fill pattern or gradient from a GeoStylerStyle-Symbolizer
      */
-    getVisibility(visibility: boolean | GeoStylerBooleanFunction | undefined): 'none' | 'visible' | undefined;
+    getVisibility(visibility: boolean | GeoStylerBooleanFunction | undefined): AnyLayout['visibility'];
     /**
@@ -302,3 +377,3 @@ * Creates a Mapbox Layer Paint object from a GeoStylerStyle-LineSymbolizer
      */
-    getPaintFromLineSymbolizer(symbolizer: LineSymbolizer): any;
+    getPaintFromLineSymbolizer(symbolizer: LineSymbolizer): LinePaint;
     /**
@@ -310,3 +385,3 @@ * Creates a Mapbox Layer Layout object from a GeoStylerStyle-LineSymbolizer
      */
-    getLayoutFromLineSymbolizer(symbolizer: LineSymbolizer): any;
+    getLayoutFromLineSymbolizer(symbolizer: LineSymbolizer): LineLayout;
     /**
@@ -318,3 +393,3 @@ * Creates a Mapbox Layer Paint object from a GeoStylerStyle-IconSymbolizer
      */
-    getPaintFromIconSymbolizer(symbolizer: IconSymbolizer): any;
+    getPaintFromIconSymbolizer(symbolizer: IconSymbolizer): SymbolPaint;
     /**
@@ -326,3 +401,3 @@ * Creates a Mapbox Layer Layout object from a GeoStylerStyle-IconSymbolizer
      */
-    getLayoutFromIconSymbolizer(symbolizer: IconSymbolizer): any;
+    getLayoutFromIconSymbolizer(symbolizer: IconSymbolizer): SymbolLayout;
     /**
@@ -334,3 +409,3 @@ * Creates a Mapbox Layer Paint object from a GeoStylerStyle-TextSymbolizer
      */
-    getPaintFromTextSymbolizer(symbolizer: TextSymbolizer): any;
+    getPaintFromTextSymbolizer(symbolizer: TextSymbolizer): SymbolPaint;
     /**
@@ -342,3 +417,3 @@ * Creates a Mapbox Layer Layout object from a GeoStylerStyle-TextSymbolizer
      */
-    getLayoutFromTextSymbolizer(symbolizer: TextSymbolizer): any;
+    getLayoutFromTextSymbolizer(symbolizer: TextSymbolizer): SymbolLayout;
     /**
@@ -350,3 +425,3 @@ * Creates a Mapbox text Format from a GeoStylerStyle-TextSymbolizer Label
      */
-    getTextFieldFromLabel(template: string | GeoStylerStringFunction): (string | any[]);
+    getTextFieldFromLabel(template?: string | GeoStylerStringFunction): (string | Expression | undefined);
     /**
@@ -361,3 +436,3 @@ * Creates a Mapbox Layer Paint object from a GeoStylerStyle-MarkSymbolizer
      */
-    getPaintFromCircleSymbolizer(symbolizer: MarkSymbolizer): any;
+    getCirclePaintFromMarkSymbolizer(symbolizer: MarkSymbolizer): CirclePaint;
     /**
@@ -372,5 +447,5 @@ * Creates a Mapbox Layer Layout object from a GeoStylerStyle-MarkSymbolizer
      */
-    getLayoutFromCircleSymbolizer(symbolizer: MarkSymbolizer): any;
+    getCircleLayoutFromMarkSymbolizer(symbolizer: MarkSymbolizer): CircleLayout;
     checkForUnsupportedProperties(geoStylerStyle: Style): UnsupportedProperties | undefined;
 }
 export default MapboxStyleParser;

build/dist/MapboxStyleParser.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
@@ -19,5 +30,5 @@ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
 var MapboxStyleUtil_1 = __importDefault(require("./Util/MapboxStyleUtil"));
-var cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
-var isEqual_1 = __importDefault(require("lodash/isEqual"));
-var MapboxStyleParser = /** @class */ (function () {
+var Expressions_1 = require("./Expressions");
+var lodash_1 = require("lodash");
+var MapboxStyleParser = exports.MapboxStyleParser = /** @class */ (function () {
     function MapboxStyleParser(options) {
@@ -31,4 +42,2 @@ this.title = 'Mapbox';
                 FillSymbolizer: {
-                    outlineWidth: 'none',
-                    outlineDasharray: 'none',
                     fillOpacity: {
@@ -38,5 +47,2 @@ support: 'none',
                     },
-                    outlineCap: 'none',
-                    outlineJoin: 'none',
-                    outlineOpacity: 'none',
                     outlineWidthUnit: 'none'
@@ -77,2 +83,32 @@ },
                 }
+            },
+            Function: {
+                numberFormat: 'none',
+                strAbbreviate: 'none',
+                strCapitalize: 'none',
+                strDefaultIfBlank: 'none',
+                strEndsWith: 'none',
+                strEqualsIgnoreCase: 'none',
+                strIndexOf: 'none',
+                strLastIndexOf: 'none',
+                strMatches: 'none',
+                strReplace: 'none',
+                strStartsWith: 'none',
+                strStripAccents: 'none',
+                strSubstringStart: 'none',
+                strSubstring: {
+                    support: 'partial',
+                    info: 'end index is mandatory'
+                },
+                strTrim: 'none',
+                exp: {
+                    support: 'partial',
+                    info: 'only for x = 1'
+                },
+                atan2: 'none',
+                random: 'none',
+                rint: 'none',
+                toDegrees: 'none',
+                toRadians: 'none',
+                double2bool: 'none',
             }
@@ -96,3 +132,3 @@ };
      * @param type A Mapbox Style Layer
-     * @return A GeoStylerStyle-SymbolizerKind
+     * @return A GeoStylerStyle SymbolizerKind 'Symbol' or 'Circle'
      */
@@ -129,4 +165,4 @@ MapboxStyleParser.prototype.getSymbolizerKindFromMapboxLayerType = function (type) {
         }
-        if (label[0] !== 'format' && !this.ignoreConversionErrors) {
-            throw new Error('Cannot parse mapbox style. Unsupported text format.');
+        if (label[0] !== 'format') {
+            return (0, Expressions_1.mb2gsExpression)(label);
         }
@@ -149,16 +185,2 @@ var gsLabel = '';
     /**
-     * Creates a GeoStylerStyle-MarkSymbolizer from a Mapbox Style Layer
-     *
-     * @param paint A Mapbox paint
-     * @param layout A Mapbox layout
-     * @return A GeoStylerStyle-MarkSymbolizer
-     */
-    MapboxStyleParser.prototype.getMarkSymbolizerFromMapboxLayer = function (paint, layout) {
-        // TODO: parse MarkSymbolizer
-        return {
-            kind: 'Mark',
-            wellKnownName: 'circle'
-        };
-    };
-    /**
      * Creates an image url based on the sprite baseurl and the sprite name.
@@ -173,3 +195,3 @@ *
         }
-        if (!this._spriteBaseUrl) {
+        if (!this.spriteBaseUrl) {
             return;
@@ -180,3 +202,3 @@ }
         url += 'name=' + spriteName;
-        url += '&baseurl=' + encodeURIComponent(this._spriteBaseUrl);
+        url += '&baseurl=' + encodeURIComponent(this.spriteBaseUrl);
         return url;
@@ -194,19 +216,24 @@ };
      */
-    MapboxStyleParser.prototype.getCircleSymbolizerFromMapboxLayer = function (paint, layout) {
-        return {
+    MapboxStyleParser.prototype.getMarkSymbolizerFromMapboxCircleLayer = function (paint, layout) {
+        var symbolizer = {
             kind: 'Mark',
-            blur: paint['circle-blur'],
-            color: paint['circle-color'],
-            offset: paint['circle-translate'],
-            offsetAnchor: paint['circle-translate-anchor'],
-            fillOpacity: paint['circle-opacity'],
-            pitchAlignment: paint['circle-pitch-alignment'],
-            pitchScale: paint['circle-pitch-scale'],
-            radius: paint['circle-radius'],
-            strokeColor: paint['circle-stroke-color'],
-            strokeOpacity: paint['circle-stroke-opacity'],
-            strokeWidth: paint['circle-stroke-width'],
-            visibility: layout.visibility,
+            blur: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['circle-blur']),
+            color: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['circle-color']),
+            // TODO: handle array values
+            offset: paint === null || paint === void 0 ? void 0 : paint['circle-translate'],
+            offsetAnchor: paint === null || paint === void 0 ? void 0 : paint['circle-translate-anchor'],
+            fillOpacity: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['circle-opacity']),
+            pitchAlignment: paint === null || paint === void 0 ? void 0 : paint['circle-pitch-alignment'],
+            pitchScale: paint === null || paint === void 0 ? void 0 : paint['circle-pitch-scale'],
+            radius: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['circle-radius']),
+            strokeColor: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['circle-stroke-color']),
+            strokeOpacity: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['circle-stroke-opacity']),
+            strokeWidth: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['circle-stroke-width']),
+            visibility: (layout === null || layout === void 0 ? void 0 : layout.visibility) && (layout === null || layout === void 0 ? void 0 : layout.visibility) !== 'none',
             wellKnownName: 'circle'
         };
+        if (MapboxStyleUtil_1.default.symbolizerAllUndefined(symbolizer)) {
+            return undefined;
+        }
+        return (0, lodash_1.omitBy)(symbolizer, lodash_1.isUndefined);
     };
@@ -220,27 +247,33 @@ /**
      */
-    MapboxStyleParser.prototype.getIconSymbolizerFromMapboxLayer = function (paint, layout) {
-        return {
+    MapboxStyleParser.prototype.getIconSymbolizerFromMapboxSymbolLayer = function (paint, layout) {
+        var symbolizer = {
             kind: 'Icon',
-            allowOverlap: layout['icon-allow-overlap'],
-            anchor: layout['icon-anchor'],
-            avoidEdges: layout['symbol-avoid-edges'],
-            color: paint['icon-color'],
-            haloBlur: paint['icon-halo-blur'],
-            haloColor: paint['icon-halo-color'],
-            haloWidth: paint['icon-halo-width'],
-            image: this.getIconImage(layout['icon-image']),
-            keepUpright: layout['icon-keep-upright'],
-            offset: layout['icon-offset'],
-            offsetAnchor: paint['icon-translate-anchor'],
-            opacity: paint['icon-opacity'],
-            optional: layout['icon-optional'],
-            padding: layout['icon-padding'],
-            pitchAlignment: layout['icon-pitch-alignment'],
-            rotate: layout['icon-rotate'],
-            rotationAlignment: layout['icon-rotation-alignment'],
-            size: layout['icon-size'],
-            textFit: layout['icon-text-fit'],
-            textFitPadding: layout['icon-text-fit-padding'],
-            visibility: layout.visibility
+            allowOverlap: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['icon-allow-overlap']),
+            anchor: layout === null || layout === void 0 ? void 0 : layout['icon-anchor'],
+            avoidEdges: layout === null || layout === void 0 ? void 0 : layout['symbol-avoid-edges'],
+            color: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['icon-color']),
+            haloBlur: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['icon-halo-blur']),
+            haloColor: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['icon-halo-color']),
+            haloWidth: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['icon-halo-width']),
+            image: this.getIconImage(layout === null || layout === void 0 ? void 0 : layout['icon-image']),
+            keepUpright: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['icon-keep-upright']),
+            // TODO: handle array values
+            offset: layout === null || layout === void 0 ? void 0 : layout['icon-offset'],
+            offsetAnchor: paint === null || paint === void 0 ? void 0 : paint['icon-translate-anchor'],
+            opacity: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['icon-opacity']),
+            optional: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['icon-optional']),
+            padding: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['icon-padding']),
+            pitchAlignment: layout === null || layout === void 0 ? void 0 : layout['icon-pitch-alignment'],
+            rotate: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['icon-rotate']),
+            rotationAlignment: layout === null || layout === void 0 ? void 0 : layout['icon-rotation-alignment'],
+            size: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['icon-size']),
+            textFit: layout === null || layout === void 0 ? void 0 : layout['icon-text-fit'],
+            // TODO: handle array values
+            textFitPadding: layout === null || layout === void 0 ? void 0 : layout['icon-text-fit-padding'],
+            visibility: (layout === null || layout === void 0 ? void 0 : layout.visibility) && (layout === null || layout === void 0 ? void 0 : layout.visibility) !== 'none'
         };
+        if (MapboxStyleUtil_1.default.symbolizerAllUndefined(symbolizer)) {
+            return undefined;
+        }
+        return symbolizer;
     };
@@ -255,31 +288,43 @@ /**
     MapboxStyleParser.prototype.getTextSymbolizerFromMapboxLayer = function (paint, layout) {
-        return {
+        var symbolizer = {
             kind: 'Text',
-            allowOverlap: layout['text-allow-overlap'],
-            anchor: layout['text-anchor'],
-            avoidEdges: layout['symbol-avoid-edges'],
-            color: paint['text-color'],
-            font: layout['text-font'],
-            haloBlur: paint['text-halo-blur'],
-            haloColor: paint['text-halo-color'],
-            haloWidth: paint['text-halo-width'],
-            justify: layout['text-justify'],
-            keepUpright: layout['text-keep-upright'],
-            label: this.getLabelFromTextField(layout['text-field']),
-            letterSpacing: layout['text-letter-spacing'],
-            lineHeight: layout['text-line-height'],
-            maxAngle: layout['text-max-angle'],
-            maxWidth: layout['text-max-width'],
-            offset: layout['text-offset'],
-            offsetAnchor: paint['text-translate-anchor'],
-            opacity: paint['text-opacity'],
-            optional: layout['text-optional'],
-            padding: layout['text-padding'],
-            pitchAlignment: layout['text-pitch-alignment'],
-            rotate: layout['text-rotate'],
-            rotationAlignment: layout['text-rotation-alignment'],
-            size: layout['text-size'],
-            transform: layout['text-transform'],
-            visibility: layout.visibility,
+            allowOverlap: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-allow-overlap']),
+            // TODO: handle enum values
+            anchor: layout === null || layout === void 0 ? void 0 : layout['text-anchor'],
+            avoidEdges: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['symbol-avoid-edges']),
+            color: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['text-color']),
+            // TODO: handle array values
+            font: layout === null || layout === void 0 ? void 0 : layout['text-font'],
+            haloBlur: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['text-halo-blur']),
+            haloColor: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['text-halo-color']),
+            haloWidth: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['text-halo-width']),
+            // TODO: handle enum values
+            justify: layout === null || layout === void 0 ? void 0 : layout['text-justify'],
+            keepUpright: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-keep-upright']),
+            label: this.getLabelFromTextField(layout === null || layout === void 0 ? void 0 : layout['text-field']),
+            letterSpacing: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-letter-spacing']),
+            lineHeight: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-line-height']),
+            maxAngle: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-max-angle']),
+            maxWidth: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-max-width']),
+            // TODO: handle array values
+            offset: layout === null || layout === void 0 ? void 0 : layout['text-offset'],
+            // TODO: handle enum values
+            offsetAnchor: paint === null || paint === void 0 ? void 0 : paint['text-translate-anchor'],
+            opacity: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['text-opacity']),
+            optional: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-optional']),
+            padding: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-padding']),
+            // TODO: handle enum values
+            pitchAlignment: layout === null || layout === void 0 ? void 0 : layout['text-pitch-alignment'],
+            rotate: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-rotate']),
+            // TODO: handle enum values
+            rotationAlignment: layout === null || layout === void 0 ? void 0 : layout['text-rotation-alignment'],
+            size: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['text-size']),
+            // TODO: handle enum values
+            transform: layout === null || layout === void 0 ? void 0 : layout['text-transform'],
+            visibility: (layout === null || layout === void 0 ? void 0 : layout.visibility) && (layout === null || layout === void 0 ? void 0 : layout.visibility) !== 'none'
         };
+        if (MapboxStyleUtil_1.default.symbolizerAllUndefined(symbolizer)) {
+            return undefined;
+        }
+        return (0, lodash_1.omitBy)(symbolizer, lodash_1.isUndefined);
     };
@@ -293,12 +338,13 @@ /**
      */
-    MapboxStyleParser.prototype.getFillSymbolizerFromMapboxLayer = function (paint, layout) {
-        return {
+    MapboxStyleParser.prototype.getFillSymbolizerFromMapboxFillLayer = function (paint, layout) {
+        var fillSymbolizer = {
             kind: 'Fill',
-            visibility: layout.visibility,
-            antialias: paint['fill-antialias'],
-            opacity: paint['fill-opacity'],
-            color: paint['fill-color'],
-            outlineColor: paint['fill-outline-color'],
-            graphicFill: this.getPatternOrGradientFromMapboxLayer(paint['fill-pattern'])
+            visibility: (layout === null || layout === void 0 ? void 0 : layout.visibility) && (layout === null || layout === void 0 ? void 0 : layout.visibility) !== 'none',
+            antialias: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['fill-antialias']),
+            opacity: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['fill-opacity']),
+            color: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['fill-color']),
+            outlineColor: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['fill-outline-color']),
+            graphicFill: this.getPatternOrGradientFromMapboxLayer(paint === null || paint === void 0 ? void 0 : paint['fill-pattern'])
         };
+        return (0, lodash_1.omitBy)(fillSymbolizer, lodash_1.isUndefined);
     };
@@ -312,3 +358,3 @@ MapboxStyleParser.prototype.getPatternOrGradientFromMapboxLayer = function (icon) {
         }
-        return this.getIconSymbolizerFromMapboxLayer({}, { 'icon-image': icon });
+        return this.getIconSymbolizerFromMapboxSymbolLayer({}, { 'icon-image': icon });
     };
@@ -322,20 +368,25 @@ /**
      */
-    MapboxStyleParser.prototype.getLineSymbolizerFromMapboxLayer = function (paint, layout) {
-        return {
+    MapboxStyleParser.prototype.getLineSymbolizerFromMapboxLineLayer = function (paint, layout) {
+        var lineSymbolizer = {
             kind: 'Line',
-            visibility: layout.visibility,
-            cap: layout['line-cap'],
-            join: layout['line-join'],
-            miterLimit: layout['line-miter-limit'],
-            roundLimit: layout['line-round-limit'],
-            opacity: paint['line-opacity'],
-            color: paint['line-color'],
-            width: paint['line-width'],
-            gapWidth: paint['line-gap-width'],
-            perpendicularOffset: paint['line-offset'],
-            blur: paint['line-blur'],
-            dasharray: paint['line-dasharray'],
-            gradient: paint['line-gradient'],
-            graphicFill: this.getPatternOrGradientFromMapboxLayer(paint['line-pattern'])
+            visibility: (layout === null || layout === void 0 ? void 0 : layout.visibility) && (layout === null || layout === void 0 ? void 0 : layout.visibility) !== 'none',
+            // TODO: handle enum values
+            cap: layout === null || layout === void 0 ? void 0 : layout['line-cap'],
+            // TODO: handle enum values
+            join: layout === null || layout === void 0 ? void 0 : layout['line-join'],
+            miterLimit: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['line-miter-limit']),
+            roundLimit: (0, Expressions_1.mb2gsExpression)(layout === null || layout === void 0 ? void 0 : layout['line-round-limit']),
+            opacity: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['line-opacity']),
+            color: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['line-color']),
+            width: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['line-width']),
+            gapWidth: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['line-gap-width']),
+            perpendicularOffset: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['line-offset']),
+            blur: (0, Expressions_1.mb2gsExpression)(paint === null || paint === void 0 ? void 0 : paint['line-blur']),
+            // TODO: handle array values
+            dasharray: paint === null || paint === void 0 ? void 0 : paint['line-dasharray'],
+            // TODO: handle enum values
+            gradient: paint === null || paint === void 0 ? void 0 : paint['line-gradient'],
+            graphicFill: this.getPatternOrGradientFromMapboxLayer(paint === null || paint === void 0 ? void 0 : paint['line-pattern'])
         };
+        return (0, lodash_1.omitBy)(lineSymbolizer, lodash_1.isUndefined);
     };
@@ -349,7 +400,8 @@ /**
      */
-    MapboxStyleParser.prototype.getIconTextSymbolizersFromMapboxLayer = function (paint, layout) {
-        return {
-            textSymbolizer: this.getTextSymbolizerFromMapboxLayer(paint, layout),
-            iconSymbolizer: this.getIconSymbolizerFromMapboxLayer(paint, layout)
-        };
+    MapboxStyleParser.prototype.getIconTextSymbolizersFromMapboxSymbolLayer = function (paint, layout) {
+        var symbolizers = [
+            this.getTextSymbolizerFromMapboxLayer(paint, layout),
+            this.getIconSymbolizerFromMapboxSymbolLayer(paint, layout)
+        ];
+        return symbolizers.filter(function (symbolizer) { return !!symbolizer; });
     };
@@ -364,3 +416,4 @@ /**
      */
-    MapboxStyleParser.prototype.getSymbolizerFromMapboxLayer = function (paint, layout, type) {
+    MapboxStyleParser.prototype.getSymbolizersFromMapboxLayer = function (_a) {
+        var paint = _a.paint, layout = _a.layout, type = _a.type;
         var symbolizer = {};
@@ -370,21 +423,19 @@ var kind = this.getSymbolizerKindFromMapboxLayerType(type);
             case 'Fill':
-                symbolizer = this.getFillSymbolizerFromMapboxLayer(paint, layout);
+                symbolizer = this.getFillSymbolizerFromMapboxFillLayer(paint, layout);
                 break;
             case 'Line':
-                symbolizer = this.getLineSymbolizerFromMapboxLayer(paint, layout);
+                symbolizer = this.getLineSymbolizerFromMapboxLineLayer(paint, layout);
                 break;
             case 'Symbol':
-                return this.getIconTextSymbolizersFromMapboxLayer(paint, layout);
+                return this.getIconTextSymbolizersFromMapboxSymbolLayer(paint, layout);
             case 'Circle':
-                return this.getCircleSymbolizerFromMapboxLayer(paint, layout);
-            case 'Mark':
-                symbolizer = this.getMarkSymbolizerFromMapboxLayer(paint, layout);
-                break;
+                var sym = this.getMarkSymbolizerFromMapboxCircleLayer(paint, layout);
+                return sym ? [sym] : [];
             default:
                 if (this.ignoreConversionErrors) {
-                    return;
+                    return [];
                 }
                 throw new Error('Cannot parse mapbox style. Unsupported Symbolizer kind.');
         }
-        return symbolizer;
+        return [(0, lodash_1.omitBy)(symbolizer, lodash_1.isUndefined)];
     };
@@ -399,2 +450,5 @@ /**
         var _this = this;
+        if (!filter) {
+            return;
+        }
         var operatorMapping = {
@@ -407,3 +461,3 @@ all: true,
         var isNestedFilter = false;
-        if (operatorMapping[operator]) {
+        if (operator in operatorMapping) {
             isNestedFilter = true;
@@ -450,225 +504,100 @@ }
     /**
-     * Merges the baseFilter and the attribute filter to a single filter.
-     * If both filters are defined, they will be merged via '&&' operator.
-     * If only one of the filters is defined, the defined filter will be returned.
+     * This merges all the passed symbolizers into one if possbile.
      *
-     * @param baseFilter The value of the mapbox layer's filter property
-     * @param filter The value of the mapbox paint attribute filter
+     * @param symbolizers The array of geostyler-style Symbolizers
+     * @returns
      */
-    MapboxStyleParser.prototype.mergeFilters = function (baseFilter, filter) {
-        var gsBaseFilter = undefined;
-        var gsFilter = undefined;
-        if (baseFilter && filter) {
-            gsBaseFilter = this.getFilterFromMapboxFilter(baseFilter);
-            gsFilter = this.getFilterFromMapboxFilter(filter);
-            return [
-                '&&',
-                gsBaseFilter,
-                gsFilter
-            ];
+    MapboxStyleParser.prototype.mergeSymbolizers = function (symbolizers) {
+        if (symbolizers.length === 1) {
+            return symbolizers[0];
         }
-        if (filter) {
-            gsFilter = this.getFilterFromMapboxFilter(filter);
-            return gsFilter;
-        }
-        if (baseFilter) {
-            gsBaseFilter = this.getFilterFromMapboxFilter(baseFilter);
-            return gsBaseFilter;
-        }
-        return undefined;
-    };
-    /**
-     * Compares an arbitrary number of filters for equality
-     *
-     * @param filters Array of mapbox filters
-     */
-    MapboxStyleParser.prototype.equalMapboxAttributeFilters = function (filters) {
-        // convert filters to strings
-        var filterStrings = [];
-        var equal = true;
-        var _loop_1 = function (i) {
-            var filterString = [];
-            filters[i].forEach(function (exp, index, f) {
-                if (index % 2 === 1 && index !== f.length - 1) {
-                    filterString.push(JSON.stringify(exp));
+        return symbolizers.reduce(function (s1, s2, index) {
+            if (index === 0) {
+                return s1;
+            }
+            var merged = Object.assign({}, s1, s2);
+            if (s1.kind !== s2.kind) {
+                var s1IsFill = (0, geostyler_style_1.isFillSymbolizer)(s1);
+                var s2IsFill = (0, geostyler_style_1.isFillSymbolizer)(s2);
+                if (s1IsFill || s2IsFill) {
+                    var s1IsLine = (0, geostyler_style_1.isLineSymbolizer)(s1);
+                    var fillSymbolizer = s1IsFill ? s1 : s2;
+                    var lineSymbolizer = s1IsLine ? s1 : s2;
+                    merged = fillSymbolizer;
+                    merged.outlineColor = lineSymbolizer.color;
+                    merged.outlineOpacity = lineSymbolizer.opacity;
+                    merged.outlineCap = lineSymbolizer.cap;
+                    merged.outlineJoin = lineSymbolizer.join;
+                    merged.outlineWidth = lineSymbolizer.width;
                 }
-            });
-            filterStrings.forEach(function (filter) {
-                if (!(0, isEqual_1.default)(filterString, filter)) {
-                    equal = false;
+                else {
+                    throw new Error("Trying to merge to symbolizers of differnt kinds: ".concat(s1.kind, ", ").concat(s2.kind));
                 }
-            });
-            if (equal) {
-                filterStrings.push(filterString);
             }
-            else {
-                return "break";
-            }
-        };
-        for (var i = 0; i < filters.length; i++) {
-            var state_1 = _loop_1(i);
-            if (state_1 === "break")
-                break;
-        }
-        return equal;
+            return merged;
+        }, symbolizers[0]);
     };
+    ;
     /**
-     * Creates valid GeoStyler-Style Symbolizers from possibly invalid Symbolizers.
-     * Symbolizers are invalid if at least one of their attributes' values is a mapbox filter expression.
-     * This function detects such expressions and creates a symbolizer for each possible outcome.
-     * Related property values will be set accordingly. Thus, creating valid Symbolizers.
+     * Creates a GeoStyler-Style Rule from a mapbox layer.
      *
-     * IMPORTANT: Currently only the 'case' filter expression is supported. Furthermore, handling of multiple properties
-     * with filter expressions is only supported if all filter expressions are equal. Otherwise errors will be thrown.
-     *
-     * @param tmpSymbolizer A possibly invalid GeoStyler-Style Symbolizer
-     * @return Array of valid Symbolizers and optional mapbox filters
+     * @param layer The mapbox Layer
+     * @return A GeoStyler-Style Rule Array
      */
-    MapboxStyleParser.prototype.mapboxAttributeFiltersToSymbolizer = function (tmpSymbolizer) {
+    MapboxStyleParser.prototype.mapboxLayersToGeoStylerRules = function (layers) {
         var _this = this;
-        var pseudoRules = [];
-        var props = Object.keys(tmpSymbolizer);
-        var filterProps = [];
-        var filters = [];
-        props.forEach(function (prop) {
-            if (typeof prop === 'undefined') {
-                return;
-            }
-            if (!Array.isArray(tmpSymbolizer[prop])) {
-                return;
-            }
-            if (typeof tmpSymbolizer[prop][0] !== 'string') {
-                return;
-            }
-            if (prop === 'font' && !(tmpSymbolizer[prop].some(function (x) { return typeof x !== 'string'; }))) {
-                return;
-            }
-            // is expression
-            // switch (tmpSymbolizer[prop][0]) {
-            //     case 'case':
-            //         break;
-            //     case 'match':
-            //         break;
-            //     default:
-            //         throw new Error(`Unsupported expression.
-            // Only expressions of type 'case' and 'match' are allowed.`);
-            // }
-            if (tmpSymbolizer[prop][0] !== 'case' && !_this.ignoreConversionErrors) {
-                throw new Error('Unsupported expression. Only expressions of type \'case\' are allowed.');
-            }
-            filterProps.push(prop);
-            filters.push(tmpSymbolizer[prop]);
-        });
-        if (filters.length > 0) {
-            var equalFilters = this.equalMapboxAttributeFilters(filters);
-            if (!equalFilters && !this.ignoreConversionErrors) {
-                throw new Error('Cannot parse attributes. Filters do not match');
-            }
-            // iterate over each value in a single filter
-            // we can use filters[0] as we checked beforehand if all filters are equal.
-            filters[0].forEach(function (filter, index) {
-                // ignore all even indexes as we are not interested in the values at this point
-                if (index % 2 !== 1) {
-                    return;
-                }
-                // make a deep clone to avoid call-by-reference issues
-                var symbolizer = (0, cloneDeep_1.default)(tmpSymbolizer);
-                var values = [];
-                // iterate over each filter and push the corresponding value of the current filter expression
-                filters.forEach(function (f) {
-                    values.push(f[index + 1]);
+        var _a;
+        var geoStylerRef = (_a = this.mbMetadata) === null || _a === void 0 ? void 0 : _a['geostyler:ref'];
+        var gsRules = [];
+        if (geoStylerRef) {
+            geoStylerRef.rules.forEach(function (rule, ruleIndex) {
+                var _a;
+                var name = (rule === null || rule === void 0 ? void 0 : rule.name) || '';
+                var symbolizers = [];
+                var filter;
+                var scaleDenominator;
+                (_a = rule.symbolizers) === null || _a === void 0 ? void 0 : _a.forEach(function (layerIds, symbolizerIndex) {
+                    var matchingLayers = layers.filter(function (layer) { return layerIds.includes(layer.id); });
+                    var flattenedSymbolizers = matchingLayers
+                        .map(function (layer) { return _this.getSymbolizersFromMapboxLayer(layer); })
+                        .flat();
+                    symbolizers[symbolizerIndex] = _this.mergeSymbolizers(flattenedSymbolizers);
+                    // TODO: check if there are multiple layers with different filters
+                    // and scaledenomintors and throw a warning that we only use the first
+                    // one
+                    if (matchingLayers === null || matchingLayers === void 0 ? void 0 : matchingLayers[0]) {
+                        filter = _this.getFilterFromMapboxFilter(matchingLayers[0].filter);
+                        scaleDenominator = _this.getScaleDenominatorFromMapboxZoom(matchingLayers[0].minzoom, matchingLayers[0].maxzoom);
+                    }
+                    // TODO: care about layers not configured in the metadata
+                    // const noneMatchingLayes = layers.filter(layer => !layerIds.includes(layer.id));
                 });
-                // set the value of the corresponding symbolizer property to value of current filter expression
-                values.forEach(function (val, i) {
-                    var p = filterProps[i];
-                    symbolizer[p] = val;
-                });
-                // push the created symbolizers and the corresponding filter expression.
-                // Results in an object containing a single Filter expression (in mapbox expression format)
-                // and the corresponding symbolizers only containing values.
-                // Number of symbolizers corresponds to the number of outcomes of a filter expression.
-                pseudoRules.push({
-                    symbolizers: [symbolizer],
-                    filter: filter
-                });
+                var gsRule = {
+                    filter: filter,
+                    name: name,
+                    scaleDenominator: scaleDenominator,
+                    symbolizers: symbolizers
+                };
+                gsRules[ruleIndex] = (0, lodash_1.omitBy)(gsRule, lodash_1.isUndefined);
             });
         }
         else {
-            pseudoRules.push({
-                symbolizers: [tmpSymbolizer]
-            });
-        }
-        return pseudoRules;
-    };
-    /**
-     * Creates GeoStyler-Style Rules from a mapbox paint object.
-     *
-     * @param paint A mapbox layer paint object
-     * @param type The type of the mapbox layer
-     * @return Array of GeoStyler-Style Rules
-     */
-    MapboxStyleParser.prototype.mapboxPaintToGeoStylerRules = function (paint, layout, type) {
-        var rules = [];
-        var tmpSymbolizer = this.getSymbolizerFromMapboxLayer(paint, layout, type);
-        if (tmpSymbolizer === undefined) {
-            return rules;
-        }
-        var pseudoRules = [];
-        if (this.isSymbolType(tmpSymbolizer)) {
-            // Concatenates all pseudorules.
-            if (tmpSymbolizer.hasOwnProperty('iconSymbolizer')) {
-                // check if all properties except 'kind' are undefined. If so, skip
-                if (!MapboxStyleUtil_1.default.symbolizerAllUndefined(tmpSymbolizer.iconSymbolizer)) {
-                    pseudoRules.push.apply(pseudoRules, this.mapboxAttributeFiltersToSymbolizer(tmpSymbolizer.iconSymbolizer));
+            // returns array of rules where one rule contains one symbolizer
+            layers.forEach(function (layer) {
+                var symbolizers = _this.getSymbolizersFromMapboxLayer(layer);
+                if (symbolizers.length < 1) {
+                    return;
                 }
-            }
-            if (tmpSymbolizer.hasOwnProperty('textSymbolizer')) {
-                // check if all properties except 'kind' are undefined. If so, skip
-                if (!MapboxStyleUtil_1.default.symbolizerAllUndefined(tmpSymbolizer.textSymbolizer)) {
-                    pseudoRules.push.apply(pseudoRules, this.mapboxAttributeFiltersToSymbolizer(tmpSymbolizer.textSymbolizer));
-                }
-            }
-        }
-        else {
-            pseudoRules.push.apply(pseudoRules, this.mapboxAttributeFiltersToSymbolizer(tmpSymbolizer));
-        }
-        pseudoRules.forEach(function (rule) {
-            var filter = rule.filter, symbolizers = rule.symbolizers;
-            rules.push({
-                name: '',
-                filter: filter,
-                symbolizers: symbolizers
+                var filter = _this.getFilterFromMapboxFilter(layer.filter);
+                var scaleDenominator = _this.getScaleDenominatorFromMapboxZoom(layer.minzoom, layer.maxzoom);
+                var rule = {
+                    filter: filter,
+                    name: layer.id,
+                    scaleDenominator: scaleDenominator,
+                    symbolizers: symbolizers
+                };
+                gsRules === null || gsRules === void 0 ? void 0 : gsRules.push(rule);
             });
-        });
-        return rules;
-    };
-    /**
-     * Creates a GeoStyler-Style Rule from a mapbox layer.
-     *
-     * @param layer The mapbox Layer
-     * @return A GeoStyler-Style Rule Array
-     */
-    MapboxStyleParser.prototype.mapboxLayerToGeoStylerRules = function (layer) {
-        var _this = this;
-        var rules = [];
-        if (!layer.layout) {
-            layer.layout = {};
         }
-        if (!layer.paint) {
-            layer.paint = {};
-        }
-        // returns array of rules where one rule contains one symbolizer
-        var symbolizerRules = this.mapboxPaintToGeoStylerRules(layer.paint, layer.layout, layer.type);
-        symbolizerRules.forEach(function (rule, index) {
-            var filter = layer.filter ? (0, cloneDeep_1.default)(layer.filter) : undefined;
-            var ruleFilter = (0, cloneDeep_1.default)(rule.filter);
-            rules.push({
-                name: layer.id,
-                scaleDenominator: _this.getScaleDenominatorFromMapboxZoom(layer.minzoom, layer.maxzoom),
-                // merge layer filter with attribute filters
-                filter: _this.mergeFilters(filter, ruleFilter),
-                symbolizers: rule.symbolizers
-            });
-        });
-        return rules;
+        return gsRules || [];
     };
@@ -681,18 +610,14 @@ /**
      */
-    MapboxStyleParser.prototype.mapboxLayerToGeoStylerStyle = function (mapboxStyle) {
-        var _this = this;
-        if (!(mapboxStyle instanceof Object)) {
-            mapboxStyle = JSON.parse(mapboxStyle);
-        }
+    MapboxStyleParser.prototype.mapboxStyleToGeoStylerStyle = function (mapboxStyle) {
         var style = {};
-        style.name = mapboxStyle.name;
+        style.name = mapboxStyle.name || '';
         style.rules = [];
+        this.mbMetadata = mapboxStyle.metadata;
         if (mapboxStyle.sprite) {
-            this._spriteBaseUrl = MapboxStyleUtil_1.default.getUrlForMbPlaceholder(mapboxStyle.sprite);
+            this.spriteBaseUrl = MapboxStyleUtil_1.default.getUrlForMbPlaceholder(mapboxStyle.sprite);
         }
         if (mapboxStyle.layers) {
-            mapboxStyle.layers.forEach(function (layer) {
-                var rules = _this.mapboxLayerToGeoStylerRules(layer);
-                style.rules = style.rules.concat(rules);
-            });
+            var layers = mapboxStyle.layers.filter(function (layer) { return !(layer.type === 'custom'); });
+            var rules = this.mapboxLayersToGeoStylerRules(layers);
+            style.rules = style.rules.concat(rules);
         }
@@ -712,4 +637,4 @@ return style;
             try {
-                var mbStyle = (0, cloneDeep_1.default)(mapboxStyle);
-                var geoStylerStyle = _this.mapboxLayerToGeoStylerStyle(mbStyle);
+                var mbStyle = structuredClone(mapboxStyle);
+                var geoStylerStyle = _this.mapboxStyleToGeoStylerStyle(mbStyle);
                 resolve({
@@ -738,7 +663,4 @@ output: geoStylerStyle
             try {
-                var gsStyle = (0, cloneDeep_1.default)(geoStylerStyle);
-                var mapboxStyle = _this.geoStylerStyleToMapboxObject(gsStyle);
-                var output = _this.pretty
-                    ? JSON.stringify(mapboxStyle, null, 2)
-                    : JSON.stringify(mapboxStyle);
+                var gsStyle = structuredClone(geoStylerStyle);
+                var output = _this.geoStylerStyleToMapboxObject(gsStyle);
                 resolve({
@@ -764,13 +686,20 @@ output: output,
     MapboxStyleParser.prototype.geoStylerStyleToMapboxObject = function (geoStylerStyle) {
+        var _a;
         // Mapbox Style version
         var version = 8;
         var name = geoStylerStyle.name;
-        var layers = this.getMapboxLayersFromRules(geoStylerStyle.rules);
-        var sprite = MapboxStyleUtil_1.default.getMbPlaceholderForUrl(this._spriteBaseUrl);
-        return {
+        var layers = (_a = this.getMapboxLayersFromRules(geoStylerStyle.rules), _a.layers), geoStylerRef = _a.geoStylerRef;
+        var sprite = MapboxStyleUtil_1.default.getMbPlaceholderForUrl(this.spriteBaseUrl);
+        var mapboxObject = (0, lodash_1.omitBy)({
             version: version,
             name: name,
             layers: layers,
-            sprite: sprite
-        };
+            sprite: sprite,
+        }, lodash_1.isUndefined);
+        if (geoStylerRef) {
+            mapboxObject = __assign(__assign({}, mapboxObject), { metadata: {
+                    'geostyler:ref': geoStylerRef
+                } });
+        }
+        return mapboxObject;
     };
@@ -788,15 +717,14 @@ /**
         var layers = [];
-        rules.forEach(function (rule, i) {
+        var geoStylerRef = {
+            rules: []
+        };
+        rules.forEach(function (rule, ruleIndex) {
             // create new layer object
             var layer = {};
-            // just setting the temporary id here
-            // after iterating over each symbolizer, we will add the index of each symbolizer
-            // as a suffix to the layerId;
-            var layerId = rule.name; // + '-gs-r' + i;
             // set filters and scaleDenominator
-            if (rule.filter && rule.filter.length !== 0) {
-                var filterClone = (0, cloneDeep_1.default)(rule.filter);
+            if ((0, geostyler_style_1.isFilter)(rule.filter)) {
+                var filterClone = structuredClone(rule.filter);
                 layer.filter = _this.getMapboxFilterFromFilter(filterClone);
             }
-            if (rule.scaleDenominator) {
+            if ((0, geostyler_style_1.isScaleDenominator)(rule.scaleDenominator)) {
                 // calculate zoomLevel from scaleDenominator
@@ -814,3 +742,6 @@ if (typeof rule.scaleDenominator.min !== 'undefined') {
             }
-            rule.symbolizers.forEach(function (symbolizer, index) {
+            rule.symbolizers.forEach(function (symbolizer, symbolizerIndex) {
+                geoStylerRef.rules[ruleIndex] = {
+                    name: rule.name
+                };
                 // use existing layer properties
@@ -821,14 +752,25 @@ var lyr = {};
                 lyr.maxzoom = layer.maxzoom;
-                // set name
-                // lyr.id = layerId + '-s' + index;
-                lyr.id = layerId;
                 // get symbolizer type and paint
-                var _a = _this.getStyleFromSymbolizer(symbolizer), layerType = _a.layerType, paint = _a.paint, layout = _a.layout;
-                lyr.type = layerType;
-                lyr.paint = !MapboxStyleUtil_1.default.allUndefined(paint) ? paint : undefined;
-                lyr.layout = !MapboxStyleUtil_1.default.allUndefined(layout) ? layout : undefined;
-                layers.push(lyr);
+                var styles = _this.getStyleFromSymbolizer(symbolizer);
+                styles.forEach(function (style, styleIndex) {
+                    var _a, _b, _c, _d;
+                    var type = style.type, paint = style.paint, layout = style.layout;
+                    var lyrClone = structuredClone(lyr);
+                    lyrClone.type = type;
+                    if (!MapboxStyleUtil_1.default.allUndefined(paint)) {
+                        lyrClone.paint = paint;
+                    }
+                    if (!MapboxStyleUtil_1.default.allUndefined(layout)) {
+                        lyrClone.layout = layout;
+                    }
+                    lyrClone.id = "r".concat(ruleIndex, "_sy").concat(symbolizerIndex, "_st").concat(styleIndex);
+                    layers.push((0, lodash_1.omitBy)(lyrClone, lodash_1.isUndefined));
+                    if (!Array.isArray((_b = (_a = geoStylerRef === null || geoStylerRef === void 0 ? void 0 : geoStylerRef.rules) === null || _a === void 0 ? void 0 : _a[ruleIndex]) === null || _b === void 0 ? void 0 : _b.symbolizers)) {
+                        geoStylerRef.rules[ruleIndex].symbolizers = [[]];
+                    }
+                    (_d = (_c = geoStylerRef.rules[ruleIndex]) === null || _c === void 0 ? void 0 : _c.symbolizers) === null || _d === void 0 ? void 0 : _d[symbolizerIndex].push(lyrClone.id);
+                });
             });
         });
-        return layers;
+        return { layers: layers, geoStylerRef: geoStylerRef };
     };
@@ -873,4 +815,9 @@ /**
      */
+    // TODO: Move to Expression evaluation as mapbox Filter are deprecated
+    // (replaced by Expressions)
     MapboxStyleParser.prototype.getMapboxFilterFromFilter = function (filter) {
         var _this = this;
+        if ((0, geostyler_style_1.isGeoStylerBooleanFunction)(filter) || (0, lodash_1.isBoolean)(filter)) {
+            return (0, Expressions_1.gs2mbExpression)(filter);
+        }
         var mbFilter = __spreadArray([], filter, true);
@@ -906,17 +853,28 @@ var nestingOperators = ['&&', '||', '!'];
      * @param symbolizer A GeoStylerStyle-Symbolizer
-     * @return {layertype, paint} An object consisting of the MapboxLayerType and the Mapbox Layer Paint
+     * @return [{layerType, paint, layout}] A list of objects consisting of the MapboxLayerType,
+     *    the Mapbox Layer Paint and Layout
      */
     MapboxStyleParser.prototype.getStyleFromSymbolizer = function (symbolizer) {
-        var symbolizerClone = (0, cloneDeep_1.default)(symbolizer);
-        var layerType;
-        var paint;
-        var layout;
+        var symbolizerClone = structuredClone(symbolizer);
+        var type;
+        var paint = undefined;
+        var layout = undefined;
+        var fillSplitStyles = [];
         switch (symbolizer.kind) {
             case 'Fill':
-                layerType = 'fill';
-                paint = this.getPaintFromFillSymbolizer(symbolizerClone);
-                layout = this.getLayoutFromFillSymbolizer(symbolizerClone);
+                type = 'fill';
+                var intersection = MapboxStyleParser.fillSymbolizerStrokeProperties
+                    .filter(function (prop) { return Object.keys(symbolizer).includes(prop); });
+                // fill symbolizer contains stroke properties, so the symbolizer will be split into 2 symbolizers fill and line
+                var needSplit = intersection.length > 0;
+                if (needSplit) {
+                    fillSplitStyles = this.getSplitStyleFromFillSymbolizer(symbolizer);
+                }
+                else {
+                    paint = this.getPaintFromFillSymbolizer(symbolizerClone);
+                    layout = this.getLayoutFromFillSymbolizer(symbolizerClone);
+                }
                 break;
             case 'Line':
-                layerType = 'line';
+                type = 'line';
                 paint = this.getPaintFromLineSymbolizer(symbolizerClone);
@@ -926,3 +884,3 @@ layout = this.getLayoutFromLineSymbolizer(symbolizerClone);
             case 'Icon':
-                layerType = 'symbol';
+                type = 'symbol';
                 paint = this.getPaintFromIconSymbolizer(symbolizerClone);
@@ -932,3 +890,3 @@ layout = this.getLayoutFromIconSymbolizer(symbolizerClone);
             case 'Text':
-                layerType = 'symbol';
+                type = 'symbol';
                 paint = this.getPaintFromTextSymbolizer(symbolizerClone);
@@ -939,5 +897,5 @@ layout = this.getLayoutFromTextSymbolizer(symbolizerClone);
                 if (symbolizer.wellKnownName === 'circle') {
-                    layerType = 'circle';
-                    paint = this.getPaintFromCircleSymbolizer(symbolizerClone);
-                    layout = this.getLayoutFromCircleSymbolizer(symbolizerClone);
+                    type = 'circle';
+                    paint = this.getCirclePaintFromMarkSymbolizer(symbolizerClone);
+                    layout = this.getCircleLayoutFromMarkSymbolizer(symbolizerClone);
                     break;
@@ -949,3 +907,3 @@ }
                 else {
-                    layerType = 'symbol';
+                    type = 'symbol';
                 }
@@ -959,10 +917,44 @@ break;
                 else {
-                    layerType = 'symbol';
+                    type = 'symbol';
                 }
         }
-        return {
-            layerType: layerType,
-            paint: paint,
-            layout: layout
+        if (fillSplitStyles.length === 2) {
+            return fillSplitStyles;
+        }
+        return [{
+                type: type,
+                paint: paint,
+                layout: layout
+            }];
+    };
+    /**
+     * Splits a fill symbolizer having outline properties into a fill and line styles
+     *
+     * @param symbolizer
+     * @returns
+     */
+    MapboxStyleParser.prototype.getSplitStyleFromFillSymbolizer = function (symbolizer) {
+        var symbolizerClone = structuredClone(symbolizer);
+        symbolizerClone === null || symbolizerClone === void 0 ? true : delete symbolizerClone.outlineColor;
+        var fillPaint = this.getPaintFromFillSymbolizer(symbolizerClone);
+        var fillLayer = {
+            type: 'fill',
+            paint: fillPaint,
+            layout: this.getLayoutFromFillSymbolizer(symbolizerClone)
         };
+        symbolizerClone = structuredClone(symbolizer);
+        var lineSymbolizer = {
+            kind: 'Line',
+            color: symbolizerClone === null || symbolizerClone === void 0 ? void 0 : symbolizerClone.outlineColor,
+            opacity: symbolizerClone === null || symbolizerClone === void 0 ? void 0 : symbolizerClone.outlineOpacity,
+            width: symbolizerClone === null || symbolizerClone === void 0 ? void 0 : symbolizerClone.outlineWidth,
+            join: symbolizerClone === null || symbolizerClone === void 0 ? void 0 : symbolizerClone.outlineJoin,
+            cap: symbolizerClone === null || symbolizerClone === void 0 ? void 0 : symbolizerClone.outlineCap,
+        };
+        var outlineLayer = {
+            type: 'line',
+            paint: this.getPaintFromLineSymbolizer(lineSymbolizer),
+            layout: this.getLayoutFromLineSymbolizer(lineSymbolizer)
+        };
+        return [fillLayer, outlineLayer];
     };
@@ -978,9 +970,9 @@ /**
         var paint = {
-            'fill-antialias': antialias,
-            'fill-opacity': opacity,
-            'fill-color': color,
-            'fill-outline-color': outlineColor,
+            'fill-antialias': (0, Expressions_1.gs2mbExpression)(antialias),
+            'fill-opacity': (0, Expressions_1.gs2mbExpression)(opacity),
+            'fill-color': (0, Expressions_1.gs2mbExpression)(color),
+            'fill-outline-color': (0, Expressions_1.gs2mbExpression)(outlineColor),
             'fill-pattern': this.getPatternOrGradientFromPointSymbolizer(graphicFill)
         };
-        return paint;
+        return (0, lodash_1.omitBy)(paint, lodash_1.isUndefined);
     };
@@ -998,3 +990,3 @@ /**
         };
-        return layout;
+        return (0, lodash_1.omitBy)(layout, lodash_1.isUndefined);
     };
@@ -1041,3 +1033,4 @@ /**
         params.forEach(function (param) {
-            var _a = param.split('='), key = _a[0], value = _a[1];
+            var _a;
+            var key = (_a = param.split('='), _a[0]), value = _a[1];
             if (key === 'name') {
@@ -1050,3 +1043,3 @@ spritename = value;
         });
-        this._spriteBaseUrl = baseurl;
+        this.spriteBaseUrl = baseurl;
         return spritename;
@@ -1080,13 +1073,15 @@ };
         var paint = {
-            'line-opacity': opacity,
+            'line-opacity': (0, Expressions_1.gs2mbExpression)(opacity),
             'line-color': color,
-            'line-width': width,
-            'line-gap-width': gapWidth,
-            'line-offset': perpendicularOffset,
-            'line-blur': blur,
+            'line-width': (0, Expressions_1.gs2mbExpression)(width),
+            'line-gap-width': (0, Expressions_1.gs2mbExpression)(gapWidth),
+            'line-offset': (0, Expressions_1.gs2mbExpression)(perpendicularOffset),
+            'line-blur': (0, Expressions_1.gs2mbExpression)(blur),
+            // TODO: handle array values
             'line-dasharray': dasharray,
             'line-pattern': this.getPatternOrGradientFromPointSymbolizer(graphicFill),
+            // TODO: handle array values
             'line-gradient': gradient
         };
-        return paint;
+        return (0, lodash_1.omitBy)(paint, lodash_1.isUndefined);
     };
@@ -1102,9 +1097,9 @@ /**
         var layout = {
-            'line-cap': cap,
-            'line-join': join,
-            'line-miter-limit': miterLimit,
-            'line-round-limit': roundLimit,
+            'line-cap': (0, Expressions_1.gs2mbExpression)(cap),
+            'line-join': (0, Expressions_1.gs2mbExpression)(join),
+            'line-miter-limit': (0, Expressions_1.gs2mbExpression)(miterLimit),
+            'line-round-limit': (0, Expressions_1.gs2mbExpression)(roundLimit),
             visibility: this.getVisibility(visibility)
         };
-        return layout;
+        return (0, lodash_1.omitBy)(layout, lodash_1.isUndefined);
     };
@@ -1120,9 +1115,9 @@ /**
         var paint = {
-            'icon-opacity': opacity,
-            'icon-color': color,
-            'icon-halo-color': haloColor,
-            'icon-halo-width': haloWidth,
-            'icon-halo-blur': haloBlur
+            'icon-opacity': (0, Expressions_1.gs2mbExpression)(opacity),
+            'icon-color': (0, Expressions_1.gs2mbExpression)(color),
+            'icon-halo-color': (0, Expressions_1.gs2mbExpression)(haloColor),
+            'icon-halo-width': (0, Expressions_1.gs2mbExpression)(haloWidth),
+            'icon-halo-blur': (0, Expressions_1.gs2mbExpression)(haloBlur)
         };
-        return paint;
+        return (0, lodash_1.omitBy)(paint, lodash_1.isUndefined);
     };
@@ -1139,18 +1134,21 @@ /**
             'symbol-avoid-edges': avoidEdges,
-            'icon-allow-overlap': allowOverlap,
+            'icon-allow-overlap': (0, Expressions_1.gs2mbExpression)(allowOverlap),
             'icon-optional': optional,
-            'icon-rotation-alignment': rotationAlignment,
-            'icon-size': size,
-            'icon-text-fit': textFit,
+            'icon-rotation-alignment': (0, Expressions_1.gs2mbExpression)(rotationAlignment),
+            'icon-size': (0, Expressions_1.gs2mbExpression)(size),
+            'icon-text-fit': (0, Expressions_1.gs2mbExpression)(textFit),
+            // TODO: handle array values
             'icon-text-fit-padding': textFitPadding,
+            // TODO: check sprite handling
             'icon-image': image ? this.handleSprite(image) : undefined,
-            'icon-rotate': rotate,
-            'icon-padding': padding,
+            'icon-rotate': (0, Expressions_1.gs2mbExpression)(rotate),
+            'icon-padding': (0, Expressions_1.gs2mbExpression)(padding),
             'icon-keep-upright': keepUpright,
+            // TODO: handle array values
             'icon-offset': offset,
-            'icon-anchor': anchor,
-            'icon-pitch-alignment': pitchAlignment,
+            'icon-anchor': (0, Expressions_1.gs2mbExpression)(anchor),
+            'icon-pitch-alignment': (0, Expressions_1.gs2mbExpression)(pitchAlignment),
             visibility: this.getVisibility(visibility)
         };
-        return layout;
+        return (0, lodash_1.omitBy)(layout, lodash_1.isUndefined);
     };
@@ -1166,9 +1164,9 @@ /**
         var paint = {
-            'text-opacity': opacity,
-            'text-color': color,
-            'text-halo-color': haloColor,
-            'text-halo-width': haloWidth,
-            'text-halo-blur': haloBlur
+            'text-opacity': (0, Expressions_1.gs2mbExpression)(opacity),
+            'text-color': (0, Expressions_1.gs2mbExpression)(color),
+            'text-halo-color': (0, Expressions_1.gs2mbExpression)(haloColor),
+            'text-halo-width': (0, Expressions_1.gs2mbExpression)(haloWidth),
+            'text-halo-blur': (0, Expressions_1.gs2mbExpression)(haloBlur)
         };
-        return paint;
+        return (0, lodash_1.omitBy)(paint, lodash_1.isUndefined);
     };
@@ -1185,17 +1183,19 @@ /**
             'symbol-avoid-edges': avoidEdges,
-            'text-pitch-alignment': pitchAlignment,
-            'text-rotation-alignment': rotationAlignment,
-            'text-field': label ? this.getTextFieldFromLabel(label) : undefined,
+            'text-pitch-alignment': (0, Expressions_1.gs2mbExpression)(pitchAlignment),
+            'text-rotation-alignment': (0, Expressions_1.gs2mbExpression)(rotationAlignment),
+            'text-field': this.getTextFieldFromLabel(label),
+            // TODO: handle array values
             'text-font': font,
-            'text-size': size,
-            'text-max-width': maxWidth,
-            'text-line-height': lineHeight,
-            'text-letter-spacing': letterSpacing,
-            'text-justify': justify,
-            'text-anchor': anchor,
-            'text-max-angle': maxAngle,
-            'text-rotate': rotate,
-            'text-padding': padding,
+            'text-size': (0, Expressions_1.gs2mbExpression)(size),
+            'text-max-width': (0, Expressions_1.gs2mbExpression)(maxWidth),
+            'text-line-height': (0, Expressions_1.gs2mbExpression)(lineHeight),
+            'text-letter-spacing': (0, Expressions_1.gs2mbExpression)(letterSpacing),
+            'text-justify': (0, Expressions_1.gs2mbExpression)(justify),
+            'text-anchor': (0, Expressions_1.gs2mbExpression)(anchor),
+            'text-max-angle': (0, Expressions_1.gs2mbExpression)(maxAngle),
+            'text-rotate': (0, Expressions_1.gs2mbExpression)(rotate),
+            'text-padding': (0, Expressions_1.gs2mbExpression)(padding),
             'text-keep-upright': keepUpright,
-            'text-transform': transform,
+            'text-transform': (0, Expressions_1.gs2mbExpression)(transform),
+            // TODO: handle array values
             'text-offset': offset,
@@ -1206,3 +1206,3 @@ 'text-allow-overlap': allowOverlap,
         };
-        return paint;
+        return (0, lodash_1.omitBy)(paint, lodash_1.isUndefined);
     };
@@ -1216,4 +1216,7 @@ /**
     MapboxStyleParser.prototype.getTextFieldFromLabel = function (template) {
+        if (!template) {
+            return;
+        }
         if ((0, geostyler_style_1.isGeoStylerFunction)(template)) {
-            return '';
+            return (0, Expressions_1.gs2mbExpression)(template);
         }
@@ -1240,18 +1243,19 @@ // prefix indicating that a template is being used
      */
-    MapboxStyleParser.prototype.getPaintFromCircleSymbolizer = function (symbolizer) {
+    MapboxStyleParser.prototype.getCirclePaintFromMarkSymbolizer = function (symbolizer) {
         var radius = symbolizer.radius, color = symbolizer.color, fillOpacity = symbolizer.fillOpacity, blur = symbolizer.blur, offset = symbolizer.offset, offsetAnchor = symbolizer.offsetAnchor, pitchScale = symbolizer.pitchScale, pitchAlignment = symbolizer.pitchAlignment, strokeWidth = symbolizer.strokeWidth, strokeColor = symbolizer.strokeColor, strokeOpacity = symbolizer.strokeOpacity;
         var paint = {
-            'circle-radius': radius,
-            'circle-color': color,
-            'circle-blur': blur,
-            'circle-opacity': fillOpacity,
+            'circle-radius': (0, Expressions_1.gs2mbExpression)(radius),
+            'circle-color': (0, Expressions_1.gs2mbExpression)(color),
+            'circle-blur': (0, Expressions_1.gs2mbExpression)(blur),
+            'circle-opacity': (0, Expressions_1.gs2mbExpression)(fillOpacity),
+            // TODO: handle array values
             'circle-translate': offset,
-            'circle-translate-anchor': offsetAnchor,
-            'circle-pitch-scale': pitchScale,
-            'circle-pitch-alignment': pitchAlignment,
-            'circle-stroke-width': strokeWidth,
-            'circle-stroke-color': strokeColor,
-            'circle-stroke-opacity': strokeOpacity
+            'circle-translate-anchor': (0, Expressions_1.gs2mbExpression)(offsetAnchor),
+            'circle-pitch-scale': (0, Expressions_1.gs2mbExpression)(pitchScale),
+            'circle-pitch-alignment': (0, Expressions_1.gs2mbExpression)(pitchAlignment),
+            'circle-stroke-width': (0, Expressions_1.gs2mbExpression)(strokeWidth),
+            'circle-stroke-color': (0, Expressions_1.gs2mbExpression)(strokeColor),
+            'circle-stroke-opacity': (0, Expressions_1.gs2mbExpression)(strokeOpacity)
         };
-        return paint;
+        return (0, lodash_1.omitBy)(paint, lodash_1.isUndefined);
     };
@@ -1267,12 +1271,11 @@ /**
      */
-    MapboxStyleParser.prototype.getLayoutFromCircleSymbolizer = function (symbolizer) {
+    MapboxStyleParser.prototype.getCircleLayoutFromMarkSymbolizer = function (symbolizer) {
         var visibility = symbolizer.visibility;
         var layout = {
-            visibility: visibility
+            visibility: this.getVisibility(visibility)
         };
-        return layout;
+        return (0, lodash_1.omitBy)(layout, lodash_1.isUndefined);
     };
     MapboxStyleParser.prototype.checkForUnsupportedProperties = function (geoStylerStyle) {
         var _this = this;
-        var capitalizeFirstLetter = function (a) { return a[0].toUpperCase() + a.slice(1); };
         var unsupportedProperties = {};
@@ -1282,24 +1285,16 @@ geoStylerStyle.rules.forEach(function (rule) {
             rule.symbolizers.forEach(function (symbolizer) {
-                var _a, _b;
-                var key = capitalizeFirstLetter("".concat(symbolizer.kind, "Symbolizer"));
-                var value = (_b = (_a = _this.unsupportedProperties) === null || _a === void 0 ? void 0 : _a.Symbolizer) === null || _b === void 0 ? void 0 : _b[key];
-                if (value) {
-                    if (typeof value === 'string' || value instanceof String) {
-                        if (!unsupportedProperties.Symbolizer) {
-                            unsupportedProperties.Symbolizer = {};
+                var key = "".concat(symbolizer.kind, "Symbolizer");
+                if (key in _this.unsupportedProperties.Symbolizer) {
+                    var value_1 = _this.unsupportedProperties.Symbolizer[key];
+                    if (value_1) {
+                        if ((0, lodash_1.isString)(value_1)) {
+                            (0, lodash_1.set)(unsupportedProperties, "Symbolizer.".concat(key), value_1);
                         }
-                        unsupportedProperties.Symbolizer[key] = value;
-                    }
-                    else {
-                        Object.keys(symbolizer).forEach(function (property) {
-                            if (value[property]) {
-                                if (!unsupportedProperties.Symbolizer) {
-                                    unsupportedProperties.Symbolizer = {};
+                        else {
+                            Object.keys(symbolizer).forEach(function (property) {
+                                if (value_1[property]) {
+                                    (0, lodash_1.set)(unsupportedProperties, "Symbolizer.".concat(key, ".").concat(property), value_1);
                                 }
-                                if (!unsupportedProperties.Symbolizer[key]) {
-                                    unsupportedProperties.Symbolizer[key] = {};
-                                }
-                                unsupportedProperties.Symbolizer[key][property] = value[property];
-                            }
-                        });
+                            });
+                        }
                     }
@@ -1318,6 +1313,12 @@ }
     MapboxStyleParser.title = 'Mapbox';
+    MapboxStyleParser.fillSymbolizerStrokeProperties = [
+        'outlineOpacity',
+        'outlineWidth',
+        'outlineCap',
+        'outlineJoin',
+        'outlineDasharray'
+    ];
     return MapboxStyleParser;
 }());
-exports.MapboxStyleParser = MapboxStyleParser;
 exports.default = MapboxStyleParser;
 //# sourceMappingURL=MapboxStyleParser.js.map

build/dist/Util/MapboxStyleUtil.d.ts

@@ -1,2 +0,2 @@
-import { Symbolizer } from 'geostyler-style';
+import { Symbolizer, TextSymbolizer } from 'geostyler-style';
 declare class MapboxStyleUtil {
@@ -32,3 +32,3 @@ static getResolutions(): number[];
      */
-    static symbolizerAllUndefined(symbolizer: Symbolizer): boolean;
+    static symbolizerAllUndefined(symbolizer: Symbolizer | TextSymbolizer): boolean;
     /**
@@ -35,0 +35,0 @@ * Replaces the mapbox api placeholder with its actual url.

build/dist/Util/MapboxStyleUtil.js

@@ -103,2 +103,3 @@ "use strict";
      */
+    // TODO: TextSymbolizer can be removed once it is fixed in the geostyler-style
     MapboxStyleUtil.symbolizerAllUndefined = function (symbolizer) {
@@ -105,0 +106,0 @@ return !Object.keys(symbolizer)

package.json

 {
   "name": "geostyler-mapbox-parser",
-  "version": "3.1.1",
+  "version": "4.0.0",
   "description": "GeoStyler-Style-Parser implementation for Mapbox",
@@ -26,4 +26,9 @@ "main": "build/dist/MapboxStyleParser.js",
   "homepage": "https://github.com/geostyler/geostyler-mapbox-parser#readme",
+  "engines": {
+    "node": ">=18",
+    "npm": ">=9"
+  },
   "dependencies": {
-    "geostyler-style": "^7.2.0"
+    "@types/mapbox-gl": "^2.7.11",
+    "geostyler-style": "^7.3.1"
   },
@@ -47,19 +52,20 @@ "scripts": {
     "@terrestris/eslint-config-typescript": "^3.1.0",
-    "@types/jest": "^29.2.3",
-    "@types/lodash": "^4.14.190",
-    "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/eslint-plugin-tslint": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@types/jest": "^29.5.1",
+    "@types/lodash": "^4.14.195",
+    "@types/node": "^20.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
     "coveralls": "^3.1.1",
-    "eslint": "^8.28.0",
-    "jest": "^29.3.1",
-    "np": "^7.6.2",
-    "terser-webpack-plugin": "^5.3.6",
-    "ts-jest": "^29.0.3",
-    "ts-loader": "^9.4.1",
-    "typescript": "^4.9.3",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0"
-  }
+    "eslint": "^8.41.0",
+    "jest": "^29.5.0",
+    "np": "^8.0.2",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-jest": "^29.1.0",
+    "ts-loader": "^9.4.3",
+    "typescript": "^5.0.4",
+    "webpack": "^5.84.1",
+    "webpack-cli": "^5.1.1"
+  },
+  "funding": "https://opencollective.com/geostyler"
 }

README.md

@@ -120,1 +120,9 @@ # geostyler-mapbox-parser
 ```
+
+## <a name="funding"></a>Funding & financial sponsorship
+
+Maintenance and further development of this code can be funded through the
+[GeoStyler Open Collective](https://opencollective.com/geostyler). All contributions and
+expenses can transparently be reviewed by anyone; you see what we use the donated money for.
+Thank you for any financial support you give the GeoStyler project 💞
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

405620

increased by34.35%

Number of package files

14

increased by40%

Lines of code

2189

increased by19.88%

Number of lines in readme file

128

increased by6.67%

Worsened metrics

Dependency count

2

increased by100%

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

Dependency changes

• + Added@types/mapbox-gl@^2.7.11

• + Added@types/geojson@7946.0.14(transitive)

• + Added@types/mapbox-gl@2.7.21(transitive)

• Updatedgeostyler-style@^7.3.1