ol-mapbox-style - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

index.js

@@ -16,6 +16,10 @@ /*
 import MVT from 'ol/format/mvt';
+import Observable from 'ol/observable';
+import TileLayer from 'ol/layer/tile';
 import VectorLayer from 'ol/layer/vector';
 import VectorTileLayer from 'ol/layer/vectortile';
+import TileJSON from 'ol/source/tilejson';
 import VectorSource from 'ol/source/vector';
 import VectorTileSource from 'ol/source/vectortile';
+import XYZ from 'ol/source/xyz';
 
@@ -91,3 +95,3 @@ var availableFonts;
  * `source`, or a subset of layers from the same source. The source needs to be
- * a `"type": "vector"` or `"type": "geojson"` source.
+ * a `"type": "vector"`, `"type": "geojson"` or `"type": "raster"` source.
  *
@@ -153,14 +157,16 @@ * @param {ol.layer.VectorTile} layer OpenLayers layer.
     }
-    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);
+    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);
+          }
         }
+        onChange();
+      } catch (e) {
+        window.setTimeout(function() {
+          reject(e);
+        }, 0);
       }
-      onChange();
-    } catch (e) {
-      window.setTimeout(function() {
-        reject(e);
-      }, 0);
     }
@@ -239,2 +245,3 @@ });
   var glLayers = glStyle.layers;
+  var geoJsonFormat = new GeoJSON();
   var layerIds = [];
@@ -245,7 +252,15 @@
       map.addLayer(layer);
-      applyStyle(layer, glStyle, layerIds, path).then(function() {
-        layer.setVisible(true);
-      }, function(e) {
-        throw e;
-      });
+      var setStyle = function() {
+        applyStyle(layer, glStyle, layerIds, path).then(function() {
+          layer.setVisible(true);
+        }, function(e) {
+          /*eslint no-console: ["error", { allow: ["error"] }] */
+          console.error(e);
+        });
+      };
+      if (layer.getSource()) {
+        setStyle();
+      } else {
+        layer.once('change:source', setStyle);
+      }
     }
@@ -265,12 +280,20 @@ }
         glSource = glStyle.sources[id];
