Add applyBackground function

openlayers · Jan 10, 2017 · f25e3ab · f25e3ab
1 parent 684085b
commit f25e3ab
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ fetch('https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=' + key).t
 });
 ```
 
-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.
 
 ## API
 
@@ -52,8 +52,8 @@ source.
 
 **Parameters**
 
--   `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)&lt;[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
     be `layer.getSource().getTileGrid().getResolutions()`. (optional, default `[156543.03392804097,
     78271.51696402048,39135.75848201024,19567.87924100512,9783.93962050256,
@@ -81,12 +81,21 @@ Applies a style function to an `ol.layer.VectorTile` with an
 **Parameters**
 
 -   `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.
 
 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
 for rendering.
 
+### 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
 
     npm install

diff --git a/example/index.html b/example/index.html
@@ -12,7 +12,6 @@
     #map {
       width: 100%;
       height: 100%;
-      background-color: #f8f4f0;
     }
   </style>
 </head>

diff --git a/example/index.js b/example/index.js
@@ -30,6 +30,7 @@ var map = new ol.Map({
 
 fetch(baseUrl + '?access_token=' + key).then(function(response) {
   response.json().then(function(glStyle) {
+    olms.applyBackground(map, glStyle);
     glStyle.sprite = baseUrl + '/sprite?access_token=' + key;
     olms.applyStyle(layer, glStyle, 'mapbox').then(function() {
       map.addLayer(layer);

diff --git a/index.js b/index.js
@@ -613,7 +613,46 @@ function applyStyle(layer, glStyle, source) {
   });
 }
 
+/**
+ * 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
 };