ol-mapbox-style - npm Package Compare versions

Comparing version 6.6.0 to 6.7.0

CHANGELOG.md

 # Changelog
 
+## 6.7.0
+
+* `applyBackground()` now also accepts an OpenLayers >= 6.10 `VectorTile` layer as first argument.
+
 ## 6.6.0
@@ -4,0 +8,0 @@

dist/index.d.ts

@@ -38,7 +38,8 @@ /**
  * ```
- * Applies properties of the Mapbox Style's first `background` layer to the map.
- * @param {PluggableMap} map OpenLayers Map.
+ * Applies properties of the Mapbox Style's first `background` layer to the
+ * provided map or VectorTile layer.
+ * @param {PluggableMap|VectorTileLayer} mapOrLayer OpenLayers Map or VectorTile layer.
  * @param {Object} glStyle Mapbox Style object.
  */
-export function applyBackground(map: any, glStyle: any): void;
+export function applyBackground(mapOrLayer: PluggableMap | VectorTileLayer, glStyle: any): void;
 /**
@@ -45,0 +46,0 @@ * Creates an OpenLayers VectorTile source for a gl source entry.

dist/index.js

@@ -17,3 +17,3 @@ /*
 import View from 'ol/View.js';
-import applyStyleFunction, { getValue } from './stylefunction.js';
+import applyStyleFunction, { _colorWithOpacity, getValue, } from './stylefunction.js';
 import googleFonts from 'webfont-matcher/lib/fonts/google.js';
@@ -215,34 +215,52 @@ import mb2css from 'mapbox-to-css-font';
 var emptyObj = {};
-function setBackground(map, layer) {
+function setBackground(mapOrLayer, layer) {
     var background = {
+        id: layer.id,
         type: layer.type,
     };
     var functionCache = {};
-    function updateStyle() {
-        var element = map.getTargetElement();
-        if (!element) {
-            return;
-        }
+    function updateStyle(resolution) {
         var layout = layer.layout || {};
         var paint = layer.paint || {};
         background['paint'] = paint;
-        background.id =
-            'olms-bg-' + paint['background-opacity'] + paint['background-color'];
-        var zoom = map.getView().getZoom();
+        var zoom = typeof mapOrLayer.getSource === 'function'
+            ? mapOrLayer.getSource().getTileGrid().getZForResolution(resolution)
+            : mapOrLayer.getView().getZoom();
+        var element = typeof mapOrLayer.getTargetElement === 'function'
+            ? mapOrLayer.getTargetElement()
+            : undefined;
+        var bg, opacity;
         if (paint['background-color'] !== undefined) {
-            var bg = getValue(background, 'paint', 'background-color', zoom, emptyObj, functionCache);
-            element.style.background = Color.parse(bg).toString();
+            bg = getValue(background, 'paint', 'background-color', zoom, emptyObj, functionCache);
+            if (element) {
+                element.style.background = Color.parse(bg).toString();
+            }
         }
         if (paint['background-opacity'] !== undefined) {
-            element.style.opacity = getValue(background, 'paint', 'background-opacity', zoom, emptyObj, functionCache);
+            opacity = getValue(background, 'paint', 'background-opacity', zoom, emptyObj, functionCache);
+            if (element) {
+                element.style.opacity = opacity;
+            }
         }
         if (layout.visibility == 'none') {
-            element.style.backgroundColor = '';
-            element.style.opacity = '';
+            if (element) {
+                element.style.backgroundColor = '';
+                element.style.opacity = '';
+                return undefined;
+            }
         }
+        return _colorWithOpacity(bg, opacity);
     }
-    if (map.getTargetElement()) {
-        updateStyle();
+    if (typeof mapOrLayer.getTargetElement === 'function') {
+        if (mapOrLayer.getTargetElement()) {
+            updateStyle();
+        }
+        mapOrLayer.on(['change:resolution', 'change:target'], updateStyle);
     }
-    map.on(['change:resolution', 'change:target'], updateStyle);
+    else if (typeof mapOrLayer.setBackground === 'function') {
+        mapOrLayer.setBackground(updateStyle);
+    }
+    else {
+        throw new Error('Unable to apply background.');
+    }
 }
@@ -253,10 +271,11 @@ /**
  * ```
- * Applies properties of the Mapbox Style's first `background` layer to the map.
- * @param {PluggableMap} map OpenLayers Map.
+ * Applies properties of the Mapbox Style's first `background` layer to the
+ * provided map or VectorTile layer.
+ * @param {PluggableMap|VectorTileLayer} mapOrLayer OpenLayers Map or VectorTile layer.
  * @param {Object} glStyle Mapbox Style object.
  */
