ol-mapbox-style - npm Package Compare versions

Comparing version 6.3.2 to 6.4.0

CHANGELOG.md

 # Changelog
 
+## 6.4.0
+
+* Change package to `"type": "module"`
+* Updates to work seamlessly with ol > 6.5
+
 ## 6.3.2
@@ -4,0 +9,0 @@

dist/examples/geojson-inline.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{112:function(n,o,a){"use strict";a.r(o);a(61);var s=a(39);Object(s.a)("map","data/geojson-inline.json")}},[[112,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{111:function(n,o,a){"use strict";a.r(o);a(62);var s=a(39);Object(s.a)("map","data/geojson-inline.json")}},[[111,0]]]);
 //# sourceMappingURL=geojson-inline.js.map

dist/examples/geojson.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{130:function(n,o,a){"use strict";a.r(o);a(61);var s=a(39);Object(s.a)("map","data/geojson.json")}},[[130,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{129:function(n,o,a){"use strict";a.r(o);a(62);var s=a(39);Object(s.a)("map","data/geojson.json")}},[[129,0]]]);
 //# sourceMappingURL=geojson.js.map

dist/examples/mapbox.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{131:function(o,e,c){"use strict";c.r(e);c(61);var s=c(39),p=document.cookie.replace(/(?:(?:^|.*;\s*)mapbox_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");p||(p=window.prompt("Enter your Mapbox API access token:"),document.cookie="mapbox_access_token="+p+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),Object(s.b)("map","https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token="+p)}},[[131,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{130:function(o,e,c){"use strict";c.r(e);c(62);var s=c(39),p=document.cookie.replace(/(?:(?:^|.*;\s*)mapbox_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");p||(p=window.prompt("Enter your Mapbox API access token:"),document.cookie="mapbox_access_token="+p+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),Object(s.b)("map","https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token="+p)}},[[130,0]]]);
 //# sourceMappingURL=mapbox.js.map

