ol-mapbox-style
Advanced tools
Comparing version 3.0.0-beta.3 to 3.0.0-beta.4
import 'babel-polyfill'; | ||
import should from 'should/as-function'; | ||
import 'should-approximately-deep'; | ||
import {applyBackground, applyStyle, apply} from '../'; | ||
import Map from 'ol/CanvasMap'; | ||
import {applyBackground, applyStyle, apply, getLayer, getSource} from '../'; | ||
import Map from 'ol/Map'; | ||
import TileSource from 'ol/source/Tile'; | ||
@@ -65,6 +65,6 @@ import VectorSource from 'ol/source/Vector'; | ||
setTimeout(function() { | ||
map.getLayers().once('add', function() { | ||
should(map.getLayers().item(0).getStyle()).be.a.Function(); | ||
done(); | ||
}, 200); | ||
}); | ||
}); | ||
@@ -92,3 +92,3 @@ | ||
should(osm.getSource().getAttributions()()[0]).equal( | ||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.'); | ||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.'); | ||
should(wms.getSource().getTileGrid().getTileSize()).eql(256); | ||
@@ -188,3 +188,3 @@ should(wms.getSource().getTileGrid().getMaxZoom()).eql(12); | ||
it('handles visibility for raster layers', function() { | ||
it('handles visibility for raster layers', function(done) { | ||
var context = { | ||
@@ -212,6 +212,41 @@ 'version': 8, | ||
var map = apply(target, context); | ||
should(map.getLayers().item(0).get('visible')).be.false(); | ||
map.getLayers().once('add', function() { | ||
should(map.getLayers().item(0).get('visible')).be.false(); | ||
done(); | ||
}); | ||
}); | ||
}); | ||
describe('getLayer', function() { | ||
var target; | ||
beforeEach(function() { | ||
target = document.createElement('div'); | ||
}); | ||
it('returns a layer', function(done) { | ||
var map = apply(target, brightV9); | ||
map.once('change:mapbox-style', function() { | ||
should(getLayer(map, 'landuse_park')).be.an.instanceOf(VectorTileLayer); | ||
done(); | ||
}); | ||
}); | ||
}); | ||
describe('getSource', function() { | ||
var target; | ||
beforeEach(function() { | ||
target = document.createElement('div'); | ||
}); | ||
it('returns a source', function(done) { | ||
var map = apply(target, brightV9); | ||
map.once('change:mapbox-style', function() { | ||
should(getSource(map, 'mapbox')).be.an.instanceOf(VectorTileSource); | ||
done(); | ||
}); | ||
}); | ||
}); | ||
}); |
@@ -8,30 +8,34 @@ // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | ||
(function() { | ||
var lastTime = 0; | ||
var vendors = ['ms', 'moz', 'webkit', 'o']; | ||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { | ||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; | ||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] | ||
|| window[vendors[x]+'CancelRequestAnimationFrame']; | ||
} | ||
if (!window.requestAnimationFrame) | ||
window.requestAnimationFrame = function(callback, element) { | ||
var currTime = new Date().getTime(); | ||
var timeToCall = Math.max(0, 16 - (currTime - lastTime)); | ||
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, | ||
timeToCall); | ||
lastTime = currTime + timeToCall; | ||
return id; | ||
}; | ||
if (!window.cancelAnimationFrame) | ||
window.cancelAnimationFrame = function(id) { | ||
clearTimeout(id); | ||
}; | ||
var lastTime = 0; | ||
var vendors = ['ms', 'moz', 'webkit', 'o']; | ||
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { | ||
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; | ||
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || | ||
window[vendors[x] + 'CancelRequestAnimationFrame']; | ||
} | ||
if (!window.requestAnimationFrame) { | ||
window.requestAnimationFrame = function(callback, element) { | ||
var currTime = new Date().getTime(); | ||
var timeToCall = Math.max(0, 16 - (currTime - lastTime)); | ||
var id = window.setTimeout(function() { | ||
callback(currTime + timeToCall); | ||
}, | ||
timeToCall); | ||
lastTime = currTime + timeToCall; | ||
return id; | ||
}; | ||
} | ||
if (!window.cancelAnimationFrame) { | ||
window.cancelAnimationFrame = function(id) { | ||
clearTimeout(id); | ||
}; | ||
} | ||
}()); | ||
(function() { | ||
var canvasBindings = require("canvas/lib/bindings"); | ||
window.CanvasGradient = canvasBindings.CanvasGradient; | ||
window.CanvasPattern = canvasBindings.CanvasPattern; | ||
var canvasBindings = require('canvas/lib/bindings'); | ||
window.CanvasGradient = canvasBindings.CanvasGradient; | ||
window.CanvasPattern = canvasBindings.CanvasPattern; | ||
}()); |
@@ -1,1 +0,1038 @@ | ||
{"zoom": 6, "center": [5, 5], "layers": [{"source": "points", "type": "symbol", "id": "points", "paint": {"icon-image": {"property": "cat", "type": "categorical", "stops": [[1, "accommodation_camping"], [2, "amenity_firestation"]]}}}], "name": "QGIS project", "sources": {"points": {"data": {"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[{"type":"Feature","properties":{"n":2,"cat":1},"geometry":{"type":"Point","coordinates":[0.5,0.5]}},{"type":"Feature","properties":{"n":3,"cat":2},"geometry":{"type":"Point","coordinates":[0.5,1.5]}},{"type":"Feature","properties":{"n":4,"cat":1},"geometry":{"type":"Point","coordinates":[0.5,2.5]}},{"type":"Feature","properties":{"n":5,"cat":1},"geometry":{"type":"Point","coordinates":[0.5,3.5]}},{"type":"Feature","properties":{"n":6,"cat":1},"geometry":{"type":"Point","coordinates":[0.5,4.5]}},{"type":"Feature","properties":{"n":7,"cat":1},"geometry":{"type":"Point","coordinates":[0.5,5.5]}},{"type":"Feature","properties":{"n":8,"cat":2},"geometry":{"type":"Point","coordinates":[0.5,6.5]}},{"type":"Feature","properties":{"n":9,"cat":1},"geometry":{"type":"Point","coordinates":[0.5,7.5]}},{"type":"Feature","properties":{"n":10,"cat":1},"geometry":{"type":"Point","coordinates":[0.5,8.5]}},{"type":"Feature","properties":{"n":11,"cat":1},"geometry":{"type":"Point","coordinates":[0.5,9.5]}},{"type":"Feature","properties":{"n":12,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,0.5]}},{"type":"Feature","properties":{"n":13,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,1.5]}},{"type":"Feature","properties":{"n":14,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,2.5]}},{"type":"Feature","properties":{"n":15,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,3.5]}},{"type":"Feature","properties":{"n":16,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,4.5]}},{"type":"Feature","properties":{"n":17,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,5.5]}},{"type":"Feature","properties":{"n":18,"cat":2},"geometry":{"type":"Point","coordinates":[1.5,6.5]}},{"type":"Feature","properties":{"n":19,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,7.5]}},{"type":"Feature","properties":{"n":20,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,8.5]}},{"type":"Feature","properties":{"n":21,"cat":1},"geometry":{"type":"Point","coordinates":[1.5,9.5]}},{"type":"Feature","properties":{"n":22,"cat":2},"geometry":{"type":"Point","coordinates":[2.5,0.5]}},{"type":"Feature","properties":{"n":23,"cat":2},"geometry":{"type":"Point","coordinates":[2.5,1.5]}},{"type":"Feature","properties":{"n":24,"cat":2},"geometry":{"type":"Point","coordinates":[2.5,2.5]}},{"type":"Feature","properties":{"n":25,"cat":2},"geometry":{"type":"Point","coordinates":[2.5,3.5]}},{"type":"Feature","properties":{"n":26,"cat":2},"geometry":{"type":"Point","coordinates":[2.5,4.5]}},{"type":"Feature","properties":{"n":27,"cat":2},"geometry":{"type":"Point","coordinates":[2.5,5.5]}},{"type":"Feature","properties":{"n":28,"cat":1},"geometry":{"type":"Point","coordinates":[2.5,6.5]}},{"type":"Feature","properties":{"n":29,"cat":1},"geometry":{"type":"Point","coordinates":[2.5,7.5]}},{"type":"Feature","properties":{"n":30,"cat":1},"geometry":{"type":"Point","coordinates":[2.5,8.5]}},{"type":"Feature","properties":{"n":31,"cat":2},"geometry":{"type":"Point","coordinates":[2.5,9.5]}},{"type":"Feature","properties":{"n":32,"cat":2},"geometry":{"type":"Point","coordinates":[3.5,0.5]}},{"type":"Feature","properties":{"n":33,"cat":2},"geometry":{"type":"Point","coordinates":[3.5,1.5]}},{"type":"Feature","properties":{"n":34,"cat":2},"geometry":{"type":"Point","coordinates":[3.5,2.5]}},{"type":"Feature","properties":{"n":35,"cat":1},"geometry":{"type":"Point","coordinates":[3.5,3.5]}},{"type":"Feature","properties":{"n":36,"cat":1},"geometry":{"type":"Point","coordinates":[3.5,4.5]}},{"type":"Feature","properties":{"n":37,"cat":2},"geometry":{"type":"Point","coordinates":[3.5,5.5]}},{"type":"Feature","properties":{"n":38,"cat":2},"geometry":{"type":"Point","coordinates":[3.5,6.5]}},{"type":"Feature","properties":{"n":39,"cat":1},"geometry":{"type":"Point","coordinates":[3.5,7.5]}},{"type":"Feature","properties":{"n":40,"cat":1},"geometry":{"type":"Point","coordinates":[3.5,8.5]}},{"type":"Feature","properties":{"n":41,"cat":1},"geometry":{"type":"Point","coordinates":[3.5,9.5]}},{"type":"Feature","properties":{"n":42,"cat":2},"geometry":{"type":"Point","coordinates":[4.5,0.5]}},{"type":"Feature","properties":{"n":43,"cat":2},"geometry":{"type":"Point","coordinates":[4.5,1.5]}},{"type":"Feature","properties":{"n":44,"cat":1},"geometry":{"type":"Point","coordinates":[4.5,2.5]}},{"type":"Feature","properties":{"n":45,"cat":1},"geometry":{"type":"Point","coordinates":[4.5,3.5]}},{"type":"Feature","properties":{"n":46,"cat":2},"geometry":{"type":"Point","coordinates":[4.5,4.5]}},{"type":"Feature","properties":{"n":47,"cat":2},"geometry":{"type":"Point","coordinates":[4.5,5.5]}},{"type":"Feature","properties":{"n":48,"cat":1},"geometry":{"type":"Point","coordinates":[4.5,6.5]}},{"type":"Feature","properties":{"n":49,"cat":1},"geometry":{"type":"Point","coordinates":[4.5,7.5]}},{"type":"Feature","properties":{"n":50,"cat":2},"geometry":{"type":"Point","coordinates":[4.5,8.5]}},{"type":"Feature","properties":{"n":51,"cat":2},"geometry":{"type":"Point","coordinates":[4.5,9.5]}},{"type":"Feature","properties":{"n":52,"cat":2},"geometry":{"type":"Point","coordinates":[5.5,0.5]}},{"type":"Feature","properties":{"n":53,"cat":1},"geometry":{"type":"Point","coordinates":[5.5,1.5]}},{"type":"Feature","properties":{"n":54,"cat":2},"geometry":{"type":"Point","coordinates":[5.5,2.5]}},{"type":"Feature","properties":{"n":55,"cat":1},"geometry":{"type":"Point","coordinates":[5.5,3.5]}},{"type":"Feature","properties":{"n":56,"cat":1},"geometry":{"type":"Point","coordinates":[5.5,4.5]}},{"type":"Feature","properties":{"n":57,"cat":2},"geometry":{"type":"Point","coordinates":[5.5,5.5]}},{"type":"Feature","properties":{"n":58,"cat":2},"geometry":{"type":"Point","coordinates":[5.5,6.5]}},{"type":"Feature","properties":{"n":59,"cat":2},"geometry":{"type":"Point","coordinates":[5.5,7.5]}},{"type":"Feature","properties":{"n":60,"cat":2},"geometry":{"type":"Point","coordinates":[5.5,8.5]}},{"type":"Feature","properties":{"n":61,"cat":1},"geometry":{"type":"Point","coordinates":[5.5,9.5]}},{"type":"Feature","properties":{"n":62,"cat":2},"geometry":{"type":"Point","coordinates":[6.5,0.5]}},{"type":"Feature","properties":{"n":63,"cat":1},"geometry":{"type":"Point","coordinates":[6.5,1.5]}},{"type":"Feature","properties":{"n":64,"cat":2},"geometry":{"type":"Point","coordinates":[6.5,2.5]}},{"type":"Feature","properties":{"n":65,"cat":2},"geometry":{"type":"Point","coordinates":[6.5,3.5]}},{"type":"Feature","properties":{"n":66,"cat":1},"geometry":{"type":"Point","coordinates":[6.5,4.5]}},{"type":"Feature","properties":{"n":67,"cat":2},"geometry":{"type":"Point","coordinates":[6.5,5.5]}},{"type":"Feature","properties":{"n":68,"cat":2},"geometry":{"type":"Point","coordinates":[6.5,6.5]}},{"type":"Feature","properties":{"n":69,"cat":1},"geometry":{"type":"Point","coordinates":[6.5,7.5]}},{"type":"Feature","properties":{"n":70,"cat":1},"geometry":{"type":"Point","coordinates":[6.5,8.5]}},{"type":"Feature","properties":{"n":71,"cat":2},"geometry":{"type":"Point","coordinates":[6.5,9.5]}},{"type":"Feature","properties":{"n":72,"cat":2},"geometry":{"type":"Point","coordinates":[7.5,0.5]}},{"type":"Feature","properties":{"n":73,"cat":1},"geometry":{"type":"Point","coordinates":[7.5,1.5]}},{"type":"Feature","properties":{"n":74,"cat":2},"geometry":{"type":"Point","coordinates":[7.5,2.5]}},{"type":"Feature","properties":{"n":75,"cat":2},"geometry":{"type":"Point","coordinates":[7.5,3.5]}},{"type":"Feature","properties":{"n":76,"cat":1},"geometry":{"type":"Point","coordinates":[7.5,4.5]}},{"type":"Feature","properties":{"n":77,"cat":1},"geometry":{"type":"Point","coordinates":[7.5,5.5]}},{"type":"Feature","properties":{"n":78,"cat":2},"geometry":{"type":"Point","coordinates":[7.5,6.5]}},{"type":"Feature","properties":{"n":79,"cat":1},"geometry":{"type":"Point","coordinates":[7.5,7.5]}},{"type":"Feature","properties":{"n":80,"cat":1},"geometry":{"type":"Point","coordinates":[7.5,8.5]}},{"type":"Feature","properties":{"n":81,"cat":2},"geometry":{"type":"Point","coordinates":[7.5,9.5]}},{"type":"Feature","properties":{"n":82,"cat":2},"geometry":{"type":"Point","coordinates":[8.5,0.5]}},{"type":"Feature","properties":{"n":83,"cat":2},"geometry":{"type":"Point","coordinates":[8.5,1.5]}},{"type":"Feature","properties":{"n":84,"cat":2},"geometry":{"type":"Point","coordinates":[8.5,2.5]}},{"type":"Feature","properties":{"n":85,"cat":2},"geometry":{"type":"Point","coordinates":[8.5,3.5]}},{"type":"Feature","properties":{"n":86,"cat":1},"geometry":{"type":"Point","coordinates":[8.5,4.5]}},{"type":"Feature","properties":{"n":87,"cat":1},"geometry":{"type":"Point","coordinates":[8.5,5.5]}},{"type":"Feature","properties":{"n":88,"cat":2},"geometry":{"type":"Point","coordinates":[8.5,6.5]}},{"type":"Feature","properties":{"n":89,"cat":1},"geometry":{"type":"Point","coordinates":[8.5,7.5]}},{"type":"Feature","properties":{"n":90,"cat":2},"geometry":{"type":"Point","coordinates":[8.5,8.5]}},{"type":"Feature","properties":{"n":91,"cat":2},"geometry":{"type":"Point","coordinates":[8.5,9.5]}},{"type":"Feature","properties":{"n":92,"cat":1},"geometry":{"type":"Point","coordinates":[9.5,0.5]}},{"type":"Feature","properties":{"n":93,"cat":2},"geometry":{"type":"Point","coordinates":[9.5,1.5]}},{"type":"Feature","properties":{"n":94,"cat":1},"geometry":{"type":"Point","coordinates":[9.5,2.5]}},{"type":"Feature","properties":{"n":95,"cat":1},"geometry":{"type":"Point","coordinates":[9.5,3.5]}},{"type":"Feature","properties":{"n":96,"cat":2},"geometry":{"type":"Point","coordinates":[9.5,4.5]}},{"type":"Feature","properties":{"n":97,"cat":1},"geometry":{"type":"Point","coordinates":[9.5,5.5]}},{"type":"Feature","properties":{"n":98,"cat":2},"geometry":{"type":"Point","coordinates":[9.5,6.5]}},{"type":"Feature","properties":{"n":99,"cat":2},"geometry":{"type":"Point","coordinates":[9.5,7.5]}},{"type":"Feature","properties":{"n":100,"cat":2},"geometry":{"type":"Point","coordinates":[9.5,8.5]}},{"type":"Feature","properties":{"n":101,"cat":2},"geometry":{"type":"Point","coordinates":[9.5,9.5]}}]}, "type": "geojson"}}, "version": 8, "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", "sprite": "./sprites"} | ||
{ | ||
"zoom": 6, | ||
"center": [5, 5], | ||
"layers": [{ | ||
"source": "points", | ||
"type": "symbol", | ||
"id": "points", | ||
"layout": { | ||
"icon-image": { | ||
"property": "cat", | ||
"type": "categorical", | ||
"stops": [ | ||
[1, "accommodation_camping"], | ||
[2, "amenity_firestation"] | ||
] | ||
} | ||
} | ||
}], | ||
"name": "QGIS project", | ||
"sources": { | ||
"points": { | ||
"data": { | ||
"type": "FeatureCollection", | ||
"crs": { | ||
"type": "name", | ||
"properties": { | ||
"name": "urn:ogc:def:crs:OGC:1.3:CRS84" | ||
} | ||
}, | ||
"features": [{ | ||
"type": "Feature", | ||
"properties": { | ||
"n": 2, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 3, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 4, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 5, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 6, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 7, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 8, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 9, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 10, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 11, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [0.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 12, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 13, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 14, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 15, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 16, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 17, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 18, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 19, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 20, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 21, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [1.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 22, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 23, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 24, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 25, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 26, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 27, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 28, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 29, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 30, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 31, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [2.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 32, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 33, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 34, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 35, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 36, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 37, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 38, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 39, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 40, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 41, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [3.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 42, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 43, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 44, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 45, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 46, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 47, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 48, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 49, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 50, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 51, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [4.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 52, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 53, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 54, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 55, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 56, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 57, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 58, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 59, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 60, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 61, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [5.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 62, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 63, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 64, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 65, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 66, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 67, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 68, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 69, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 70, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 71, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [6.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 72, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 73, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 74, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 75, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 76, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 77, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 78, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 79, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 80, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 81, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [7.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 82, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 83, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 84, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 85, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 86, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 87, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 88, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 89, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 90, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 91, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [8.5, 9.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 92, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 0.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 93, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 1.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 94, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 2.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 95, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 3.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 96, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 4.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 97, | ||
"cat": 1 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 5.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 98, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 6.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 99, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 7.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 100, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 8.5] | ||
} | ||
}, { | ||
"type": "Feature", | ||
"properties": { | ||
"n": 101, | ||
"cat": 2 | ||
}, | ||
"geometry": { | ||
"type": "Point", | ||
"coordinates": [9.5, 9.5] | ||
} | ||
}] | ||
}, | ||
"type": "geojson" | ||
} | ||
}, | ||
"version": 8, | ||
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", | ||
"sprite": "./sprites" | ||
} |
54
index.js
@@ -13,3 +13,3 @@ /* | ||
import {createXYZ} from 'ol/tilegrid'; | ||
import CanvasMap from 'ol/CanvasMap'; | ||
import Map from 'ol/Map'; | ||
import GeoJSON from 'ol/format/GeoJSON'; | ||
@@ -105,6 +105,7 @@ import MVT from 'ol/format/MVT'; | ||
* a relative path is used with the `"sprite"` property of the style. | ||
* @param {Array<number>} [resolutions=undefined] Resolutions for mapping resolution to zoom level. | ||
* @return {Promise} Promise which will be resolved when the style can be used | ||
* for rendering. | ||
*/ | ||
export function applyStyle(layer, glStyle, source, path) { | ||
export function applyStyle(layer, glStyle, source, path, resolutions) { | ||
return new Promise(function(resolve, reject) { | ||
@@ -153,3 +154,3 @@ | ||
if (!style && (!glStyle.sprite || spriteData) && (!availableFonts || availableFonts.length > 0)) { | ||
style = applyStyleFunction(layer, glStyle, source, undefined, spriteData, spriteImageUrl, availableFonts); | ||
style = applyStyleFunction(layer, glStyle, source, resolutions, spriteData, spriteImageUrl, availableFonts); | ||
resolve(); | ||
@@ -171,3 +172,3 @@ } else if (style) { | ||
} catch (e) { | ||
window.setTimeout(function() { | ||
setTimeout(function() { | ||
reject(e); | ||
@@ -425,2 +426,3 @@ }, 0); | ||
finalizeLayer(layer); | ||
map.set('mapbox-style', glStyle); | ||
} | ||
@@ -447,2 +449,5 @@ | ||
* | ||
* The map returned by this function will have an additional `mapbox-style` | ||
* property which holds the Mapbox Style object. | ||
* | ||
* @param {ol.Map|HTMLElement|string} map Either an existing OpenLayers Map | ||
@@ -468,4 +473,4 @@ * instance, or a HTML element, or the id of a HTML element that will be the | ||
if (!(map instanceof CanvasMap)) { | ||
map = new CanvasMap({ | ||
if (!(map instanceof Map)) { | ||
map = new Map({ | ||
target: map | ||
@@ -501,5 +506,40 @@ }); | ||
} else { | ||
processStyle(style, map); | ||
setTimeout(function() { | ||
processStyle(style, map); | ||
}, 0); | ||
} | ||
return map; | ||
} | ||
/** | ||
* Get the OpenLayers layer instance that contains the provided Mapbox Style | ||
* `layer`. Note that multiple Mapbox Style layers are combined in a single | ||
* OpenLayers layer instance when they use the same Mapbox Style `source`. | ||
* @param {ol.Map} map OpenLayers Map. | ||
* @param {string} layerId Mapbox Style layer id. | ||
* @return {ol.layer.Layer} layer OpenLayers layer instance. | ||
*/ | ||
export function getLayer(map, layerId) { | ||
const layers = map.getLayers().getArray(); | ||
for (let i = 0, ii = layers.length; i < ii; ++i) { | ||
if (layers[i].get('mapbox-layers').indexOf(layerId) !== -1) { | ||
return layers[i]; | ||
} | ||
} | ||
} | ||
/** | ||
* Get the OpenLayers source instance for the provided Mapbox Style `source`. | ||
* @param {ol.Map} map OpenLayers Map. | ||
* @param {string} sourceId Mapbox Style source id. | ||
* @return {ol.layer.Layer} layer OpenLayers layer instance. | ||
*/ | ||
export function getSource(map, sourceId) { | ||
const layers = map.getLayers().getArray(); | ||
for (let i = 0, ii = layers.length; i < ii; ++i) { | ||
const source = layers[i].getSource(); | ||
if (layers[i].get('mapbox-source').indexOf(sourceId) !== -1) { | ||
return source; | ||
} | ||
} | ||
} |
{ | ||
"name": "ol-mapbox-style", | ||
"version": "3.0.0-beta.3", | ||
"version": "3.0.0-beta.4", | ||
"description": "Create OpenLayers maps from Mapbox Style objects", | ||
@@ -64,6 +64,6 @@ "main": "index.js", | ||
"start": "webpack-dev-server --config ./webpack.config.js", | ||
"prepublish": "npm run doc", | ||
"build": "webpack-cli --config ./webpack.config.js", | ||
"prepare": "npm run doc && npm run build", | ||
"build": "webpack-cli --config ./webpack.config.olms.js", | ||
"doc": "documentation readme -s API index.js", | ||
"lint": "eslint __test__ index.js webpack.config.js", | ||
"lint": "eslint __test__ example *.js", | ||
"pretest": "npm run lint", | ||
@@ -88,2 +88,4 @@ "test": "jest", | ||
"canvas": "^1.6.8", | ||
"copy-webpack-plugin": "^4.5.1", | ||
"css-loader": "^0.28.11", | ||
"deep-freeze": "0.0.1", | ||
@@ -93,2 +95,3 @@ "documentation": "^4.0.0-rc.1", | ||
"eslint-config-openlayers": "^7.0.0", | ||
"html-webpack-plugin": "^3.1.0", | ||
"isomorphic-fetch": "^2.2.1", | ||
@@ -101,6 +104,7 @@ "jest": "^20.0.4", | ||
"nock": "^9.2.3", | ||
"ol": "^5.0.0-beta.9", | ||
"ol": "^5.0.0-beta.11", | ||
"regenerator-runtime": "^0.11.1", | ||
"should": "^11.2.1", | ||
"should-approximately-deep": "^1.1.0", | ||
"style-loader": "^0.20.3", | ||
"webpack": "^4.1.1", | ||
@@ -107,0 +111,0 @@ "webpack-cli": "^2.0.12", |
@@ -24,2 +24,25 @@ # ol-mapbox-style | ||
To create a style function for individual OpenLayers vector or vector tile layers, use the `stylefunction` module: | ||
```js | ||
import stylefuction from 'ol-mapbox-style/stylefunction'; | ||
// OpenLayers imports from https://npmjs.com/package/ol | ||
import VectorLayer from 'ol/layer/Vector'; | ||
import VectorSource from 'ol/source/Vector'; | ||
import GeoJSON from 'ol/format/GeoJSON'; | ||
var layer = new VectorLayer({ | ||
source: new VectorSource({ | ||
format: new GeoJSON(), | ||
url: 'data/states.geojson' | ||
}) | ||
}); | ||
fetch('data/states.json').then(function(response) { | ||
response.json().then(function(glStyle) { | ||
stylefunction(layer, glStyle, 'states'); | ||
}); | ||
}); | ||
``` | ||
## API | ||
@@ -47,2 +70,3 @@ | ||
a relative path is used with the `"sprite"` property of the style. (optional, default `undefined`) | ||
- `resolutions` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>** Resolutions for mapping resolution to zoom level. (optional, default `undefined`) | ||
@@ -81,2 +105,5 @@ Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** Promise which will be resolved when the style can be used | ||
The map returned by this function will have an additional `mapbox-style` | ||
property which holds the Mapbox Style object. | ||
**Parameters** | ||
@@ -100,2 +127,26 @@ | ||
### getLayer | ||
Get the OpenLayers layer instance that contains the provided Mapbox Style | ||
`layer`. Note that multiple Mapbox Style layers are combined in a single | ||
OpenLayers layer instance when they use the same Mapbox Style `source`. | ||
**Parameters** | ||
- `map` **ol.Map** OpenLayers Map. | ||
- `layerId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style layer id. | ||
Returns **ol.layer.Layer** layer OpenLayers layer instance. | ||
### getSource | ||
Get the OpenLayers source instance for the provided Mapbox Style `source`. | ||
**Parameters** | ||
- `map` **ol.Map** OpenLayers Map. | ||
- `sourceId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Mapbox Style source id. | ||
Returns **ol.layer.Layer** layer OpenLayers layer instance. | ||
### stylefunction | ||
@@ -102,0 +153,0 @@ |
@@ -324,2 +324,6 @@ /* | ||
const layerId = layer.id; | ||
// TODO revisit when diffing gets added | ||
delete functionCache[layerId]; | ||
delete filterCache[layerId]; | ||
const layout = layer.layout || emptyObj; | ||
@@ -326,0 +330,0 @@ const paint = layer.paint || emptyObj; |
@@ -0,13 +1,87 @@ | ||
const path = require('path'); | ||
const fs = require('fs'); | ||
const HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
const CopyWebpackPlugin = require('copy-webpack-plugin'); | ||
/** Get the list of examples from the example directory. | ||
* | ||
* @param {String} dirName - Name of the directory to read. | ||
* @param {Function} callback - Function to execute for each example. | ||
* | ||
* @returns {undefined} Nothing. | ||
*/ | ||
function getExamples(dirName, callback) { | ||
const example_files = fs.readdirSync(dirName); | ||
const entries = {}; | ||
// iterate through the list of files in the directory. | ||
for (const filename of example_files) { | ||
// ooo, javascript file! | ||
if (filename.endsWith('.js')) { | ||
// trim the entry name down to the file without the extension. | ||
const entry_name = filename.split('.')[0]; | ||
callback(entry_name, path.join(dirName, filename)); | ||
} | ||
} | ||
return entries; | ||
} | ||
/** Creates an object with the entry names and file names | ||
* to be transformed. | ||
* | ||
* @param {String} dirName - Name of the directory to read. | ||
* | ||
* @returns {Object} with webpack entry points. | ||
*/ | ||
function getEntries(dirName) { | ||
const entries = {}; | ||
getExamples(dirName, (entryName, filename) => { | ||
entries[entryName] = filename; | ||
}); | ||
return entries; | ||
} | ||
/** Each example needs a dedicated HTML file. | ||
* This will create a "plugin" that outputs HTML from a template. | ||
* | ||
* @param {String} dirName - Name of the directory to read. | ||
* | ||
* @returns {Array} specifying webpack plugins. | ||
*/ | ||
function getHtmlTemplates(dirName) { | ||
const html_conf = []; | ||
// create the array of HTML plugins. | ||
const template = path.join(dirName, '_template.html'); | ||
getExamples(dirName, (entryName, filename) => { | ||
html_conf.push( | ||
new HtmlWebpackPlugin({ | ||
title: entryName, | ||
// ensure each output has a unique filename | ||
filename: entryName + '.html', | ||
template, | ||
// without specifying chunks, all chunks are | ||
// included with the file. | ||
chunks: [entryName] | ||
}) | ||
); | ||
}); | ||
return html_conf; | ||
} | ||
module.exports = { | ||
entry: './index.js', | ||
entry: getEntries(path.resolve(__dirname, './example')), | ||
output: { | ||
filename: '[name].js' | ||
}, | ||
resolve: { | ||
alias: { | ||
'ol-mapbox-style': path.resolve(__dirname, '.') | ||
} | ||
}, | ||
devtool: 'source-map', | ||
node: {fs: 'empty'}, | ||
mode: 'development', | ||
output: { | ||
path: path.resolve('./dist'), // Path of output file | ||
filename: 'olms.js', | ||
library: 'olms' | ||
}, | ||
module: { | ||
@@ -21,5 +95,23 @@ rules: [ | ||
} | ||
}, | ||
{ | ||
test: /\.css$/, | ||
use: ['style-loader', 'css-loader'] | ||
} | ||
] | ||
} | ||
}, | ||
plugins: [ | ||
// ensure the data is copied over. | ||
// currently the index.html is manually created. | ||
new CopyWebpackPlugin([ | ||
{ | ||
from: path.resolve(__dirname, './example/data'), | ||
to: 'data' | ||
}, | ||
{ | ||
from: path.resolve(__dirname, './example/index.html'), | ||
to: 'index.html' | ||
} | ||
]) | ||
].concat(getHtmlTemplates('./example')) | ||
}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
913291
40
3187
190
28
1
8