Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

ol-mapbox-style

Package Overview
Dependencies
Maintainers
2
Versions
170
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ol-mapbox-style - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

__tests__/fixtures/hot-osm/hot-osm.json
__tests__/fixtures/hot-osm/osm_tegola_spritesheet.json
__tests__/fixtures/hot-osm/osm_tegola_spritesheet.png
__tests__/fixtures/hot-osm/osm_tegola_spritesheet@2x.json
__tests__/fixtures/hot-osm/osm_tegola_spritesheet@2x.png
__tests__/fixtures/hot-osm/osm.json
__tests__/stylefunction-utils.test.js
dist/index.js
dist/index.js.map

76

__tests__/applyStyle.test.js

@@ -1,5 +0,4 @@

/*eslint no-console: "off"*/
import 'isomorphic-fetch';
import nock from 'nock';
import should from 'should/as-function';
import should from 'should';

@@ -24,17 +23,16 @@ import VectorLayer from 'ol/layer/Vector';

describe('applyStyle style argument validation', function() {
const source = 'vector';
const source = 'openmaptiles';
const layer = new VectorLayer();
const path = null;
const resolutions = null;
beforeEach(function() {
nock('https://rawgit.com')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.json')
.reply(200, glStyleLoresSprite)
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.png')
.reply(200, '')
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty.png')
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty@2x.json')
.reply(200, glStyleHiresSprite)
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty@2x.png')
.reply(200, {});
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty@2x.png');
});

@@ -47,11 +45,11 @@

test('should handle valid style as JSON', function(done) {
applyStyle(layer, glStyle, source, path, resolutions).then(done).catch(done);
applyStyle(layer, glStyle, source).then(done).catch(done);
});
test('should handle valid style as JSON string', function(done) {
applyStyle(layer, JSON.stringify(glStyle), source, path, resolutions).then(done).catch(done);
applyStyle(layer, JSON.stringify(glStyle), source).then(done).catch(done);
});
test('should reject invalid style version', function(done) {
applyStyle(layer, styleInvalidVersion, source, path, resolutions).then(function() {
applyStyle(layer, styleInvalidVersion, source).then(function() {
done(new Error('invalid style version promise should reject'));

@@ -64,4 +62,3 @@ }).catch(function(err) {

test('should reject invalid ol layer type', function(done) {
const layer = new ImageLayer();
applyStyle(layer, glStyle, source, path, resolutions).then(function() {
applyStyle(new ImageLayer(), glStyle, source).then(function() {
done(new Error('invalid ol layer type promise should reject'));

@@ -73,13 +70,9 @@ }).catch(function(err) {

// TODO: still need to figure out best way to validate sources
// test('should reject invalid ol layer source type', function(done) {
// const source = 'natural_earth_shaded_relief';
// const layer = new VectorLayer();
//
// applyStyle(layer, glStyle, source, path, resolutions).then(function() {
// done(new Error('invalid ol layer source promise should reject'));
// }).catch(function(err) {
// done();
// });
// });
test('should reject invalid ol layer source type', function(done) {
applyStyle(new VectorLayer(), glStyle, 'natural_earth_shaded_relief').then(function() {
done(new Error('invalid ol layer source promise should reject'));
}).catch(function(err) {
done();
});
});

@@ -90,17 +83,15 @@ });

describe('applyStyle style validation', function() {
const source = 'vector';
const source = 'openmaptiles';
const layer = new VectorLayer();
const path = null;
const resolutions = null;
test('should handle missing sprite', function(done) {
applyStyle(layer, styleMissingSprite, source, path, resolutions).then(done).catch(done);
applyStyle(layer, styleMissingSprite, source).then(done).catch(done);
});
test('should handle empty sprite', function(done) {
applyStyle(layer, styleEmptySprite, source, path, resolutions).then(done).catch(done);
applyStyle(layer, styleEmptySprite, source).then(done).catch(done);
});
test('should reject invalid sprite URL', function(done) {
applyStyle(layer, styleInvalidSpriteURL, source, path, resolutions).then(function() {
applyStyle(layer, styleInvalidSpriteURL, source).then(function() {
done(new Error('invalid sprite URL promise should reject'));

@@ -116,6 +107,4 @@ }).catch(function(err) {

describe('applyStyle sprite retrieval', function() {
const source = 'vector';
const source = 'openmaptiles';
const layer = new VectorLayer();
const path = null;
const resolutions = null;

@@ -130,8 +119,9 @@

nock('https://rawgit.com')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty@2x.json')
.reply(200, glStyleHiresSprite)
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty@2x.png')
.reply(200, {});
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty@2x.png');
applyStyle(layer, glStyle, source, path, resolutions).then(done).catch(done);
applyStyle(layer, glStyle, source).then(done).catch(done);

@@ -146,8 +136,9 @@ global.devicePixelRatio = orig;

nock('https://rawgit.com')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.json')
.reply(200, glStyleLoresSprite)
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.png')
.reply(200, '');
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty.png');
applyStyle(layer, glStyle, source, path, resolutions).then(done).catch(done);
applyStyle(layer, glStyle, source).then(done).catch(done);

@@ -171,3 +162,3 @@ global.devicePixelRatio = orig;

applyStyle(layer, glStyle, source, path, resolutions).then(done).catch(done);
applyStyle(layer, glStyle, source).then(done).catch(done);

@@ -191,3 +182,3 @@ global.devicePixelRatio = orig;

applyStyle(layer, glStyle, source, path, resolutions).then(function() {
applyStyle(layer, glStyle, source).then(function() {
done(new Error('failed lowres fallthrough promise should reject'));

@@ -212,3 +203,3 @@ }).catch(function(err) {

applyStyle(layer, style, source, path, resolutions).then(function() {
applyStyle(layer, style, source).then(function() {
done(new Error('empty sprite JSON promise should reject'));

@@ -227,10 +218,11 @@ }).catch(function(err) {

nock('https://rawgit.com')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.json')
.reply(200, glStyleLoresSprite)
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.png')
.reply(200, '')
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty.png')
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty@2x.json')
.reply(200, glStyleHiresSprite)
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty@2x.png')
.reply(200, {});
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty@2x.png');
});

@@ -249,3 +241,3 @@

should(layer.getStyle()).be.null;
applyStyle(layer, glStyle, 'mapbox').then(function() {
applyStyle(layer, glStyle, 'openmaptiles').then(function() {
should(layer.getStyle()).be.a.Function();

@@ -252,0 +244,0 @@ done();

114

__tests__/finalizeLayer.test.js

@@ -1,2 +0,2 @@

// import should from 'should/as-function';
import should from 'should';
import 'isomorphic-fetch';

@@ -8,3 +8,4 @@ import nock from 'nock';

import VectorSource from 'ol/source/Vector';
import ImageLayer from 'ol/layer/Image';
import TileLayer from 'ol/layer/Tile';
import TileSource from 'ol/source/Tile';

@@ -14,81 +15,84 @@ import glStyle from './fixtures/osm-liberty/style.json';

import {finalizeLayer} from '../index';
const finalizeLayer = require('../index').__get__('finalizeLayer');
describe('finalizeLayer promise', function() {
beforeEach(function() {
nock('https://rawgit.com')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.json')
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty.json')
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.png')
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty.png')
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty@2x.json')
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty@2x.json')
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty@2x.png')
.replyWithFile(200, __dirname + '/fixtures/osm-liberty/osm-liberty@2x.png');
});
afterEach(nock.cleanAll);
it ('should resolve with valid input and vector layer source', function(done) {
const layer = new VectorLayer();
layer.set('mapbox-layers', 'astring');
const map = new Map({layers: [layer]});
it('should resolve with valid input and vector layer source', function(done) {
const layer = new VectorLayer({
source: new VectorSource()
});
const map = new Map();
finalizeLayer(layer, ['astring'], glStyle, null, map)
finalizeLayer(layer, ['park'], glStyle, null, map)
.then(done).catch(function(err) {
done();
done(err);
});
});
it ('should resolve with valid input and non-vector source', function(done) {
const layer = new ImageLayer();
layer.set('mapbox-layers', 'astring');
it('should resolve with valid input and non-vector source', function(done) {
const layer = new TileLayer({
source: new TileSource({})
});
const map = new Map({layers: [layer]});
finalizeLayer(layer, ['astring'], glStyle, null, map)
finalizeLayer(layer, ['natural_earth'], glStyle, null, map)
.then(done).catch(function(err) {
done();
done(err);
});
});
it ('should resolve successfully if no layer ids, regardless of layer source', function(done) {
it('should not resolve at all if layer source does not exist', function(done) {
const layer = new VectorLayer();
layer.set('mapbox-layers', 'astring');
const map = new Map({layers: [layer]});
let resolved = false;
finalizeLayer(layer, ['eh'], glStyle, null, new Map())
.then(function() {
resolved = true;
}).catch(function(err) {
done(err);
});
finalizeLayer(layer, [], glStyle, null, map).then(done).catch(function(err) {
done(err);
});
setTimeout(function() {
should(resolved).be.false;
done();
}, 500);
});
it ('should not resolve at all if layer source does not exist', function(done) {
try {
it ('should time out', function() {
const layer = new VectorLayer();
finalizeLayer(layer, ['eh'], glStyle, null, new Map())
.then(done).catch(function(err) {
done(err);
});
}, 250);
} catch (err) {
done();
}
}, 1000);
it ('should not resolve until layer has a source', function(done) {
it('should not resolve until layer has a source', function(done) {
const map = new Map();
const layer = new VectorLayer();
const pr = finalizeLayer(layer, ['eh'], glStyle, null, map);
let resolved = false;
let waitForSource = true;
finalizeLayer(layer, ['park'], glStyle, null, map)
.then(function() {
resolved = true;
should(waitForSource).be.false;
done();
}).catch(function(err) {
done(err);
});
nock('https://rawgit.com')
.get('/maputnik/osm-liberty/gh-pages/sprites/osm-liberty.json')
.reply(200, glStyle);
try {
it ('should time out', function() {
pr.then(done).catch(done);
}, 250);
done(new Error('did not time out trying to resolve promise'));
} catch (err) {
// if we get here, assuming the promise is not resloving, which is correct
setTimeout(function() {
waitForSource = false;
should(resolved).be.false;
layer.setSource(new VectorSource());
pr.then(done).catch(done);
}
}, 500);
});
}, 10000);
it('should reject if applyStyle fails', function(done) {
it ('should reject if applyStyle fails', function(done) {
// applyStyle will fail if glStyle's version prop is not '8'

@@ -95,0 +99,0 @@ // note that to get to that point, the map has to have a layer that

2

__tests__/stylefunction.test.js

@@ -1,2 +0,2 @@

import should from 'should/as-function';
import should from 'should';
import deepFreeze from 'deep-freeze';

@@ -3,0 +3,0 @@ import applyStyleFunction from '../stylefunction';

158

__tests__/test.js

@@ -1,5 +0,4 @@

import 'babel-polyfill';
import should from 'should';
import 'should-approximately-deep';
import {applyBackground, apply, getLayer, getSource} from '../';
import olms, {applyBackground, apply, getLayer, getSource} from '../';
import Map from 'ol/Map';

@@ -11,3 +10,6 @@ import TileSource from 'ol/source/Tile';

import {toLonLat} from 'ol/proj';
import brightV9 from '../node_modules/mapbox-gl-styles/styles/bright-v9.json';
import 'isomorphic-fetch';
import nock from 'nock';
import WmsJson from '../example/data/wms.json';

@@ -17,12 +19,88 @@ import GeoJson from '../example/data/geojson.json';

import TileJson from '../example/data/tilejson.json';
import brightV9 from 'mapbox-gl-styles/styles/bright-v9.json';
delete brightV9.sprite;
import 'isomorphic-fetch';
import nock from 'nock';
describe('ol-mapbox-style', function() {
import camo3dJSON from './fixtures/camo3d.json';
beforeEach(function() {
// setup the style doc as a nock
nock('http://dummy')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/hot-osm.json')
.replyWithFile(200, __dirname + '/fixtures/hot-osm/hot-osm.json')
.get('/wms.json')
.reply(200, WmsJson)
.get('/geojson.json')
.reply(200, GeoJson)
.get('/geojson-inline.json')
.reply(200, Object.assign({}, GeoJsonInline, {sprite: 'http://dummy/sprite'}))
.get('/sprite.png')
.reply(200, '')
.get('/sprite.json')
.reply(200, {'not-empty': {}})
.get('/tilejson.json')
.reply(200, TileJson);
nock('https://osm-lambda.tegola.io/')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/v1/capabilities/osm.json')
.replyWithFile(200, __dirname + '/fixtures/hot-osm/osm.json');
nock('https://go-spatial.github.io/')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/carto-assets/spritesets/osm_tegola_spritesheet.json')
.replyWithFile(200, __dirname + '/fixtures/hot-osm/osm_tegola_spritesheet.json')
.get('/carto-assets/spritesets/osm_tegola_spritesheet')
.replyWithFile(200, __dirname + '/fixtures/hot-osm/osm_tegola_spritesheet.png')
.get('/carto-assets/spritesets/osm_tegola_spritesheet@2x.json')
.replyWithFile(200, __dirname + '/fixtures/hot-osm/osm_tegola_spritesheet@2x.json')
.get('/carto-assets/spritesets/osm_tegola_spritesheet@2x.png')
.replyWithFile(200, __dirname + '/fixtures/hot-osm/osm_tegola_spritesheet@2x.png');
});
delete brightV9.sprite;
afterEach(nock.cleanAll);
describe('ol-mapbox-style', function() {
describe('olms', function() {
let target;
beforeEach(function() {
target = document.createElement('div');
});
it('returns a promise which resolves with an ol.Map as argument', function(done) {
olms(target, 'http://dummy/hot-osm.json')
.then(function(map) {
should(map).be.instanceof(Map);
map.setTarget(undefined);
done();
})
.catch(function(error) {
done(error);
});
});
it('rejects when a TileJSON url is invalid', function(done) {
nock.cleanAll();
nock('http://dummy')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/hot-osm.json')
.replyWithFile(200, __dirname + '/fixtures/hot-osm/hot-osm.json');
nock('https://osm-lambda.tegola.io/')
.defaultReplyHeaders({'access-control-allow-origin': '*'})
.get('/v1/capabilities/osm.json')
.reply(500, {});
olms(target, 'http://dummy/hot-osm.json')
.then(function(map) {
should(map).be.instanceof(Map);
done(new Error('Should not resolve'));
})
.catch(function(err) {
should(err.message).be.exactly('Error accessing data for source osm');
done();
});
});
});
describe('applyBackground', function() {

@@ -51,3 +129,3 @@ it('applies a background to a map container', function() {

const map = apply(target, brightV9);
should(map instanceof Map).be.ok();
should(map).be.instanceof(Map);

@@ -61,7 +139,2 @@ map.getLayers().once('add', function() {

it('handles raster sources', function(done) {
nock('http://dummy')
.get('/wms.json')
.reply(200, WmsJson);
const map = apply(target, 'http://dummy/wms.json');

@@ -75,2 +148,4 @@

const wms = map.getLayers().item(1);
should(osm.get('mapbox-layers')).eql(['osm']);
should(wms.get('mapbox-layers')).eql(['states-wms']);
should(osm.getSource().getUrls()).eql([

@@ -91,6 +166,2 @@ 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',

it('handles geojson sources', function(done) {
nock('http://dummy')
.get('/geojson.json')
.reply(200, GeoJson);
const map = apply(target, 'http://dummy/geojson.json');

@@ -117,10 +188,2 @@ map.getLayers().once('add', function(e) {

nock('http://dummy')
.get('/geojson-inline.json')
.reply(200, Object.assign({}, GeoJsonInline, {sprite: 'http://dummy/sprite'}))
.get('/sprite.png')
.reply(200, '')
.get('/sprite.json')
.reply(200, {'not-empty': {}});
apply(map, 'http://dummy/geojson-inline.json');

@@ -130,6 +193,2 @@ });

it('handles raster sources from TileJSON', function(done) {
nock('http://dummy')
.get('/tilejson.json')
.reply(200, TileJson);
const map = apply(target, 'http://dummy/tilejson.json');

@@ -149,24 +208,14 @@ map.getLayers().once('add', function(e) {

// the sprite and glyph settings cause unnecessary fetches.
delete camo3dJSON.sprite;
delete camo3dJSON.glyphs;
// setup the style doc as a nock
nock('http://dummy')
.get('/camo3d.json')
.reply(200, camo3dJSON);
const map = apply(target, 'http://dummy/camo3d.json');
map.getLayers().once('add', function(e) {
should(toLonLat(map.getView().getCenter())).be.approximatelyDeep([7.1434, 50.7338], 1e-4);
should(map.getView().getZoom()).equal(14.11);
const layer = e.element;
layer.once('change:source', function() {
olms(target, 'http://dummy/hot-osm.json')
.then(function(map) {
should(toLonLat(map.getView().getCenter())).be.approximatelyDeep([8.54806714892635, 47.37180823552663], 1e-8);
should(map.getView().getZoom()).equal(12.241790506353492);
const layer = map.getLayers().item(0);
const source = layer.getSource();
should(source).be.instanceof(VectorTileSource);
should(layer.getStyle()).be.a.Function();
done();
}).catch(function(err) {
done(err);
});
done();
});
});

@@ -196,7 +245,10 @@

};
const map = apply(target, context);
map.getLayers().once('add', function() {
should(map.getLayers().item(0).get('visible')).be.false();
done();
});
olms(target, context)
.then(function(map) {
should(map.getLayers().item(0).get('visible')).be.false();
done();
})
.catch(function(err) {
done(err);
});
});

@@ -203,0 +255,0 @@

10

babel.config.js

@@ -1,5 +0,11 @@

module.exports = {
'presets': [
const config = {
presets: [
'@babel/preset-env'
]
};
if (process.env.NODE_ENV === 'test') {
config.plugins = ['rewire'];
}
module.exports = config;

2

dist/geojson-inline.js

@@ -1,2 +0,2 @@

(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{104:function(n,o,a){"use strict";a.r(o);a(62);var s=a(43);Object(s.a)("map","data/geojson-inline.json")}},[[104,0]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{104:function(n,o,a){"use strict";a.r(o);a(63);var s=a(43);Object(s.a)("map","data/geojson-inline.json")}},[[104,0]]]);
//# sourceMappingURL=geojson-inline.js.map

2

dist/geojson.js

@@ -1,2 +0,2 @@

(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{118:function(n,o,a){"use strict";a.r(o);a(62);var s=a(43);Object(s.a)("map","data/geojson.json")}},[[118,0]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{118:function(n,o,a){"use strict";a.r(o);a(63);var s=a(43);Object(s.a)("map","data/geojson.json")}},[[118,0]]]);
//# sourceMappingURL=geojson.js.map

2

dist/mapbox.js

@@ -1,2 +0,2 @@

(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{119:function(o,e,c){"use strict";c.r(e);c(62);var s=c(43),p=document.cookie.replace(/(?:(?:^|.*;\s*)mapbox_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");p||(p=window.prompt("Enter your Mapbox API access token:"),document.cookie="mapbox_access_token="+p+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),Object(s.a)("map","https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token="+p)}},[[119,0]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{119:function(o,e,c){"use strict";c.r(e);c(63);var s=c(43),p=document.cookie.replace(/(?:(?:^|.*;\s*)mapbox_access_token\s*\=\s*([^;]*).*$)|^.*$/,"$1");p||(p=window.prompt("Enter your Mapbox API access token:"),document.cookie="mapbox_access_token="+p+"; expires=Fri, 31 Dec 9999 23:59:59 GMT"),Object(s.b)("map","https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token="+p)}},[[119,0]]]);
//# sourceMappingURL=mapbox.js.map

2

dist/stylefunction.js

@@ -1,2 +0,2 @@

(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{120:function(e,t,n){"use strict";n.r(t);n(62);var a=n(63),o=n(78),s=n(95),r=n(77),w=n(94),c=n(74),u=new a.a({declutter:!0,source:new o.a({format:new s.a,url:"data/states.geojson"})}),d=new r.a({target:"map",view:new w.a({center:[-13603186.115192635,6785744.563386],zoom:2})});fetch("data/states.json").then(function(e){return e.json()}).then(function(e){Object(c.a)(u,e,"states"),d.addLayer(u)})}},[[120,0]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{120:function(e,t,a){"use strict";a.r(t);a(63);var n=a(64),s=a(78),o=a(94),r=a(70),w=a(95),c=a(75),u=new n.a({declutter:!0,source:new s.a({format:new o.a,url:"data/states.geojson"})}),d=new r.a({target:"map",view:new w.a({center:[-13603186.115192635,6785744.563386],zoom:2})});fetch("data/states.json").then(function(e){return e.json()}).then(function(e){Object(c.a)(u,e,"states"),-1===d.getLayers().getArray().indexOf(u)&&d.addLayer(u)})}},[[120,0]]]);
//# sourceMappingURL=stylefunction.js.map

2

dist/tilejson-vectortile.js

@@ -1,2 +0,2 @@

(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{121:function(a,c,o){"use strict";o.r(c);o(62);var t=o(43);Object(t.a)("map","https://rawgit.com/PetersonGIS/CamoStyle/2911cfa859354ba668c572787a3a9c54c2ea4474/camo.json")}},[[121,0]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{121:function(o,s,t){"use strict";t.r(s);t(63);var e=t(43);Object(e.a)("map"," https://demo.tegola.io/styles/hot-osm.json")}},[[121,0]]]);
//# sourceMappingURL=tilejson-vectortile.js.map

2

dist/tilejson.js

@@ -1,2 +0,2 @@

(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{122:function(n,a,o){"use strict";o.r(a);o(62);var s=o(43);Object(s.a)("map","data/tilejson.json")}},[[122,0]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{122:function(n,a,o){"use strict";o.r(a);o(63);var s=o(43);Object(s.a)("map","data/tilejson.json")}},[[122,0]]]);
//# sourceMappingURL=tilejson.js.map

2

dist/wms.js

@@ -1,2 +0,2 @@

(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{123:function(a,n,s){"use strict";s.r(n);s(62);var w=s(43);Object(w.a)("map","data/wms.json")}},[[123,0]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{123:function(n,s,w){"use strict";w.r(s);w(63);var a=w(43);Object(a.b)("map","data/wms.json")}},[[123,0]]]);
//# sourceMappingURL=wms.js.map

4

example/mapbox.js
import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';
import olms from 'ol-mapbox-style';

@@ -12,2 +12,2 @@ const baseUrl = 'https://api.mapbox.com/styles/v1/mapbox/bright-v9';

apply('map', baseUrl + '?access_token=' + key);
olms('map', baseUrl + '?access_token=' + key);

4

example/stylefunction.js

@@ -30,3 +30,5 @@ import 'ol/ol.css';

stylefunction(layer, glStyle, 'states');
map.addLayer(layer);
if (map.getLayers().getArray().indexOf(layer) === -1) {
map.addLayer(layer);
}
});

2

example/tilejson-vectortile.js
import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';
apply('map', 'https://rawgit.com/PetersonGIS/CamoStyle/2911cfa859354ba668c572787a3a9c54c2ea4474/camo.json');
apply('map', ' https://demo.tegola.io/styles/hot-osm.json');

4

example/wms.js
import 'ol/ol.css';
import {apply} from 'ol-mapbox-style';
import olms from 'ol-mapbox-style';
apply('map', 'data/wms.json');
olms('map', 'data/wms.json');

477

index.js

@@ -97,7 +97,16 @@ /*

* `source`, or a subset of layers from the same source. The source needs to be
* a `"type": "vector"`, `"type": "geojson"` or `"type": "raster"` source.
* a `"type": "vector"` or `"type": "geojson"` source.
*
* @param {ol.layer.VectorTile} layer OpenLayers layer.
* Two additional properties will be set on the provided layer:
*
* * `mapbox-source`: The `id` of the Mapbox Style document's source that the
* OpenLayers layer was created from. Usually `apply()` creates one
* OpenLayers layer per Mapbox Style source, unless the layer stack has
* layers from different sources in between.
* * `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
* included in the OpenLayers layer.
*
* @param {ol.layer.VectorTile|ol.layer.Vector} layer OpenLayers layer.
* @param {string|Object} glStyle Mapbox Style object.
* @param {string} source `source` key or an array of layer `id`s from the
* @param {string|Array<string>} source `source` key or an array of layer `id`s from the
* Mapbox Style object. When a `source` key is provided, all layers for the

@@ -124,3 +133,3 @@ * specified source will be included in the style function. When layer `id`s

}
if (!(layer instanceof VectorLayer) && !(layer instanceof VectorTileLayer)) {
if (!(layer instanceof VectorLayer || layer instanceof VectorTileLayer)) {
return reject(new Error('Can only apply to VectorLayer or VectorTileLayer'));

@@ -133,3 +142,7 @@ }

style = applyStyleFunction(layer, glStyle, source, resolutions, spriteData, spriteImageUrl, getFonts);
resolve();
if (!layer.getStyle()) {
reject(new Error(`Nothing to show for source [${source}]`));
} else {
resolve();
}
} else if (style) {

@@ -185,2 +198,5 @@ layer.setStyle(style);

function setBackground(map, layer) {
const background = {
type: layer.type
};
function updateStyle() {

@@ -193,10 +209,12 @@ const element = map.getTargetElement();

const paint = layer.paint || {};
background['paint'] = paint;
background.id = 'olms-bg-' + paint['background-opacity'] + paint['background-color'];
const zoom = map.getView().getZoom();
if ('background-color' in paint) {
const bg = getValue(layer, 'paint', 'background-color', zoom, emptyObj);
if (paint['background-color'] !== undefined) {
const bg = getValue(background, 'paint', 'background-color', zoom, emptyObj);
element.style.backgroundColor = Color.parse(bg).toString();
}
if ('background-opacity' in paint) {
if (paint['background-opacity'] !== undefined) {
element.style.backgroundOpacity =
getValue(layer, 'paint', 'background-opacity', zoom, emptyObj);
getValue(background, 'paint', 'background-opacity', zoom, emptyObj);
}

@@ -215,2 +233,5 @@ if (layout.visibility == 'none') {

/**
* ```js
* import {applyBackground} from 'ol-mapbox-style';
* ```
* Applies properties of the Mapbox Style's first `background` layer to the map.

@@ -240,3 +261,137 @@ * @param {ol.Map} map OpenLayers Map.

function setupVectorLayer(glSource, accessToken, url) {
let tiles = glSource.tiles;
if (url) {
if (url.indexOf('mapbox://') == 0) {
const mapid = url.replace('mapbox://', '');
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;
});
}
}
return tiles ? (function() {
const tileGrid = createXYZ({
tileSize: 512,
maxZoom: 'maxzoom' in glSource ? glSource.maxzoom : 22,
minZoom: glSource.minzoom
});
return new VectorTileLayer({
declutter: true,
maxResolution: tileGrid.getMinZoom() > 0 ?
tileGrid.getResolution(tileGrid.getMinZoom()) : undefined,
source: new VectorTileSource({
attributions: glSource.attribution,
format: new MVT(),
tileGrid: tileGrid,
urls: tiles
}),
visible: false
});
})() : (function() {
const layer = new VectorTileLayer({
declutter: true,
visible: false
});
const tilejson = new TileJSON({
url: url
});
const key = tilejson.on('change', function() {
if (tilejson.getState() == 'ready') {
const tileJSONDoc = tilejson.getTileJSON();
const tiles = Array.isArray(tileJSONDoc.tiles) ? tileJSONDoc.tiles : [tileJSONDoc.tiles];
for (let i = 0, ii = tiles.length; i < ii; ++i) {
const tile = tiles[i];
if (tile.indexOf('http') != 0) {
tiles[i] = glSource.url + tile;
}
}
const tileGrid = tilejson.getTileGrid();
layer.setSource(new VectorTileSource({
attributions: tilejson.getAttributions() || tileJSONDoc.attribution,
format: new MVT(),
tileGrid: createXYZ({
minZoom: tileGrid.getMinZoom(),
maxZoom: tileGrid.getMaxZoom(),
tileSize: 512
}),
urls: tiles
}));
if (tileGrid.getMinZoom() > 0) {
layer.setMaxResolution(
tileGrid.getResolution(tileGrid.getMinZoom()));
}
unByKey(key);
} else if (tilejson.getState() == 'error') {
layer.setSource(undefined);
unByKey(key);
}
});
return layer;
})();
}
function setupRasterLayer(glSource, url) {
const layer = new TileLayer();
let source;
if (!glSource.tiles) {
source = new TileJSON({
transition: 0,
url: url,
crossOrigin: 'anonymous'
});
const key = source.on('change', function() {
const state = source.getState();
if (state === 'ready' || state === 'error') {
unByKey(key);
layer.setSource(source);
}
});
} else {
source = new XYZ({
transition: 0,
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) {
const bbox = source.getTileGrid().getTileCoordExtent(tile.getTileCoord());
src = src.replace('{bbox-epsg-3857}', bbox.toString());
}
tile.getImage().src = src;
});
layer.setSource(source);
return layer;
}
const geoJsonFormat = new GeoJSON();
function setupGeoJSONLayer(glSource, path) {
const data = glSource.data;
let features, geoJsonUrl;
if (typeof data == 'string') {
geoJsonUrl = withPath(data, path);
} else {
features = geoJsonFormat.readFeatures(data, {featureProjection: 'EPSG:3857'});
}
return new VectorLayer({
source: new VectorSource({
attributions: glSource.attribution,
features: features,
format: geoJsonFormat,
url: geoJsonUrl
}),
visible: false
});
}
function processStyle(glStyle, map, baseUrl, host, path, accessToken) {
const promises = [];
const view = map.getView();

@@ -264,7 +419,5 @@ if ('center' in glStyle && !view.getCenter()) {

const glLayers = glStyle.layers;
const geoJsonFormat = new GeoJSON();
let layerIds = [];
let glLayer, glSource, glSourceId, id, layer, mapid, transition, url;
let glLayer, glSource, glSourceId, id, layer, url;
for (let i = 0, ii = glLayers.length; i < ii; ++i) {

@@ -278,130 +431,16 @@ glLayer = glLayers[i];

if (id != glSourceId) {
finalizeLayer(layer, layerIds, glStyle, path, map);
layerIds = [];
if (layerIds.length) {
promises.push(finalizeLayer(layer, layerIds, glStyle, path, map));
layerIds = [];
}
glSource = glStyle.sources[id];
url = glSource.url;
let tiles = glSource.tiles;
if (url) {
if (url.indexOf('mapbox://') == 0) {
mapid = url.replace('mapbox://', '');
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;
});
}
}
if (glSource.type == 'vector') {
layer = tiles ? (function() {
const tileGrid = createXYZ({
tileSize: 512,
maxZoom: 'maxzoom' in glSource ? glSource.maxzoom : 22,
minZoom: glSource.minzoom
});
return new VectorTileLayer({
declutter: true,
maxResolution: tileGrid.getMinZoom() > 0 ?
tileGrid.getResolution(tileGrid.getMinZoom()) : undefined,
source: new VectorTileSource({
attributions: glSource.attribution,
format: new MVT(),
tileGrid: tileGrid,
urls: tiles
}),
visible: false,
zIndex: i
});
})() : (function() {
const layer = new VectorTileLayer({
declutter: true,
visible: false,
zIndex: i
});
const tilejson = new TileJSON({
url: url
});
const key = tilejson.on('change', function() {
if (tilejson.getState() == 'ready') {
const tileJSONDoc = tilejson.getTileJSON();
const tiles = Array.isArray(tileJSONDoc.tiles) ? tileJSONDoc.tiles : [tileJSONDoc.tiles];
for (let i = 0, ii = tiles.length; i < ii; ++i) {
const tile = tiles[i];
if (tile.indexOf('http') != 0) {
tiles[i] = glSource.url + tile;
}
}
const tileGrid = tilejson.getTileGrid();
layer.setSource(new VectorTileSource({
attributions: tilejson.getAttributions() || tileJSONDoc.attribution,
format: new MVT(),
tileGrid: createXYZ({
minZoom: tileGrid.getMinZoom(),
maxZoom: tileGrid.getMaxZoom(),
tileSize: 512
}),
urls: tiles
}));
if (tileGrid.getMinZoom() > 0) {
layer.setMaxResolution(
tileGrid.getResolution(tileGrid.getMinZoom()));
}
unByKey(key);
}
});
return layer;
})();
layer = setupVectorLayer(glSource, accessToken, url);
} else if (glSource.type == 'raster') {
let source;
if (!glSource.tiles) {
source = (function() {
return new TileJSON({
transition: transition,
url: url,
crossOrigin: 'anonymous'
});
})();
} else {
source = new XYZ({
transition: transition,
attributions: glSource.attribution,
minZoom: glSource.minzoom,
maxZoom: 'maxzoom' in glSource ? glSource.maxzoom : 22,
tileSize: glSource.tileSize || 512,
url: url,
urls: glSource.tiles,
crossOrigin: 'anonymous'
});
transition = 0;
}
source.setTileLoadFunction(function(tile, src) {
if (src.indexOf('{bbox-epsg-3857}') != -1) {
const bbox = source.getTileGrid().getTileCoordExtent(tile.getTileCoord());
src = src.replace('{bbox-epsg-3857}', bbox.toString());
}
tile.getImage().src = src;
});
layer = new TileLayer({
source: source,
visible: glLayer.layout ? glLayer.layout.visibility !== 'none' : true
});
layer = setupRasterLayer(glSource, url);
layer.setVisible(glLayer.layout ? glLayer.layout.visibility !== 'none' : true);
} else if (glSource.type == 'geojson') {
const data = glSource.data;
let features, geoJsonUrl;
if (typeof data == 'string') {
geoJsonUrl = withPath(data, path);
} else {
features = geoJsonFormat.readFeatures(data, {featureProjection: 'EPSG:3857'});
}
layer = new VectorLayer({
source: new VectorSource({
attributions: glSource.attribution,
features: features,
format: geoJsonFormat,
url: geoJsonUrl
}),
visible: false,
zIndex: i
});
layer = setupGeoJSONLayer(glSource, path);
}

@@ -411,9 +450,19 @@ glSourceId = id;

layerIds.push(glLayer.id);
if (layer) {
layer.setZIndex(i);
layer.set('mapbox-source', glSourceId);
layer.set('mapbox-layers', layerIds);
}
}
}
finalizeLayer(layer, layerIds, glStyle, path, map);
promises.push(finalizeLayer(layer, layerIds, glStyle, path, map));
map.set('mapbox-style', glStyle);
return Promise.all(promises);
}
/**
* ```js
* import olms from 'ol-mapbox-style';
* ```
*
* Loads and applies a Mapbox Style object to an OpenLayers Map. This includes

@@ -437,4 +486,4 @@ * the map background, the layers, the center and the zoom.

*
* The map returned by this function will have an additional `mapbox-style`
* property which holds the Mapbox Style object.
* This function sets an additional `mapbox-style` property on the OpenLayers
* map instance, which holds the Mapbox Style object.
*

@@ -453,8 +502,10 @@ * @param {ol.Map|HTMLElement|string} map Either an existing OpenLayers Map

* is loaded and parsed.
* @return {ol.Map} The OpenLayers Map instance that will be populated with the
* contents described in the Mapbox Style object.
* @return {Promise} A promise that resolves after all layers have been added to
* the OpenLayers Map instance, their sources set, and their styles applied. the
* `resolve` callback will be called with the OpenLayers Map instance as
* argument.
*/
export function apply(map, style) {
export default function olms(map, style) {
let accessToken, baseUrl, host, path;
let accessToken, baseUrl, host, path, promise;
accessToken = baseUrl = host = path = '';

@@ -474,25 +525,68 @@

}
fetch(style, {
credentials: 'same-origin'
})
.then(function(response) {
return response.json();
promise = new Promise(function(resolve, reject) {
fetch(style, {
credentials: 'same-origin'
})
.then(function(glStyle) {
const a = document.createElement('A');
a.href = style;
path = a.pathname.split('/').slice(0, -1).join('/') + '/';
host = style.substr(0, style.indexOf(path));
.then(function(response) {
return response.json();
})
.then(function(glStyle) {
const a = document.createElement('A');
a.href = style;
path = a.pathname.split('/').slice(0, -1).join('/') + '/';
host = style.substr(0, style.indexOf(path));
processStyle(glStyle, map, baseUrl, host, path, accessToken);
})
.catch(function(err) {
throw new Error(`Could not load ${style}: ${err.message}`);
});
processStyle(glStyle, map, baseUrl, host, path, accessToken)
.then(function() {
resolve(map);
})
.catch(reject);
})
.catch(function(err) {
reject(new Error(`Could not load ${style}: ${err.message}`));
});
});
} else {
setTimeout(function() {
processStyle(style, map);
}, 0);
promise = new Promise(function(resolve, reject) {
processStyle(style, map)
.then(function() {
resolve(map);
})
.catch(reject);
});
}
return promise;
}
/**
* ```js
* import {apply} from 'ol-mapbox-style';
* ```
* Like `olms`, but returns an `ol.Map` instance instead of a `Promise`.
*
* @param {ol.Map|HTMLElement|string} map Either an existing OpenLayers Map
* instance, or a HTML element, or the id of a HTML element that will be the
* target of a new OpenLayers Map.
* @param {string|Object} style JSON style object or style url pointing to a
* Mapbox Style object. When using Mapbox APIs, the url must contain an access
* token and look like
* `https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=[your_access_token_here]`.
* When passed as JSON style object, all OpenLayers layers created by `apply()`
* will be immediately available, but they may not have a source yet (i.e. when
* they are defined by a TileJSON url in the Mapbox Style document). When passed
* as style url, layers will be added to the map when the Mapbox Style document
* is loaded and parsed.
* @return {ol.Map} The OpenLayers Map instance that will be populated with the
* contents described in the Mapbox Style object.
*/
export function apply(map, style) {
if (!(map instanceof Map)) {
map = new Map({
target: map
});
}
setTimeout(function() {
olms(map, style);
}, 0);
return map;

@@ -510,42 +604,39 @@ }

*
* @param {ol.Map|HTMLElement|string} layer Either an existing OpenLayers Map
* instance, or a HTML element, or the id of a HTML element that will be the
* target of a new OpenLayers Map.
* @param {array} layerIds Array containing ids of already-processed layers.
* @param {ol.Map|HTMLElement|string} glStyle Style as a JSON object.
* @param {ol.Map|HTMLElement|string} path The path part of the URL to the style,
* if the style was defined as a string. (Why this if glStyle already being passed?)
* @param {ol.Map|HTMLElement|string} map Either an existing OpenLayers Map
* instance, or a HTML element, or the id of a HTML element that will be the
* target of a new OpenLayers Map.
* @param {ol.layer.Layer} layer An OpenLayers layer instance.
* @param {Array<string>} layerIds Array containing layer ids of already-processed layers.
* @param {Object} glStyle Style as a JSON object.
* @param {string|undefined} path The path part of the style URL. Only required
* when a relative path is used with the `"sprite"` property of the style.
* @param {ol.Map} map OpenLayers Map.
* @return {Promise} Returns a promise that resolves after the source has
* been set on the specified layer, and the style has been applied.
*/
export function finalizeLayer(layer, layerIds, glStyle, path, map) {
function finalizeLayer(layer, layerIds, glStyle, path, map) {
return new Promise(function(resolve, reject) {
if (layerIds.length > 0) {
const setStyle = function() {
const source = layer.getSource();
if ((source instanceof VectorSource) || (source instanceof VectorTileSource)) {
applyStyle(layer, glStyle, layerIds, path).then(function() {
layer.setVisible(true);
resolve();
}, function(e) {
reject(e);
});
} else {
const setStyle = function() {
const source = layer.getSource();
if (source instanceof VectorSource || source instanceof VectorTileSource) {
applyStyle(layer, glStyle, layerIds, path).then(function() {
layer.setVisible(true);
resolve();
}, function(e) {
reject(e);
});
} else {
if (!source || source.getState() === 'error') {
reject(new Error('Error accessing data for source ' + layer.get('mapbox-source')));
} else {
resolve();
}
};
}
};
if (map.getLayers().getArray().indexOf(layer) === -1) {
map.addLayer(layer);
if (layer.getSource()) {
setStyle();
} else {
layer.once('change:source', setStyle);
}
}
if (layer.getSource()) {
setStyle();
} else {
resolve();
layer.once('change:source', setStyle);
}

@@ -557,2 +648,5 @@ });

/**
* ```js
* import {getLayer} from 'ol-mapbox-style';
* ```
* Get the OpenLayers layer instance that contains the provided Mapbox Style

@@ -575,2 +669,5 @@ * `layer`. Note that multiple Mapbox Style layers are combined in a single

/**
* ```js
* import {getSource} from 'ol-mapbox-style';
* ```
* Get the OpenLayers source instance for the provided Mapbox Style `source`.

@@ -577,0 +674,0 @@ * @param {ol.Map} map OpenLayers Map.

14

olms.js

@@ -1,9 +0,9 @@

import {apply, applyBackground, applyStyle} from './index';
import olms, {apply, applyBackground, applyStyle} from './index';
import stylefunction from './stylefunction';
export default {
apply: apply,
applyBackground: applyBackground,
applyStyle: applyStyle,
stylefunction: stylefunction
};
olms.apply = apply;
olms.applyBackground = applyBackground;
olms.applyStyle = applyStyle;
olms.stylefunction = stylefunction;
export default olms;

3

package.json
{
"name": "ol-mapbox-style",
"version": "3.2.1",
"version": "3.3.0",
"description": "Create OpenLayers maps from Mapbox Style objects",

@@ -87,2 +87,3 @@ "main": "index.js",

"babel-loader": "^8.0.4",
"babel-plugin-rewire": "^1.2.0",
"canvas": "^1.6.13",

@@ -89,0 +90,0 @@ "copy-webpack-plugin": "^4.6.0",

92

README.md

@@ -12,6 +12,6 @@ # ol-mapbox-style

```js
import { apply } from 'ol-mapbox-style';
import olms from 'ol-mapbox-style';
var key = 'Your Mapbox Access Token here';
apply('map', 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=' + key);
olms('map', 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=' + key);
```

@@ -58,10 +58,12 @@

- [Parameters](#parameters-1)
- [olms](#olms)
- [Parameters](#parameters-2)
- [apply](#apply)
- [Parameters](#parameters-2)
- [Parameters](#parameters-3)
- [getLayer](#getlayer)
- [Parameters](#parameters-3)
- [Parameters](#parameters-4)
- [getSource](#getsource)
- [Parameters](#parameters-4)
- [Parameters](#parameters-5)
- [stylefunction](#stylefunction)
- [Parameters](#parameters-5)
- [Parameters](#parameters-6)

@@ -74,9 +76,18 @@ ### applyStyle

`source`, or a subset of layers from the same source. The source needs to be
a `"type": "vector"`, `"type": "geojson"` or `"type": "raster"` source.
a `"type": "vector"` or `"type": "geojson"` source.
Two additional properties will be set on the provided layer:
- `mapbox-source`: The `id` of the Mapbox Style document's source that the
OpenLayers layer was created from. Usually `apply()` creates one
OpenLayers layer per Mapbox Style source, unless the layer stack has
layers from different sources in between.
- `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
included in the OpenLayers layer.
#### Parameters
- `layer` **ol.layer.VectorTile** OpenLayers layer.
- `layer` **(ol.layer.VectorTile | ol.layer.Vector)** OpenLayers layer.
- `glStyle` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox Style object.
- `source` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** `source` key or an array of layer `id`s from the
- `source` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>)** `source` key or an array of layer `id`s from the
Mapbox Style object. When a `source` key is provided, all layers for the

@@ -94,2 +105,6 @@ specified source will be included in the style function. When layer `id`s

```js
import {applyBackground} from 'ol-mapbox-style';
```
Applies properties of the Mapbox Style's first `background` layer to the map.

@@ -102,4 +117,8 @@

### apply
### olms
```js
import olms from 'ol-mapbox-style';
```
Loads and applies a Mapbox Style object to an OpenLayers Map. This includes

@@ -123,4 +142,4 @@ the map background, the layers, the center and the zoom.

The map returned by this function will have an additional `mapbox-style`
property which holds the Mapbox Style object.
This function sets an additional `mapbox-style` property on the OpenLayers
map instance, which holds the Mapbox Style object.

@@ -142,2 +161,30 @@ #### Parameters

Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** A promise that resolves after all layers have been added to
the OpenLayers Map instance, their sources set, and their styles applied. the
`resolve` callback will be called with the OpenLayers Map instance as
argument.
### apply
```js
import {apply} from 'ol-mapbox-style';
```
Like `olms`, but returns an `ol.Map` instance instead of a `Promise`.
#### Parameters
- `map` **(ol.Map | [HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** Either an existing OpenLayers Map
instance, or a HTML element, or the id of a HTML element that will be the
target of a new OpenLayers Map.
- `style` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** JSON style object or style url pointing to a
Mapbox Style object. When using Mapbox APIs, the url must contain an access
token and look like
`https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=[your_access_token_here]`.
When passed as JSON style object, all OpenLayers layers created by `apply()`
will be immediately available, but they may not have a source yet (i.e. when
they are defined by a TileJSON url in the Mapbox Style document). When passed
as style url, layers will be added to the map when the Mapbox Style document
is loaded and parsed.
Returns **ol.Map** The OpenLayers Map instance that will be populated with the

@@ -148,2 +195,6 @@ contents described in the Mapbox Style object.

```js
import {getLayer} from 'ol-mapbox-style';
```
Get the OpenLayers layer instance that contains the provided Mapbox Style

@@ -162,2 +213,6 @@ `layer`. Note that multiple Mapbox Style layers are combined in a single

```js
import {getSource} from 'ol-mapbox-style';
```
Get the OpenLayers source instance for the provided Mapbox Style `source`.

@@ -174,2 +229,6 @@

```js
import stylefunction from 'ol-mapbox-style/stylefunction';
```
Creates a style function from the `glStyle` object for all layers that use

@@ -179,2 +238,11 @@ the specified `source`, which needs to be a `"type": "vector"` or

Two additional properties will be set on the provided layer:
- `mapbox-source`: The `id` of the Mapbox Style document's source that the
OpenLayers layer was created from. Usually `apply()` creates one
OpenLayers layer per Mapbox Style source, unless the layer stack has
layers from different sources in between.
- `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
included in the OpenLayers layer.
#### Parameters

@@ -181,0 +249,0 @@

25

stylefunction.js

@@ -134,2 +134,5 @@ /*

/**
* ```js
* import stylefunction from 'ol-mapbox-style/stylefunction';
* ```
* Creates a style function from the `glStyle` object for all layers that use

@@ -139,2 +142,11 @@ * the specified `source`, which needs to be a `"type": "vector"` or

*
* Two additional properties will be set on the provided layer:
*
* * `mapbox-source`: The `id` of the Mapbox Style document's source that the
* OpenLayers layer was created from. Usually `apply()` creates one
* OpenLayers layer per Mapbox Style source, unless the layer stack has
* layers from different sources in between.
* * `mapbox-layers`: The `id`s of the Mapbox Style document's layers that are
* included in the OpenLayers layer.
*
* @param {ol.layer.Vector|ol.layer.VectorTile} olLayer OpenLayers layer to

@@ -242,2 +254,10 @@ * apply the style to. In addition to the style, the layer will get two

mapboxSource = layer.source;
const source = glStyle.sources[mapboxSource];
if (!source) {
throw new Error(`Source "${mapboxSource}" is not defined`);
}
const type = source.type;
if (type !== 'vector' && type !== 'geojson') {
throw new Error(`Source "${mapboxSource}" is not of type "vector" or "geojson", but "${type}"`);
}
}

@@ -340,3 +360,2 @@ let layers = layersBySourceLayer[sourceLayer];

} else {
opacity = getValue(layer, 'paint', 'fill-opacity', zoom, f);
color = colorWithOpacity(getValue(layer, 'paint', 'fill-color', zoom, f), opacity);

@@ -377,7 +396,7 @@ if (color) {

}
if (type != 1) {
if (type != 1 && layer.type == 'line') {
color = !('line-pattern' in paint) && 'line-color' in paint ?
colorWithOpacity(getValue(layer, 'paint', 'line-color', zoom, f), getValue(layer, 'paint', 'line-opacity', zoom, f)) :
undefined;
const width = layer.type == 'line' ? getValue(layer, 'paint', 'line-width', zoom, f) : 1;
const width = getValue(layer, 'paint', 'line-width', zoom, f);
if (color && width > 0) {

@@ -384,0 +403,0 @@ ++stylesLength;

__tests__/fixtures/camo3d.json
__tests__/index.html
__tests__/fixtures/style-empty-sprite.json

Sorry, the diff of this file is too big to display

__tests__/fixtures/style-invalid-sprite-url.json

Sorry, the diff of this file is too big to display

dist/common.js

Sorry, the diff of this file is too big to display

dist/common.js.map

Sorry, the diff of this file is not supported yet

dist/mapbox.js.map

Sorry, the diff of this file is not supported yet

dist/olms.js

Sorry, the diff of this file is too big to display

dist/olms.js.map

Sorry, the diff of this file is not supported yet

dist/stylefunction.js.map

Sorry, the diff of this file is not supported yet

dist/tilejson-vectortile.js.map

Sorry, the diff of this file is not supported yet

dist/wms.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc