ol-mapbox-style - npm Package Compare versions

Comparing version 5.0.0-beta.2 to 5.0.0-beta.3

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## 5.0.0-beta.3
+
+* Fix an issue with `icon-color´ handling
+* Fix an issue with parsing Google font names
+* Add support for the `icon-anchor` property
+* More efficient handling or tilejson and shared vector tile sources
+
 ## 5.0.0-beta.2
@@ -7,0 +14,0 @@

dist/geojson-inline.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{106:function(n,o,a){"use strict";a.r(o);a(56);var s=a(28);Object(s.a)("map","data/geojson-inline.json")}},[[106,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{107:function(n,o,a){"use strict";a.r(o);a(60);var s=a(36);Object(s.a)("map","data/geojson-inline.json")}},[[107,0]]]);
 //# sourceMappingURL=geojson-inline.js.map

dist/geojson.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{120:function(n,o,a){"use strict";a.r(o);a(56);var s=a(28);Object(s.a)("map","data/geojson.json")}},[[120,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{121:function(n,o,a){"use strict";a.r(o);a(60);var s=a(36);Object(s.a)("map","data/geojson.json")}},[[121,0]]]);
 //# sourceMappingURL=geojson.js.map

dist/mapbox.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{121:function(o,e,c){"use strict";c.r(e);c(56);var s=c(28),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)}},[[121,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{122:function(o,e,c){"use strict";c.r(e);c(60);var s=c(36),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)}},[[122,0]]]);
 //# sourceMappingURL=mapbox.js.map

dist/openmaptiles.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{122:function(e,s,o){"use strict";o.r(s);o(56);var t=o(28),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)}},[[122,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{123:function(e,s,o){"use strict";o.r(s);o(60);var t=o(36),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)}},[[123,0]]]);
 //# sourceMappingURL=openmaptiles.js.map

dist/stylefunction.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{123:function(e,t,a){"use strict";a.r(t);a(56);var n=a(82),s=a(80),o=a(99),r=a(68),w=a(75),c=a(69),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)})}},[[123,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{124:function(e,t,a){"use strict";a.r(t);a(60);var n=a(82),s=a(80),o=a(100),r=a(79),w=a(73),c=a(68),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)})}},[[124,0]]]);
 //# sourceMappingURL=stylefunction.js.map

dist/tilejson-vectortile.js

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

dist/tilejson.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{126:function(n,a,o){"use strict";o.r(a);o(56);var s=o(28);Object(s.a)("map","data/tilejson.json")}},[[126,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{126:function(n,a,o){"use strict";o.r(a);o(60);var s=o(36);Object(s.a)("map","data/tilejson.json")}},[[126,0]]]);
 //# sourceMappingURL=tilejson.js.map

dist/wms.js

@@ -1,2 +0,2 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{127:function(n,s,w){"use strict";w.r(s);w(56);var a=w(28);Object(a.b)("map","data/wms.json")}},[[127,0]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{127:function(n,s,w){"use strict";w.r(s);w(60);var a=w(36);Object(a.b)("map","data/wms.json")}},[[127,0]]]);
 //# sourceMappingURL=wms.js.map

index.js

@@ -27,2 +27,13 @@ /*
 
+/**
+ * @typedef {import("ol/layer/VectorTile").default} VectorTileLayer
+ * @typedef {import("ol/layer/Vector").default} VectorLayer
+ * @typedef {import("ol/PluggableMap").default} PluggableMap
+ * @typedef {import("ol/layer/Layer").default} Layer
+ * @typedef {import("ol/source/Source").default} Source
+ * @private
+ */
+
+const tilejsonCache = {};
+
 const fontFamilyRegEx = /font-family: ?([^;]*);/;
@@ -36,3 +47,3 @@ const stripQuotesRegEx = /("|')/g;
     for (let i = 0, ii = styleSheets.length; i < ii; ++i) {
-      const styleSheet = styleSheets[i];
+      const styleSheet = /** @type {CSSStyleSheet} */ (styleSheets[i]);
       try {
@@ -59,2 +70,8 @@ const cssRules = styleSheet.rules || styleSheet.cssRules;
 const googleFamilies = googleFonts.getNames();
+
+/**
+ * @private
+ * @param {Array} fonts Fonts.
+ * @return {Array} Processed fonts.
+ */
 function getFonts(fonts) {
@@ -67,3 +84,3 @@ const fontsKey = fonts.toString();
     const parts = mb2css(font, 1).split(' ');
-    return [parts.slice(3, 5).join(' ').replace(/"/g, ''), parts[1] + parts[0]];
+    return [parts.slice(3).join(' ').replace(/"/g, ''), parts[1] + parts[0]];
   });
@@ -105,2 +122,6 @@ for (let i = 0, ii = googleFontDescriptions.length; i < ii; ++i) {
 /**
+ * ```js
+ * import {applyStyle} from 'ol-mapbox-style';
+ * ```
+ *
  * Applies a style function to an `ol.layer.VectorTile` or `ol.layer.Vector`
@@ -121,3 +142,3 @@ * with an `ol.source.VectorTile` or an `ol.source.Vector`. The style function
  *
- * @param {ol.layer.VectorTile|ol.layer.Vector} layer OpenLayers layer.
+ * @param {VectorTileLayer|VectorLayer} layer OpenLayers layer.
  * @param {string|Object} glStyle Mapbox Style object.
@@ -245,3 +266,3 @@ * @param {string|Array<string>} source `source` key or an array of layer `id`s from the
  * Applies properties of the Mapbox Style's first `background` layer to the map.
- * @param {ol.Map} map OpenLayers Map.
+ * @param {PluggableMap} map OpenLayers Map.
  * @param {Object} glStyle Mapbox Style object.
@@ -295,6 +316,10 @@ */
   });
-  const tilejson = new TileJSON({
-    url: glSource.tiles ? undefined : url,
-    tileJSON: glSource.tiles ? glSource : undefined
-  });
+  const cacheKey = JSON.stringify(glSource);
+  let tilejson = tilejsonCache[cacheKey];
+  if (!tilejson) {
+    tilejson = tilejsonCache[cacheKey] = new TileJSON({
+      url: glSource.tiles ? undefined : url,
+      tileJSON: glSource.tiles ? glSource : undefined
+    });
+  }
   const key = tilejson.on('change', function() {
@@ -317,17 +342,22 @@ const state = tilejson.getState();
       const maxZoom = tileJSONDoc.maxzoom || 22;
-      const source = new VectorTileSource({
-        attributions: tilejson.getAttributions(),
-        format: new MVT(),
-        tileGrid: new TileGrid({
-          origin: tileGrid.getOrigin(),
-          extent: extent || tileGrid.getExtent(),
-          minZoom: minZoom,
-          resolutions: defaultResolutions.slice(0, maxZoom + 1),
-          tileSize: 512
-        }),
-        urls: tiles
-      });
+      let source = tilejson.get('ol-source');
+      if (source === undefined) {
+        source = new VectorTileSource({
+          attributions: tilejson.getAttributions(),
+          format: new MVT(),
+          tileGrid: new TileGrid({
+            origin: tileGrid.getOrigin(0),
+            extent: extent || tileGrid.getExtent(),
+            minZoom: minZoom,
+            resolutions: defaultResolutions.slice(0, maxZoom + 1),
+            tileSize: 512
+          }),
+          urls: tiles
+        });
+        tilejson.set('ol-source', source);
+      }
       unByKey(key);
       layer.setSource(source);
     } else if (state === 'error') {
+      tilejson.set('ol-source', null);
       unByKey(key);
@@ -337,3 +367,3 @@ layer.setSource(undefined);
   });
-  if (glSource.tiles) {
+  if (tilejson.getState() === 'ready') {
     tilejson.changed();
@@ -356,3 +386,3 @@ }
       unByKey(key);
-      const tileJSONDoc = source.getTileJSON();
+      const tileJSONDoc = /** @type {Object} */ (source.getTileJSON());
       const extent = extentFromTileJSON(tileJSONDoc);
@@ -365,3 +395,3 @@ const tileGrid = source.getTileGrid();
       source.tileGrid = new TileGrid({
-        origin: tileGrid.getOrigin(),
+        origin: tileGrid.getOrigin(0),
         extent: extent || tileGrid.getExtent(),
@@ -386,3 +416,4 @@ minZoom: minZoom,
     }
-    tile.getImage().src = src;
+    const img = /** @type {import("ol/ImageTile").default} */ (tile).getImage();
+    /** @type {HTMLImageElement} */ (img).src = src;
   });
@@ -522,3 +553,3 @@ return layer;
  *
- * @param {ol.Map|HTMLElement|string} map Either an existing OpenLayers Map
+ * @param {PluggableMap|HTMLElement|string} map Either an existing OpenLayers Map
  * instance, or a HTML element, or the id of a HTML element that will be the
@@ -545,3 +576,3 @@ * target of a new OpenLayers Map.
 
-  if (!(map instanceof Map)) {
+  if (typeof map === 'string' || map instanceof HTMLElement) {
     map = new Map({
@@ -566,3 +597,3 @@ target: map
         .then(function(glStyle) {
-          const a = document.createElement('A');
+          const a = /** @type {HTMLAnchorElement} */ (document.createElement('A'));
           a.href = style;
@@ -600,5 +631,5 @@ const href = a.href;
  * ```
