ol-mapbox-style - npm Package Compare versions

Comparing version 0.0.14 to 1.0.0

dist/olms.js

 (function(_g){(function(f){var r=(typeof require==='function'?require:function(name){return {"_":null,"openlayers":ol}[name];});if (typeof exports==='object'&&typeof module!=='undefined'){module.exports=f(r)}else if(typeof define==='function'&&define.amd){define(["_","openlayers"],f.bind(_g,r))}else{f(r)}})(function(require,define,module,exports){var _m=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 /*
-ol-mapbox-gl-style - Use Mapbox GL style objects with OpenLayers
+ol-mapbox-style - Use Mapbox Style objects with OpenLayers
 Copyright 2016 Boundless Spatial, Inc.
@@ -275,4 +275,4 @@ License: https://raw.githubusercontent.com/boundlessgeo/ol-mapbox-gl-style/master/LICENSE.md
  *
- * @param {string|Object} glStyle Mapbox GL style object.
- * @param {string} source `source` key from the Mapbox GL style object.
+ * @param {string|Object} glStyle Mapbox Style object.
+ * @param {string} source `source` key from the Mapbox Style object.
  * @param {Array<number>|undefined} [resolutions=[156543.03392804097,
@@ -508,3 +508,3 @@ * 78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256,
           style = iconImageCache[cache_key];
-          if(!style) {
+          if (!style) {
             style = new ol.style.Style({
@@ -592,4 +592,4 @@ image: new ol.style.Circle({
  * @param {ol.layer.VectorTile} layer OpenLayers layer.
- * @param {string|Object} glStyle Mapbox GL style object.
- * @param {string} source `source` key from the Mapbox GL style object.
+ * @param {string|Object} glStyle Mapbox Style object.
+ * @param {string} source `source` key from the Mapbox Style object.
  * @return {Promise} Promise which will be resolved when the style can be used
@@ -620,3 +620,42 @@ * for rendering.
 
+/**
+ * Applies properties of the Mapbox Style's `background` layer to the map.
+ * @param {ol.Map} map OpenLayers Map. Must have a `target` configured.
+ * @param {Object} glStyle Mapbox Style object.
+ */
+function applyBackground(map, glStyle) {
+
+  var layer;
+
+  function updateStyle() {
+    var layout = layer.layout || {};
+    var paint = layer.paint || {};
+    var element = map.getTargetElement();
+    var zoom = map.getView().getZoom();
+    if ('background-color' in paint) {
+      element.style.backgroundColor =
+          glfun['piecewise-constant'](paint['background-color'])(zoom);
+    }
+    if ('background-opacity' in paint) {
+      element.style.backgroundOpacity =
+          glfun.interpolated(paint['background-opacity'])(zoom);
+    }
+    if (layout.visibility == 'none') {
+      element.style.backgroundColor = '';
+      element.style.backgroundOpacity = '';
+    }
+  }
+
+  glStyle.layers.some(function(l) {
+    if (l.type == 'background') {
+      layer = l;
+      updateStyle();
+      map.on('change:resolution', updateStyle);
+      return true;
+    }
+  });
+}
+
 module.exports = {
+  applyBackground: applyBackground,
   applyStyle: applyStyle,
@@ -623,0 +662,0 @@ getStyleFunction: getStyleFunction

example/index.js

@@ -33,2 +33,3 @@ var baseUrl = 'https://api.mapbox.com/styles/v1/mapbox/bright-v9';
   response.json().then(function(glStyle) {
+    olms.applyBackground(map, glStyle);
     glStyle.sprite = baseUrl + '/sprite?access_token=' + key;
@@ -35,0 +36,0 @@ olms.applyStyle(layer, glStyle, 'mapbox').then(function() {

index.js

 /*
-ol-mapbox-gl-style - Use Mapbox GL style objects with OpenLayers
+ol-mapbox-style - Use Mapbox Style objects with OpenLayers
 Copyright 2016 Boundless Spatial, Inc.
@@ -274,4 +274,4 @@ License: https://raw.githubusercontent.com/boundlessgeo/ol-mapbox-gl-style/master/LICENSE.md
  *
- * @param {string|Object} glStyle Mapbox GL style object.
- * @param {string} source `source` key from the Mapbox GL style object.
+ * @param {string|Object} glStyle Mapbox Style object.
+ * @param {string} source `source` key from the Mapbox Style object.
  * @param {Array<number>|undefined} [resolutions=[156543.03392804097,
@@ -507,3 +507,3 @@ * 78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256,
           style = iconImageCache[cache_key];
-          if(!style) {
+          if (!style) {
             style = new ol.style.Style({
@@ -591,4 +591,4 @@ image: new ol.style.Circle({
  * @param {ol.layer.VectorTile} layer OpenLayers layer.
- * @param {string|Object} glStyle Mapbox GL style object.
- * @param {string} source `source` key from the Mapbox GL style object.
+ * @param {string|Object} glStyle Mapbox Style object.
+ * @param {string} source `source` key from the Mapbox Style object.
  * @return {Promise} Promise which will be resolved when the style can be used
@@ -619,5 +619,44 @@ * for rendering.
 
+/**
+ * Applies properties of the Mapbox Style's `background` layer to the map.
+ * @param {ol.Map} map OpenLayers Map. Must have a `target` configured.
+ * @param {Object} glStyle Mapbox Style object.
+ */
+function applyBackground(map, glStyle) {
+
+  var layer;
+
+  function updateStyle() {
+    var layout = layer.layout || {};
+    var paint = layer.paint || {};
+    var element = map.getTargetElement();
+    var zoom = map.getView().getZoom();
+    if ('background-color' in paint) {
+      element.style.backgroundColor =
+          glfun['piecewise-constant'](paint['background-color'])(zoom);
+    }
+    if ('background-opacity' in paint) {
+      element.style.backgroundOpacity =
+          glfun.interpolated(paint['background-opacity'])(zoom);
+    }
+    if (layout.visibility == 'none') {
+      element.style.backgroundColor = '';
+      element.style.backgroundOpacity = '';
+    }
+  }
+
+  glStyle.layers.some(function(l) {
+    if (l.type == 'background') {
+      layer = l;
+      updateStyle();
+      map.on('change:resolution', updateStyle);
+      return true;
+    }
+  });
+}
+
 module.exports = {
+  applyBackground: applyBackground,
   applyStyle: applyStyle,
   getStyleFunction: getStyleFunction
 };

package.json

 {
   "name": "ol-mapbox-style",
-  "version": "0.0.14",
+  "version": "1.0.0",
   "description": "Use Mapbox style objects with OpenLayers",
@@ -40,15 +40,15 @@ "main": "index.js",
   "devDependencies": {
-    "browserify": "13.1.1",
+    "browserify": "13.3.0",
     "cssify": "1.0.3",
-    "documentation": "4.0.0-beta16",
-    "eslint": "3.12.1",
+    "documentation": "4.0.0-beta18",
+    "eslint": "3.13.1",
     "eslint-config-openlayers": "6.0.0",
     "expect.js": "0.3.1",
-    "jsdom": "9.8.3",
-    "jsdom-global": "2.1.0",
+    "jsdom": "9.9.1",
+    "jsdom-global": "2.1.1",
     "mapbox-gl-styles": "2.0.2",
     "mocha": "3.2.0",
-    "openlayers": "3.20.0",
+    "openlayers": "3.20.1",
     "standalonify": "0.1.3"
   }
 }

README.md

@@ -41,3 +41,3 @@ # ol-mapbox-style
 
-Note that it is the responsibility of the application to load web fonts used by the GL Style.
+Note that it is the responsibility of the application to load web fonts used by the GL Style. To apply the properties of the Mapbox Style's `background` layer to the map, use the `applyBackground` function.
 
@@ -56,4 +56,4 @@ ## API
 
--   `glStyle` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox GL style object.
--   `source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** `source` key from the Mapbox GL style object.
+-   `glStyle` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox Style object.
+-   `source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** `source` key from the Mapbox Style object.
 -   `resolutions` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)> | [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined))?** Resolutions for mapping resolution to zoom level. For tile layers, this can
@@ -86,4 +86,4 @@ be `layer.getSource().getTileGrid().getResolutions()`. (optional, default `[156543.03392804097,
 -   `layer` **ol.layer.VectorTile** OpenLayers layer.
--   `glStyle` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox GL style object.
--   `source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** `source` key from the Mapbox GL style object.
+-   `glStyle` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox Style object.
+-   `source` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** `source` key from the Mapbox Style object.
 
@@ -93,2 +93,11 @@ Returns **[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)** Promise which will be resolved when the style can be used
 
+### applyBackground
+
+Applies properties of the Mapbox Style's `background` layer to the map.
+
+**Parameters**
+
+-   `map` **ol.Map** OpenLayers Map. Must have a `target` configured.
+-   `glStyle` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Mapbox Style object.
+
 ## Building the library
@@ -95,0 +104,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

105

increased by9.38%

Worsened metrics

Total package byte prevSize

76922

decreased by-3.59%

Number of package files

14

decreased by-6.67%

Lines of code

1895

decreased by-7.56%

No dependency changes