dist/examples/openmaptiles.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{132:function(e,s,o){"use strict";o.r(s);o(61);var t=o(39),c=document.cookie.replace(/(?:(?:^|.*;\s*)tilehosting_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");c||(c=window.prompt("Enter your tilehosting API access token:"),document.cookie="tilehosting_access_token="+c+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),Object(t.b)("map","https://maps.tilehosting.com/styles/basic/style.json?key="+c)}},[[132,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{131:function(e,s,o){"use strict";o.r(s);o(62);var t=o(39),c=document.cookie.replace(/(?:(?:^|.*;\s*)tilehosting_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");c||(c=window.prompt("Enter your tilehosting API access token:"),document.cookie="tilehosting_access_token="+c+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),Object(t.b)("map","https://api.maptiler.com/maps/basic/style.json?key="+c)}},[[131,0]]]);
 //# sourceMappingURL=openmaptiles.js.map

dist/examples/stylefunction.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{133:function(e,t,a){"use strict";a.r(t);a(61);var n=a(85),s=a(84),o=a(103),r=a(83),w=a(75),c=a(70),u=new n.a({declutter:!0,source:new s.a({format:new o.a,url:"data/states.geojson"})}),d=new r.a({target:"map",view:new w.a({center:[-13603186.115192635,6785744.563386],zoom:2})});fetch("data/states.json").then((function(e){return e.json()})).then((function(e){Object(c.a)(u,e,"states"),-1===d.getLayers().getArray().indexOf(u)&&d.addLayer(u)}))}},[[133,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{132:function(e,t,a){"use strict";a.r(t);a(62);var n=a(103),s=a(83),o=a(85),r=a(84),w=a(74),c=a(70),u=new o.a({declutter:!0,source:new r.a({format:new n.a,url:"data/states.geojson"})}),d=new s.a({target:"map",view:new w.a({center:[-13603186.115192635,6785744.563386],zoom:2})});fetch("data/states.json").then((function(e){return e.json()})).then((function(e){Object(c.a)(u,e,"states"),-1===d.getLayers().getArray().indexOf(u)&&d.addLayer(u)}))}},[[132,0]]]);
 //# sourceMappingURL=stylefunction.js.map

dist/examples/tilejson-vectortile.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{134:function(o,s,t){"use strict";t.r(s);t(61);var e=t(39);Object(e.a)("map"," https://demo.tegola.io/styles/hot-osm.json")}},[[134,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{133:function(o,s,t){"use strict";t.r(s);t(62);var e=t(39);Object(e.a)("map"," https://demo.tegola.io/styles/hot-osm.json")}},[[133,0]]]);
 //# sourceMappingURL=tilejson-vectortile.js.map

dist/examples/tilejson.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{135:function(n,a,o){"use strict";o.r(a);o(61);var s=o(39);Object(s.a)("map","data/tilejson.json")}},[[135,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{134:function(n,a,o){"use strict";o.r(a);o(62);var s=o(39);Object(s.a)("map","data/tilejson.json")}},[[134,0]]]);
 //# sourceMappingURL=tilejson.js.map

dist/examples/wms.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{136:function(n,s,w){"use strict";w.r(s);w(61);var a=w(39);Object(a.b)("map","data/wms.json")}},[[136,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{135:function(n,s,w){"use strict";w.r(s);w(62);var a=w(39);Object(a.b)("map","data/wms.json")}},[[135,0]]]);
 //# sourceMappingURL=wms.js.map

dist/index.js

@@ -6,21 +6,21 @@ /*
 */
+import GeoJSON from 'ol/format/GeoJSON.js';
+import MVT from 'ol/format/MVT.js';
+import Map from 'ol/Map.js';
+import TileGrid from 'ol/tilegrid/TileGrid.js';
+import TileJSON from 'ol/source/TileJSON.js';
+import TileLayer from 'ol/layer/Tile.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import VectorTileLayer from 'ol/layer/VectorTile.js';
+import VectorTileSource from 'ol/source/VectorTile.js';
+import View from 'ol/View.js';
+import applyStyleFunction, { getValue } from './stylefunction.js';
+import googleFonts from 'webfont-matcher/lib/fonts/google';
 import mb2css from 'mapbox-to-css-font';
-import applyStyleFunction, { getValue } from './stylefunction';
-import googleFonts from 'webfont-matcher/lib/fonts/google';
-import { fromLonLat } from 'ol/proj';
-import { createXYZ } from 'ol/tilegrid';
-import TileGrid from 'ol/tilegrid/TileGrid';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import GeoJSON from 'ol/format/GeoJSON';
-import MVT from 'ol/format/MVT';
-import { unByKey } from 'ol/Observable';
-import TileLayer from 'ol/layer/Tile';
-import VectorLayer from 'ol/layer/Vector';
-import VectorTileLayer from 'ol/layer/VectorTile';
-import TileJSON from 'ol/source/TileJSON';
-import VectorSource from 'ol/source/Vector';
-import VectorTileSource from 'ol/source/VectorTile';
-import { Color } from '@mapbox/mapbox-gl-style-spec';
-import { assign, defaultResolutions } from './util';
+import { Color } from '@mapbox/mapbox-gl-style-spec/dist/index.es.js';
+import { assign, defaultResolutions } from './util.js';
+import { createXYZ } from 'ol/tilegrid.js';
+import { fromLonLat } from 'ol/proj.js';
+import { unByKey } from 'ol/Observable.js';
 /**
@@ -81,3 +81,6 @@ * @typedef {import("ol/Map").default} PluggableMap
         if (!hasFontFamily(family) && googleFamilies.indexOf(family) !== -1) {
-            var fontUrl = 'https://fonts.googleapis.com/css?family=' + family.replace(/ /g, '+') + ':' + googleFontDescription[1];
+            var fontUrl = 'https://fonts.googleapis.com/css?family=' +
+                family.replace(/ /g, '+') +
+                ':' +
+                googleFontDescription[1];
             if (!document.querySelector('link[href="' + fontUrl + '"]')) {
@@ -104,5 +107,5 @@ var markup = document.createElement('link');
     var parts = url.match(spriteRegEx);
-    return parts ?
-        parts[1] + extension + (parts.length > 2 ? parts[2] : '') :
-        url + extension;
+    return parts
+        ? parts[1] + extension + (parts.length > 2 ? parts[2] : '')
+        : url + extension;
 }
@@ -180,3 +183,3 @@ /**
                 .then(function (response) {
-                if (!response.ok && (sizeFactor_1 !== '')) {
+                if (!response.ok && sizeFactor_1 !== '') {
                     spriteUrl_1 = toSpriteUrl(glStyle.sprite, path, '.json');
@@ -198,3 +201,3 @@ return fetch(spriteUrl_1, { credentials: 'same-origin' });
                 .then(function (spritesJson) {
-                if ((spritesJson === undefined)) {
+                if (spritesJson === undefined) {
                     return reject(new Error('No sprites found.'));
@@ -218,3 +221,3 @@ }
     var background = {
-        type: layer.type
+        type: layer.type,
     };
@@ -229,3 +232,4 @@ function updateStyle() {
         background['paint'] = paint;
-        background.id = 'olms-bg-' + paint['background-opacity'] + paint['background-color'];
+        background.id =
+            'olms-bg-' + paint['background-opacity'] + paint['background-color'];
         var zoom = map.getView().getZoom();
@@ -287,3 +291,3 @@ if (paint['background-color'] !== undefined) {
         declutter: true,
-        visible: false
+        visible: false,
     });
@@ -293,6 +297,7 @@ var cacheKey = JSON.stringify(glSource);
     if (!tilejson) {
-        tilejson = tilejsonCache[cacheKey] = new TileJSON({
+        tilejson = new TileJSON({
             url: glSource.tiles ? undefined : url,
-            tileJSON: glSource.tiles ? glSource : undefined
+            tileJSON: glSource.tiles ? glSource : undefined,
         });
+        tilejsonCache[cacheKey] = tilejson;
     }
@@ -303,3 +308,5 @@ var key = tilejson.on('change', function () {
             var tileJSONDoc = tilejson.getTileJSON();
-            var tiles = Array.isArray(tileJSONDoc.tiles) ? tileJSONDoc.tiles : [tileJSONDoc.tiles];
+            var tiles = Array.isArray(tileJSONDoc.tiles)
+                ? tileJSONDoc.tiles
+                : [tileJSONDoc.tiles];
             if (url) {
@@ -327,5 +334,5 @@ for (var i = 0, ii = tiles.length; i < ii; ++i) {
                         resolutions: defaultResolutions.slice(0, maxZoom + 1),
-                        tileSize: 512
+                        tileSize: 512,
                     }),
-                    urls: tiles
+                    urls: tiles,
                 });
@@ -354,3 +361,3 @@ tilejson.set('ol-source', source);
         tileJSON: glSource.tiles ? glSource : undefined,
-        crossOrigin: 'anonymous'
+        crossOrigin: 'anonymous',
     });
@@ -374,5 +381,5 @@ var key = source.on('change', function () {
                     maxZoom: maxZoom,
-                    tileSize: tileSize
+                    tileSize: tileSize,
                 }).getResolutions(),
-                tileSize: tileSize
+                tileSize: tileSize,
             });
@@ -404,3 +411,5 @@ layer.setSource(source);
     else {
-        features = geoJsonFormat.readFeatures(data, { featureProjection: 'EPSG:3857' });
+        features = geoJsonFormat.readFeatures(data, {
+            featureProjection: 'EPSG:3857',
+        });
     }
@@ -412,5 +421,5 @@ return new VectorLayer({
             format: geoJsonFormat,
-            url: geoJsonUrl
+            url: geoJsonUrl,
         }),
-        visible: false
+        visible: false,
     });
@@ -429,3 +438,3 @@ }
         view = new View({
-            maxResolution: defaultResolutions[0]
+            maxResolution: defaultResolutions[0],
         });
@@ -443,3 +452,3 @@ map.setView(view);
             nearest: true,
-            size: map.getSize()
+            size: map.getSize(),
         });
@@ -452,3 +461,3 @@ }
         else if (glStyle.sprite.indexOf('http') != 0) {
-            glStyle.sprite = (host ? (host + path) : '') + glStyle.sprite + accessToken;
+            glStyle.sprite = (host ? host + path : '') + glStyle.sprite + accessToken;
         }
@@ -483,6 +492,9 @@ }
                         glSource.tiles = ['a', 'b', 'c', 'd'].map(function (host) {
-                            return 'https://' + host + '.tiles.mapbox.com/v4/' + mapid_1 +
+                            return ('https://' +
+                                host +
+                                '.tiles.mapbox.com/v4/' +
+                                mapid_1 +
                                 '/{z}/{x}/{y}.' +
                                 (glSource.type == 'vector' ? 'vector.pbf' : 'png') +
-                                accessToken;
+                                accessToken);
                         });
@@ -569,7 +581,6 @@ }
 export default function olms(map, style) {
-    var accessToken, baseUrl, host, path, promise;
-    accessToken = baseUrl = host = path = '';
+    var promise, accessToken = '', baseUrl = '', host = '', path = '';
     if (typeof map === 'string' || map instanceof HTMLElement) {
         map = new Map({
-            target: map
+            target: map,
         });
@@ -585,3 +596,3 @@ }
             fetch(style, {
-                credentials: 'same-origin'
+                credentials: 'same-origin',
             })
@@ -643,3 +654,3 @@ .then(function (response) {
         map = new Map({
-            target: map
+            target: map,
         });
@@ -653,3 +664,2 @@ }
 /**
- * @private
  * If layerIds is not empty, applies the style specified in glStyle to the layer,
@@ -669,2 +679,3 @@ * and adds the layer to the map.
  * been set on the specified layer, and the style has been applied.
+ * @private
  */
@@ -701,4 +712,6 @@ function finalizeLayer(layer, layerIds, glStyle, path, map) {
             }
-            if (source instanceof VectorSource || source instanceof VectorTileSource) {
-                applyStyle(/** @type {import("ol/layer/Vector").default|import("ol/layer/VectorTile").default} */ (layer), glStyle, layerIds, path).then(function () {
+            if (source instanceof VectorSource ||
+                source instanceof VectorTileSource) {
+                applyStyle(
+                /** @type {import("ol/layer/Vector").default|import("ol/layer/VectorTile").default} */ (layer), glStyle, layerIds, path).then(function () {
                     layer.setVisible(true);
@@ -705,0 +718,0 @@ resolve();

dist/stylefunction.js

@@ -6,13 +6,12 @@ /*
 */
-import Style from 'ol/style/Style';
-import Fill from 'ol/style/Fill';
-import Stroke from 'ol/style/Stroke';
-import Icon from 'ol/style/Icon';
-import Text from 'ol/style/Text';
-import Circle from 'ol/style/Circle';
-import RenderFeature from 'ol/render/Feature';
-import { derefLayers } from '@mapbox/mapbox-gl-style-spec';
-import { expression, Color, function as fn, latest as spec, featureFilter as createFilter } from '@mapbox/mapbox-gl-style-spec';
+import Circle from 'ol/style/Circle.js';
+import Fill from 'ol/style/Fill.js';
+import Icon from 'ol/style/Icon.js';
+import RenderFeature from 'ol/render/Feature.js';
+import Stroke from 'ol/style/Stroke.js';
+import Style from 'ol/style/Style.js';
+import Text from 'ol/style/Text.js';
 import mb2css from 'mapbox-to-css-font';
-import { deg2rad, defaultResolutions, getZoomForResolution, wrapText, applyLetterSpacing, createCanvas } from './util';
+import { Color, featureFilter as createFilter, derefLayers, expression, function as fn, latest as spec, } from '@mapbox/mapbox-gl-style-spec/dist/index.es.js';
+import { applyLetterSpacing, createCanvas, defaultResolutions, deg2rad, getZoomForResolution, wrapText, } from './util.js';
 /**
@@ -33,3 +32,3 @@ * @typedef {import("ol/layer/Vector").default} VectorLayer
     'Polygon': 3,
-    'MultiPolygon': 3
+    'MultiPolygon': 3,
 };
@@ -45,3 +44,3 @@ var anchor = {
     'bottom-left': [0, 1],
-    'bottom-right': [1, 1]
+    'bottom-right': [1, 1],
 };
@@ -51,3 +50,5 @@ var expressionData = function (rawExpression, propertySpec) {
     if (compiledExpression.result === 'error') {
-        throw new Error(compiledExpression.value.map(function (err) { return err.key + ": " + err.message; }).join(', '));
+        throw new Error(compiledExpression.value
+            .map(function (err) { return err.key + ": " + err.message; })
+            .join(', '));
     }
@@ -82,3 +83,3 @@ return compiledExpression.value;
         }
-        var isExpr = isExpression((value_1));
+        var isExpr = isExpression(value_1);
         if (!isExpr && isFunction(value_1)) {
@@ -90,3 +91,4 @@ value_1 = convertFunction(value_1, propertySpec);
             var compiledExpression = expressionData(value_1, propertySpec);
-            functions[property] = compiledExpression.evaluate.bind(compiledExpression);
+            functions[property] =
+                compiledExpression.evaluate.bind(compiledExpression);
         }
@@ -135,4 +137,11 @@ else {
         opacity = opacity === undefined ? 1 : opacity;
-        return 'rgba(' + Math.round(color.r * 255 / a) + ',' + Math.round(color.g * 255 / a) +
-            ',' + Math.round(color.b * 255 / a) + ',' + (a * opacity) + ')';
+        return ('rgba(' +
+            Math.round((color.r * 255) / a) +
+            ',' +
+            Math.round((color.g * 255) / a) +
+            ',' +
+            Math.round((color.b * 255) / a) +
+            ',' +
+            a * opacity +
+            ')');
     }
@@ -222,8 +231,3 @@ return color;
  * are provided, they must be from layers that use the same source.
- * @param {Array<number>} [resolutions=[78271.51696402048, 39135.75848201024,
-   19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564,
-   1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525,
-   76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032,
-   4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395,
-   0.29858214173896974, 0.14929107086948487, 0.07464553543474244]]
+ * @param {Array<number>} [resolutions=[78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395, 0.29858214173896974, 0.14929107086948487, 0.07464553543474244]]
  * Resolutions for mapping resolution to zoom level.
@@ -270,6 +274,7 @@ * @param {Object} [spriteData=undefined] Sprite data from the url specified in
                 action: 'loadImage',
-                src: spriteImageUrl
+                src: spriteImageUrl,
             });
             worker.addEventListener('message', function handler(event) {
-                if (event.data.action === 'imageLoaded' && event.data.src === spriteImageUrl) {
+                if (event.data.action === 'imageLoaded' &&
+                    event.data.src === spriteImageUrl) {
                     spriteImage = event.data.image;
@@ -288,3 +293,3 @@ spriteImgSize = [spriteImage.width, spriteImage.height];
         var layerId = layer.id;
-        if (typeof source == 'string' && layer.source == source ||
+        if ((typeof source == 'string' && layer.source == source) ||
             source.indexOf(layerId) !== -1) {
@@ -305,7 +310,8 @@ var sourceLayer = layer['source-layer'];
             if (!layers) {
-                layers = layersBySourceLayer[sourceLayer] = [];
+                layers = [];
+                layersBySourceLayer[sourceLayer] = layers;
             }
             layers.push({
                 layer: layer,
-                index: i
+                index: i,
             });
@@ -336,3 +342,3 @@ mapboxLayers.push(layerId);
             properties: properties,
-            type: type
+            type: type,
         };
@@ -347,3 +353,4 @@ var stylesLength = -1;
             var paint = layer.paint || emptyObj;
-            if (layout.visibility === 'none' || ('minzoom' in layer && zoom < layer.minzoom) ||
+            if (layout.visibility === 'none' ||
+                ('minzoom' in layer && zoom < layer.minzoom) ||
                 ('maxzoom' in layer && zoom >= layer.maxzoom)) {
@@ -357,3 +364,4 @@ return "continue";
                 var index = layerData.index;
-                if (type == 3 && (layer.type == 'fill' || layer.type == 'fill-extrusion')) {
+                if (type == 3 &&
+                    (layer.type == 'fill' || layer.type == 'fill-extrusion')) {
                     opacity = getValue(layer, 'paint', layer.type + '-opacity', zoom, f);
@@ -369,6 +377,10 @@ if (layer.type + '-pattern' in paint) {
                                 style = styles[stylesLength];
-                                if (!style || !style.getFill() || style.getStroke() || style.getText()) {
-                                    style = styles[stylesLength] = new Style({
-                                        fill: new Fill()
+                                if (!style ||
+                                    !style.getFill() ||
+                                    style.getStroke() ||
+                                    style.getText()) {
+                                    style = new Style({
+                                        fill: new Fill(),
                                     });
+                                    styles[stylesLength] = style;
                                 }
@@ -403,7 +415,10 @@ fill = style.getFill();
                             style = styles[stylesLength];
-                            if (!style || !(style.getFill() && style.getStroke()) || style.getText()) {
-                                style = styles[stylesLength] = new Style({
+                            if (!style ||
+                                !(style.getFill() && style.getStroke()) ||
+                                style.getText()) {
+                                style = new Style({
                                     fill: new Fill(),
-                                    stroke: new Stroke()
+                                    stroke: new Stroke(),
                                 });
+                                styles[stylesLength] = style;
                             }
@@ -420,5 +435,6 @@ fill = style.getFill();
                 if (type != 1 && layer.type == 'line') {
-                    color = !('line-pattern' in paint) && 'line-color' in paint ?
-                        colorWithOpacity(getValue(layer, 'paint', 'line-color', zoom, f), getValue(layer, 'paint', 'line-opacity', zoom, f)) :
-                        undefined;
+                    color =
+                        !('line-pattern' in paint) && 'line-color' in paint
+                            ? colorWithOpacity(getValue(layer, 'paint', 'line-color', zoom, f), getValue(layer, 'paint', 'line-opacity', zoom, f))
+                            : undefined;
                     var width_1 = getValue(layer, 'paint', 'line-width', zoom, f);
@@ -428,6 +444,10 @@ if (color && width_1 > 0) {
                         style = styles[stylesLength];
-                        if (!style || !style.getStroke() || style.getFill() || style.getText()) {
-                            style = styles[stylesLength] = new Style({
-                                stroke: new Stroke()
+                        if (!style ||
+                            !style.getStroke() ||
+                            style.getFill() ||
+                            style.getText()) {
+                            style = new Style({
+                                stroke: new Stroke(),
                             });
+                            styles[stylesLength] = style;
                         }
@@ -440,6 +460,7 @@ stroke = style.getStroke();
                         stroke.setWidth(width_1);
-                        stroke.setLineDash(paint['line-dasharray'] ?
-                            getValue(layer, 'paint', 'line-dasharray', zoom, f).map(function (x) {
+                        stroke.setLineDash(paint['line-dasharray']
+                            ? getValue(layer, 'paint', 'line-dasharray', zoom, f).map(function (x) {
                                 return x * width_1;
-                            }) : null);
+                            })
+                            : null);
                         style.setZIndex(index);
@@ -455,5 +476,6 @@ }
                     if (iconImage) {
-                        icon = typeof iconImage === 'string'
-                            ? fromTemplate(iconImage, properties)
-                            : iconImage.toString();
+                        icon =
+                            typeof iconImage === 'string'
+                                ? fromTemplate(iconImage, properties)
+                                : iconImage.toString();
                         var styleGeom = undefined;
@@ -470,3 +492,5 @@ if (spriteImage && spriteData && spriteData[icon]) {
                                         //FIXME Do not hard-code a size of 150
-                                        var midpoint = geom.getType() === 'MultiLineString' ? geom.getFlatMidpoints() : geom.getFlatMidpoint();
+                                        var midpoint = geom.getType() === 'MultiLineString'
+                                            ? geom.getFlatMidpoints()
+                                            : geom.getFlatMidpoint();
                                         if (!renderFeature) {
@@ -480,3 +504,4 @@ renderFeatureCoordinates = [NaN, NaN];
                                         var placement = getValue(layer, 'layout', 'symbol-placement', zoom, f);
-                                        if (placement === 'line' && iconRotationAlignment === 'map') {
+                                        if (placement === 'line' &&
+                                            iconRotationAlignment === 'map') {
                                             var stride = geom.getStride();
@@ -493,4 +518,6 @@ var coordinates = geom.getFlatCoordinates();
                                                 var maxY = Math.max(y1, y2);
-                                                if (midpoint[0] >= minX && midpoint[0] <= maxX &&
-                                                    midpoint[1] >= minY && midpoint[1] <= maxY) {
+                                                if (midpoint[0] >= minX &&
+                                                    midpoint[0] <= maxX &&
+                                                    midpoint[1] >= minY &&
+                                                    midpoint[1] <= maxY) {
                                                     placementAngle = Math.atan2(y1 - y2, x2 - x1);
@@ -506,3 +533,5 @@ break;
                                 var iconSize = getValue(layer, 'layout', 'icon-size', zoom, f);
-                                var iconColor = paint['icon-color'] !== undefined ? getValue(layer, 'paint', 'icon-color', zoom, f) : null;
+                                var iconColor = paint['icon-color'] !== undefined
+                                    ? getValue(layer, 'paint', 'icon-color', zoom, f)
+                                    : null;
                                 if (!iconColor || iconColor.a !== 0) {
@@ -525,5 +554,5 @@ var icon_cache_key = icon + '.' + iconSize;
                                                 if (a !== 0) {
-                                                    data.data[c] = iconColor.r * 255 / a;
-                                                    data.data[c + 1] = iconColor.g * 255 / a;
-                                                    data.data[c + 2] = iconColor.b * 255 / a;
+                                                    data.data[c] = (iconColor.r * 255) / a;
+                                                    data.data[c + 1] = (iconColor.g * 255) / a;
+                                                    data.data[c + 2] = (iconColor.b * 255) / a;
                                                 }
@@ -533,10 +562,11 @@ data.data[c + 3] = a;
                                             ctx.putImageData(data, 0, 0);
-                                            iconImg = iconImageCache[icon_cache_key] = new Icon({
+                                            iconImg = new Icon({
                                                 img: canvas,
                                                 imgSize: [canvas.width, canvas.height],
-                                                scale: iconSize / spriteImageData.pixelRatio
+                                                scale: iconSize / spriteImageData.pixelRatio,
                                             });
+                                            iconImageCache[icon_cache_key] = iconImg;
                                         }
                                         else {
-                                            iconImg = iconImageCache[icon_cache_key] = new Icon({
+                                            iconImg = new Icon({
                                                 img: spriteImage,
@@ -547,4 +577,5 @@ imgSize: spriteImgSize,
                                                 rotateWithView: iconRotationAlignment === 'map',
-                                                scale: iconSize / spriteImageData.pixelRatio
+                                                scale: iconSize / spriteImageData.pixelRatio,
                                             });
+                                            iconImageCache[icon_cache_key] = iconImg;
                                         }
@@ -556,7 +587,12 @@ }
                                     style = styles[stylesLength];
-                                    if (!style || !style.getImage() || style.getFill() || style.getStroke()) {
-                                        style = styles[stylesLength] = new Style();
+                                    if (!style ||
+                                        !style.getImage() ||
+                                        style.getFill() ||
+                                        style.getStroke()) {
+                                        style = new Style();
+                                        styles[stylesLength] = style;
                                     }
                                     style.setGeometry(styleGeom);
-                                    iconImg.setRotation(placementAngle + deg2rad(getValue(layer, 'layout', 'icon-rotate', zoom, f)));
+                                    iconImg.setRotation(placementAngle +
+                                        deg2rad(getValue(layer, 'layout', 'icon-rotate', zoom, f)));
                                     iconImg.setOpacity(getValue(layer, 'paint', 'icon-opacity', zoom, f));
@@ -581,4 +617,8 @@ iconImg.setAnchor(anchor[getValue(layer, 'layout', 'icon-anchor', zoom, f)]);
                     style = styles[stylesLength];
-                    if (!style || !style.getImage() || style.getFill() || style.getStroke()) {
-                        style = styles[stylesLength] = new Style();
+                    if (!style ||
+                        !style.getImage() ||
+                        style.getFill() ||
+                        style.getStroke()) {
+                        style = new Style();
+                        styles[stylesLength] = style;
                     }
@@ -589,16 +629,26 @@ var circleRadius = getValue(layer, 'paint', 'circle-radius', zoom, f);
                     var circleStrokeWidth = getValue(layer, 'paint', 'circle-stroke-width', zoom, f);
-                    var cache_key = circleRadius + '.' + circleStrokeColor + '.' +
-                        circleColor + '.' + circleStrokeWidth;
+                    var cache_key = circleRadius +
+                        '.' +
+                        circleStrokeColor +
+                        '.' +
+                        circleColor +
+                        '.' +
+                        circleStrokeWidth;
                     iconImg = iconImageCache[cache_key];
                     if (!iconImg) {
-                        iconImg = iconImageCache[cache_key] = new Circle({
+                        iconImg = new Circle({
                             radius: circleRadius,
-                            stroke: circleStrokeColor && circleStrokeWidth > 0 ? new Stroke({
-                                width: circleStrokeWidth,
-                                color: circleStrokeColor
-                            }) : undefined,
-                            fill: circleColor ? new Fill({
-                                color: circleColor
-                            }) : undefined
+                            stroke: circleStrokeColor && circleStrokeWidth > 0
+                                ? new Stroke({
+                                    width: circleStrokeWidth,
+                                    color: circleStrokeColor,
+                                })
+                                : undefined,
+                            fill: circleColor
+                                ? new Fill({
+                                    color: circleColor,
+                                })
+                                : undefined,
                         });
+                        iconImageCache[cache_key] = iconImg;
                     }
@@ -622,4 +672,8 @@ style.setImage(iconImg);
                         style = styles[stylesLength];
-                        if (!style || !style.getText() || style.getFill() || style.getStroke()) {
-                            style = styles[stylesLength] = new Style();
+                        if (!style ||
+                            !style.getText() ||
+                            style.getFill() ||
+                            style.getStroke()) {
+                            style = new Style();
+                            styles[stylesLength] = style;
                         }
@@ -630,5 +684,6 @@ style.setImage(undefined);
                     if (!style.getText()) {
-                        style.setText(text || new Text({
-                            padding: [2, 2, 2, 2]
-                        }));
+                        style.setText(text ||
+                            new Text({
+                                padding: [2, 2, 2, 2],
+                            }));
                     }
@@ -649,3 +704,5 @@ text = style.getText();
                     var letterSpacing = getValue(layer, 'layout', 'text-letter-spacing', zoom, f);
-                    var wrappedLabel = type == 2 ? applyLetterSpacing(label, letterSpacing) : wrapText(label, font, maxTextWidth, letterSpacing);
+                    var wrappedLabel = type == 2
+                        ? applyLetterSpacing(label, letterSpacing)
+                        : wrapText(label, font, maxTextWidth, letterSpacing);
                     text.setText(wrappedLabel);
@@ -655,3 +712,5 @@ text.setFont(font);
                     var textAnchor = getValue(layer, 'layout', 'text-anchor', zoom, f);
-                    var placement = (hasImage || type == 1) ? 'point' : getValue(layer, 'layout', 'symbol-placement', zoom, f);
+                    var placement = hasImage || type == 1
+                        ? 'point'
+                        : getValue(layer, 'layout', 'symbol-placement', zoom, f);
                     text.setPlacement(placement);
@@ -679,3 +738,5 @@ var textHaloWidth = getValue(layer, 'paint', 'text-halo-width', zoom, f);
                     else {
-                        text.setMaxAngle(deg2rad(getValue(layer, 'layout', 'text-max-angle', zoom, f)) * label.length / wrappedLabel.length);
+                        text.setMaxAngle((deg2rad(getValue(layer, 'layout', 'text-max-angle', zoom, f)) *
+                            label.length) /
+                            wrappedLabel.length);
                         text.setTextAlign();
@@ -687,7 +748,7 @@ text.setRotateWithView(false);
                         textBaseline = 'bottom';
-                        vOffset = -textHaloWidth - (0.5 * (textLineHeight - 1)) * textSize;
+                        vOffset = -textHaloWidth - 0.5 * (textLineHeight - 1) * textSize;
                     }
                     else if (textAnchor.indexOf('top') == 0) {
                         textBaseline = 'top';
-                        vOffset = textHaloWidth + (0.5 * (textLineHeight - 1)) * textSize;
+                        vOffset = textHaloWidth + 0.5 * (textLineHeight - 1) * textSize;
                     }
@@ -716,3 +777,6 @@ text.setTextBaseline(textBaseline);
                     if (textPadding !== padding[0]) {
-                        padding[0] = padding[1] = padding[2] = padding[3] = textPadding;
+                        padding[0] = textPadding;
+                        padding[1] = textPadding;
+                        padding[2] = textPadding;
+                        padding[3] = textPadding;
                     }
@@ -746,3 +810,3 @@ style.setZIndex(index);
 }
-export { colorWithOpacity as _colorWithOpacity, filterCache as _filterCache, evaluateFilter as _evaluateFilter, fromTemplate as _fromTemplate, getValue as _getValue, functionCache as _functionCache };
+export { colorWithOpacity as _colorWithOpacity, filterCache as _filterCache, evaluateFilter as _evaluateFilter, fromTemplate as _fromTemplate, getValue as _getValue, functionCache as _functionCache, };
 //# sourceMappingURL=stylefunction.js.map

dist/util.js

@@ -1,4 +0,4 @@
-import { listen } from 'ol/events';
-import EventType from 'ol/events/EventType';
-import { labelCache } from 'ol/render/canvas';
+import EventType from 'ol/events/EventType.js';
+import { labelCache } from 'ol/render/canvas.js';
+import { listen } from 'ol/events.js';
 /**
@@ -33,3 +33,3 @@ * Polyfill for Object.assign().  Assigns enumerable and own properties from
 export function deg2rad(degrees) {
-    return degrees * Math.PI / 180;
+    return (degrees * Math.PI) / 180;
 }
@@ -95,3 +95,4 @@ export var defaultResolutions = (function () {
 function measureText(text, letterSpacing) {
-    return getMeasureContext().measureText(text).width + (text.length - 1) * letterSpacing;
+    return (getMeasureContext().measureText(text).width +
+        (text.length - 1) * letterSpacing);
 }
@@ -98,0 +99,0 @@ var measureCache = {};

package.json

 {
   "name": "ol-mapbox-style",
-  "version": "6.3.2",
+  "version": "6.4.0",
   "description": "Create OpenLayers maps from Mapbox Style objects",
   "main": "dist/index.js",
+  "type": "module",
   "repository": {
@@ -20,5 +21,5 @@ "type": "git",
   "scripts": {
-    "start": "webpack-dev-server --config ./webpack.config.examples.js",
+    "start": "webpack-dev-server --config ./webpack.config.examples.cjs",
     "prepare": "npm run doc && npm run build",
-    "build": "tsc --project tsconfig-build.json && webpack-cli --mode=production --config ./webpack.config.olms.js && webpack-cli --mode=production --config ./webpack.config.examples.js",
+    "build": "tsc --project tsconfig-build.json && webpack-cli --mode=production --config ./webpack.config.olms.cjs && webpack-cli --mode=production --config ./webpack.config.examples.cjs",
     "doc": "documentation readme -s API src/index.js src/stylefunction.js --document-exported true",
@@ -32,3 +33,3 @@ "karma": "karma start test/karma.conf.js",
   "dependencies": {
-    "@mapbox/mapbox-gl-style-spec": "^13.14.0",
+    "@mapbox/mapbox-gl-style-spec": "^13.20.1",
     "mapbox-to-css-font": "^2.4.0",
@@ -38,3 +39,3 @@ "webfont-matcher": "^1.1.0"
   "peerDependencies": {
-    "ol": "^6.1.0"
+    "ol": ">= 6.1.0 < 7"
   },
@@ -52,7 +53,7 @@ "devDependencies": {
     "deep-freeze": "0.0.1",
-    "documentation": "^13.0.2",
-    "eslint": "^5.16.0",
-    "eslint-config-openlayers": "^11.0.0",
+    "documentation": "^13.2.5",
+    "eslint": "^7.30.0",
+    "eslint-config-openlayers": "^15.1.0",
     "html-webpack-plugin": "^3.2.0",
-    "karma": "^5.1.1",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "^2.2.0",
@@ -62,7 +63,7 @@ "karma-coverage": "^1.1.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^3.0.5",
+    "karma-webpack": "^4.0.2",
     "mapbox-gl-styles": "^2.0.2",
     "mini-css-extract-plugin": "^0.4.5",
     "mocha": "^8.1.1",
-    "ol": "^6.4.3",
+    "ol": "^6.5.0",
     "puppeteer": "^1.20.0",
@@ -72,7 +73,7 @@ "should": "^13.2.3",
     "style-loader": "^0.23.1",
-    "typescript": "^3.8.3",
+    "typescript": "^4.3.5",
     "webpack": "^4.41.3",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "webpack-dev-server": "^3.11.2"
   }
 }

README.md

@@ -61,3 +61,3 @@ # ol-mapbox-style
 
--   `fetch` (including `Promise`)
+*   `fetch` (including `Promise`)
 
@@ -78,20 +78,20 @@ ### Webpack
 
--   [applyStyle](#applystyle)
-    -   [Parameters](#parameters)
--   [recordStyleLayer](#recordstylelayer)
-    -   [Parameters](#parameters-1)
--   [stylefunction](#stylefunction)
-    -   [Parameters](#parameters-2)
--   [applyBackground](#applybackground)
-    -   [Parameters](#parameters-3)
--   [olms](#olms)
-    -   [Parameters](#parameters-4)
--   [apply](#apply)
-    -   [Parameters](#parameters-5)
--   [getLayer](#getlayer)
-    -   [Parameters](#parameters-6)
--   [getLayers](#getlayers)
-    -   [Parameters](#parameters-7)
--   [getSource](#getsource)
-    -   [Parameters](#parameters-8)
+*   [applyStyle](#applystyle)
+    *   [Parameters](#parameters)
+*   [recordStyleLayer](#recordstylelayer)
+    *   [Parameters](#parameters-1)
+*   [stylefunction](#stylefunction)
+    *   [Parameters](#parameters-2)
+*   [applyBackground](#applybackground)
+    *   [Parameters](#parameters-3)
+*   [olms](#olms)
+    *   [Parameters](#parameters-4)
+*   [apply](#apply)
+    *   [Parameters](#parameters-5)
+*   [getLayer](#getlayer)
+    *   [Parameters](#parameters-6)
+*   [getLayers](#getlayers)
+    *   [Parameters](#parameters-7)
+*   [getSource](#getsource)
+    *   [Parameters](#parameters-8)
 
@@ -112,7 +112,7 @@ ### applyStyle
 
--   `mapbox-source`: The `id` of the Mapbox Style document's source that the
+*   `mapbox-source`: The `id` of the Mapbox Style document's source that the
     OpenLayers layer was created from. Usually `apply()` creates one
     OpenLayers layer per Mapbox Style source, unless the layer stack has
     layers from different sources in between.
--   `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
+*   `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
     included in the OpenLayers layer.
@@ -122,11 +122,11 @@
 
--   `layer` **(VectorTileLayer | VectorLayer)** OpenLayers layer.
--   `glStyle` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox Style object.
--   `source` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>)** `source` key or an array of layer `id`s from the
+*   `layer` **(VectorTileLayer | VectorLayer)** OpenLayers layer.
+*   `glStyle` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox Style object.
+*   `source` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>)** `source` key or an array of layer `id`s from the
     Mapbox Style object. When a `source` key is provided, all layers for the
     specified source will be included in the style function. When layer `id`s
     are provided, they must be from layers that use the same source.
--   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Path of the style file. Only required when
+*   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Path of the style file. Only required when
     a relative path is used with the `"sprite"` property of the style. (optional, default `undefined`)
--   `resolutions` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Resolutions for mapping resolution to zoom level. (optional, default `undefined`)
+*   `resolutions` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Resolutions for mapping resolution to zoom level. (optional, default `undefined`)
 
@@ -148,3 +148,3 @@ Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** Promise which will be resolved when the style can be used
 
--   `record` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Recording of the style layer is on. (optional, default `false`)
+*   `record` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Recording of the style layer is on. (optional, default `false`)
 
@@ -163,7 +163,7 @@ ### stylefunction
 
--   `mapbox-source`: The `id` of the Mapbox Style document's source that the
+*   `mapbox-source`: The `id` of the Mapbox Style document's source that the
     OpenLayers layer was created from. Usually `apply()` creates one
     OpenLayers layer per Mapbox Style source, unless the layer stack has
     layers from different sources in between.
--   `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
+*   `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
     included in the OpenLayers layer.
@@ -196,3 +196,3 @@
 
--   `olLayer` **(VectorLayer | VectorTileLayer)** OpenLayers layer to
+*   `olLayer` **(VectorLayer | VectorTileLayer)** OpenLayers layer to
     apply the style to. In addition to the style, the layer will get two
@@ -202,20 +202,15 @@ properties: `mapbox-source` will be the `id` of the `glStyle`'s source used
     `glStyle`'s layers.
--   `glStyle` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox Style object.
--   `source` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>)** `source` key or an array of layer `id`s
+*   `glStyle` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox Style object.
+*   `source` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>)** `source` key or an array of layer `id`s
     from the Mapbox Style object. When a `source` key is provided, all layers for
     the specified source will be included in the style function. When layer `id`s
     are provided, they must be from layers that use the same source.
--   `resolutions` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Resolutions for mapping resolution to zoom level. (optional, default `[78271.51696402048,39135.75848201024,
-    19567.87924100512,9783.93962050256,4891.96981025128,2445.98490512564,
-    1222.99245256282,611.49622628141,305.748113140705,152.8740565703525,
-    76.43702828517625,38.21851414258813,19.109257071294063,9.554628535647032,
-    4.777314267823516,2.388657133911758,1.194328566955879,0.5971642834779395,
-    0.29858214173896974,0.14929107086948487,0.07464553543474244]`)
--   `spriteData` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Sprite data from the url specified in
+*   `resolutions` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Resolutions for mapping resolution to zoom level. (optional, default `[78271.51696402048,39135.75848201024,19567.87924100512,9783.93962050256,4891.96981025128,2445.98490512564,1222.99245256282,611.49622628141,305.748113140705,152.8740565703525,76.43702828517625,38.21851414258813,19.109257071294063,9.554628535647032,4.777314267823516,2.388657133911758,1.194328566955879,0.5971642834779395,0.29858214173896974,0.14929107086948487,0.07464553543474244]`)
+*   `spriteData` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Sprite data from the url specified in
     the Mapbox Style object's `sprite` property. Only required if a `sprite`
     property is specified in the Mapbox Style object. (optional, default `undefined`)
--   `spriteImageUrl` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Sprite image url for the sprite
+*   `spriteImageUrl` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Sprite image url for the sprite
     specified in the Mapbox Style object's `sprite` property. Only required if a
     `sprite` property is specified in the Mapbox Style object. (optional, default `undefined`)
--   `getFonts` **function ([Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>): [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** Function that
+*   `getFonts` **function ([Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>): [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** Function that
     receives a font stack as arguments, and returns a (modified) font stack that
@@ -239,4 +234,4 @@ is available. Font names are the names used in the Mapbox Style object. If
 
--   `map` **PluggableMap** OpenLayers Map.
--   `glStyle` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Mapbox Style object.
+*   `map` **PluggableMap** OpenLayers Map.
+*   `glStyle` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Mapbox Style object.
 
@@ -260,7 +255,7 @@ ### olms
 
--   `mapbox-source`: The `id` of the Mapbox Style document's source that the
+*   `mapbox-source`: The `id` of the Mapbox Style document's source that the
     OpenLayers layer was created from. Usually `apply()` creates one
     OpenLayers layer per Mapbox Style source, unless the layer stack has
     layers from different sources in between.
--   `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
+*   `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
     included in the OpenLayers layer.
@@ -273,6 +268,6 @@
 
--   `map` **(PluggableMap | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** Either an existing OpenLayers Map
+*   `map` **(PluggableMap | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) | [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** Either an existing OpenLayers Map
     instance, or a HTML element, or the id of a HTML element that will be the
     target of a new OpenLayers Map.
--   `style` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** JSON style object or style url pointing to a
+*   `style` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** JSON style object or style url pointing to a
     Mapbox Style object. When using Mapbox APIs, the url must contain an access
@@ -302,6 +297,6 @@ token and look like
 
--   `map` **(PluggableMap | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** Either an existing OpenLayers Map
+*   `map` **(PluggableMap | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) | [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** Either an existing OpenLayers Map
     instance, or a HTML element, or the id of a HTML element that will be the
     target of a new OpenLayers Map.
--   `style` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** JSON style object or style url pointing to a
+*   `style` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) | [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** JSON style object or style url pointing to a
     Mapbox Style object. When using Mapbox APIs, the url must contain an access
@@ -331,4 +326,4 @@ token and look like
 
--   `map` **PluggableMap** OpenLayers Map.
--   `layerId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style layer id.
+*   `map` **PluggableMap** OpenLayers Map.
+*   `layerId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style layer id.
 
@@ -347,6 +342,6 @@ Returns **Layer** OpenLayers layer instance.
 
--   `map` **PluggableMap** OpenLayers Map.
--   `sourceId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style source id.
+*   `map` **PluggableMap** OpenLayers Map.
+*   `sourceId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style source id.
 
-Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;Layer>** OpenLayers layer instances.
+Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\<Layer>** OpenLayers layer instances.
 
@@ -363,4 +358,4 @@ ### getSource
 
--   `map` **PluggableMap** OpenLayers Map.
--   `sourceId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style source id.
+*   `map` **PluggableMap** OpenLayers Map.
+*   `sourceId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style source id.
 
@@ -367,0 +362,0 @@ Returns **Source** OpenLayers source instance.

src/index.js

@@ -7,21 +7,21 @@ /*
 
+import GeoJSON from 'ol/format/GeoJSON.js';
+import MVT from 'ol/format/MVT.js';
+import Map from 'ol/Map.js';
+import TileGrid from 'ol/tilegrid/TileGrid.js';
+import TileJSON from 'ol/source/TileJSON.js';
+import TileLayer from 'ol/layer/Tile.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import VectorTileLayer from 'ol/layer/VectorTile.js';
+import VectorTileSource from 'ol/source/VectorTile.js';
+import View from 'ol/View.js';
+import applyStyleFunction, {getValue} from './stylefunction.js';
+import googleFonts from 'webfont-matcher/lib/fonts/google';
 import mb2css from 'mapbox-to-css-font';
-import applyStyleFunction, {getValue} from './stylefunction';
-import googleFonts from 'webfont-matcher/lib/fonts/google';
-import {fromLonLat} from 'ol/proj';
-import {createXYZ} from 'ol/tilegrid';
-import TileGrid from 'ol/tilegrid/TileGrid';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import GeoJSON from 'ol/format/GeoJSON';
-import MVT from 'ol/format/MVT';
-import {unByKey} from 'ol/Observable';
-import TileLayer from 'ol/layer/Tile';
-import VectorLayer from 'ol/layer/Vector';
-import VectorTileLayer from 'ol/layer/VectorTile';
-import TileJSON from 'ol/source/TileJSON';
-import VectorSource from 'ol/source/Vector';
-import VectorTileSource from 'ol/source/VectorTile';
-import {Color} from '@mapbox/mapbox-gl-style-spec';
-import {assign, defaultResolutions} from './util';
+import {Color} from '@mapbox/mapbox-gl-style-spec/dist/index.es.js';
+import {assign, defaultResolutions} from './util.js';
+import {createXYZ} from 'ol/tilegrid.js';
+import {fromLonLat} from 'ol/proj.js';
+import {unByKey} from 'ol/Observable.js';
 
@@ -78,3 +78,3 @@ /**
   }
-  const googleFontDescriptions = fonts.map(function(font) {
+  const googleFontDescriptions = fonts.map(function (font) {
     const parts = mb2css(font, 1).split(' ');
@@ -87,3 +87,7 @@ return [parts.slice(3).join(' ').replace(/"/g, ''), parts[1] + parts[0]];
     if (!hasFontFamily(family) && googleFamilies.indexOf(family) !== -1) {
-      const fontUrl = 'https://fonts.googleapis.com/css?family=' + family.replace(/ /g, '+') + ':' + googleFontDescription[1];
+      const fontUrl =
+        'https://fonts.googleapis.com/css?family=' +
+        family.replace(/ /g, '+') +
+        ':' +
+        googleFontDescription[1];
       if (!document.querySelector('link[href="' + fontUrl + '"]')) {
@@ -113,5 +117,5 @@ const markup = document.createElement('link');
   const parts = url.match(spriteRegEx);
-  return parts ?
-    parts[1] + extension + (parts.length > 2 ? parts[2] : '') :
-    url + extension;
+  return parts
+    ? parts[1] + extension + (parts.length > 2 ? parts[2] : '')
+    : url + extension;
 }
@@ -152,4 +156,3 @@
 export function applyStyle(layer, glStyle, source, path, resolutions) {
-  return new Promise(function(resolve, reject) {
-
+  return new Promise(function (resolve, reject) {
     // TODO: figure out where best place to check source type is
@@ -165,3 +168,5 @@ // Note that the source arg is an array of gl layer ids and each must be
     if (!(layer instanceof VectorLayer || layer instanceof VectorTileLayer)) {
-      return reject(new Error('Can only apply to VectorLayer or VectorTileLayer'));
+      return reject(
+        new Error('Can only apply to VectorLayer or VectorTileLayer')
+      );
     }
@@ -172,3 +177,11 @@
       if (!style && (!glStyle.sprite || spriteData)) {
-        style = applyStyleFunction(layer, glStyle, source, resolutions, spriteData, spriteImageUrl, getFonts);
+        style = applyStyleFunction(
+          layer,
+          glStyle,
+          source,
+          resolutions,
+          spriteData,
+          spriteImageUrl,
+          getFonts
+        );
         if (!layer.getStyle()) {
@@ -193,4 +206,4 @@ reject(new Error(`Nothing to show for source [${source}]`));
       fetch(spriteUrl, {credentials: 'same-origin'})
-        .then(function(response) {
-          if (!response.ok && (sizeFactor !== '')) {
+        .then(function (response) {
+          if (!response.ok && sizeFactor !== '') {
             spriteUrl = toSpriteUrl(glStyle.sprite, path, '.json');
@@ -202,19 +215,29 @@ return fetch(spriteUrl, {credentials: 'same-origin'});
         })
-        .then(function(response) {
+        .then(function (response) {
           if (response.ok) {
             return response.json();
           } else {
-            reject(new Error(`Problem fetching sprite from ${spriteUrl}: ${response.statusText}`));
+            reject(
+              new Error(
+                `Problem fetching sprite from ${spriteUrl}: ${response.statusText}`
+              )
+            );
           }
         })
-        .then(function(spritesJson) {
-          if ((spritesJson === undefined)) {
+        .then(function (spritesJson) {
+          if (spritesJson === undefined) {
             return reject(new Error('No sprites found.'));
           }
           spriteData = spritesJson;
-          spriteImageUrl = toSpriteUrl(glStyle.sprite, path, sizeFactor + '.png');
+          spriteImageUrl = toSpriteUrl(
+            glStyle.sprite,
+            path,
+            sizeFactor + '.png'
+          );
           onChange();
         })
-        .catch(function(err) {
-          reject(new Error(`Sprites cannot be loaded: ${spriteUrl}: ${err.message}`));
+        .catch(function (err) {
+          reject(
+            new Error(`Sprites cannot be loaded: ${spriteUrl}: ${err.message}`)
+          );
         });
@@ -224,3 +247,2 @@ } else {
     }
-
   });
@@ -233,3 +255,3 @@ }
   const background = {
-    type: layer.type
+    type: layer.type,
   };
@@ -244,10 +266,23 @@ function updateStyle() {
     background['paint'] = paint;
-    background.id = 'olms-bg-' + paint['background-opacity'] + paint['background-color'];
+    background.id =
+      'olms-bg-' + paint['background-opacity'] + paint['background-color'];
     const zoom = map.getView().getZoom();
     if (paint['background-color'] !== undefined) {
-      const bg = getValue(background, 'paint', 'background-color', zoom, emptyObj);
+      const bg = getValue(
+        background,
+        'paint',
+        'background-color',
+        zoom,
+        emptyObj
+      );
       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
+      );
     }
@@ -274,3 +309,3 @@ if (layout.visibility == 'none') {
 export function applyBackground(map, glStyle) {
-  glStyle.layers.some(function(l) {
+  glStyle.layers.some(function (l) {
     if (l.type == 'background') {
@@ -285,3 +320,3 @@ setBackground(map, l);
   let sourceId;
-  layers.some(function(layer) {
+  layers.some(function (layer) {
     if (layer.id == ref) {
@@ -308,3 +343,3 @@ sourceId = layer.source;
     declutter: true,
-    visible: false
+    visible: false,
   });
@@ -314,12 +349,15 @@ const cacheKey = JSON.stringify(glSource);
   if (!tilejson) {
-    tilejson = tilejsonCache[cacheKey] = new TileJSON({
+    tilejson = new TileJSON({
       url: glSource.tiles ? undefined : url,
-      tileJSON: glSource.tiles ? glSource : undefined
+      tileJSON: glSource.tiles ? glSource : undefined,
     });
+    tilejsonCache[cacheKey] = tilejson;
   }
-  const key = tilejson.on('change', function() {
+  const key = tilejson.on('change', function () {
     const state = tilejson.getState();
     if (state === 'ready') {
       const tileJSONDoc = tilejson.getTileJSON();
-      const tiles = Array.isArray(tileJSONDoc.tiles) ? tileJSONDoc.tiles : [tileJSONDoc.tiles];
+      const tiles = Array.isArray(tileJSONDoc.tiles)
+        ? tileJSONDoc.tiles
+        : [tileJSONDoc.tiles];
       if (url) {
@@ -347,5 +385,5 @@ for (let i = 0, ii = tiles.length; i < ii; ++i) {
             resolutions: defaultResolutions.slice(0, maxZoom + 1),
-            tileSize: 512
+            tileSize: 512,
           }),
-          urls: tiles
+          urls: tiles,
         });
@@ -374,5 +412,5 @@ tilejson.set('ol-source', source);
     tileJSON: glSource.tiles ? glSource : undefined,
-    crossOrigin: 'anonymous'
+    crossOrigin: 'anonymous',
   });
-  const key = source.on('change', function() {
+  const key = source.on('change', function () {
     const state = source.getState();
@@ -394,5 +432,5 @@ if (state === 'ready') {
           maxZoom: maxZoom,
-          tileSize: tileSize
+          tileSize: tileSize,
         }).getResolutions(),
-        tileSize: tileSize
+        tileSize: tileSize,
       });
@@ -405,3 +443,3 @@ layer.setSource(source);
   });
-  source.setTileLoadFunction(function(tile, src) {
+  source.setTileLoadFunction(function (tile, src) {
     if (src.indexOf('{bbox-epsg-3857}') != -1) {
@@ -424,3 +462,5 @@ const bbox = source.getTileGrid().getTileCoordExtent(tile.getTileCoord());
   } else {
-    features = geoJsonFormat.readFeatures(data, {featureProjection: 'EPSG:3857'});
+    features = geoJsonFormat.readFeatures(data, {
+      featureProjection: 'EPSG:3857',
+    });
   }
@@ -432,5 +472,5 @@ return new VectorLayer({
       format: geoJsonFormat,
-      url: geoJsonUrl
+      url: geoJsonUrl,
     }),
-    visible: false
+    visible: false,
   });
@@ -450,3 +490,3 @@ }
     view = new View({
-      maxResolution: defaultResolutions[0]
+      maxResolution: defaultResolutions[0],
     });
@@ -465,3 +505,3 @@ map.setView(view);
       nearest: true,
-      size: map.getSize()
+      size: map.getSize(),
     });
@@ -473,3 +513,3 @@ }
     } else if (glStyle.sprite.indexOf('http') != 0) {
-      glStyle.sprite = (host ? (host + path) : '') + glStyle.sprite + accessToken;
+      glStyle.sprite = (host ? host + path : '') + glStyle.sprite + accessToken;
     }
@@ -503,7 +543,12 @@ }
             const mapid = url.replace('mapbox://', '');
-            glSource.tiles = ['a', 'b', 'c', 'd'].map(function(host) {
-              return 'https://' + host + '.tiles.mapbox.com/v4/' + mapid +
-                  '/{z}/{x}/{y}.' +
-                  (glSource.type == 'vector' ? 'vector.pbf' : 'png') +
-                  accessToken;
+            glSource.tiles = ['a', 'b', 'c', 'd'].map(function (host) {
+              return (
+                'https://' +
+                host +
+                '.tiles.mapbox.com/v4/' +
+                mapid +
+                '/{z}/{x}/{y}.' +
+                (glSource.type == 'vector' ? 'vector.pbf' : 'png') +
+                accessToken
+              );
             });
@@ -515,3 +560,3 @@ } else if (url.indexOf('/') === 0 && host.indexOf('http') === 0) {
         if (glSource.tiles) {
-          glSource.tiles = glSource.tiles.map(url => withPath(url, path));
+          glSource.tiles = glSource.tiles.map((url) => withPath(url, path));
         }
@@ -523,4 +568,9 @@
           layer = setupRasterLayer(glSource, url);
-          layer.setVisible(glLayer.layout ? glLayer.layout.visibility !== 'none' : true);
-          view.on('change:resolution', updateRasterLayerProperties.bind(this, glLayer, layer, view));
+          layer.setVisible(
+            glLayer.layout ? glLayer.layout.visibility !== 'none' : true
+          );
+          view.on(
+            'change:resolution',
+            updateRasterLayerProperties.bind(this, glLayer, layer, view)
+          );
           updateRasterLayerProperties(glLayer, layer, view);
@@ -587,9 +637,11 @@ } else if (glSource.type == 'geojson') {
 export default function olms(map, style) {
+  let promise,
+    accessToken = '',
+    baseUrl = '',
+    host = '',
+    path = '';
 
-  let accessToken, baseUrl, host, path, promise;
-  accessToken = baseUrl = host = path = '';
-
   if (typeof map === 'string' || map instanceof HTMLElement) {
     map = new Map({
-      target: map
+      target: map,
     });
@@ -604,11 +656,13 @@ }
     }
-    promise = new Promise(function(resolve, reject) {
+    promise = new Promise(function (resolve, reject) {
       fetch(style, {
-        credentials: 'same-origin'
+        credentials: 'same-origin',
       })
-        .then(function(response) {
+        .then(function (response) {
           return response.json();
         })
-        .then(function(glStyle) {
-          const a = /** @type {HTMLAnchorElement} */ (document.createElement('A'));
+        .then(function (glStyle) {
+          const a = /** @type {HTMLAnchorElement} */ (
+            document.createElement('A')
+          );
           a.href = style;
@@ -620,3 +674,3 @@ const href = a.href;
           processStyle(glStyle, map, baseUrl, host, path, accessToken)
-            .then(function() {
+            .then(function () {
               resolve(map);
@@ -626,3 +680,3 @@ })
         })
-        .catch(function(err) {
+        .catch(function (err) {
           reject(new Error(`Could not load ${style}: ${err.message}`));
@@ -632,5 +686,5 @@ });
   } else {
-    promise = new Promise(function(resolve, reject) {
+    promise = new Promise(function (resolve, reject) {
       processStyle(style, map)
-        .then(function() {
+        .then(function () {
           resolve(map);
@@ -669,6 +723,6 @@ })
     map = new Map({
-      target: map
+      target: map,
     });
   }
-  setTimeout(function() {
+  setTimeout(function () {
     olms(map, style);
@@ -679,5 +733,3 @@ }, 0);
 
-
 /**
- * @private
  * If layerIds is not empty, applies the style specified in glStyle to the layer,
@@ -697,2 +749,3 @@ * and adds the layer to the map.
  * been set on the specified layer, and the style has been applied.
+ * @private
  */
@@ -710,7 +763,11 @@ function finalizeLayer(layer, layerIds, glStyle, path, map) {
   }
-  return new Promise(function(resolve, reject) {
-    const setStyle = function() {
+  return new Promise(function (resolve, reject) {
+    const setStyle = function () {
       const source = layer.getSource();
       if (!source || source.getState() === 'error') {
-        reject(new Error('Error accessing data for source ' + layer.get('mapbox-source')));
+        reject(
+          new Error(
+            'Error accessing data for source ' + layer.get('mapbox-source')
+          )
+        );
         return;
@@ -723,3 +780,8 @@ }
           if (minZoom > 0 || sourceMinZoom > 0) {
-            layer.setMaxResolution(Math.min(defaultResolutions[minZoom], tileGrid.getResolution(sourceMinZoom)) + 1e-9);
+            layer.setMaxResolution(
+              Math.min(
+                defaultResolutions[minZoom],
+                tileGrid.getResolution(sourceMinZoom)
+              ) + 1e-9
+            );
           }
@@ -731,9 +793,22 @@ if (maxZoom < 24) {
       }
-      if (source instanceof VectorSource || source instanceof VectorTileSource) {
-        applyStyle(/** @type {import("ol/layer/Vector").default|import("ol/layer/VectorTile").default} */ (layer), glStyle, layerIds, path).then(function() {
-          layer.setVisible(true);
-          resolve();
-        }, function(e) {
-          reject(e);
-        });
+      if (
+        source instanceof VectorSource ||
+        source instanceof VectorTileSource
+      ) {
+        applyStyle(
+          /** @type {import("ol/layer/Vector").default|import("ol/layer/VectorTile").default} */ (
+            layer
+          ),
+          glStyle,
+          layerIds,
+          path
+        ).then(
+          function () {
+            layer.setVisible(true);
+            resolve();
+          },
+          function (e) {
+            reject(e);
+          }
+        );
       } else {
@@ -757,3 +832,2 @@ resolve();
 
-
 /**
@@ -819,5 +893,2 @@ * ```js
 
-export {
-  finalizeLayer as _finalizeLayer,
-  getFonts as _getFonts
-};
+export {finalizeLayer as _finalizeLayer, getFonts as _getFonts};

src/olms.js

@@ -1,4 +0,4 @@
-import olms, {apply, applyBackground, applyStyle} from './index';
-import stylefunction from './stylefunction';
-import {assign} from './util';
+import olms, {apply, applyBackground, applyStyle} from './index.js';
+import stylefunction from './stylefunction.js';
+import {assign} from './util.js';
 
@@ -5,0 +5,0 @@ assign(olms, {apply, applyBackground, applyStyle, stylefunction});

src/stylefunction.js

@@ -7,19 +7,27 @@ /*
 
-import Style from 'ol/style/Style';
-import Fill from 'ol/style/Fill';
-import Stroke from 'ol/style/Stroke';
-import Icon from 'ol/style/Icon';
-import Text from 'ol/style/Text';
-import Circle from 'ol/style/Circle';
-import RenderFeature from 'ol/render/Feature';
-import {derefLayers} from '@mapbox/mapbox-gl-style-spec';
+import Circle from 'ol/style/Circle.js';
+import Fill from 'ol/style/Fill.js';
+import Icon from 'ol/style/Icon.js';
+import RenderFeature from 'ol/render/Feature.js';
+import Stroke from 'ol/style/Stroke.js';
+import Style from 'ol/style/Style.js';
+import Text from 'ol/style/Text.js';
 
+import mb2css from 'mapbox-to-css-font';
 import {
-  expression, Color,
+  Color,
+  featureFilter as createFilter,
+  derefLayers,
+  expression,
   function as fn,
   latest as spec,
-  featureFilter as createFilter
-} from '@mapbox/mapbox-gl-style-spec';
-import mb2css from 'mapbox-to-css-font';
-import {deg2rad, defaultResolutions, getZoomForResolution, wrapText, applyLetterSpacing, createCanvas} from './util';
+} from '@mapbox/mapbox-gl-style-spec/dist/index.es.js';
+import {
+  applyLetterSpacing,
+  createCanvas,
+  defaultResolutions,
+  deg2rad,
+  getZoomForResolution,
+  wrapText,
+} from './util.js';
 
@@ -43,3 +51,3 @@ /**
   'Polygon': 3,
-  'MultiPolygon': 3
+  'MultiPolygon': 3,
 };
@@ -55,9 +63,16 @@ const anchor = {
   'bottom-left': [0, 1],
-  'bottom-right': [1, 1]
+  'bottom-right': [1, 1],
 };
 
-const expressionData = function(rawExpression, propertySpec) {
-  const compiledExpression = createPropertyExpression(rawExpression, propertySpec);
+const expressionData = function (rawExpression, propertySpec) {
+  const compiledExpression = createPropertyExpression(
+    rawExpression,
+    propertySpec
+  );
   if (compiledExpression.result === 'error') {
-    throw new Error(compiledExpression.value.map(err => `${err.key}: ${err.message}`).join(', '));
+    throw new Error(
+      compiledExpression.value
+        .map((err) => `${err.key}: ${err.message}`)
+        .join(', ')
+    );
   }
@@ -94,3 +109,3 @@ return compiledExpression.value;
     }
-    let isExpr = isExpression((value));
+    let isExpr = isExpression(value);
     if (!isExpr && isFunction(value)) {
@@ -102,3 +117,4 @@ value = convertFunction(value, propertySpec);
       const compiledExpression = expressionData(value, propertySpec);
-      functions[property] = compiledExpression.evaluate.bind(compiledExpression);
+      functions[property] =
+        compiledExpression.evaluate.bind(compiledExpression);
     } else {
@@ -108,3 +124,3 @@ if (propertySpec.type == 'color') {
       }
-      functions[property] = function() {
+      functions[property] = function () {
         return value;
@@ -150,4 +166,13 @@ };
     opacity = opacity === undefined ? 1 : opacity;
-    return 'rgba(' + Math.round(color.r * 255 / a) + ',' + Math.round(color.g * 255 / a) +
-      ',' + Math.round(color.b * 255 / a) + ',' + (a * opacity) + ')';
+    return (
+      'rgba(' +
+      Math.round((color.r * 255) / a) +
+      ',' +
+      Math.round((color.g * 255) / a) +
+      ',' +
+      Math.round((color.b * 255) / a) +
+      ',' +
+      a * opacity +
+      ')'
+    );
   }
@@ -242,8 +267,3 @@ return color;
  * are provided, they must be from layers that use the same source.
- * @param {Array<number>} [resolutions=[78271.51696402048, 39135.75848201024,
-   19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564,
-   1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525,
-   76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032,
-   4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395,
-   0.29858214173896974, 0.14929107086948487, 0.07464553543474244]]
+ * @param {Array<number>} [resolutions=[78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395, 0.29858214173896974, 0.14929107086948487, 0.07464553543474244]]
  * Resolutions for mapping resolution to zoom level.
@@ -264,3 +284,11 @@ * @param {Object} [spriteData=undefined] Sprite data from the url specified in
  */
-export default function(olLayer, glStyle, source, resolutions = defaultResolutions, spriteData, spriteImageUrl, getFonts) {
+export default function (
+  olLayer,
+  glStyle,
+  source,
+  resolutions = defaultResolutions,
+  spriteData,
+  spriteImageUrl,
+  getFonts
+) {
   if (typeof glStyle == 'string') {
@@ -278,3 +306,3 @@ glStyle = JSON.parse(glStyle);
       img.crossOrigin = 'anonymous';
-      img.onload = function() {
+      img.onload = function () {
         spriteImage = img;
@@ -291,6 +319,9 @@ spriteImgSize = [img.width, img.height];
         action: 'loadImage',
-        src: spriteImageUrl
+        src: spriteImageUrl,
       });
       worker.addEventListener('message', function handler(event) {
-        if (event.data.action === 'imageLoaded' && event.data.src === spriteImageUrl) {
+        if (
+          event.data.action === 'imageLoaded' &&
+          event.data.src === spriteImageUrl
+        ) {
           spriteImage = event.data.image;
@@ -303,3 +334,2 @@ spriteImgSize = [spriteImage.width, spriteImage.height];
 
-
   const allLayers = derefLayers(glStyle.layers);
@@ -313,4 +343,6 @@
     const layerId = layer.id;
-    if (typeof source == 'string' && layer.source == source ||
-        source.indexOf(layerId) !== -1) {
+    if (
+      (typeof source == 'string' && layer.source == source) ||
+      source.indexOf(layerId) !== -1
+    ) {
       const sourceLayer = layer['source-layer'];
@@ -325,3 +357,5 @@ if (!mapboxSource) {
         if (type !== 'vector' && type !== 'geojson') {
-          throw new Error(`Source "${mapboxSource}" is not of type "vector" or "geojson", but "${type}"`);
+          throw new Error(
+            `Source "${mapboxSource}" is not of type "vector" or "geojson", but "${type}"`
+          );
         }
@@ -331,7 +365,8 @@ }
       if (!layers) {
-        layers = layersBySourceLayer[sourceLayer] = [];
+        layers = [];
+        layersBySourceLayer[sourceLayer] = layers;
       }
       layers.push({
         layer: layer,
-        index: i
+        index: i,
       });
@@ -352,3 +387,3 @@ mapboxLayers.push(layerId);
 
-  const styleFunction = function(feature, resolution) {
+  const styleFunction = function (feature, resolution) {
     const properties = feature.getProperties();
@@ -366,3 +401,3 @@ const layers = layersBySourceLayer[properties.layer];
       properties: properties,
-      type: type
+      type: type,
     };
@@ -378,4 +413,7 @@ let stylesLength = -1;
       const paint = layer.paint || emptyObj;
-      if (layout.visibility === 'none' || ('minzoom' in layer && zoom < layer.minzoom) ||
-          ('maxzoom' in layer && zoom >= layer.maxzoom)) {
+      if (
+        layout.visibility === 'none' ||
+        ('minzoom' in layer && zoom < layer.minzoom) ||
+        ('maxzoom' in layer && zoom >= layer.maxzoom)
+      ) {
         continue;
@@ -388,17 +426,33 @@ }
         const index = layerData.index;
-        if (type == 3 && (layer.type == 'fill' || layer.type == 'fill-extrusion')) {
+        if (
+          type == 3 &&
+          (layer.type == 'fill' || layer.type == 'fill-extrusion')
+        ) {
           opacity = getValue(layer, 'paint', layer.type + '-opacity', zoom, f);
           if (layer.type + '-pattern' in paint) {
-            const fillIcon = getValue(layer, 'paint', layer.type + '-pattern', zoom, f);
+            const fillIcon = getValue(
+              layer,
+              'paint',
+              layer.type + '-pattern',
+              zoom,
+              f
+            );
             if (fillIcon) {
-              const icon = typeof fillIcon === 'string'
-                ? fromTemplate(fillIcon, properties)
-                : fillIcon.toString();
+              const icon =
+                typeof fillIcon === 'string'
+                  ? fromTemplate(fillIcon, properties)
+                  : fillIcon.toString();
               if (spriteImage && spriteData && spriteData[icon]) {
                 ++stylesLength;
                 style = styles[stylesLength];
-                if (!style || !style.getFill() || style.getStroke() || style.getText()) {
-                  style = styles[stylesLength] = new Style({
-                    fill: new Fill()
+                if (
+                  !style ||
+                  !style.getFill() ||
+                  style.getStroke() ||
+                  style.getText()
+                ) {
+                  style = new Style({
+                    fill: new Fill(),
                   });
+                  styles[stylesLength] = style;
                 }
@@ -411,4 +465,9 @@ fill = style.getFill();
                   const spriteImageData = spriteData[icon];
-                  const canvas = createCanvas(spriteImageData.width, spriteImageData.height);
-                  const ctx = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'));
+                  const canvas = createCanvas(
+                    spriteImageData.width,
+                    spriteImageData.height
+                  );
+                  const ctx = /** @type {CanvasRenderingContext2D} */ (
+                    canvas.getContext('2d')
+                  );
                   ctx.globalAlpha = opacity;
@@ -433,6 +492,18 @@ ctx.drawImage(
           } else {
-            color = colorWithOpacity(getValue(layer, 'paint', layer.type + '-color', zoom, f), opacity);
+            color = colorWithOpacity(
+              getValue(layer, 'paint', layer.type + '-color', zoom, f),
+              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
+                  ),
+                  opacity
+                );
               }
@@ -444,7 +515,12 @@ if (!strokeColor) {
               style = styles[stylesLength];
-              if (!style || !(style.getFill() && style.getStroke()) || style.getText()) {
-                style = styles[stylesLength] = new Style({
+              if (
+                !style ||
+                !(style.getFill() && style.getStroke()) ||
+                style.getText()
+              ) {
+                style = new Style({
                   fill: new Fill(),
-                  stroke: new Stroke()
+                  stroke: new Stroke(),
                 });
+                styles[stylesLength] = style;
               }
@@ -461,5 +537,9 @@ fill = style.getFill();
         if (type != 1 && layer.type == 'line') {
-          color = !('line-pattern' in paint) && 'line-color' in paint ?
-            colorWithOpacity(getValue(layer, 'paint', 'line-color', zoom, f), getValue(layer, 'paint', 'line-opacity', zoom, f)) :
-            undefined;
+          color =
+            !('line-pattern' in paint) && 'line-color' in paint
+              ? colorWithOpacity(
+                  getValue(layer, 'paint', 'line-color', zoom, f),
+                  getValue(layer, 'paint', 'line-opacity', zoom, f)
+                )
+              : undefined;
           const width = getValue(layer, 'paint', 'line-width', zoom, f);
@@ -469,6 +549,12 @@ if (color && width > 0) {
             style = styles[stylesLength];
-            if (!style || !style.getStroke() || style.getFill() || style.getText()) {
-              style = styles[stylesLength] = new Style({
-                stroke: new Stroke()
+            if (
+              !style ||
+              !style.getStroke() ||
+              style.getFill() ||
+              style.getText()
+            ) {
+              style = new Style({
+                stroke: new Stroke(),
               });
+              styles[stylesLength] = style;
             }
@@ -478,9 +564,16 @@ stroke = style.getStroke();
             stroke.setLineJoin(getValue(layer, 'layout', 'line-join', zoom, f));
-            stroke.setMiterLimit(getValue(layer, 'layout', 'line-miter-limit', zoom, f));
+            stroke.setMiterLimit(
+              getValue(layer, 'layout', 'line-miter-limit', zoom, f)
+            );
             stroke.setColor(color);
             stroke.setWidth(width);
-            stroke.setLineDash(paint['line-dasharray'] ?
-              getValue(layer, 'paint', 'line-dasharray', zoom, f).map(function(x) {
-                return x * width;
-              }) : null);
+            stroke.setLineDash(
+              paint['line-dasharray']
+                ? getValue(layer, 'paint', 'line-dasharray', zoom, f).map(
+                    function (x) {
+                      return x * width;
+                    }
+                  )
+                : null
+            );
             style.setZIndex(index);
@@ -497,8 +590,15 @@ }
           if (iconImage) {
-            icon = typeof iconImage === 'string'
-              ? fromTemplate(iconImage, properties)
-              : iconImage.toString();
+            icon =
+              typeof iconImage === 'string'
+                ? fromTemplate(iconImage, properties)
+                : iconImage.toString();
             let styleGeom = undefined;
             if (spriteImage && spriteData && spriteData[icon]) {
-              const iconRotationAlignment = getValue(layer, 'layout', 'icon-rotation-alignment', zoom, f);
+              const iconRotationAlignment = getValue(
+                layer,
+                'layout',
+                'icon-rotation-alignment',
+                zoom,
+                f
+              );
               if (type == 2) {
@@ -509,12 +609,23 @@ const geom = feature.getGeometry();
                   const extent = geom.getExtent();
-                  const size = Math.sqrt(Math.max(
-                    Math.pow((extent[2] - extent[0]) / resolution, 2),
-                    Math.pow((extent[3] - extent[1]) / resolution, 2))
+                  const size = Math.sqrt(
+                    Math.max(
+                      Math.pow((extent[2] - extent[0]) / resolution, 2),
+                      Math.pow((extent[3] - extent[1]) / resolution, 2)
+                    )
                   );
                   if (size > 150) {
                     //FIXME Do not hard-code a size of 150
-                    const midpoint = geom.getType() === 'MultiLineString' ? geom.getFlatMidpoints() : geom.getFlatMidpoint();
+                    const midpoint =
+                      geom.getType() === 'MultiLineString'
+                        ? geom.getFlatMidpoints()
+                        : geom.getFlatMidpoint();
                     if (!renderFeature) {
                       renderFeatureCoordinates = [NaN, NaN];
-                      renderFeature = new RenderFeature('Point', renderFeatureCoordinates, [], {}, null);
+                      renderFeature = new RenderFeature(
+                        'Point',
+                        renderFeatureCoordinates,
+                        [],
+                        {},
+                        null
+                      );
                     }
@@ -524,7 +635,20 @@ styleGeom = renderFeature;
                     renderFeatureCoordinates[1] = midpoint[1];
-                    const placement = getValue(layer, 'layout', 'symbol-placement', zoom, f);
-                    if (placement === 'line' && iconRotationAlignment === 'map') {
+                    const placement = getValue(
+                      layer,
+                      'layout',
+                      'symbol-placement',
+                      zoom,
+                      f
+                    );
+                    if (
+                      placement === 'line' &&
+                      iconRotationAlignment === 'map'
+                    ) {
                       const stride = geom.getStride();
                       const coordinates = geom.getFlatCoordinates();
-                      for (let i = 0, ii = coordinates.length - stride; i < ii; i += stride) {
+                      for (
+                        let i = 0, ii = coordinates.length - stride;
+                        i < ii;
+                        i += stride
+                      ) {
                         const x1 = coordinates[i];
@@ -538,4 +662,8 @@ const y1 = coordinates[i + 1];
                         const maxY = Math.max(y1, y2);
-                        if (midpoint[0] >= minX && midpoint[0] <= maxX &&
-                            midpoint[1] >= minY && midpoint[1] <= maxY) {
+                        if (
+                          midpoint[0] >= minX &&
+                          midpoint[0] <= maxX &&
+                          midpoint[1] >= minY &&
+                          midpoint[1] <= maxY
+                        ) {
                           placementAngle = Math.atan2(y1 - y2, x2 - x1);
@@ -550,4 +678,13 @@ break;
               if (type !== 2 || styleGeom) {
-                const iconSize = getValue(layer, 'layout', 'icon-size', zoom, f);
-                const iconColor = paint['icon-color'] !== undefined ? getValue(layer, 'paint', 'icon-color', zoom, f) : null;
+                const iconSize = getValue(
+                  layer,
+                  'layout',
+                  'icon-size',
+                  zoom,
+                  f
+                );
+                const iconColor =
+                  paint['icon-color'] !== undefined
+                    ? getValue(layer, 'paint', 'icon-color', zoom, f)
+                    : null;
                 if (!iconColor || iconColor.a !== 0) {
@@ -563,4 +700,9 @@ let icon_cache_key = icon + '.' + iconSize;
                       // cut out the sprite and color it
-                      const canvas = createCanvas(spriteImageData.width, spriteImageData.height);
-                      const ctx = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'));
+                      const canvas = createCanvas(
+                        spriteImageData.width,
+                        spriteImageData.height
+                      );
+                      const ctx = /** @type {CanvasRenderingContext2D} */ (
+                        canvas.getContext('2d')
+                      );
                       ctx.drawImage(
@@ -577,9 +719,14 @@ spriteImage,
                       );
-                      const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                      const data = ctx.getImageData(
+                        0,
+                        0,
+                        canvas.width,
+                        canvas.height
+                      );
                       for (let c = 0, cc = data.data.length; c < cc; c += 4) {
                         const a = iconColor.a;
                         if (a !== 0) {
-                          data.data[c] = iconColor.r * 255 / a;
-                          data.data[c + 1] = iconColor.g * 255 / a;
-                          data.data[c + 2] = iconColor.b * 255 / a;
+                          data.data[c] = (iconColor.r * 255) / a;
+                          data.data[c + 1] = (iconColor.g * 255) / a;
+                          data.data[c + 2] = (iconColor.b * 255) / a;
                         }
@@ -589,9 +736,10 @@ data.data[c + 3] = a;
                       ctx.putImageData(data, 0, 0);
-                      iconImg = iconImageCache[icon_cache_key] = new Icon({
+                      iconImg = new Icon({
                         img: canvas,
                         imgSize: [canvas.width, canvas.height],
-                        scale: iconSize / spriteImageData.pixelRatio
+                        scale: iconSize / spriteImageData.pixelRatio,
                       });
+                      iconImageCache[icon_cache_key] = iconImg;
                     } else {
-                      iconImg = iconImageCache[icon_cache_key] = new Icon({
+                      iconImg = new Icon({
                         img: spriteImage,
@@ -602,4 +750,5 @@ imgSize: spriteImgSize,
                         rotateWithView: iconRotationAlignment === 'map',
-                        scale: iconSize / spriteImageData.pixelRatio
+                        scale: iconSize / spriteImageData.pixelRatio,
                       });
+                      iconImageCache[icon_cache_key] = iconImg;
                     }
@@ -611,9 +760,22 @@ }
                   style = styles[stylesLength];
-                  if (!style || !style.getImage() || style.getFill() || style.getStroke()) {
-                    style = styles[stylesLength] = new Style();
+                  if (
+                    !style ||
+                    !style.getImage() ||
+                    style.getFill() ||
+                    style.getStroke()
+                  ) {
+                    style = new Style();
+                    styles[stylesLength] = style;
                   }
                   style.setGeometry(styleGeom);
-                  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)]);
+                  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)]
+                  );
                   style.setImage(iconImg);
@@ -636,23 +798,59 @@ text = style.getText();
           style = styles[stylesLength];
-          if (!style || !style.getImage() || style.getFill() || style.getStroke()) {
-            style = styles[stylesLength] = new Style();
+          if (
+            !style ||
+            !style.getImage() ||
+            style.getFill() ||
+            style.getStroke()
+          ) {
+            style = new Style();
+            styles[stylesLength] = style;
           }
-          const circleRadius = getValue(layer, 'paint', 'circle-radius', zoom, f);
-          const circleStrokeColor = colorWithOpacity(getValue(layer, 'paint', 'circle-stroke-color', zoom, f), getValue(layer, 'paint', 'circle-stroke-opacity', zoom, f));
-          const circleColor = colorWithOpacity(getValue(layer, 'paint', 'circle-color', zoom, f), getValue(layer, 'paint', 'circle-opacity', zoom, f));
-          const circleStrokeWidth = getValue(layer, 'paint', 'circle-stroke-width', zoom, f);
-          const cache_key = circleRadius + '.' + circleStrokeColor + '.' +
-            circleColor + '.' + circleStrokeWidth;
+          const circleRadius = getValue(
+            layer,
+            'paint',
+            'circle-radius',
+            zoom,
+            f
+          );
+          const circleStrokeColor = colorWithOpacity(
+            getValue(layer, 'paint', 'circle-stroke-color', zoom, f),
+            getValue(layer, 'paint', 'circle-stroke-opacity', zoom, f)
+          );
+          const circleColor = colorWithOpacity(
+            getValue(layer, 'paint', 'circle-color', zoom, f),
+            getValue(layer, 'paint', 'circle-opacity', zoom, f)
+          );
+          const circleStrokeWidth = getValue(
+            layer,
+            'paint',
+            'circle-stroke-width',
+            zoom,
+            f
+          );
+          const cache_key =
+            circleRadius +
+            '.' +
+            circleStrokeColor +
+            '.' +
+            circleColor +
+            '.' +
+            circleStrokeWidth;
           iconImg = iconImageCache[cache_key];
           if (!iconImg) {
-            iconImg = iconImageCache[cache_key] = new Circle({
+            iconImg = new Circle({
               radius: circleRadius,
-              stroke: circleStrokeColor && circleStrokeWidth > 0 ? new Stroke({
-                width: circleStrokeWidth,
-                color: circleStrokeColor
-              }) : undefined,
-              fill: circleColor ? new Fill({
-                color: circleColor
-              }) : undefined
+              stroke:
+                circleStrokeColor && circleStrokeWidth > 0
+                  ? new Stroke({
+                      width: circleStrokeWidth,
+                      color: circleStrokeColor,
+                    })
+                  : undefined,
+              fill: circleColor
+                ? new Fill({
+                    color: circleColor,
+                  })
+                : undefined,
             });
+            iconImageCache[cache_key] = iconImg;
           }
@@ -669,3 +867,9 @@ style.setImage(iconImg);
         if ('text-field' in layout) {
-          const textField = getValue(layer, 'layout', 'text-field', zoom, f).toString();
+          const textField = getValue(
+            layer,
+            'layout',
+            'text-field',
+            zoom,
+            f
+          ).toString();
           label = fromTemplate(textField, properties).trim();
@@ -678,4 +882,10 @@ opacity = getValue(layer, 'paint', 'text-opacity', zoom, f);
             style = styles[stylesLength];
-            if (!style || !style.getText() || style.getFill() || style.getStroke()) {
-              style = styles[stylesLength] = new Style();
+            if (
+              !style ||
+              !style.getText() ||
+              style.getFill() ||
+              style.getStroke()
+            ) {
+              style = new Style();
+              styles[stylesLength] = style;
             }
@@ -686,11 +896,26 @@ style.setImage(undefined);
           if (!style.getText()) {
-            style.setText(text || new Text({
-              padding: [2, 2, 2, 2]
-            }));
+            style.setText(
+              text ||
+                new Text({
+                  padding: [2, 2, 2, 2],
+                })
+            );
           }
           text = style.getText();
-          const textSize = Math.round(getValue(layer, 'layout', 'text-size', zoom, f));
+          const textSize = Math.round(
+            getValue(layer, 'layout', 'text-size', zoom, f)
+          );
           const fontArray = getValue(layer, 'layout', 'text-font', zoom, f);
-          const textLineHeight = getValue(layer, 'layout', 'text-line-height', zoom, f);
-          const font = mb2css(getFonts ? getFonts(fontArray) : fontArray, textSize, textLineHeight);
+          const textLineHeight = getValue(
+            layer,
+            'layout',
+            'text-line-height',
+            zoom,
+            f
+          );
+          const font = mb2css(
+            getFonts ? getFonts(fontArray) : fontArray,
+            textSize,
+            textLineHeight
+          );
           const textTransform = layout['text-transform'];
@@ -702,14 +927,46 @@ if (textTransform == 'uppercase') {
           }
-          const maxTextWidth = getValue(layer, 'layout', 'text-max-width', zoom, f);
-          const letterSpacing = getValue(layer, 'layout', 'text-letter-spacing', zoom, f);
-          const wrappedLabel = type == 2 ? applyLetterSpacing(label, letterSpacing) : wrapText(label, font, maxTextWidth, letterSpacing);
+          const maxTextWidth = getValue(
+            layer,
+            'layout',
+            'text-max-width',
+            zoom,
+            f
+          );
+          const letterSpacing = getValue(
+            layer,
+            'layout',
+            'text-letter-spacing',
+            zoom,
+            f
+          );
+          const wrappedLabel =
+            type == 2
+              ? applyLetterSpacing(label, letterSpacing)
+              : wrapText(label, font, maxTextWidth, letterSpacing);
           text.setText(wrappedLabel);
           text.setFont(font);
-          text.setRotation(deg2rad(getValue(layer, 'layout', 'text-rotate', zoom, f)));
+          text.setRotation(
+            deg2rad(getValue(layer, 'layout', 'text-rotate', zoom, f))
+          );
           const textAnchor = getValue(layer, 'layout', 'text-anchor', zoom, f);
-          const placement = (hasImage || type == 1) ? 'point' : getValue(layer, 'layout', 'symbol-placement', zoom, f);
+          const placement =
+            hasImage || type == 1
+              ? 'point'
+              : getValue(layer, 'layout', 'symbol-placement', zoom, f);
           text.setPlacement(placement);
-          let textHaloWidth = getValue(layer, 'paint', 'text-halo-width', zoom, f);
+          let textHaloWidth = getValue(
+            layer,
+            'paint',
+            'text-halo-width',
+            zoom,
+            f
+          );
           const textOffset = getValue(layer, 'layout', 'text-offset', zoom, f);
-          const textTranslate = getValue(layer, 'paint', 'text-translate', zoom, f);
+          const textTranslate = getValue(
+            layer,
+            'paint',
+            'text-translate',
+            zoom,
+            f
+          );
           // Text offset has to take halo width and line height into account
@@ -728,6 +985,16 @@ let vOffset = 0;
             text.setTextAlign(textAlign);
-            const textRotationAlignment = getValue(layer, 'layout', 'text-rotation-alignment', zoom, f);
+            const textRotationAlignment = getValue(
+              layer,
+              'layout',
+              'text-rotation-alignment',
+              zoom,
+              f
+            );
             text.setRotateWithView(textRotationAlignment == 'map');
           } else {
-            text.setMaxAngle(deg2rad(getValue(layer, 'layout', 'text-max-angle', zoom, f)) * label.length / wrappedLabel.length);
+            text.setMaxAngle(
+              (deg2rad(getValue(layer, 'layout', 'text-max-angle', zoom, f)) *
+                label.length) /
+                wrappedLabel.length
+            );
             text.setTextAlign();
@@ -739,13 +1006,25 @@ text.setRotateWithView(false);
             textBaseline = 'bottom';
-            vOffset = -textHaloWidth - (0.5 * (textLineHeight - 1)) * textSize;
+            vOffset = -textHaloWidth - 0.5 * (textLineHeight - 1) * textSize;
           } else if (textAnchor.indexOf('top') == 0) {
             textBaseline = 'top';
-            vOffset = textHaloWidth + (0.5 * (textLineHeight - 1)) * textSize;
+            vOffset = textHaloWidth + 0.5 * (textLineHeight - 1) * textSize;
           }
           text.setTextBaseline(textBaseline);
-          text.setOffsetX(textOffset[0] * textSize + hOffset + textTranslate[0]);
-          text.setOffsetY(textOffset[1] * textSize + vOffset + textTranslate[1]);
-          textColor.setColor(colorWithOpacity(getValue(layer, 'paint', 'text-color', zoom, f), opacity));
+          text.setOffsetX(
+            textOffset[0] * textSize + hOffset + textTranslate[0]
+          );
+          text.setOffsetY(
+            textOffset[1] * textSize + vOffset + textTranslate[1]
+          );
+          textColor.setColor(
+            colorWithOpacity(
+              getValue(layer, 'paint', 'text-color', zoom, f),
+              opacity
+            )
+          );
           text.setFill(textColor);
-          const haloColor = colorWithOpacity(getValue(layer, 'paint', 'text-halo-color', zoom, f), opacity);
+          const haloColor = colorWithOpacity(
+            getValue(layer, 'paint', 'text-halo-color', zoom, f),
+            opacity
+          );
           if (haloColor) {
@@ -758,3 +1037,5 @@ textHalo.setColor(haloColor);
             const halfTextSize = 0.5 * textSize;
-            textHalo.setWidth(textHaloWidth <= halfTextSize ? textHaloWidth : halfTextSize);
+            textHalo.setWidth(
+              textHaloWidth <= halfTextSize ? textHaloWidth : halfTextSize
+            );
             text.setStroke(textHalo);
@@ -764,6 +1045,15 @@ } else {
           }
-          const textPadding = getValue(layer, 'layout', 'text-padding', zoom, f);
+          const textPadding = getValue(
+            layer,
+            'layout',
+            'text-padding',
+            zoom,
+            f
+          );
           const padding = text.getPadding();
           if (textPadding !== padding[0]) {
-            padding[0] = padding[1] = padding[2] = padding[3] = textPadding;
+            padding[0] = textPadding;
+            padding[1] = textPadding;
+            padding[2] = textPadding;
+            padding[3] = textPadding;
           }
@@ -802,3 +1092,3 @@ style.setZIndex(index);
   getValue as _getValue,
-  functionCache as _functionCache
+  functionCache as _functionCache,
 };

src/util.js

@@ -1,4 +0,4 @@
-import {listen} from 'ol/events';
-import EventType from 'ol/events/EventType';
-import {labelCache} from 'ol/render/canvas';
+import EventType from 'ol/events/EventType.js';
+import {labelCache} from 'ol/render/canvas.js';
+import {listen} from 'ol/events.js';
 
@@ -17,26 +17,26 @@ /**
     ? Object.assign
-    : function(target, var_sources) {
-      if (target === undefined || target === null) {
-        throw new TypeError('Cannot convert undefined or null to object');
-      }
+    : function (target, var_sources) {
+        if (target === undefined || target === null) {
+          throw new TypeError('Cannot convert undefined or null to object');
+        }
 
-      const output = Object(target);
-      for (let i = 1, ii = arguments.length; i < ii; ++i) {
-        const source = arguments[i];
-        if (source !== undefined && source !== null) {
-          for (const key in source) {
-            if (source.hasOwnProperty(key)) {
-              output[key] = source[key];
+        const output = Object(target);
+        for (let i = 1, ii = arguments.length; i < ii; ++i) {
+          const source = arguments[i];
+          if (source !== undefined && source !== null) {
+            for (const key in source) {
+              if (source.hasOwnProperty(key)) {
+                output[key] = source[key];
+              }
             }
           }
         }
-      }
-      return output;
-    };
+        return output;
+      };
 
 export function deg2rad(degrees) {
-  return degrees * Math.PI / 180;
+  return (degrees * Math.PI) / 180;
 }
 
-export const defaultResolutions = (function() {
+export const defaultResolutions = (function () {
   const resolutions = [];
@@ -83,3 +83,6 @@ for (let res = 78271.51696402048; resolutions.length <= 24; res /= 2) {
     const lines = text.split('\n');
-    const joinSpaceString = hairSpacePool.slice(0, Math.round(letterSpacing / 0.1));
+    const joinSpaceString = hairSpacePool.slice(
+      0,
+      Math.round(letterSpacing / 0.1)
+    );
     for (let l = 0, ll = lines.length; l < ll; ++l) {
@@ -105,3 +108,6 @@ if (l > 0) {
 function measureText(text, letterSpacing) {
-  return getMeasureContext().measureText(text).width + (text.length - 1) * letterSpacing;
+  return (
+    getMeasureContext().measureText(text).width +
+    (text.length - 1) * letterSpacing
+  );
 }
@@ -112,3 +118,3 @@
   // Only available when using ES modules
-  listen(labelCache, EventType.CLEAR, function() {
+  listen(labelCache, EventType.CLEAR, function () {
     measureCache = {};
@@ -157,4 +163,6 @@ });
         if (measureText(line, letterSpacing) < maxWidth * 0.35) {
-          const prevWidth = i > 0 ? measureText(lines[i - 1], letterSpacing) : Infinity;
-          const nextWidth = i < ii - 1 ? measureText(lines[i + 1], letterSpacing) : Infinity;
+          const prevWidth =
+            i > 0 ? measureText(lines[i - 1], letterSpacing) : Infinity;
+          const nextWidth =
+            i < ii - 1 ? measureText(lines[i + 1], letterSpacing) : Infinity;
           lines.splice(i, 1);
@@ -174,4 +182,6 @@ ii -= 1;
         const next = lines[i + 1];
-        if (measureText(line, letterSpacing) > maxWidth * 0.7 &&
-            measureText(next, letterSpacing) < maxWidth * 0.6) {
+        if (
+          measureText(line, letterSpacing) > maxWidth * 0.7 &&
+          measureText(next, letterSpacing) < maxWidth * 0.6
+        ) {
           const lineWords = line.split(' ');
@@ -178,0 +188,0 @@ const lastWord = lineWords.pop();

tsconfig-typecheck.json

@@ -21,5 +21,4 @@ {
   "include": [
-    "src/**/*.js",
-    "node_modules/ol/src/**/*.js"
+    "src/**/*.js"
   ]
 }

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8156510

increased by38.19%

Number of package files

61

increased by3.39%

Lines of code

10447

increased by23.66%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

13

decreased by-7.14%

Is type module

Yes

Worsened metrics

Number of lines in readme file

366

decreased by-1.35%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@mapbox/mapbox-gl-style-spec@^13.20.1