- * Like `olms`, but returns an `ol.Map` instance instead of a `Promise`.
+ * Like `olms`, but returns an `ol/Map` instance instead of a `Promise`.
  *
- * @param {ol.Map|HTMLElement|string} map Either an existing OpenLayers Map
+ * @param {PluggableMap|HTMLElement|string} map Either an existing OpenLayers Map
  * instance, or a HTML element, or the id of a HTML element that will be the
@@ -615,7 +646,7 @@ * target of a new OpenLayers Map.
  * is loaded and parsed.
- * @return {ol.Map} The OpenLayers Map instance that will be populated with the
+ * @return {PluggableMap} The OpenLayers Map instance that will be populated with the
  * contents described in the Mapbox Style object.
  */
 export function apply(map, style) {
-  if (!(map instanceof Map)) {
+  if (typeof map === 'string' || map instanceof HTMLElement) {
     map = new Map({
@@ -640,3 +671,3 @@ target: map
  *
- * @param {ol.layer.Layer} layer An OpenLayers layer instance.
+ * @param {Layer} layer An OpenLayers layer instance.
  * @param {Array<string>} layerIds Array containing layer ids of already-processed layers.
@@ -646,3 +677,3 @@ * @param {Object} glStyle Style as a JSON object.
  * when a relative path is used with the `"sprite"` property of the style.
- * @param {ol.Map} map OpenLayers Map.
+ * @param {PluggableMap} map OpenLayers Map.
  * @return {Promise} Returns a promise that resolves after the source has
@@ -682,3 +713,3 @@ * been set on the specified layer, and the style has been applied.
       if (source instanceof VectorSource || source instanceof VectorTileSource) {
-        applyStyle(layer, glStyle, layerIds, path).then(function() {
+        applyStyle(/** @type {import("ol/layer/Vector").default|import("ol/layer/VectorTile").default} */ (layer), glStyle, layerIds, path).then(function() {
           layer.setVisible(true);
@@ -715,5 +746,5 @@ resolve();
  * OpenLayers layer instance when they use the same Mapbox Style `source`.
- * @param {ol.Map} map OpenLayers Map.
+ * @param {PluggableMap} map OpenLayers Map.
  * @param {string} layerId Mapbox Style layer id.
- * @return {ol.layer.Layer} OpenLayers layer instance.
+ * @return {Layer} OpenLayers layer instance.
  */
@@ -725,3 +756,3 @@ export function getLayer(map, layerId) {
     if (mapboxLayers && mapboxLayers.indexOf(layerId) !== -1) {
-      return layers[i];
+      return /** @type {Layer} */ (layers[i]);
     }
@@ -736,5 +767,5 @@ }
  * Get the OpenLayers layer instances for the provided Mapbox Style `source`.
- * @param {ol.Map} map OpenLayers Map.
+ * @param {PluggableMap} map OpenLayers Map.
  * @param {string} sourceId Mapbox Style source id.
- * @return {Array<ol.layer.Layer>} OpenLayers layer instances.
+ * @return {Array<Layer>} OpenLayers layer instances.
  */
@@ -746,3 +777,3 @@ export function getLayers(map, sourceId) {
     if (layers[i].get('mapbox-source') === sourceId) {
-      result.push(layers[i]);
+      result.push(/** @type {Layer} */ (layers[i]));
     }
@@ -758,5 +789,5 @@ }
  * Get the OpenLayers source instance for the provided Mapbox Style `source`.
- * @param {ol.Map} map OpenLayers Map.
+ * @param {PluggableMap} map OpenLayers Map.
  * @param {string} sourceId Mapbox Style source id.
- * @return {ol.source.Source} OpenLayers source instance.
+ * @return {Source} OpenLayers source instance.
  */
@@ -766,3 +797,3 @@ export function getSource(map, sourceId) {
   for (let i = 0, ii = layers.length; i < ii; ++i) {
-    const source = layers[i].getSource();
+    const source = /** @type {Layer} */ (layers[i]).getSource();
     if (layers[i].get('mapbox-source') === sourceId) {
@@ -769,0 +800,0 @@ return source;

olms.js

 import olms, {apply, applyBackground, applyStyle} from './index';
 import stylefunction from './stylefunction';
 
-olms.apply = apply;
-olms.applyBackground = applyBackground;
-olms.applyStyle = applyStyle;
-olms.stylefunction = stylefunction;
+const exports = /** @type {Object} */ (olms);
+exports.apply = apply;
+exports.applyBackground = applyBackground;
+exports.applyStyle = applyStyle;
+exports.stylefunction = stylefunction;
 
-export default olms;
+export default exports;

package.json

 {
   "name": "ol-mapbox-style",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.3",
   "description": "Create OpenLayers maps from Mapbox Style objects",
@@ -23,6 +23,7 @@ "main": "index.js",
     "build": "webpack-cli --mode=production --config ./webpack.config.olms.js && webpack-cli --mode=production",
-    "doc": "documentation readme -s API index.js",
+    "doc": "documentation readme -s API index.js stylefunction.js --document-exported true",
     "karma": "karma start test/karma.conf.js",
     "lint": "eslint test example *.js",
-    "pretest": "npm run lint",
+    "typecheck": "tsc --project tsconfig-typecheck.json",
+    "pretest": "npm run lint && npm run typecheck",
     "test": "npm run karma -- --single-run --log-level error"
@@ -39,2 +40,3 @@ },
   "devDependencies": {
+    "@types/node": "^12.0.8",
     "babel-loader": "^8.0.5",
@@ -46,3 +48,3 @@ "buble": "^0.19.6",
     "deep-freeze": "0.0.1",
-    "documentation": "^9.1.1",
+    "documentation": "^11.0.1",
     "eslint": "^5.13.0",
@@ -60,3 +62,3 @@ "eslint-config-openlayers": "^11.0.0",
     "mocha": "^5.2.0",
-    "ol": "^6.0.0-beta.7",
+    "ol": "^6.0.0-beta.8",
     "puppeteer": "^1.12.2",
@@ -66,2 +68,3 @@ "should": "^13.2.3",
     "style-loader": "^0.23.1",
+    "typescript": "^3.5.2",
     "webpack": "^4.29.3",
@@ -68,0 +71,0 @@ "webpack-cli": "^3.2.3",

README.md

@@ -69,15 +69,15 @@ # ol-mapbox-style
     -   [Parameters](#parameters)
+-   [stylefunction](#stylefunction)
+    -   [Parameters](#parameters-1)
 -   [applyBackground](#applybackground)
-    -   [Parameters](#parameters-1)
+    -   [Parameters](#parameters-2)
 -   [olms](#olms)
-    -   [Parameters](#parameters-2)
+    -   [Parameters](#parameters-3)
 -   [apply](#apply)
-    -   [Parameters](#parameters-3)
+    -   [Parameters](#parameters-4)
 -   [getLayer](#getlayer)
-    -   [Parameters](#parameters-4)
+    -   [Parameters](#parameters-5)
 -   [getLayers](#getlayers)
-    -   [Parameters](#parameters-5)
+    -   [Parameters](#parameters-6)
 -   [getSource](#getsource)
-    -   [Parameters](#parameters-6)
--   [stylefunction](#stylefunction)
     -   [Parameters](#parameters-7)
@@ -87,2 +87,6 @@
 
+```js
+import {applyStyle} from 'ol-mapbox-style';
+```
+
 Applies a style function to an `ol.layer.VectorTile` or `ol.layer.Vector`
@@ -105,3 +109,3 @@ with an `ol.source.VectorTile` or an `ol.source.Vector`. The style function
 
--   `layer` **(ol.layer.VectorTile | ol.layer.Vector)** OpenLayers layer.
+-   `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.
@@ -119,2 +123,54 @@ -   `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
 
+### stylefunction
+
+```js
+import stylefunction from 'ol-mapbox-style/stylefunction';
+```
+
+Creates a style function from the `glStyle` object for all layers that use
+the specified `source`, which needs to be a `"type": "vector"` or
+`"type": "geojson"` source and applies it to the specified OpenLayers layer.
+
+Two additional properties will be set on the provided layer:
+
+-   `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
+    included in the OpenLayers layer.
+
+#### Parameters
+
+-   `olLayer` **(VectorLayer | VectorTileLayer)** OpenLayers layer to
+    apply the style to. In addition to the style, the layer will get two
+    properties: `mapbox-source` will be the `id` of the `glStyle`'s source used
+    for the layer, and `mapbox-layers` will be an array of the `id`s of the
+    `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)<[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)<[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
+    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)<[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
+    is available. Font names are the names used in the Mapbox Style object. If
+    not provided, the font stack will be used as-is. This function can also be
+    used for loading web fonts. (optional, default `undefined`)
+
+Returns **StyleFunction** Style function for use in
+`ol.layer.Vector` or `ol.layer.VectorTile`.
+
 ### applyBackground
@@ -130,3 +186,3 @@
 
--   `map` **ol.Map** OpenLayers Map.
+-   `map` **PluggableMap** OpenLayers Map.
 -   `glStyle` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Mapbox Style object.
@@ -163,3 +219,3 @@
 
--   `map` **(ol.Map | [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
@@ -188,7 +244,7 @@ target of a new OpenLayers Map.
 
-Like `olms`, but returns an `ol.Map` instance instead of a `Promise`.
+Like `olms`, but returns an `ol/Map` instance instead of a `Promise`.
 
 #### Parameters
 
--   `map` **(ol.Map | [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
@@ -206,3 +262,3 @@ target of a new OpenLayers Map.
 
-Returns **ol.Map** The OpenLayers Map instance that will be populated with the
+Returns **PluggableMap** The OpenLayers Map instance that will be populated with the
 contents described in the Mapbox Style object.
@@ -222,6 +278,6 @@
 
--   `map` **ol.Map** OpenLayers Map.
+-   `map` **PluggableMap** OpenLayers Map.
 -   `layerId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style layer id.
 
-Returns **ol.layer.Layer** OpenLayers layer instance.
+Returns **Layer** OpenLayers layer instance.
 
@@ -238,6 +294,6 @@ ### getLayers
 
--   `map` **ol.Map** OpenLayers Map.
+-   `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)<ol.layer.Layer>** OpenLayers layer instances.
+Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<Layer>** OpenLayers layer instances.
 
@@ -254,59 +310,7 @@ ### getSource
 
--   `map` **ol.Map** OpenLayers Map.
+-   `map` **PluggableMap** OpenLayers Map.
 -   `sourceId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style source id.
 
-Returns **ol.source.Source** OpenLayers source instance.
+Returns **Source** OpenLayers source instance.
 
-### stylefunction
-
-```js
-import stylefunction from 'ol-mapbox-style/stylefunction';
-```
-
-Creates a style function from the `glStyle` object for all layers that use
-the specified `source`, which needs to be a `"type": "vector"` or
-`"type": "geojson"` source and applies it to the specified OpenLayers layer.
-
-Two additional properties will be set on the provided layer:
-
--   `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
-    included in the OpenLayers layer.
-
-#### Parameters
-
--   `olLayer` **(ol.layer.Vector | ol.layer.VectorTile)** OpenLayers layer to
-    apply the style to. In addition to the style, the layer will get two
-    properties: `mapbox-source` will be the `id` of the `glStyle`'s source used
-    for the layer, and `mapbox-layers` will be an array of the `id`s of the
-    `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)<[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)<[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
-    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)<[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
-    is available. Font names are the names used in the Mapbox Style object. If
-    not provided, the font stack will be used as-is. This function can also be
-    used for loading web fonts. (optional, default `undefined`)
-
-Returns **ol.style.StyleFunction** Style function for use in
-`ol.layer.Vector` or `ol.layer.VectorTile`.
-
 ## Building the library
@@ -313,0 +317,0 @@

stylefunction.js

@@ -24,2 +24,8 @@ /*
 
+/**
+ * @typedef {import("ol/layer/Vector").default} VectorLayer
+ * @typedef {import("ol/layer/VectorTile").default} VectorTileLayer
+ * @typedef {import("ol/style/Style").StyleFunction} StyleFunction
+ */
+
 const isFunction = fn.isFunction;
@@ -38,2 +44,13 @@ const convertFunction = fn.convertFunction;
 };
+const anchor = {
+  'center': [0.5, 0.5],
+  'left': [0, 0.5],
+  'right': [1, 0.5],
+  'top': [0.5, 0],
+  'bottom': [0.5, 1],
+  'top-left': [0, 0],
+  'top-right': [1, 0],
+  'bottom-left': [0, 1],
+  'bottom-right': [1, 1]
+};
 
@@ -50,2 +67,3 @@ const expressionData = function(rawExpression, propertySpec) {
 const zoomObj = {zoom: 0};
+/** @private */
 const functionCache = {};
@@ -96,3 +114,13 @@ let renderFeatureCoordinates, renderFeature;
 
+/** @private */
 const filterCache = {};
+
+/**
+ * @private
+ * @param {string} layerId Layer id.
+ * @param {?} filter Filter.
+ * @param {Object} feature Feature.
+ * @param {number} zoom Zoom.
+ * @return {boolean} Filter result.
+ */
 function evaluateFilter(layerId, filter, feature, zoom) {
@@ -106,2 +134,8 @@ if (!(layerId in filterCache)) {
 
+/**
+ * @private
+ * @param {?} color Color.
+ * @param {number} opacity Opacity.
+ * @return {string} Color.
+ */
 function colorWithOpacity(color, opacity) {
@@ -121,2 +155,9 @@ if (color) {
 const templateRegEx = /^([^]*)\{(.*)\}([^]*)$/;
+
+/**
+ * @private
+ * @param {string} text Text.
+ * @param {Object} properties Properties.
+ * @return {string} Text.
+ */
 function fromTemplate(text, properties) {
@@ -151,3 +192,3 @@ let parts;
  *
- * @param {ol.layer.Vector|ol.layer.VectorTile} olLayer OpenLayers layer to
+ * @param {VectorLayer|VectorTileLayer} olLayer OpenLayers layer to
  * apply the style to. In addition to the style, the layer will get two
@@ -163,7 +204,7 @@ * properties: `mapbox-source` will be the `id` of the `glStyle`'s source used
  * @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]]
+   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.
@@ -181,3 +222,3 @@ * @param {Object} [spriteData=undefined] Sprite data from the url specified in
  * used for loading web fonts.
- * @return {ol.style.StyleFunction} Style function for use in
+ * @return {StyleFunction} Style function for use in
  * `ol.layer.Vector` or `ol.layer.VectorTile`.
@@ -448,3 +489,2 @@ */
                     // cut out the sprite and color it
-                    color = colorWithOpacity(iconColor, 1);
                     const canvas = document.createElement('canvas');
@@ -467,5 +507,9 @@ canvas.width = spriteImageData.width;
                     for (let c = 0, cc = data.data.length; c < cc; c += 4) {
-                      data.data[c] = color[0];
-                      data.data[c + 1] = color[1];
-                      data.data[c + 2] = color[2];
+                      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 + 3] = a;
                     }
@@ -491,2 +535,3 @@ ctx.putImageData(data, 0, 0);
                 iconImg.setOpacity(getValue(layer, 'paint', 'icon-opacity', zoom, f));
+                iconImg.setAnchor(anchor[getValue(layer, 'layout', 'icon-anchor', zoom, f)]);
                 style.setImage(iconImg);
@@ -493,0 +538,0 @@ text = style.getText();

util.js

@@ -47,3 +47,3 @@ import {listen} from 'ol/events';
 
-const ctx = document.createElement('CANVAS').getContext('2d');
+const ctx = /** @type {HTMLCanvasElement} */ (document.createElement('CANVAS')).getContext('2d');
 function measureText(text, letterSpacing) {
@@ -50,0 +50,0 @@ return ctx.measureText(text).width + (text.length - 1) * letterSpacing;

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5681751

increased by1.42%

Lines of code

6572

increased by2.35%

Number of lines in readme file

322

increased by1.26%

Number of medium supply chain risk alerts

10

decreased by-9.09%

Worsened metrics

Dev dependency count

29

increased by7.41%

Number of package files

52

decreased by-1.89%

No dependency changes