ol-mapbox-style - npm Package Compare versions

Comparing version 6.5.3 to 6.6.0

CHANGELOG.md

 # Changelog
 
+## 6.6.0
+
+* Publish declaration source maps
+* Fix TileJSON handling of relative urls
+* Cache functions and filters per `stylefunction` invocation
+
 ## 6.5.3
@@ -4,0 +10,0 @@

dist/index.d.ts

@@ -33,3 +33,3 @@ /**
  */
-export function applyStyle(layer: any | any, glStyle: string | any, source: string | Array<string>, path?: string, resolutions?: Array<number>): Promise<any>;
+export function applyStyle(layer: VectorTileLayer | VectorLayer, glStyle: string | any, source: string | Array<string>, path?: string, resolutions?: Array<number>): Promise<any>;
 /**
@@ -47,8 +47,8 @@ * ```js
  * @param {Object} glSource "source" entry from a Mapbox Style object.
- * @param {string} url URL to use for the source. This is expected to be the complete http(s) url,
- * with access key applied.
+ * @param {string|undefined} url URL to use for the source. This is expected to be the complete http(s) url,
+ * with access key applied.When not provided, `glSource.tiles` has to be set.
  * @return {Promise<import("ol/source/VectorTile").default>} Promise resolving to a VectorTile source.
  * @private
  */
-export function setupVectorSource(glSource: any, url: string): Promise<any>;
+export function setupVectorSource(glSource: any, url: string | undefined): Promise<any>;
 /**
@@ -180,1 +180,2 @@ * ```js
 export { finalizeLayer as _finalizeLayer, getFonts as _getFonts };
+//# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -160,3 +160,3 @@ /*
                 if (!layer.getStyle()) {
-                    reject(new Error("Nothing to show for source [" + source + "]"));
+                    reject(new Error("Nothing to show for source [".concat(source, "]")));
                 }
@@ -194,3 +194,3 @@ else {
                 else {
-                    reject(new Error("Problem fetching sprite from " + spriteUrl_1 + ": " + response.statusText));
+                    reject(new Error("Problem fetching sprite from ".concat(spriteUrl_1, ": ").concat(response.statusText)));
                 }
@@ -207,3 +207,3 @@ })
                 .catch(function (err) {
-                reject(new Error("Sprites cannot be loaded: " + spriteUrl_1 + ": " + err.message));
+                reject(new Error("Sprites cannot be loaded: ".concat(spriteUrl_1, ": ").concat(err.message)));
             });
@@ -221,2 +221,3 @@ }
     };
+    var functionCache = {};
     function updateStyle() {
@@ -234,7 +235,7 @@ var element = map.getTargetElement();
         if (paint['background-color'] !== undefined) {
-            var bg = getValue(background, 'paint', 'background-color', zoom, emptyObj);
+            var bg = getValue(background, 'paint', 'background-color', zoom, emptyObj, functionCache);
             element.style.background = Color.parse(bg).toString();
         }
         if (paint['background-opacity'] !== undefined) {
-            element.style.opacity = getValue(background, 'paint', 'background-opacity', zoom, emptyObj);
+            element.style.opacity = getValue(background, 'paint', 'background-opacity', zoom, emptyObj, functionCache);
         }
@@ -288,4 +289,4 @@ if (layout.visibility == 'none') {
  * @param {Object} glSource "source" entry from a Mapbox Style object.
- * @param {string} url URL to use for the source. This is expected to be the complete http(s) url,
- * with access key applied.
+ * @param {string|undefined} url URL to use for the source. This is expected to be the complete http(s) url,
+ * with access key applied.When not provided, `glSource.tiles` has to be set.
  * @return {Promise<import("ol/source/VectorTile").default>} Promise resolving to a VectorTile source.
@@ -296,3 +297,3 @@ * @private
     glSource = assign({}, glSource);
-    var cacheKey = JSON.stringify(glSource);
+    var cacheKey = [url, JSON.stringify(glSource)].toString();
     var tilejson = tilejsonCache[cacheKey];
@@ -316,6 +317,3 @@ if (!tilejson) {
                     for (var i = 0, ii = tiles.length; i < ii; ++i) {
-                        var tile = tiles[i];
-                        if (tile.indexOf('http') != 0) {
-                            tiles[i] = url.replace(/\/?$/, '/') + tile.replace(/^\//, '');
-                        }
+                        tiles[i] = decodeURI(new URL(tiles[i], url).href);
                     }
@@ -436,5 +434,5 @@ }
 }
-function updateRasterLayerProperties(glLayer, layer, view) {
+function updateRasterLayerProperties(glLayer, layer, view, functionCache) {
     var zoom = view.getZoom();
-    var opacity = getValue(glLayer, 'paint', 'raster-opacity', zoom, emptyObj);
+    var opacity = getValue(glLayer, 'paint', 'raster-opacity', zoom, emptyObj, functionCache);
     layer.setOpacity(opacity);
@@ -521,4 +519,5 @@ }
                     layer.setVisible(glLayer.layout ? glLayer.layout.visibility !== 'none' : true);
-                    view.on('change:resolution', updateRasterLayerProperties.bind(this_1, glLayer, layer, view));
-                    updateRasterLayerProperties(glLayer, layer, view);
+                    var functionCache = {};
+                    view.on('change:resolution', updateRasterLayerProperties.bind(this_1, glLayer, layer, view, functionCache));
+                    updateRasterLayerProperties(glLayer, layer, view, functionCache);
                 }
@@ -620,3 +619,3 @@ else if (glSource.type == 'geojson') {
                 .catch(function (err) {
-                reject(new Error("Could not load " + style + ": " + err.message));
+                reject(new Error("Could not load ".concat(style, ": ").concat(err.message)));
             });
@@ -623,0 +622,0 @@ });

dist/olms.d.ts

 export default olms;
 import olms from "./index.js";
+//# sourceMappingURL=olms.d.ts.map

dist/stylefunction.d.ts

@@ -8,5 +8,6 @@ /**
  * @param {Object} feature Gl feature.
+ * @param {Object} [functionCache] Function cache.
  * @return {?} Value.
  */
