ol-mapbox-style - npm Package Compare versions

Comparing version 3.0.0-beta.9 to 3.0.0

index.js

@@ -25,49 +25,45 @@ /*
 
-var availableFonts;
-
-function loadFont(fonts) {
-  var i, ii;
-  if (!Array.isArray(fonts)) {
-    var stops = fonts.stops;
-    if (stops) {
-      for (i = 0, ii = stops.length; i < ii; ++i) {
-        loadFont(stops[i][1]);
+var fontFamilyRegEx = /font-family: ?([^;]*);/;
+var stripQuotesRegEx = /("|')/g;
+function hasFontFamily(family) {
+  var styleSheets = document.styleSheets;
+  for (var i = 0, ii = styleSheets.length; i < ii; ++i) {
+    const cssRules = styleSheets[i].cssRules;
+    if (cssRules) {
+      for (var j = 0, jj = cssRules.length; j < jj; ++j) {
+        const cssRule = cssRules[j];
+        if (cssRule.type == 5) {
+          var match = cssRule.cssText.match(fontFamilyRegEx);
+          if (match[1].replace(stripQuotesRegEx, '') == family) {
+            return true;
+          }
+        }
       }
     }
-    return;
   }
-  var googleFamilies = googleFonts.getNames();
+  return false;
+}
+
+var fontFamilies = {};
+var googleFamilies = googleFonts.getNames();
+function getFonts(fonts) {
+  if (fonts in fontFamilies) {
+    return fontFamilies[fonts];
+  }
   var families = fonts.map(function(font) {
     return mb2css(font, 1).split(' 1px ')[1].replace(/"/g, '');
   });
-  for (i = 0, ii = families.length; i < ii; ++i) {
-    var family = families[i];
-    var font = fonts[i];
-    if (googleFamilies.indexOf(family) !== -1) {
-      if (!availableFonts) {
-        availableFonts = [];
-      }
-      if (availableFonts.indexOf(font) == -1) {
-        availableFonts.push(font);
-        var fontUrl = 'https://fonts.googleapis.com/css?family=' + family.replace(/ /g, '+');
-        if (!document.querySelector('link[href="' + fontUrl + '"]')) {
-          var markup = document.createElement('link');
-          markup.href = fontUrl;
-          markup.rel = 'stylesheet';
-          document.getElementsByTagName('head')[0].appendChild(markup);
-        }
-      }
-      break;
+  var family = families[0];
+  if (!hasFontFamily(family) && googleFamilies.indexOf(family) !== -1) {
+    var fontUrl = 'https://fonts.googleapis.com/css?family=' + family.replace(/ /g, '+');
+    if (!document.querySelector('link[href="' + fontUrl + '"]')) {
+      var markup = document.createElement('link');
+      markup.href = fontUrl;
+      markup.rel = 'stylesheet';
+      document.getElementsByTagName('head')[0].appendChild(markup);
     }
   }
+  return fonts;
 }
 
-var defaultFont = ['Open Sans Regular', 'Arial Regular'];
-
-function preprocess(layer) {
-  if ('layout' in layer && 'text-field' in layer.layout) {
-    loadFont(layer.layout['text-font'] || defaultFont);
-  }
-}
-
 var spriteRegEx = /^(.*)(\?.*)$/;
@@ -118,3 +114,15 @@
     }
-    var spriteScale, spriteData, spriteImageUrl;
+
+    var spriteScale, spriteData, spriteImageUrl, style;
+    function onChange() {
+      if (!style && (!glStyle.sprite || spriteData)) {
+        if (layer instanceof VectorLayer || layer instanceof VectorTileLayer) {
+          style = applyStyleFunction(layer, glStyle, source, resolutions, spriteData, spriteImageUrl, getFonts);
+        }
+        resolve();
+      } else if (style) {
+        layer.setStyle(style);
+      }
+    }
+
     if (glStyle.sprite) {
@@ -149,29 +157,6 @@ spriteScale = window.devicePixelRatio >= 1.5 ? 0.5 : 1;
         });
+    } else {
+      onChange();
     }
 
-    var style;
-    function onChange() {
-      if (!style && (!glStyle.sprite || spriteData) && (!availableFonts || availableFonts.length > 0)) {
-        style = applyStyleFunction(layer, glStyle, source, resolutions, spriteData, spriteImageUrl, availableFonts);
-        resolve();
-      } else if (style) {
-        layer.setStyle(style);
-      }
-    }
-
-    if (layer instanceof VectorTileLayer || layer instanceof VectorLayer) {
-      try {
-        var layers = glStyle.layers;
-        for (var i = 0, ii = layers.length; i < ii; ++i) {
-          if (typeof source == 'string' && layers[i].source == source || source.indexOf(layers[i].id) >= 0) {
-            preprocess(layers[i]);
-          }
-        }
-        onChange();
-      } catch (e) {
-        setTimeout(function() {
-          reject(e);
-        }, 0);
-      }
-    }
   });
@@ -280,3 +265,3 @@ }
 
-  var glLayer, glSource, glSourceId, id, layer, mapid, url;
+  var glLayer, glSource, glSourceId, id, layer, mapid, transition, url;
   for (var i = 0, ii = glLayers.length; i < ii; ++i) {
@@ -370,2 +355,3 @@ glLayer = glLayers[i];
               return new TileJSON({
+                transition: transition,
                 url: url,
@@ -377,2 +363,3 @@ crossOrigin: 'anonymous'
             source = new XYZ({
+              transition: transition,
               attributions: glSource.attribution,
@@ -386,2 +373,3 @@ minZoom: glSource.minzoom,
             });
+            transition = 0;
           }
@@ -388,0 +376,0 @@ source.setTileLoadFunction(function(tile, src) {

package.json

 {
   "name": "ol-mapbox-style",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0",
   "description": "Create OpenLayers maps from Mapbox Style objects",
@@ -74,7 +74,7 @@ "main": "index.js",
     "@mapbox/mapbox-gl-style-spec": "^12.0.0",
-    "mapbox-to-css-font": "^2.1.0",
+    "mapbox-to-css-font": "^2.2.0",
     "webfont-matcher": "^1.1.0"
   },
   "peerDependencies": {
-    "ol": ">=5.0.0-beta.13 <5.0.0-c"
+    "ol": "^5.0.0"
   },
@@ -103,3 +103,3 @@ "devDependencies": {
     "nock": "^9.3.2",
-    "ol": ">=5.0.0-beta.13 <5.0.0-c",
+    "ol": "^5.0.0",
     "regenerator-runtime": "^0.11.1",
@@ -118,3 +118,3 @@ "should": "^11.2.1",
     "transformIgnorePatterns": [
-      "node_modules/(?!(ol|mapbox-to-ol-style|@mapbox\/mapbox-gl-style-spec)/)"
+      "node_modules/(?!(ol|mapbox-to-ol-style|@mapbox/mapbox-gl-style-spec)/)"
     ],
@@ -121,0 +121,0 @@ "coveragePathIgnorePatterns": [

README.md

@@ -18,3 +18,3 @@ # ol-mapbox-style
 
-Only commonly available system fonts and [Google Fonts](https://developers.google.com/fonts/) will automatically be available for text defined in the Mapbox Style object. It is the responsibility of the application to load other fonts.
+Only commonly available system fonts and [Google Fonts](https://developers.google.com/fonts/) will automatically be available for any `text-font` defined in the Mapbox Style object. It is the responsibility of the application to load other fonts. Because `ol-mapbox-style` uses system and web fonts instead of PBF/SDF glyphs, the [font stack](https://www.mapbox.com/help/manage-fontstacks/) is treated a little different: style and weight are taken from the primary font (i.e. the first one in the font stack). Subsequent fonts in the font stack are only used if the primary font is not available/loaded, and they will be used with the style and weight of the primary font.
 
@@ -179,5 +179,7 @@ To apply a subset of the layers defined in the Mapbox Style layer to a custom OpenLayers layer, use the `applyStyle()` function.
     `sprite` property is specified in the Mapbox Style object. (optional, default `undefined`)
--   `fonts` **[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 of available fonts, using the
-    same font names as the Mapbox Style object. If not provided, the style
-    function will always use the first font from the font array. (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)>): [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`)
 
@@ -184,0 +186,0 @@ Returns **ol.style.StyleFunction** Style function for use in

stylefunction.js

@@ -89,25 +89,2 @@ /*
 
-const fontMap = {};
-function chooseFont(fonts, availableFonts) {
-  if (fontMap[fonts]) {
-    return fontMap[fonts];
-  }
-  if (availableFonts) {
-    for (let i = 0, ii = fonts.length; i < ii; ++i) {
-      const font = fonts[i];
-      if (availableFonts.indexOf(font) != -1) {
-        fontMap[fonts] = font;
-        break;
-      }
-    }
-    if (!fontMap[fonts]) {
-      // fallback font
-      fontMap[fonts] = fonts[fonts.length - 1];
-    }
-  } else {
-    fontMap[fonts] = fonts[0];
-  }
-  return fontMap[fonts];
-}
-
 const filterCache = {};
@@ -182,9 +159,11 @@ function evaluateFilter(layerId, filter, feature, zoom) {
  * `sprite` property is specified in the Mapbox Style object.
- * @param {Array<string>} [fonts=undefined] Array of available fonts, using the
- * same font names as the Mapbox Style object. If not provided, the style
- * function will always use the first font from the font array.
+ * @param {function(Array<string>):string} [getFonts=undefined] 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.
  * @return {ol.style.StyleFunction} Style function for use in
  * `ol.layer.Vector` or `ol.layer.VectorTile`.
  */