-export function applyBackground(map, glStyle) {
+export function applyBackground(mapOrLayer, glStyle) {
     glStyle.layers.some(function (l) {
         if (l.type == 'background') {
-            setBackground(map, l);
+            setBackground(mapOrLayer, l);
             return true;
@@ -263,0 +282,0 @@ }

package.json

 {
   "name": "ol-mapbox-style",
-  "version": "6.6.0",
+  "version": "6.7.0",
   "description": "Create OpenLayers maps from Mapbox Style objects",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -32,3 +32,3 @@ # ol-mapbox-style
 
-To apply the properties of the Mapbox Style's `background` layer to the map, use the `applyBackground()` function.
+To apply the properties of the Mapbox Style's `background` layer to the map or a `VectorTile` layer, use the `applyBackground()` function.
 
@@ -217,7 +217,8 @@ To create a style function for individual OpenLayers vector or vector tile layers, use the `stylefunction` module:
 
-Applies properties of the Mapbox Style's first `background` layer to the map.
+Applies properties of the Mapbox Style's first `background` layer to the
+provided map or VectorTile layer.
 
 #### Parameters
 
-*   `map` **PluggableMap** OpenLayers Map.
+*   `mapOrLayer` **(PluggableMap | VectorTileLayer)** OpenLayers Map or VectorTile layer.
 *   `glStyle` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Mapbox Style object.
@@ -224,0 +225,0 @@

src/index.js

@@ -18,3 +18,6 @@ /*
 import View from 'ol/View.js';
-import applyStyleFunction, {getValue} from './stylefunction.js';
+import applyStyleFunction, {
+  _colorWithOpacity,
+  getValue,
+} from './stylefunction.js';
 import googleFonts from 'webfont-matcher/lib/fonts/google.js';
@@ -244,20 +247,23 @@ import mb2css from 'mapbox-to-css-font';
 
-function setBackground(map, layer) {
+function setBackground(mapOrLayer, layer) {
   const background = {
+    id: layer.id,
     type: layer.type,
   };
   const functionCache = {};
-  function updateStyle() {
-    const element = map.getTargetElement();
-    if (!element) {
-      return;
-    }
+  function updateStyle(resolution) {
     const layout = layer.layout || {};
     const paint = layer.paint || {};
     background['paint'] = paint;
-    background.id =
-      'olms-bg-' + paint['background-opacity'] + paint['background-color'];
-    const zoom = map.getView().getZoom();
+    const zoom =
+      typeof mapOrLayer.getSource === 'function'
+        ? mapOrLayer.getSource().getTileGrid().getZForResolution(resolution)
+        : mapOrLayer.getView().getZoom();
+    const element =
+      typeof mapOrLayer.getTargetElement === 'function'
+        ? mapOrLayer.getTargetElement()
+        : undefined;
+    let bg, opacity;
     if (paint['background-color'] !== undefined) {
-      const bg = getValue(
+      bg = getValue(
         background,
@@ -270,6 +276,8 @@ 'paint',
       );
-      element.style.background = Color.parse(bg).toString();
+      if (element) {
+        element.style.background = Color.parse(bg).toString();
+      }
     }
     if (paint['background-opacity'] !== undefined) {
-      element.style.opacity = getValue(
+      opacity = getValue(
         background,
@@ -282,12 +290,25 @@ 'paint',
       );
+      if (element) {
+        element.style.opacity = opacity;
+      }
     }
     if (layout.visibility == 'none') {
-      element.style.backgroundColor = '';
-      element.style.opacity = '';
+      if (element) {
+        element.style.backgroundColor = '';
+        element.style.opacity = '';
+        return undefined;
+      }
     }
+    return _colorWithOpacity(bg, opacity);
   }
-  if (map.getTargetElement()) {
-    updateStyle();
+  if (typeof mapOrLayer.getTargetElement === 'function') {
+    if (mapOrLayer.getTargetElement()) {
+      updateStyle();
+    }
+    mapOrLayer.on(['change:resolution', 'change:target'], updateStyle);
+  } else if (typeof mapOrLayer.setBackground === 'function') {
+    mapOrLayer.setBackground(updateStyle);
+  } else {
+    throw new Error('Unable to apply background.');
   }
-  map.on(['change:resolution', 'change:target'], updateStyle);
 }
@@ -299,10 +320,11 @@
  * ```
- * Applies properties of the Mapbox Style's first `background` layer to the map.
- * @param {PluggableMap} map OpenLayers Map.
+ * Applies properties of the Mapbox Style's first `background` layer to the
+ * provided map or VectorTile layer.
+ * @param {PluggableMap|VectorTileLayer} mapOrLayer OpenLayers Map or VectorTile layer.
  * @param {Object} glStyle Mapbox Style object.
  */
-export function applyBackground(map, glStyle) {
+export function applyBackground(mapOrLayer, glStyle) {
   glStyle.layers.some(function (l) {
     if (l.type == 'background') {
-      setBackground(map, l);
+      setBackground(mapOrLayer, l);
       return true;
@@ -309,0 +331,0 @@ }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8625200

increased by0.09%

Lines of code

13364

increased by0.33%

Number of lines in readme file

361

increased by0.28%

No dependency changes