-
-        if (glSource.type == 'vector') {
-          url = glSource.url;
+        url = glSource.url;
+        var tiles = glSource.tiles;
+        if (url) {
           if (url.indexOf('mapbox://') == 0) {
             mapid = url.replace('mapbox://', '');
-            url = 'https://{a-d}.tiles.mapbox.com/v4/' + mapid +
-                '/{z}/{x}/{y}.vector.pbf' + accessToken;
+            tiles = ['a', 'b', 'c', 'd'].map(function(host) {
+              return 'https://' + host + '.tiles.mapbox.com/v4/' + mapid +
+                  '/{z}/{x}/{y}.' +
+                  (glSource.type == 'vector' ? 'vector.pbf' : 'png') +
+                  accessToken;
+            });
           }
-          layer = new VectorTileLayer({
+        }
+
+        if (glSource.type == 'vector') {
+          layer = tiles ? new VectorTileLayer({
             source: new VectorTileSource({
+              attributions: glSource.attribution,
               format: new MVT(),
@@ -283,14 +306,75 @@ tileGrid: tilegrid.createXYZ({
               tilePixelRatio: 8,
+              urls: tiles
+            }),
+            visible: false,
+            zIndex: i
+          }) : (function() {
+            var layer = new VectorTileLayer({
+              visible: false,
+              zIndex: i
+            });
+            var tilejson = new TileJSON({
               url: url
-            }),
-            visible: false
+            });
+            var key = tilejson.on('change', function() {
+              if (tilejson.getState() == 'ready') {
+                layer.setSource(new VectorTileSource({
+                  attributions: tilejson.getAttributions(),
+                  format: new MVT(),
+                  tileGrid: tilejson.getTileGrid(),
+                  tilePixelRatio: 16,
+                  tileUrlFunction: tilejson.getTileUrlFunction()
+                }));
+                Observable.unByKey(key);
+              }
+            });
+            return layer;
+          })();
+        } else if (glSource.type == 'raster') {
+          var source;
+          if (!glSource.tiles) {
+            source = (function() {
+              return new TileJSON({
+                url: url,
+                crossOrigin: 'anonymous'
+              });
+            })();
+          } else {
+            source = new XYZ({
+              attributions: glSource.attribution,
+              minZoom: glSource.minzoom,
+              maxZoom: 'maxzoom' in glSource ? glSource.maxzoom : 22,
+              tileSize: glSource.tileSize || 512,
+              url: url,
+              urls: glSource.tiles,
+              crossOrigin: 'anonymous'
+            });
+          }
+          source.setTileLoadFunction(function(tile, src) {
+            if (src.indexOf('{bbox-epsg-3857}') != -1) {
+              var bbox = source.getTileGrid().getTileCoordExtent(tile.getTileCoord());
+              src = src.replace('{bbox-epsg-3857}', bbox.toString());
+            }
+            tile.getImage().src = src;
           });
+          layer = new TileLayer({
+            source: source
+          });
         } else if (glSource.type == 'geojson') {
-          url = withPath(glSource.data, path);
+          var data = glSource.data;
+          var features, geoJsonUrl;
+          if (typeof data == 'string') {
+            geoJsonUrl = withPath(data, path);
+          } else {
+            features = geoJsonFormat.readFeatures(data, {featureProjection: 'EPSG:3857'});
+          }
           layer = new VectorLayer({
             source: new VectorSource({
-              format: new GeoJSON(),
-              url: url
+              attributions: glSource.attribution,
+              features: features,
+              format: geoJsonFormat,
+              url: geoJsonUrl
             }),
-            visible: false
+            visible: false,
+            zIndex: i
           });
@@ -297,0 +381,0 @@ }

package.json

 {
   "name": "ol-mapbox-style",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Create OpenLayers maps from Mapbox Style objects",
@@ -39,8 +39,7 @@ "main": "index.js",
   "scripts": {
-    "prepublish": "npm run doc && mkdirp dist && browserify -g [ babelify --plugins [ transform-es2015-modules-commonjs ] ] -p [ standalonify --name olms --deps [ null --ol/proj ol.proj --ol/tilegrid ol.tilegrid --ol/map ol.Map --ol/format/geojson ol.format.GeoJSON --ol/format/mvt ol.format.MVT --ol/layer/vector ol.layer.Vector --ol/layer/vectortile ol.layer.VectorTile --ol/source/vector ol.source.Vector --ol/source/vectortile ol.source.VectorTile --ol/style/style ol.style.Style --ol/style/fill ol.style.Fill --ol/style/stroke ol.style.Stroke --ol/style/circle ol.style.Circle --ol/style/icon ol.style.Icon --ol/style/text ol.style.Text ] ] -g [ bubleify ] index.js > dist/olms.js",
+    "prepublish": "npm run doc && mkdirp dist && browserify -g [ babelify --plugins [ transform-es2015-modules-commonjs ] ] -p [ standalonify --name olms --deps [ null --ol/observable ol.Observable --ol/proj ol.proj --ol/tilegrid ol.tilegrid --ol/map ol.Map --ol/format/geojson ol.format.GeoJSON --ol/format/mvt ol.format.MVT --ol/layer/tile ol.layer.Tile --ol/layer/vector ol.layer.Vector --ol/layer/vectortile ol.layer.VectorTile --ol/source/tilejson ol.source.TileJSON --ol/source/vector ol.source.Vector --ol/source/xyz ol.source.XYZ --ol/source/vectortile ol.source.VectorTile --ol/style/style ol.style.Style --ol/style/fill ol.style.Fill --ol/style/stroke ol.style.Stroke --ol/style/circle ol.style.Circle --ol/style/icon ol.style.Icon --ol/style/text ol.style.Text ] ] -g [ bubleify ] index.js > dist/olms.js",
     "doc": "documentation readme -s API index.js",
     "pretest": "eslint src & npm run test-bundle",
-    "test": "mocha test/test-bundle.js",
-    "test-bundle": "browserify test/test.js -g [ babelify --plugins [ transform-es2015-modules-commonjs ] ] > test/test-bundle.js",
-    "posttest": "rm test/test-bundle.js"
+    "test": "phantomjs --local-to-remote-url-access=true ./node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html spec '{\"useColors\":true, \"ignoreResourceErrors\": true}'",
+    "test-bundle": "browserify -g [ babelify --plugins [ transform-es2015-modules-commonjs ] ] -g [ bubleify ] test/test.js > test/bundle.js"
   },
@@ -61,10 +60,11 @@ "dependencies": {
     "eslint-config-openlayers": "^7.0.0",
-    "jsdom": "^9.12.0",
-    "jsdom-global": "^2.1.1",
     "mapbox-gl-styles": "^2.0.2",
     "mkdirp": "^0.5.1",
     "mocha": "^3.2.0",
+    "mocha-phantomjs-core": "^2.1.1",
+    "phantomjs-prebuilt": "^2.1.14",
     "should": "^11.2.1",
+    "should-approximately-deep": "^1.1.0",
     "standalonify": "^0.1.3"
   }
 }

README.md

@@ -34,3 +34,3 @@ # ol-mapbox-style
 `source`, or a subset of layers from the same source. The source needs to be
-a `"type": "vector"` or `"type": "geojson"` source.
+a `"type": "vector"`, `"type": "geojson"` or `"type": "raster"` source.
 
@@ -37,0 +37,0 @@ **Parameters**

test/test.js

 import should from 'should/as-function';
+import 'should-approximately-deep';
 import {applyBackground, applyStyle, apply} from '../';
 import Map from 'ol/map';
+import TileSource from 'ol/source/tile';
+import VectorSource from 'ol/source/vector';
 import VectorTileLayer from 'ol/layer/vectortile';
 import VectorTileSource from 'ol/source/vectortile';
-import projCommon from 'ol/proj/common';
+import proj from 'ol/proj';
 import tilegrid from 'ol/tilegrid';
@@ -14,20 +17,2 @@ import brightV9 from '../node_modules/mapbox-gl-styles/styles/bright-v9.json';
 
-  projCommon.add();
-
-  if (!('requestAnimationFrame' in global)) {
-    global.requestAnimationFrame = function(fn) {
-      return setTimeout(fn, 16);
-    };
-  }
-
-  var layer;
-
-  beforeEach(function() {
-    layer = new VectorTileLayer({
-      source: new VectorTileSource({
-        tileGrid: tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
-      })
-    });
-  });
-
   describe('applyBackground', function() {
@@ -44,2 +29,7 @@ it('applies a background to a map container', function() {
   describe('applyStyle', function() {
+    var layer = new VectorTileLayer({
+      source: new VectorTileSource({
+        tileGrid: tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
+      })
+    });
     it('applies a style function to a layer and resolves promise', function(done) {
@@ -55,4 +45,9 @@ should(layer.getStyle()).be.null;
   describe('apply', function(done) {
-    it('returns a map instance and adds a layer with a style function', function() {
-      var target = document.createElement('div');
+
+    var target;
+    beforeEach(function() {
+      target = document.createElement('div');
+    });
+
+    it('returns a map instance and adds a layer with a style function', function(done) {
       var style = 'data:application/json;base64,' + btoa(JSON.stringify(brightV9));
@@ -63,5 +58,82 @@ var map = apply(target, style);
         should(map.getLayers().item(0).getStyle()).be.a.Function();
+        done();
       });
     });
+
+    it('handles raster sources', function(done) {
+      var map = apply(target, '../example/data/wms.json');
+      var count = 0;
+      map.getLayers().on('add', function() {
+        ++count;
+        if (count == 2) {
+          var osm = map.getLayers().item(0);
+          var wms = map.getLayers().item(1);
+          should(osm.getSource().getUrls()).eql([
+            'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
+          ]);
+          should(osm.getSource().getAttributions()[0].getHTML()).equal(
+              '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.');
+          should(wms.getSource().getTileGrid().getTileSize()).eql(256);
+          should(wms.getSource().getTileGrid().getMaxZoom()).eql(12);
+          done();
+        }
+      });
+    });
+
+    it('handles geojson sources', function(done) {
+      var map = apply(target, '../example/data/geojson.json');
+      map.getLayers().once('add', function(e) {
+        var layer = e.element;
+        var source = layer.getSource();
+        should(source).be.instanceof(VectorSource);
+        should(layer.getStyle()).be.a.Function();
+        done();
+      });
+    });
+
+    it('handles geojson sources with inline GeoJSON', function(done) {
+      var map = new Map({target: target});
+      map.getLayers().once('add', function(e) {
+        var layer = e.element;
+        var source = layer.getSource();
+        should(source).be.instanceof(VectorSource);
+        should(source.getFeatures()).have.length(100);
+        should(layer.getStyle()).be.a.Function();
+        done();
+      });
+      apply(map, '../example/data/geojson-inline.json');
+    });
+
+    it('handles raster sources from TileJSON', function(done) {
+      var map = apply(target, '../example/data/tilejson.json');
+      map.getLayers().once('add', function(e) {
+        var source = e.element.getSource();
+        should(source).be.instanceof(TileSource);
+        source.once('change', function() {
+          var tileGrid = source.getTileGrid();
+          should(tileGrid.getMaxZoom()).equal(8);
+          done();
+        });
+      });
+    });
+
+    it('handles vector sources from TileJSON', function(done) {
+      var map = apply(target, 'https://rawgit.com/PetersonGIS/CamoStyle/b783aadd625bf0d874f77daa6c597b585f0b63fd/camo3d.json');
+      map.getLayers().once('add', function(e) {
+        should(proj.toLonLat(map.getView().getCenter())).be.approximatelyDeep([7.1434, 50.7338], 1e-4);
+        should(map.getView().getZoom()).equal(14.11);
+        var layer = e.element;
+        layer.once('change:source', function() {
+          var source = layer.getSource();
+          should(source).be.instanceof(VectorTileSource);
+          should(layer.getStyle()).be.a.Function();
+          should(source.getAttributions()[0].getHTML()).equal('Tegola OSM');
+          done();
+        });
+      });
+    });
+
   });
 });

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

Lines of code

2347

increased by5.82%

Worsened metrics

Total package byte prevSize

688703

decreased by-44.72%

Dev dependency count

14

increased by7.69%

Number of package files

28

decreased by-26.32%

No dependency changes