-export function getValue(layer: any, layoutOrPaint: string, property: string, zoom: number, feature: any): unknown;
+export function getValue(layer: any, layoutOrPaint: string, property: string, zoom: number, feature: any, functionCache?: any): unknown;
 /**
@@ -99,4 +100,2 @@ * ```js
 declare function colorWithOpacity(color: unknown, opacity: number): string;
-/** @private */
-declare const filterCache: {};
 /**
@@ -108,5 +107,6 @@ * @private
  * @param {number} zoom Zoom.
+ * @param {Object} [filterCache] Filter cache.
  * @return {boolean} Filter result.
  */
-declare function evaluateFilter(layerId: string, filter: unknown, feature: any, zoom: number): boolean;
+declare function evaluateFilter(layerId: string, filter: unknown, feature: any, zoom: number, filterCache?: any): boolean;
 /**
@@ -119,4 +119,3 @@ * @private
 declare function fromTemplate(text: string, properties: any): string;
-/** @private */
-declare const functionCache: {};
-export { colorWithOpacity as _colorWithOpacity, filterCache as _filterCache, evaluateFilter as _evaluateFilter, fromTemplate as _fromTemplate, getValue as _getValue, functionCache as _functionCache };
+export { colorWithOpacity as _colorWithOpacity, evaluateFilter as _evaluateFilter, fromTemplate as _fromTemplate, getValue as _getValue };
+//# sourceMappingURL=stylefunction.d.ts.map

dist/stylefunction.js

@@ -48,3 +48,3 @@ /*
         throw new Error(compiledExpression.value
-            .map(function (err) { return err.key + ": " + err.message; })
+            .map(function (err) { return "".concat(err.key, ": ").concat(err.message); })
             .join(', '));
@@ -56,4 +56,2 @@ }
 var zoomObj = { zoom: 0 };
-/** @private */
-var functionCache = {};
 var renderFeatureCoordinates, renderFeature;
@@ -67,6 +65,11 @@ /**
  * @param {Object} feature Gl feature.
+ * @param {Object} [functionCache] Function cache.
  * @return {?} Value.
  */