-export default function(olLayer, glStyle, source, resolutions, spriteData, spriteImageUrl, fonts) {
+export default function(olLayer, glStyle, source, resolutions, spriteData, spriteImageUrl, getFonts) {
   if (!resolutions) {
@@ -356,3 +335,3 @@ resolutions = [];
             }
-          } else if ('fill-color' in paint) {
+          } else {
             opacity = getValue(layer, 'paint', 'fill-opacity', zoom, f);
@@ -570,3 +549,4 @@ color = colorWithOpacity(getValue(layer, 'paint', 'fill-color', zoom, f), opacity);
           const textSize = getValue(layer, 'layout', 'text-size', zoom, f);
-          const font = mb2css(chooseFont(getValue(layer, 'layout', 'text-font', zoom, f)), textSize);
+          const fontArray = getValue(layer, 'layout', 'text-font', zoom, f);
+          const font = mb2css(getFonts ? getFonts(fontArray) : fontArray, textSize);
           const textTransform = layout['text-transform'];
@@ -573,0 +553,0 @@ if (textTransform == 'uppercase') {

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

192

increased by1.05%

Worsened metrics

Total package byte prevSize

1360881

decreased by-0.02%

Lines of code

3842

decreased by-0.75%

Dependency changes

• + Addedol@5.3.3(transitive)

• - Removedol@5.0.0-beta.14(transitive)

• Updatedmapbox-to-css-font@^2.2.0