-export function getValue(layer, layoutOrPaint, property, zoom, feature) {
+export function getValue(layer, layoutOrPaint, property, zoom, feature, functionCache) {
     var layerId = layer.id;
+    if (!functionCache) {
+        functionCache = {};
+        console.warn('No functionCache provided to getValue()'); //eslint-disable-line no-console
+    }
     if (!functionCache[layerId]) {
@@ -78,3 +81,3 @@ functionCache[layerId] = {};
         var value_1 = (layer[layoutOrPaint] || emptyObj)[property];
-        var propertySpec = spec[layoutOrPaint + "_" + layer.type][property];
+        var propertySpec = spec["".concat(layoutOrPaint, "_").concat(layer.type)][property];
         if (value_1 === undefined) {
@@ -105,4 +108,2 @@ value_1 = propertySpec.default;
 }
-/** @private */
-var filterCache = {};
 /**
@@ -114,5 +115,9 @@ * @private
  * @param {number} zoom Zoom.
+ * @param {Object} [filterCache] Filter cache.
  * @return {boolean} Filter result.
  */
-function evaluateFilter(layerId, filter, feature, zoom) {
+function evaluateFilter(layerId, filter, feature, zoom, filterCache) {
+    if (!filterCache) {
+        console.warn('No filterCache provided to evaluateFilter()'); //eslint-disable-line no-console
+    }
     if (!(layerId in filterCache)) {
@@ -286,2 +291,6 @@ filterCache[layerId] = createFilter(filter).filter;
     var mapboxLayers = [];
+    var iconImageCache = {};
+    var patternCache = {};
+    var functionCache = {};
+    var filterCache = {};
     var mapboxSource;
@@ -298,7 +307,7 @@ for (var i = 0, ii = allLayers.length; i < ii; ++i) {
                 if (!source_1) {
-                    throw new Error("Source \"" + mapboxSource + "\" is not defined");
+                    throw new Error("Source \"".concat(mapboxSource, "\" is not defined"));
                 }
                 var type = source_1.type;
                 if (type !== 'vector' && type !== 'geojson') {
-                    throw new Error("Source \"" + mapboxSource + "\" is not of type \"vector\" or \"geojson\", but \"" + type + "\"");
+                    throw new Error("Source \"".concat(mapboxSource, "\" is not of type \"vector\" or \"geojson\", but \"").concat(type, "\""));
                 }
@@ -317,10 +326,5 @@ }
         }
-        // TODO revisit when diffing gets added
-        delete functionCache[layerId];
-        delete filterCache[layerId];
     }
     var textHalo = new Stroke();
     var textColor = new Fill();
-    var iconImageCache = {};
-    var patternCache = {};
     var styles = [];
@@ -356,3 +360,3 @@ var styleFunction = function (feature, resolution) {
             var filter = layer.filter;
-            if (!filter || evaluateFilter(layerId, filter, f, zoom)) {
+            if (!filter || evaluateFilter(layerId, filter, f, zoom, filterCache)) {
                 featureBelongsToLayer = layer;
@@ -363,5 +367,5 @@ var color = void 0, opacity = void 0, fill = void 0, stroke = void 0, strokeColor = void 0, style = void 0;
                     (layer.type == 'fill' || layer.type == 'fill-extrusion')) {
-                    opacity = getValue(layer, 'paint', layer.type + '-opacity', zoom, f);
+                    opacity = getValue(layer, 'paint', layer.type + '-opacity', zoom, f, functionCache);
                     if (layer.type + '-pattern' in paint) {
-                        var fillIcon = getValue(layer, 'paint', layer.type + '-pattern', zoom, f);
+                        var fillIcon = getValue(layer, 'paint', layer.type + '-pattern', zoom, f, functionCache);
                         if (fillIcon) {
@@ -401,6 +405,6 @@ var icon_1 = typeof fillIcon === 'string'
                     else {
-                        color = colorWithOpacity(getValue(layer, 'paint', layer.type + '-color', zoom, f), opacity);
+                        color = colorWithOpacity(getValue(layer, 'paint', layer.type + '-color', zoom, f, functionCache), opacity);
                         if (color) {
                             if (layer.type + '-outline-color' in paint) {
-                                strokeColor = colorWithOpacity(getValue(layer, 'paint', layer.type + '-outline-color', zoom, f), opacity);
+                                strokeColor = colorWithOpacity(getValue(layer, 'paint', layer.type + '-outline-color', zoom, f, functionCache), opacity);
                             }
@@ -433,5 +437,5 @@ if (!strokeColor) {
                         !('line-pattern' in paint) && 'line-color' in paint
-                            ? colorWithOpacity(getValue(layer, 'paint', 'line-color', zoom, f), getValue(layer, 'paint', 'line-opacity', zoom, f))
+                            ? colorWithOpacity(getValue(layer, 'paint', 'line-color', zoom, f, functionCache), getValue(layer, 'paint', 'line-opacity', zoom, f, functionCache))
                             : undefined;
-                    var width_1 = getValue(layer, 'paint', 'line-width', zoom, f);
+                    var width_1 = getValue(layer, 'paint', 'line-width', zoom, f, functionCache);
                     if (color && width_1 > 0) {
@@ -450,9 +454,9 @@ ++stylesLength;
                         stroke = style.getStroke();
-                        stroke.setLineCap(getValue(layer, 'layout', 'line-cap', zoom, f));
-                        stroke.setLineJoin(getValue(layer, 'layout', 'line-join', zoom, f));
-                        stroke.setMiterLimit(getValue(layer, 'layout', 'line-miter-limit', zoom, f));
+                        stroke.setLineCap(getValue(layer, 'layout', 'line-cap', zoom, f, functionCache));
+                        stroke.setLineJoin(getValue(layer, 'layout', 'line-join', zoom, f, functionCache));
+                        stroke.setMiterLimit(getValue(layer, 'layout', 'line-miter-limit', zoom, f, functionCache));
                         stroke.setColor(color);
                         stroke.setWidth(width_1);
                         stroke.setLineDash(paint['line-dasharray']
-                            ? getValue(layer, 'paint', 'line-dasharray', zoom, f).map(function (x) {
+                            ? getValue(layer, 'paint', 'line-dasharray', zoom, f, functionCache).map(function (x) {
                                 return x * width_1;
@@ -469,3 +473,3 @@ })
                 if ((type == 1 || type == 2) && 'icon-image' in layout) {
-                    var iconImage = getValue(layer, 'layout', 'icon-image', zoom, f);
+                    var iconImage = getValue(layer, 'layout', 'icon-image', zoom, f, functionCache);
                     if (iconImage) {
@@ -478,3 +482,3 @@ icon =
                         if (spriteImage && spriteData && spriteData[icon]) {
-                            var iconRotationAlignment = getValue(layer, 'layout', 'icon-rotation-alignment', zoom, f);
+                            var iconRotationAlignment = getValue(layer, 'layout', 'icon-rotation-alignment', zoom, f, functionCache);
                             if (type == 2) {
@@ -498,3 +502,3 @@ var geom = feature.getGeometry();
                                         renderFeatureCoordinates[1] = midpoint[1];
-                                        var placement = getValue(layer, 'layout', 'symbol-placement', zoom, f);
+                                        var placement = getValue(layer, 'layout', 'symbol-placement', zoom, f, functionCache);
                                         if (placement === 'line' &&
@@ -526,5 +530,5 @@ iconRotationAlignment === 'map') {
                             if (type !== 2 || styleGeom) {
-                                var iconSize = getValue(layer, 'layout', 'icon-size', zoom, f);
+                                var iconSize = getValue(layer, 'layout', 'icon-size', zoom, f, functionCache);
                                 var iconColor = paint['icon-color'] !== undefined
-                                    ? getValue(layer, 'paint', 'icon-color', zoom, f)
+                                    ? getValue(layer, 'paint', 'icon-color', zoom, f, functionCache)
                                     : null;
@@ -570,5 +574,5 @@ if (!iconColor || iconColor.a !== 0) {
                                     iconImg.setRotation(placementAngle +
-                                        deg2rad(getValue(layer, 'layout', 'icon-rotate', zoom, f)));
-                                    iconImg.setOpacity(getValue(layer, 'paint', 'icon-opacity', zoom, f));
-                                    iconImg.setAnchor(anchor[getValue(layer, 'layout', 'icon-anchor', zoom, f)]);
+                                        deg2rad(getValue(layer, 'layout', 'icon-rotate', zoom, f, functionCache)));
+                                    iconImg.setOpacity(getValue(layer, 'paint', 'icon-opacity', zoom, f, functionCache));
+                                    iconImg.setAnchor(anchor[getValue(layer, 'layout', 'icon-anchor', zoom, f, functionCache)]);
                                     style.setImage(iconImg);
@@ -598,6 +602,6 @@ text = style.getText();
                     }
-                    var circleRadius = getValue(layer, 'paint', 'circle-radius', zoom, f);
-                    var circleStrokeColor = colorWithOpacity(getValue(layer, 'paint', 'circle-stroke-color', zoom, f), getValue(layer, 'paint', 'circle-stroke-opacity', zoom, f));
-                    var circleColor = colorWithOpacity(getValue(layer, 'paint', 'circle-color', zoom, f), getValue(layer, 'paint', 'circle-opacity', zoom, f));
-                    var circleStrokeWidth = getValue(layer, 'paint', 'circle-stroke-width', zoom, f);
+                    var circleRadius = getValue(layer, 'paint', 'circle-radius', zoom, f, functionCache);
+                    var circleStrokeColor = colorWithOpacity(getValue(layer, 'paint', 'circle-stroke-color', zoom, f, functionCache), getValue(layer, 'paint', 'circle-stroke-opacity', zoom, f, functionCache));
+                    var circleColor = colorWithOpacity(getValue(layer, 'paint', 'circle-color', zoom, f, functionCache), getValue(layer, 'paint', 'circle-opacity', zoom, f, functionCache));
+                    var circleStrokeWidth = getValue(layer, 'paint', 'circle-stroke-width', zoom, f, functionCache);
                     var cache_key = circleRadius +
@@ -637,5 +641,5 @@ '.' +
                 if ('text-field' in layout) {
-                    var textField = getValue(layer, 'layout', 'text-field', zoom, f).toString();
+                    var textField = getValue(layer, 'layout', 'text-field', zoom, f, functionCache).toString();
                     label = fromTemplate(textField, properties).trim();
-                    opacity = getValue(layer, 'paint', 'text-opacity', zoom, f);
+                    opacity = getValue(layer, 'paint', 'text-opacity', zoom, f, functionCache);
                 }
@@ -663,5 +667,5 @@ if (label && opacity && !skipLabel) {
                     text = style.getText();
-                    var textSize = Math.round(getValue(layer, 'layout', 'text-size', zoom, f));
-                    var fontArray = getValue(layer, 'layout', 'text-font', zoom, f);
-                    var textLineHeight = getValue(layer, 'layout', 'text-line-height', zoom, f);
+                    var textSize = Math.round(getValue(layer, 'layout', 'text-size', zoom, f, functionCache));
+                    var fontArray = getValue(layer, 'layout', 'text-font', zoom, f, functionCache);
+                    var textLineHeight = getValue(layer, 'layout', 'text-line-height', zoom, f, functionCache);
                     var font = mb2css(getFonts ? getFonts(fontArray) : fontArray, textSize, textLineHeight);
@@ -675,4 +679,4 @@ var textTransform = layout['text-transform'];
                     }
-                    var maxTextWidth = getValue(layer, 'layout', 'text-max-width', zoom, f);
-                    var letterSpacing = getValue(layer, 'layout', 'text-letter-spacing', zoom, f);
+                    var maxTextWidth = getValue(layer, 'layout', 'text-max-width', zoom, f, functionCache);
+                    var letterSpacing = getValue(layer, 'layout', 'text-letter-spacing', zoom, f, functionCache);
                     var wrappedLabel = type == 2
@@ -683,11 +687,11 @@ ? applyLetterSpacing(label, letterSpacing)
                     text.setFont(font);
-                    text.setRotation(deg2rad(getValue(layer, 'layout', 'text-rotate', zoom, f)));
-                    var textAnchor = getValue(layer, 'layout', 'text-anchor', zoom, f);
+                    text.setRotation(deg2rad(getValue(layer, 'layout', 'text-rotate', zoom, f, functionCache)));
+                    var textAnchor = getValue(layer, 'layout', 'text-anchor', zoom, f, functionCache);
                     var placement = hasImage || type == 1
                         ? 'point'
-                        : getValue(layer, 'layout', 'symbol-placement', zoom, f);
+                        : getValue(layer, 'layout', 'symbol-placement', zoom, f, functionCache);
                     text.setPlacement(placement);
-                    var textHaloWidth = getValue(layer, 'paint', 'text-halo-width', zoom, f);
-                    var textOffset = getValue(layer, 'layout', 'text-offset', zoom, f);
-                    var textTranslate = getValue(layer, 'paint', 'text-translate', zoom, f);
+                    var textHaloWidth = getValue(layer, 'paint', 'text-halo-width', zoom, f, functionCache);
+                    var textOffset = getValue(layer, 'layout', 'text-offset', zoom, f, functionCache);
+                    var textTranslate = getValue(layer, 'paint', 'text-translate', zoom, f, functionCache);
                     // Text offset has to take halo width and line height into account
@@ -707,7 +711,7 @@ var vOffset = 0;
                         text.setTextAlign(textAlign);
-                        var textRotationAlignment = getValue(layer, 'layout', 'text-rotation-alignment', zoom, f);
+                        var textRotationAlignment = getValue(layer, 'layout', 'text-rotation-alignment', zoom, f, functionCache);
                         text.setRotateWithView(textRotationAlignment == 'map');
                     }
                     else {
-                        text.setMaxAngle((deg2rad(getValue(layer, 'layout', 'text-max-angle', zoom, f)) *
+                        text.setMaxAngle((deg2rad(getValue(layer, 'layout', 'text-max-angle', zoom, f, functionCache)) *
                             label.length) /
@@ -730,5 +734,5 @@ wrappedLabel.length);
                     text.setOffsetY(textOffset[1] * textSize + vOffset + textTranslate[1]);
-                    textColor.setColor(colorWithOpacity(getValue(layer, 'paint', 'text-color', zoom, f), opacity));
+                    textColor.setColor(colorWithOpacity(getValue(layer, 'paint', 'text-color', zoom, f, functionCache), opacity));
                     text.setFill(textColor);
-                    var haloColor = colorWithOpacity(getValue(layer, 'paint', 'text-halo-color', zoom, f), opacity);
+                    var haloColor = colorWithOpacity(getValue(layer, 'paint', 'text-halo-color', zoom, f, functionCache), opacity);
                     if (haloColor) {
@@ -747,3 +751,3 @@ textHalo.setColor(haloColor);
                     }
-                    var textPadding = getValue(layer, 'layout', 'text-padding', zoom, f);
+                    var textPadding = getValue(layer, 'layout', 'text-padding', zoom, f, functionCache);
                     var padding = text.getPadding();
@@ -783,3 +787,3 @@ if (textPadding !== padding[0]) {
 }
-export { colorWithOpacity as _colorWithOpacity, filterCache as _filterCache, evaluateFilter as _evaluateFilter, fromTemplate as _fromTemplate, getValue as _getValue, functionCache as _functionCache, };
+export { colorWithOpacity as _colorWithOpacity, evaluateFilter as _evaluateFilter, fromTemplate as _fromTemplate, getValue as _getValue, };
 //# sourceMappingURL=stylefunction.js.map

dist/util.d.ts

@@ -13,1 +13,2 @@ export function deg2rad(degrees: any): number;
 export const defaultResolutions: number[];
+//# sourceMappingURL=util.d.ts.map

package.json

 {
   "name": "ol-mapbox-style",
-  "version": "6.5.3",
+  "version": "6.6.0",
   "description": "Create OpenLayers maps from Mapbox Style objects",
@@ -45,3 +45,3 @@ "main": "dist/index.js",
     "buble-loader": "^0.5.1",
-    "copy-webpack-plugin": "^9.1.0",
+    "copy-webpack-plugin": "^10.0.0",
     "coverage-istanbul-loader": "^3.0.5",
@@ -64,7 +64,7 @@ "css-loader": "^6.5.1",
     "ol": "^6.7.0",
-    "puppeteer": "^11.0.0",
+    "puppeteer": "^12.0.0",
     "should": "^13.2.3",
     "sinon": "^12.0.1",
     "style-loader": "^3.3.1",
-    "typescript": "4.4",
+    "typescript": "4.5",
     "webpack": "^5.62.1",
@@ -71,0 +71,0 @@ "webpack-cli": "^4.9.1",

src/index.js

@@ -247,2 +247,3 @@ /*
   };
+  const functionCache = {};
   function updateStyle() {
@@ -265,3 +266,4 @@ const element = map.getTargetElement();
         zoom,
-        emptyObj
+        emptyObj,
+        functionCache
       );
@@ -276,3 +278,4 @@ element.style.background = Color.parse(bg).toString();
         zoom,
-        emptyObj
+        emptyObj,
+        functionCache
       );
@@ -331,4 +334,4 @@ }
  * @param {Object} glSource "source" entry from a Mapbox Style object.
- * @param {string} url URL to use for the source. This is expected to be the complete http(s) url,
- * with access key applied.
+ * @param {string|undefined} url URL to use for the source. This is expected to be the complete http(s) url,
+ * with access key applied.When not provided, `glSource.tiles` has to be set.
  * @return {Promise<import("ol/source/VectorTile").default>} Promise resolving to a VectorTile source.
@@ -339,3 +342,3 @@ * @private
   glSource = assign({}, glSource);
-  const cacheKey = JSON.stringify(glSource);
+  const cacheKey = [url, JSON.stringify(glSource)].toString();
   let tilejson = tilejsonCache[cacheKey];
@@ -359,6 +362,3 @@ if (!tilejson) {
           for (let i = 0, ii = tiles.length; i < ii; ++i) {
-            const tile = tiles[i];
-            if (tile.indexOf('http') != 0) {
-              tiles[i] = url.replace(/\/?$/, '/') + tile.replace(/^\//, '');
-            }
+            tiles[i] = decodeURI(new URL(tiles[i], url).href);
           }
@@ -480,5 +480,12 @@ }
 
-function updateRasterLayerProperties(glLayer, layer, view) {
+function updateRasterLayerProperties(glLayer, layer, view, functionCache) {
   const zoom = view.getZoom();
-  const opacity = getValue(glLayer, 'paint', 'raster-opacity', zoom, emptyObj);
+  const opacity = getValue(
+    glLayer,
+    'paint',
+    'raster-opacity',
+    zoom,
+    emptyObj,
+    functionCache
+  );
   layer.setOpacity(opacity);
@@ -568,7 +575,14 @@ }
           );
+          const functionCache = {};
           view.on(
             'change:resolution',
-            updateRasterLayerProperties.bind(this, glLayer, layer, view)
+            updateRasterLayerProperties.bind(
+              this,
+              glLayer,
+              layer,
+              view,
+              functionCache
+            )
           );
-          updateRasterLayerProperties(glLayer, layer, view);
+          updateRasterLayerProperties(glLayer, layer, view, functionCache);
         } else if (glSource.type == 'geojson') {
@@ -575,0 +589,0 @@ layer = setupGeoJSONLayer(glSource, path);

src/stylefunction.js

@@ -81,4 +81,2 @@ /*
 const zoomObj = {zoom: 0};
-/** @private */
-const functionCache = {};
 let renderFeatureCoordinates, renderFeature;
@@ -93,6 +91,18 @@
  * @param {Object} feature Gl feature.
+ * @param {Object} [functionCache] Function cache.
  * @return {?} Value.
  */
-export function getValue(layer, layoutOrPaint, property, zoom, feature) {
+export function getValue(
+  layer,
+  layoutOrPaint,
+  property,
+  zoom,
+  feature,
+  functionCache
+) {
   const layerId = layer.id;
+  if (!functionCache) {
+    functionCache = {};
+    console.warn('No functionCache provided to getValue()'); //eslint-disable-line no-console
+  }
   if (!functionCache[layerId]) {
@@ -130,5 +140,2 @@ functionCache[layerId] = {};
 
-/** @private */
-const filterCache = {};
-
 /**
@@ -140,5 +147,9 @@ * @private
  * @param {number} zoom Zoom.
+ * @param {Object} [filterCache] Filter cache.
  * @return {boolean} Filter result.
  */
-function evaluateFilter(layerId, filter, feature, zoom) {
+function evaluateFilter(layerId, filter, feature, zoom, filterCache) {
+  if (!filterCache) {
+    console.warn('No filterCache provided to evaluateFilter()'); //eslint-disable-line no-console
+  }
   if (!(layerId in filterCache)) {
@@ -331,2 +342,8 @@ filterCache[layerId] = createFilter(filter).filter;
   const mapboxLayers = [];
+
+  const iconImageCache = {};
+  const patternCache = {};
+  const functionCache = {};
+  const filterCache = {};
+
   let mapboxSource;
@@ -365,5 +382,2 @@ for (let i = 0, ii = allLayers.length; i < ii; ++i) {
     }
-    // TODO revisit when diffing gets added
-    delete functionCache[layerId];
-    delete filterCache[layerId];
   }
@@ -374,4 +388,2 @@
 
-  const iconImageCache = {};
-  const patternCache = {};
   const styles = [];
@@ -411,3 +423,3 @@
       const filter = layer.filter;
-      if (!filter || evaluateFilter(layerId, filter, f, zoom)) {
+      if (!filter || evaluateFilter(layerId, filter, f, zoom, filterCache)) {
         featureBelongsToLayer = layer;
@@ -420,3 +432,10 @@ let color, opacity, fill, stroke, strokeColor, style;
         ) {
-          opacity = getValue(layer, 'paint', layer.type + '-opacity', zoom, f);
+          opacity = getValue(
+            layer,
+            'paint',
+            layer.type + '-opacity',
+            zoom,
+            f,
+            functionCache
+          );
           if (layer.type + '-pattern' in paint) {
@@ -428,3 +447,4 @@ const fillIcon = getValue(
               zoom,
-              f
+              f,
+              functionCache
             );
@@ -483,3 +503,10 @@ if (fillIcon) {
             color = colorWithOpacity(
-              getValue(layer, 'paint', layer.type + '-color', zoom, f),
+              getValue(
+                layer,
+                'paint',
+                layer.type + '-color',
+                zoom,
+                f,
+                functionCache
+              ),
               opacity
@@ -495,3 +522,4 @@ );
                     zoom,
-                    f
+                    f,
+                    functionCache
                   ),
@@ -530,7 +558,28 @@ opacity
               ? colorWithOpacity(
-                  getValue(layer, 'paint', 'line-color', zoom, f),
-                  getValue(layer, 'paint', 'line-opacity', zoom, f)
+                  getValue(
+                    layer,
+                    'paint',
+                    'line-color',
+                    zoom,
+                    f,
+                    functionCache
+                  ),
+                  getValue(
+                    layer,
+                    'paint',
+                    'line-opacity',
+                    zoom,
+                    f,
+                    functionCache
+                  )
                 )
               : undefined;
-          const width = getValue(layer, 'paint', 'line-width', zoom, f);
+          const width = getValue(
+            layer,
+            'paint',
+            'line-width',
+            zoom,
+            f,
+            functionCache
+          );
           if (color && width > 0) {
@@ -551,6 +600,17 @@ ++stylesLength;
             stroke = style.getStroke();
-            stroke.setLineCap(getValue(layer, 'layout', 'line-cap', zoom, f));
-            stroke.setLineJoin(getValue(layer, 'layout', 'line-join', zoom, f));
+            stroke.setLineCap(
+              getValue(layer, 'layout', 'line-cap', zoom, f, functionCache)
+            );
+            stroke.setLineJoin(
+              getValue(layer, 'layout', 'line-join', zoom, f, functionCache)
+            );
             stroke.setMiterLimit(
-              getValue(layer, 'layout', 'line-miter-limit', zoom, f)
+              getValue(
+                layer,
+                'layout',
+                'line-miter-limit',
+                zoom,
+                f,
+                functionCache
+              )
             );
@@ -561,7 +621,12 @@ stroke.setColor(color);
               paint['line-dasharray']
-                ? getValue(layer, 'paint', 'line-dasharray', zoom, f).map(
-                    function (x) {
-                      return x * width;
-                    }
-                  )
+                ? getValue(
+                    layer,
+                    'paint',
+                    'line-dasharray',
+                    zoom,
+                    f,
+                    functionCache
+                  ).map(function (x) {
+                    return x * width;
+                  })
                 : null
@@ -578,3 +643,10 @@ );
         if ((type == 1 || type == 2) && 'icon-image' in layout) {
-          const iconImage = getValue(layer, 'layout', 'icon-image', zoom, f);
+          const iconImage = getValue(
+            layer,
+            'layout',
+            'icon-image',
+            zoom,
+            f,
+            functionCache
+          );
           if (iconImage) {
@@ -592,3 +664,4 @@ icon =
                 zoom,
-                f
+                f,
+                functionCache
               );
@@ -630,3 +703,4 @@ if (type == 2) {
                       zoom,
-                      f
+                      f,
+                      functionCache
                     );
@@ -672,7 +746,15 @@ if (
                   zoom,
-                  f
+                  f,
+                  functionCache
                 );
                 const iconColor =
                   paint['icon-color'] !== undefined
-                    ? getValue(layer, 'paint', 'icon-color', zoom, f)
+                    ? getValue(
+                        layer,
+                        'paint',
+                        'icon-color',
+                        zoom,
+                        f,
+                        functionCache
+                      )
                     : null;
@@ -722,9 +804,34 @@ if (!iconColor || iconColor.a !== 0) {
                     placementAngle +
-                      deg2rad(getValue(layer, 'layout', 'icon-rotate', zoom, f))
+                      deg2rad(
+                        getValue(
+                          layer,
+                          'layout',
+                          'icon-rotate',
+                          zoom,
+                          f,
+                          functionCache
+                        )
+                      )
                   );
                   iconImg.setOpacity(
-                    getValue(layer, 'paint', 'icon-opacity', zoom, f)
+                    getValue(
+                      layer,
+                      'paint',
+                      'icon-opacity',
+                      zoom,
+                      f,
+                      functionCache
+                    )
                   );
                   iconImg.setAnchor(
-                    anchor[getValue(layer, 'layout', 'icon-anchor', zoom, f)]
+                    anchor[
+                      getValue(
+                        layer,
+                        'layout',
+                        'icon-anchor',
+                        zoom,
+                        f,
+                        functionCache
+                      )
+                    ]
                   );
@@ -762,11 +869,26 @@ style.setImage(iconImg);
             zoom,
-            f
+            f,
+            functionCache
           );
           const circleStrokeColor = colorWithOpacity(
-            getValue(layer, 'paint', 'circle-stroke-color', zoom, f),
-            getValue(layer, 'paint', 'circle-stroke-opacity', zoom, f)
+            getValue(
+              layer,
+              'paint',
+              'circle-stroke-color',
+              zoom,
+              f,
+              functionCache
+            ),
+            getValue(
+              layer,
+              'paint',
+              'circle-stroke-opacity',
+              zoom,
+              f,
+              functionCache
+            )
           );
           const circleColor = colorWithOpacity(
-            getValue(layer, 'paint', 'circle-color', zoom, f),
-            getValue(layer, 'paint', 'circle-opacity', zoom, f)
+            getValue(layer, 'paint', 'circle-color', zoom, f, functionCache),
+            getValue(layer, 'paint', 'circle-opacity', zoom, f, functionCache)
           );
@@ -778,3 +900,4 @@ const circleStrokeWidth = getValue(
             zoom,
-            f
+            f,
+            functionCache
           );
@@ -823,6 +946,14 @@ const cache_key =
             zoom,
-            f
+            f,
+            functionCache
           ).toString();
           label = fromTemplate(textField, properties).trim();
-          opacity = getValue(layer, 'paint', 'text-opacity', zoom, f);
+          opacity = getValue(
+            layer,
+            'paint',
+            'text-opacity',
+            zoom,
+            f,
+            functionCache
+          );
         }
@@ -855,5 +986,12 @@ if (label && opacity && !skipLabel) {
           const textSize = Math.round(
-            getValue(layer, 'layout', 'text-size', zoom, f)
+            getValue(layer, 'layout', 'text-size', zoom, f, functionCache)
           );
-          const fontArray = getValue(layer, 'layout', 'text-font', zoom, f);
+          const fontArray = getValue(
+            layer,
+            'layout',
+            'text-font',
+            zoom,
+            f,
+            functionCache
+          );
           const textLineHeight = getValue(
@@ -864,3 +1002,4 @@ layer,
             zoom,
-            f
+            f,
+            functionCache
           );
@@ -883,3 +1022,4 @@ const font = mb2css(
             zoom,
-            f
+            f,
+            functionCache
           );
@@ -891,3 +1031,4 @@ const letterSpacing = getValue(
             zoom,
-            f
+            f,
+            functionCache
           );
@@ -901,9 +1042,25 @@ const wrappedLabel =
           text.setRotation(
-            deg2rad(getValue(layer, 'layout', 'text-rotate', zoom, f))
+            deg2rad(
+              getValue(layer, 'layout', 'text-rotate', zoom, f, functionCache)
+            )
           );
-          const textAnchor = getValue(layer, 'layout', 'text-anchor', zoom, f);
+          const textAnchor = getValue(
+            layer,
+            'layout',
+            'text-anchor',
+            zoom,
+            f,
+            functionCache
+          );
           const placement =
             hasImage || type == 1
               ? 'point'
-              : getValue(layer, 'layout', 'symbol-placement', zoom, f);
+              : getValue(
+                  layer,
+                  'layout',
+                  'symbol-placement',
+                  zoom,
+                  f,
+                  functionCache
+                );
           text.setPlacement(placement);
@@ -915,5 +1072,13 @@ let textHaloWidth = getValue(
             zoom,
-            f
+            f,
+            functionCache
           );
-          const textOffset = getValue(layer, 'layout', 'text-offset', zoom, f);
+          const textOffset = getValue(
+            layer,
+            'layout',
+            'text-offset',
+            zoom,
+            f,
+            functionCache
+          );
           const textTranslate = getValue(
@@ -924,3 +1089,4 @@ layer,
             zoom,
-            f
+            f,
+            functionCache
           );
@@ -945,3 +1111,4 @@ // Text offset has to take halo width and line height into account
               zoom,
-              f
+              f,
+              functionCache
             );
@@ -951,3 +1118,12 @@ text.setRotateWithView(textRotationAlignment == 'map');
             text.setMaxAngle(
-              (deg2rad(getValue(layer, 'layout', 'text-max-angle', zoom, f)) *
+              (deg2rad(
+                getValue(
+                  layer,
+                  'layout',
+                  'text-max-angle',
+                  zoom,
+                  f,
+                  functionCache
+                )
+              ) *
                 label.length) /
@@ -976,3 +1152,3 @@ wrappedLabel.length
             colorWithOpacity(
-              getValue(layer, 'paint', 'text-color', zoom, f),
+              getValue(layer, 'paint', 'text-color', zoom, f, functionCache),
               opacity
@@ -983,3 +1159,3 @@ )
           const haloColor = colorWithOpacity(
-            getValue(layer, 'paint', 'text-halo-color', zoom, f),
+            getValue(layer, 'paint', 'text-halo-color', zoom, f, functionCache),
             opacity
@@ -1006,3 +1182,4 @@ );
             zoom,
-            f
+            f,
+            functionCache
           );
@@ -1044,7 +1221,5 @@ const padding = text.getPadding();
   colorWithOpacity as _colorWithOpacity,
-  filterCache as _filterCache,
   evaluateFilter as _evaluateFilter,
   fromTemplate as _fromTemplate,
   getValue as _getValue,
-  functionCache as _functionCache,
 };

tsconfig-build.json

@@ -10,2 +10,3 @@ {
     "declaration": true,
+    "declarationMap": true
   },
@@ -12,0 +13,0 @@ "include": [

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

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

8617858

increased by0.39%

Number of package files

98

increased by4.26%

Lines of code

13320

increased by1.46%

No dependency changes