Skip to content

Instantly share code, notes, and snippets.

@jirik

jirik/index.html

Created December 8, 2016 16:27
Show Gist options
  • Save jirik/e12e1412a515baf76427f016c2ac3d49 to your computer and use it in GitHub Desktop.
Save jirik/e12e1412a515baf76427f016c2ac3d49 to your computer and use it in GitHub Desktop.
Download ZIP
Show Klokantech Basic GL Style using ol-mapbox-style
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Klokantech Basic GL Style using ol-mapbox-style preview</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.css">
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
background-color: #f8f4f0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.js"></script>
<script src="olms.js"></script>
<script src="index.js"></script>
</body>
Raw
index.js
var key = document.cookie.replace(/(?:(?:^|.*;\s*)mapbox_access_token\s*\=\s*([^;]*).*$)|^.*$/, '$1');
if (!key) {
key = window.prompt('Enter your Mapbox API access token:');
document.cookie = 'mapbox_access_token=' + key + '; expires=Fri, 31 Dec 9999 23:59:59 GMT';
}
var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22});
var layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
attributions: '© <a href="https://openmaptiles.org/">OpenMapTiles</a> ' +
'© <a href="http://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>',
format: new ol.format.MVT(),
tileGrid: tilegrid,
tilePixelRatio: 8,
url: 'https://{a-b}.tiles.mapbox.com/v4/openmaptiles.805mi4we/' +
'{z}/{x}/{y}.vector.pbf?access_token=' + key
})
});
var view = new ol.View({
center: [732602.1417165294, 5864590.06411005],
resolution: 2445,
maxResolution: 78271.51696402048
});
var map = new ol.Map({
target: 'map',
view: view
});
fetch('https://openmaptiles.github.io/klokantech-basic-gl-style/style.json').then(function(response) {
response.json().then(function(glStyle) {
olms.applyStyle(layer, glStyle, 'openmaptiles').then(function() {
map.addLayer(layer);
});
});
});
Raw
olms.js
(function(_g){(function(f){var r=(typeof require==='function'?require:function(name){return {"_":null,"openlayers":ol}[name];});if (typeof exports==='object'&&typeof module!=='undefined'){module.exports=f(r)}else if(typeof define==='function'&&define.amd){define(["_","openlayers"],f.bind(_g,r))}else{f(r)}})(function(require,define,module,exports){var _m=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/*
ol-mapbox-gl-style - Use Mapbox GL style objects with OpenLayers
Copyright 2016 Boundless Spatial, Inc.
License: https://raw.githubusercontent.com/boundlessgeo/ol-mapbox-gl-style/master/LICENSE.md
*/
var ol = require('openlayers');
var glfun = require('mapbox-gl-function');
var mb2css = require('mapbox-to-css-font');
var colorString = require('color-string');
var FontFaceObserver = require('fontfaceobserver');
var functions = {
interpolated: [
'line-miter-limit',
'fill-opacity',
'line-opacity',
'line-width',
'text-halo-width',
'text-max-width',
'text-offset',
'text-size',
'icon-opacity',
'icon-rotate',
'icon-size'
],
'piecewise-constant': [
'fill-color',
'fill-outline-color',
'icon-image',
'line-cap',
'line-color',
'line-join',
'line-dasharray',
'text-anchor',
'text-color',
'text-field',
'text-font',
'text-halo-color'
]
};
var defaults = {
'fill-opacity': 1,
'line-cap': 'butt',
'line-join': 'miter',
'line-miter-limit': 2,
'line-opacity': 1,
'line-width': 1,
'text-anchor': 'center',
'text-color': '#000000',
'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
'text-halo-color': 'rgba(0, 0, 0, 0)',
'text-halo-width': 0,
'text-max-width': 10,
'text-offset': [0, 0],
'text-size': 16,
'icon-opacity': 1,
'icon-rotate': 0,
'icon-size': 1
};
function applyDefaults(properties) {
for (var property in defaults) {
if (!(property in properties)) {
properties[property] = defaults[property];
}
}
}
function applyLayoutToPaint(layer) {
for (var property in layer.layout) {
if (!layer.paint[property]) {
layer.paint[property] = layer.layout[property];
}
}
}
function convertToFunctions(properties, type) {
for (var i = 0, ii = functions[type].length; i < ii; ++i) {
var property = functions[type][i];
if (property in properties) {
properties[property] = glfun[type](properties[property]);
}
}
}
var fontMap = {};
function chooseFont(fonts, onChange) {
if (!Array.isArray(fonts)) {
var stops = fonts.stops;
if (stops) {
for (var i = 0, ii = stops.length; i < ii; ++i) {
chooseFont(stops[i][1], onChange);
}
}
return;
}
var fontData = fontMap[fonts];
if (!fontData) {
fontData = fontMap[fonts] = {
css: mb2css.parseFont(fonts[fonts.length - 1])
};
}
var fontIndex = fontData.checking ? fonts.indexOf(fontData.checking) : 0;
var css = fontData.css;
if (!(fontData.checking || fontData.font)) {
fontData.checking = fonts[fontIndex];
css = mb2css.parseFont(fonts[fontIndex]);
new FontFaceObserver(css[3], {
weight: css[1],
style: css[0]
}).load().then(function() {
fontData.css = css;
fontData.font = fontData.checking;
delete fontData.checking;
onChange();
}, function() {
// Font is not available, try next
++fontIndex;
if (fontIndex < fonts.length) {
fontData.checking = fonts[fontIndex];
chooseFont(fonts, onChange);
onChange();
}
});
}
}
function preprocess(layer, onChange) {
if (!layer.paint) {
layer.paint = {};
}
if (!layer.ref) {
applyLayoutToPaint(layer);
}
applyDefaults(layer.paint);
if (layer.paint['text-field']) {
chooseFont(layer.paint['text-font'], onChange);
}
convertToFunctions(layer.paint, 'interpolated');
convertToFunctions(layer.paint, 'piecewise-constant');
}
function resolveRef(layer, glStyleObj) {
if (layer.ref) {
var layers = glStyleObj.layers;
for (var i = 0, ii = layers.length; i < ii; ++i) {
var refLayer = layers[i];
if (refLayer.id == layer.ref) {
layer.type = refLayer.type;
layer.source = refLayer.source;
layer['source-layer'] = refLayer['source-layer'];
layer.minzoom = refLayer.minzoom;
layer.maxzoom = refLayer.maxzoom;
layer.filter = refLayer.filter;
layer.layout = refLayer.layout;
return;
}
}
}
}
function evaluate(filterObj, properties) {
var type = filterObj[0];
var i, ii;
if (type == '==') {
return properties[filterObj[1]] === filterObj[2];
} else if (type == '!=') {
return properties[filterObj[1]] !== filterObj[2];
} else if (type == '>') {
return properties[filterObj[1]] > filterObj[2];
} else if (type == '<') {
return properties[filterObj[1]] < filterObj[2];
} else if (type == '>=') {
return properties[filterObj[1]] >= filterObj[2];
} else if (type == '<=') {
return properties[filterObj[1]] <= filterObj[2];
} else if (type == 'in' || type == '!in') {
var result = false;
var property = properties[filterObj[1]];
for (i = 2, ii = filterObj.length; i < ii; ++i) {
result = result || property == filterObj[i];
}
return type == 'in' ? result : !result;
} else if (type == 'all') {
for (i = 1, ii = filterObj.length; i < ii; ++i) {
if (!evaluate(filterObj[i], properties)) {
return false;
}
}
return true;
} else if (type == 'any') {
for (i = 1, ii = filterObj.length; i < ii; ++i) {
if (evaluate(filterObj[i], properties)) {
return true;
}
}
return false;
} else if (type == 'none') {
for (i = 1, ii = filterObj.length; i < ii; ++i) {
if (evaluate(filterObj[i], properties)) {
return false;
}
}
return true;
}
}
function getZoomForResolution(resolution, resolutions) {
var candidate;
var i = 0, ii = resolutions.length;
for (; i < ii; ++i) {
candidate = resolutions[i];
if (candidate < resolutions && i + 1 < ii) {
var zoomFactor = resolutions[i] / resolutions[i + 1];
return Math.log(resolutions[i] / resolution) / Math.log(zoomFactor);
}
}
return resolutions[ii - 1];
}
function colorWithOpacity(color, opacity) {
if (color && opacity !== undefined) {
var colorData = colorString.get(color);
color = colorData.value;
color[3] = color.length > 3 ? color[3] * opacity : opacity;
if (color[3] === 0) {
color = undefined;
} else {
color = colorString.to[colorData.model](color);
}
}
return color;
}
function deg2rad(degrees) {
return degrees * Math.PI / 180;
}
var spriteRegEx = /^(.*)(\?access_token=.*)$/;
function toSpriteUrl(url, extension) {
var parts = url.match(spriteRegEx);
return parts ?
parts[1] + extension + (parts.length > 2 ? parts[2] : '') :
url + extension;
}
var templateRegEx = /^(.*)\{(.*)\}(.*)$/;
function fromTemplate(text, properties) {
var parts = text.match(templateRegEx);
if (parts) {
var value = properties[parts[2]] || '';
return parts[1] + value + parts[3];
} else {
return text;
}
}
/**
* Creates a style function from the `glStyle` object for all layers that use
* the specified `source`, which needs to be a `"type": "vector"`
* source.
*
* @param {string|Object} glStyle Mapbox GL style object.
* @param {string} source `source` key from the Mapbox GL style object.
* @param {Array<number>|undefined} [resolutions=[156543.03392804097,
* 78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256,
* 4891.96981025128, 2445.98490512564, 1222.99245256282, 611.49622628141,
* 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813,
* 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758,
* 1.194328566955879, 0.5971642834779395, 0.29858214173896974,
* 0.14929107086948487, 0.07464553543474244]]
* Resolutions for mapping resolution to zoom level. For tile layers, this can
* be `layer.getSource().getTileGrid().getResolutions()`.
* @param {Function} [onChange=function() {}] Callback which will be called when
* the style is ready to use for rendering, and every time a new resource (e.g.
* icon sprite or font) is ready to be applied. When the `glStyle` has no
* `sprite` and only standard fonts, the style will be ready to use immediately,
* and the callback can be omitted.
* @return {ol.style.StyleFunction} Style function for use in
* `ol.layer.Vector` or `ol.layer.VectorTile`.
*/
function getStyleFunction(glStyle, source, resolutions, onChange) {
if (!resolutions) {
resolutions = [];
for (var res = 156543.03392804097; resolutions.length < 22; res /= 2) {
resolutions.push(res);
}
}
onChange = onChange || function() {};
if (typeof glStyle == 'object') {
// We do not want to modify the original, so we deep-clone it
glStyle = JSON.stringify(glStyle);
}
glStyle = JSON.parse(glStyle);
if (glStyle.version != 8) {
throw new Error('glStyle version 8 required.');
}
var spriteData;
var spriteImage;
var spriteImageSize;
var spriteScale;
if (glStyle.sprite) {
spriteScale = ol.has.DEVICE_PIXEL_RATIO >= 1.5 ? 0.5 : 1;
var xhr = new window.XMLHttpRequest();
var sizeFactor = spriteScale == 0.5 ? '@2x' : '';
var spriteUrl = toSpriteUrl(glStyle.sprite, sizeFactor + '.json');
xhr.open('GET', spriteUrl);
xhr.onload = xhr.onerror = function() {
if (!xhr.responseText) {
throw new Error('Sprites cannot be loaded from ' + spriteUrl);
}
spriteData = JSON.parse(xhr.responseText);
onChange();
};
xhr.send();
var spriteImageUrl = toSpriteUrl(glStyle.sprite, sizeFactor + '.png');
spriteImage = document.createElement('IMG');
spriteImage.onload = function() {
spriteImageSize = [spriteImage.width, spriteImage.height];
onChange();
};
spriteImage.src = spriteImageUrl;
} else {
window.setTimeout(onChange, 0);
}
var ctx = document.createElement('CANVAS').getContext('2d');
var measureCache = {};
function wrapText(text, font, em) {
var key = em + font + text;
var wrappedText = measureCache[key];
if (!wrappedText) {
ctx.font = font;
var oneEm = ctx.measureText('M').width;
var width = oneEm * em;
var words = text.split(' ');
var line = '';
var lines = [];
for (var i = 0, ii = words.length; i < ii; ++i) {
var word = words[i];
if ((ctx.measureText(line + word).width <= width)) {
line += (line ? ' ' : '') + word;
} else {
lines.push(line);
line = word;
}
}
if (line) {
lines.push(line);
}
wrappedText = measureCache[key] = lines.join('\n');
}
return wrappedText;
}
var allLayers = glStyle.layers;
var layers = [];
for (var i = 0, ii = allLayers.length; i < ii; ++i) {
var layer = allLayers[i];
if (!layer.layout) {
layer.layout = {};
}
resolveRef(layer, glStyle);
if (layer.source == source) {
layers.push(layer);
preprocess(layer, onChange);
}
}
var textHalo = new ol.style.Stroke();
var textColor = new ol.style.Fill();
var iconImageCache = {};
var styles = [];
return function(feature, resolution) {
var zoom = resolutions.indexOf(resolution);
if (zoom == -1) {
zoom = getZoomForResolution(resolution, resolutions);
}
var properties = feature.getProperties();
properties['$type'] = feature.getGeometry().getType().replace('Multi', '');
var stylesLength = -1;
for (var i = 0, ii = layers.length; i < ii; ++i) {
var layer = layers[i];
if ((layer['source-layer'] && layer['source-layer'] != properties.layer) ||
('minzoom' in layer && zoom < layer.minzoom) ||
('maxzoom' in layer && zoom > layer.maxzoom)) {
continue;
}
if (!layer.filter || evaluate(layer.filter, properties)) {
var color, opacity, fill, stroke, strokeColor, style, text;
var paint = layer.paint;
var type = properties['$type'];
if (type == 'Polygon') {
if (!('fill-pattern' in paint) && 'fill-color' in paint) {
opacity = paint['fill-opacity'](zoom);
color = colorWithOpacity(paint['fill-color'](zoom), opacity);
if (color) {
++stylesLength;
style = styles[stylesLength];
if (!style || !style.getFill() || style.getStroke() || style.getText()) {
style = styles[stylesLength] = new ol.style.Style({
fill: new ol.style.Fill()
});
}
fill = style.getFill();
fill.setColor(color);
style.setZIndex(i);
}
if ('fill-outline-color' in paint) {
strokeColor = colorWithOpacity(paint['fill-outline-color'](zoom), opacity);
}
if (strokeColor) {
++stylesLength;
style = styles[stylesLength];
if (!style || !style.getStroke() || style.getFill() || style.getText()) {
style = styles[stylesLength] = new ol.style.Style({
stroke: new ol.style.Stroke()
});
}
stroke = style.getStroke();
stroke.setLineCap(defaults['line-cap']);
stroke.setLineJoin(defaults['line-join']);
stroke.setMiterLimit(defaults['line-miter-limit']);
stroke.setColor(strokeColor);
stroke.setWidth(1);
stroke.setLineDash(null);
style.setZIndex(i);
}
}
}
if (type != 'Point') {
if (!('line-pattern' in paint) && 'line-color' in paint) {
color = colorWithOpacity(
paint['line-color'](zoom), paint['line-opacity'](zoom));
}
var width = paint['line-width'](zoom);
if (color && width > 0) {
++stylesLength;
style = styles[stylesLength];
if (!style || !style.getStroke() || style.getFill() || style.getText()) {
style = styles[stylesLength] = new ol.style.Style({
stroke: new ol.style.Stroke()
});
}
stroke = style.getStroke();
stroke.setLineCap(paint['line-cap'](zoom));
stroke.setLineJoin(paint['line-join'](zoom));
stroke.setMiterLimit(paint['line-miter-limit'](zoom));
stroke.setColor(color);
stroke.setWidth(width);
stroke.setLineDash(paint['line-dasharray'] ?
paint['line-dasharray'](zoom).map(function(x) {
return x * width;
}) : null);
style.setZIndex(i);
}
}
var icon;
if (type == 'Point' && 'icon-image' in paint) {
++stylesLength;
var iconImage = paint['icon-image'](zoom);
icon = fromTemplate(iconImage, properties);
style = iconImageCache[icon];
if (!style && spriteData && spriteImageSize) {
var spriteImageData = spriteData[icon];
style = iconImageCache[icon] = new ol.style.Style({
image: new ol.style.Icon({
img: spriteImage,
size: [spriteImageData.width, spriteImageData.height],
imgSize: spriteImageSize,
offset: [spriteImageData.x, spriteImageData.y],
scale: paint['icon-size'](zoom) * spriteScale
})
});
}
if (style) {
var iconImg = style.getImage();
iconImg.setRotation(deg2rad(paint['icon-rotate'](zoom)));
iconImg.setOpacity(paint['icon-opacity'](zoom));
style.setZIndex(i);
styles[stylesLength] = style;
}
}
var label;
if ('text-field' in paint) {
var textField = paint['text-field'](zoom);
label = fromTemplate(textField, properties);
}
// TODO Add LineString handling as soon as it's supporte in OpenLayers
if (label && type !== 'LineString') {
++stylesLength;
style = styles[stylesLength];
if (!style || !style.getText() || style.getFill() || style.getStroke()) {
style = styles[stylesLength] = new ol.style.Style({
text: new ol.style.Text({
text: '',
fill: textColor
})
});
}
text = style.getText();
var textSize = paint['text-size'](zoom);
var font = mb2css.asCss(fontMap[paint['text-font'](zoom)].css, textSize);
var textTransform = paint['text-transform'];
if (textTransform == 'uppercase') {
label = label.toUpperCase();
} else if (textTransform == 'lowercase') {
label = label.toLowerCase();
}
var wrappedLabel = wrapText(label, font, paint['text-max-width'](zoom));
text.setText(wrappedLabel);
text.setFont(font);
var offset = paint['text-offset'](zoom);
var yOffset = offset[1] * textSize + (wrappedLabel.split('\n').length - 1) * textSize;
var anchor = paint['text-anchor'](zoom);
if (anchor.indexOf('top') == 0) {
yOffset += 0.5 * textSize;
} else if (anchor.indexOf('bottom') == 0) {
yOffset -= 0.5 * textSize;
}
text.setOffsetX(offset[0] * textSize);
text.setOffsetY(yOffset);
text.getFill().setColor(paint['text-color'](zoom));
if (paint['text-halo-width']) {
textHalo.setWidth(paint['text-halo-width'](zoom));
textHalo.setColor(paint['text-halo-color'](zoom));
text.setStroke(textHalo);
} else {
text.setStroke(undefined);
}
style.setZIndex(i);
}
}
}
if (stylesLength > -1) {
styles.length = stylesLength + 1;
return styles;
}
};
}
/**
* Applies a style function to an `ol.layer.VectorTile` with an
* `ol.source.VectorTile`. The style function will render all layers from the
* `glStyle` object that use the specified `source`, which needs to be a
* `"type": "vector"` source.
*
* @param {ol.layer.VectorTile} layer OpenLayers layer.
* @param {string|Object} glStyle Mapbox GL style object.
* @param {string} source `source` key from the Mapbox GL style object.
* @return {Promise} Promise which will be resolved when the style can be used
* for rendering.
*/
function applyStyle(layer, glStyle, source) {
return new Promise(function(resolve, reject) {
var resolutions = layer.getSource().getTileGrid().getResolutions();
var style;
var resolved = false;
function onChange() {
layer.setStyle(style);
if (!resolved) {
resolve();
resolved = true;
}
}
try {
style = getStyleFunction(glStyle, source, resolutions, onChange);
} catch (e) {
window.setTimeout(function() {
reject(e);
}, 0);
}
});
}
module.exports = {
applyStyle: applyStyle,
getStyleFunction: getStyleFunction
};
},{"color-string":2,"fontfaceobserver":6,"mapbox-gl-function":7,"mapbox-to-css-font":8,"openlayers":"openlayers"}],2:[function(require,module,exports){
/* MIT license */
var colorNames = require('color-name');
var swizzle = require('simple-swizzle');
var reverseNames = {};
// create a list of reverse color names
for (var name in colorNames) {
if (colorNames.hasOwnProperty(name)) {
reverseNames[colorNames[name]] = name;
}
}
var cs = module.exports = {
to: {}
};
cs.get = function (string) {
var prefix = string.substring(0, 3).toLowerCase();
var val;
var model;
switch (prefix) {
case 'hsl':
val = cs.get.hsl(string);
model = 'hsl';
break;
case 'hwb':
val = cs.get.hwb(string);
model = 'hwb';
break;
default:
val = cs.get.rgb(string);
model = 'rgb';
break;
}
if (!val) {
return null;
}
return {model: model, value: val};
};
cs.get.rgb = function (string) {
if (!string) {
return null;
}
var abbr = /^#([a-fA-F0-9]{3})$/;
var hex = /^#([a-fA-F0-9]{6})$/;
var rgba = /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
var keyword = /(\D+)/;
var rgb = [0, 0, 0, 1];
var match;
var i;
if (match = string.match(abbr)) {
match = match[1];
for (i = 0; i < 3; i++) {
rgb[i] = parseInt(match[i] + match[i], 16);
}
} else if (match = string.match(hex)) {
match = match[1];
for (i = 0; i < 3; i++) {
// https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
var i2 = i * 2;
rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
}
} else if (match = string.match(rgba)) {
for (i = 0; i < 3; i++) {
rgb[i] = parseInt(match[i + 1], 0);
}
if (match[4]) {
rgb[3] = parseFloat(match[4]);
}
} else if (match = string.match(per)) {
for (i = 0; i < 3; i++) {
rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
}
if (match[4]) {
rgb[3] = parseFloat(match[4]);
}
} else if (match = string.match(keyword)) {
if (match[1] === 'transparent') {
return [0, 0, 0, 0];
}
rgb = colorNames[match[1]];
if (!rgb) {
return null;
}
rgb[3] = 1;
return rgb;
}
for (i = 0; i < rgb.length; i++) {
rgb[i] = clamp(rgb[i], 0, 255);
}
rgb[3] = clamp(rgb[3], 0, 1);
return rgb;
};
cs.get.hsl = function (string) {
if (!string) {
return null;
}
var hsl = /^hsla?\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)/;
var match = string.match(hsl);
if (match) {
var alpha = parseFloat(match[4]);
var h = ((parseFloat(match[1]) % 360) + 360) % 360;
var s = clamp(parseFloat(match[2]), 0, 100);
var l = clamp(parseFloat(match[3]), 0, 100);
var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
return [h, s, l, a];
}
};
cs.get.hwb = function (string) {
if (!string) {
return null;
}
var hwb = /^hwb\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)/;
var match = string.match(hwb);
if (match) {
var alpha = parseFloat(match[4]);
var h = ((parseFloat(match[1]) % 360) + 360) % 360;
var w = clamp(parseFloat(match[2]), 0, 100);
var b = clamp(parseFloat(match[3]), 0, 100);
var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
return [h, w, b, a];
}
};
cs.to.hex = function (rgb) {
return '#' + hexDouble(rgb[0]) + hexDouble(rgb[1]) + hexDouble(rgb[2]);
};
cs.to.rgb = function () {
var rgba = swizzle(arguments);
return rgba.length < 4 || rgba[3] === 1
? 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')'
: 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';
};
cs.to.rgb.percent = function () {
var rgba = swizzle(arguments);
var r = Math.round(rgba[0] / 255 * 100);
var g = Math.round(rgba[1] / 255 * 100);
var b = Math.round(rgba[2] / 255 * 100);
return rgba.length < 4 || rgba[3] === 1
? 'rgb(' + r + '%, ' + g + '%, ' + b + '%)'
: 'rgba(' + r + '%, ' + g + '%, ' + b + '%, ' + rgba[3] + ')';
};
cs.to.hsl = function () {
var hsla = swizzle(arguments);
return hsla.length < 4 || hsla[3] === 1
? 'hsl(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%)'
: 'hsla(' + hsla[0] + ', ' + hsla[1] + '%, ' + hsla[2] + '%, ' + hsla[3] + ')';
};
// hwb is a bit different than rgb(a) & hsl(a) since there is no alpha specific syntax
// (hwb have alpha optional & 1 is default value)
cs.to.hwb = function () {
var hwba = swizzle(arguments);
var a = '';
if (hwba.length >= 4 && hwba[3] !== 1) {
a = ', ' + hwba[3];
}
return 'hwb(' + hwba[0] + ', ' + hwba[1] + '%, ' + hwba[2] + '%' + a + ')';
};
cs.to.keyword = function (rgb) {
return reverseNames[rgb.slice(0, 3)];
};
// helpers
function clamp(num, min, max) {
return Math.min(Math.max(min, num), max);
}
function hexDouble(num) {
var str = num.toString(16).toUpperCase();
return (str.length < 2) ? '0' + str : str;
}
},{"color-name":3,"simple-swizzle":4}],3:[function(require,module,exports){
module.exports = {
"aliceblue": [240, 248, 255],
"antiquewhite": [250, 235, 215],
"aqua": [0, 255, 255],
"aquamarine": [127, 255, 212],
"azure": [240, 255, 255],
"beige": [245, 245, 220],
"bisque": [255, 228, 196],
"black": [0, 0, 0],
"blanchedalmond": [255, 235, 205],
"blue": [0, 0, 255],
"blueviolet": [138, 43, 226],
"brown": [165, 42, 42],
"burlywood": [222, 184, 135],
"cadetblue": [95, 158, 160],
"chartreuse": [127, 255, 0],
"chocolate": [210, 105, 30],
"coral": [255, 127, 80],
"cornflowerblue": [100, 149, 237],
"cornsilk": [255, 248, 220],
"crimson": [220, 20, 60],
"cyan": [0, 255, 255],
"darkblue": [0, 0, 139],
"darkcyan": [0, 139, 139],
"darkgoldenrod": [184, 134, 11],
"darkgray": [169, 169, 169],
"darkgreen": [0, 100, 0],
"darkgrey": [169, 169, 169],
"darkkhaki": [189, 183, 107],
"darkmagenta": [139, 0, 139],
"darkolivegreen": [85, 107, 47],
"darkorange": [255, 140, 0],
"darkorchid": [153, 50, 204],
"darkred": [139, 0, 0],
"darksalmon": [233, 150, 122],
"darkseagreen": [143, 188, 143],
"darkslateblue": [72, 61, 139],
"darkslategray": [47, 79, 79],
"darkslategrey": [47, 79, 79],
"darkturquoise": [0, 206, 209],
"darkviolet": [148, 0, 211],
"deeppink": [255, 20, 147],
"deepskyblue": [0, 191, 255],
"dimgray": [105, 105, 105],
"dimgrey": [105, 105, 105],
"dodgerblue": [30, 144, 255],
"firebrick": [178, 34, 34],
"floralwhite": [255, 250, 240],
"forestgreen": [34, 139, 34],
"fuchsia": [255, 0, 255],
"gainsboro": [220, 220, 220],
"ghostwhite": [248, 248, 255],
"gold": [255, 215, 0],
"goldenrod": [218, 165, 32],
"gray": [128, 128, 128],
"green": [0, 128, 0],
"greenyellow": [173, 255, 47],
"grey": [128, 128, 128],
"honeydew": [240, 255, 240],
"hotpink": [255, 105, 180],
"indianred": [205, 92, 92],
"indigo": [75, 0, 130],
"ivory": [255, 255, 240],
"khaki": [240, 230, 140],
"lavender": [230, 230, 250],
"lavenderblush": [255, 240, 245],
"lawngreen": [124, 252, 0],
"lemonchiffon": [255, 250, 205],
"lightblue": [173, 216, 230],
"lightcoral": [240, 128, 128],
"lightcyan": [224, 255, 255],
"lightgoldenrodyellow": [250, 250, 210],
"lightgray": [211, 211, 211],
"lightgreen": [144, 238, 144],
"lightgrey": [211, 211, 211],
"lightpink": [255, 182, 193],
"lightsalmon": [255, 160, 122],
"lightseagreen": [32, 178, 170],
"lightskyblue": [135, 206, 250],
"lightslategray": [119, 136, 153],
"lightslategrey": [119, 136, 153],
"lightsteelblue": [176, 196, 222],
"lightyellow": [255, 255, 224],
"lime": [0, 255, 0],
"limegreen": [50, 205, 50],
"linen": [250, 240, 230],
"magenta": [255, 0, 255],
"maroon": [128, 0, 0],
"mediumaquamarine": [102, 205, 170],
"mediumblue": [0, 0, 205],
"mediumorchid": [186, 85, 211],
"mediumpurple": [147, 112, 219],
"mediumseagreen": [60, 179, 113],
"mediumslateblue": [123, 104, 238],
"mediumspringgreen": [0, 250, 154],
"mediumturquoise": [72, 209, 204],
"mediumvioletred": [199, 21, 133],
"midnightblue": [25, 25, 112],
"mintcream": [245, 255, 250],
"mistyrose": [255, 228, 225],
"moccasin": [255, 228, 181],
"navajowhite": [255, 222, 173],
"navy": [0, 0, 128],
"oldlace": [253, 245, 230],
"olive": [128, 128, 0],
"olivedrab": [107, 142, 35],
"orange": [255, 165, 0],
"orangered": [255, 69, 0],
"orchid": [218, 112, 214],
"palegoldenrod": [238, 232, 170],
"palegreen": [152, 251, 152],
"paleturquoise": [175, 238, 238],
"palevioletred": [219, 112, 147],
"papayawhip": [255, 239, 213],
"peachpuff": [255, 218, 185],
"peru": [205, 133, 63],
"pink": [255, 192, 203],
"plum": [221, 160, 221],
"powderblue": [176, 224, 230],
"purple": [128, 0, 128],
"rebeccapurple": [102, 51, 153],
"red": [255, 0, 0],
"rosybrown": [188, 143, 143],
"royalblue": [65, 105, 225],
"saddlebrown": [139, 69, 19],
"salmon": [250, 128, 114],
"sandybrown": [244, 164, 96],
"seagreen": [46, 139, 87],
"seashell": [255, 245, 238],
"sienna": [160, 82, 45],
"silver": [192, 192, 192],
"skyblue": [135, 206, 235],
"slateblue": [106, 90, 205],
"slategray": [112, 128, 144],
"slategrey": [112, 128, 144],
"snow": [255, 250, 250],
"springgreen": [0, 255, 127],
"steelblue": [70, 130, 180],
"tan": [210, 180, 140],
"teal": [0, 128, 128],
"thistle": [216, 191, 216],
"tomato": [255, 99, 71],
"turquoise": [64, 224, 208],
"violet": [238, 130, 238],
"wheat": [245, 222, 179],
"white": [255, 255, 255],
"whitesmoke": [245, 245, 245],
"yellow": [255, 255, 0],
"yellowgreen": [154, 205, 50]
};
},{}],4:[function(require,module,exports){
'use strict';
var isArrayish = require('is-arrayish');
var concat = Array.prototype.concat;
var slice = Array.prototype.slice;
var swizzle = module.exports = function swizzle(args) {
var results = [];
for (var i = 0, len = args.length; i < len; i++) {
var arg = args[i];
if (isArrayish(arg)) {
// http://jsperf.com/javascript-array-concat-vs-push/98
results = concat.call(results, slice.call(arg));
} else {
results.push(arg);
}
}
return results;
};
swizzle.wrap = function (fn) {
return function () {
return fn(swizzle(arguments));
};
};
},{"is-arrayish":5}],5:[function(require,module,exports){
'use strict';
module.exports = function isArrayish(obj) {
if (!obj || typeof obj === 'string') {
return false;
}
return obj instanceof Array || Array.isArray(obj) ||
(obj.length >= 0 && (obj.splice instanceof Function ||
(Object.getOwnPropertyDescriptor(obj, (obj.length - 1)) && obj.constructor.name !== 'String')));
};
},{}],6:[function(require,module,exports){
(function(){function l(a,b){document.addEventListener?a.addEventListener("scroll",b,!1):a.attachEvent("scroll",b)}function m(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function c(){document.removeEventListener("DOMContentLoaded",c);a()}):document.attachEvent("onreadystatechange",function k(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",k),a()})};function q(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.f=document.createElement("span");this.g=-1;this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";
this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.b.appendChild(this.h);this.c.appendChild(this.f);this.a.appendChild(this.b);this.a.appendChild(this.c)}
function w(a,b){a.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font:"+b+";"}function x(a){var b=a.a.offsetWidth,c=b+100;a.f.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.g!==b?(a.g=b,!0):!1}function z(a,b){function c(){var a=k;x(a)&&null!==a.a.parentNode&&b(a.g)}var k=a;l(a.b,c);l(a.c,c);x(a)};function A(a,b){var c=b||{};this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal"}var B=null,C=null,D=null;function H(){if(null===C){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(b){}C=""!==a.style.font}return C}function I(a,b){return[a.style,a.weight,H()?a.stretch:"","100px",b].join(" ")}
A.prototype.load=function(a,b){var c=this,k=a||"BESbswy",y=b||3E3,E=(new Date).getTime();return new Promise(function(a,b){null===D&&(D=!!document.fonts);if(D){var J=new Promise(function(a,b){function e(){(new Date).getTime()-E>=y?b():document.fonts.load(I(c,'"'+c.family+'"'),k).then(function(c){1<=c.length?a():setTimeout(e,25)},function(){b()})}e()}),K=new Promise(function(a,c){setTimeout(c,y)});Promise.race([K,J]).then(function(){a(c)},function(){b(c)})}else m(function(){function r(){var b;if(b=
-1!=f&&-1!=g||-1!=f&&-1!=h||-1!=g&&-1!=h)(b=f!=g&&f!=h&&g!=h)||(null===B&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),B=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=B&&(f==t&&g==t&&h==t||f==u&&g==u&&h==u||f==v&&g==v&&h==v)),b=!b;b&&(null!==d.parentNode&&d.parentNode.removeChild(d),clearTimeout(G),a(c))}function F(){if((new Date).getTime()-E>=y)null!==d.parentNode&&d.parentNode.removeChild(d),b(c);else{var a=document.hidden;if(!0===a||
void 0===a)f=e.a.offsetWidth,g=n.a.offsetWidth,h=p.a.offsetWidth,r();G=setTimeout(F,50)}}var e=new q(k),n=new q(k),p=new q(k),f=-1,g=-1,h=-1,t=-1,u=-1,v=-1,d=document.createElement("div"),G=0;d.dir="ltr";w(e,I(c,"sans-serif"));w(n,I(c,"serif"));w(p,I(c,"monospace"));d.appendChild(e.a);d.appendChild(n.a);d.appendChild(p.a);document.body.appendChild(d);t=e.a.offsetWidth;u=n.a.offsetWidth;v=p.a.offsetWidth;F();z(e,function(a){f=a;r()});w(e,I(c,'"'+c.family+'",sans-serif'));z(n,function(a){g=a;r()});
w(n,I(c,'"'+c.family+'",serif'));z(p,function(a){h=a;r()});w(p,I(c,'"'+c.family+'",monospace'))})})};"undefined"!==typeof module?module.exports=A:(window.FontFaceObserver=A,window.FontFaceObserver.prototype.load=A.prototype.load);}());
},{}],7:[function(require,module,exports){
'use strict';
function createFunction(parameters, defaultType) {
var fun;
if (!isFunctionDefinition(parameters)) {
fun = function() { return parameters; };
fun.isFeatureConstant = true;
fun.isZoomConstant = true;
} else {
var zoomAndFeatureDependent = typeof parameters.stops[0][0] === 'object';
var featureDependent = zoomAndFeatureDependent || parameters.property !== undefined;
var zoomDependent = zoomAndFeatureDependent || !featureDependent;
var type = parameters.type || defaultType || 'exponential';
var innerFun;
if (type === 'exponential') {
innerFun = evaluateExponentialFunction;
} else if (type === 'interval') {
innerFun = evaluateIntervalFunction;
} else if (type === 'categorical') {
innerFun = evaluateCategoricalFunction;
} else {
throw new Error('Unknown function type "' + type + '"');
}
if (zoomAndFeatureDependent) {
var featureFunctions = {};
var featureFunctionStops = [];
for (var s = 0; s < parameters.stops.length; s++) {
var stop = parameters.stops[s];
if (featureFunctions[stop[0].zoom] === undefined) {
featureFunctions[stop[0].zoom] = {
zoom: stop[0].zoom,
type: parameters.type,
property: parameters.property,
stops: []
};
}
featureFunctions[stop[0].zoom].stops.push([stop[0].value, stop[1]]);
}
for (var z in featureFunctions) {
featureFunctionStops.push([featureFunctions[z].zoom, createFunction(featureFunctions[z])]);
}
fun = function(zoom, feature) {
return evaluateExponentialFunction({ stops: featureFunctionStops, base: parameters.base }, zoom)(zoom, feature);
};
fun.isFeatureConstant = false;
fun.isZoomConstant = false;
} else if (zoomDependent) {
fun = function(zoom) {
return innerFun(parameters, zoom);
};
fun.isFeatureConstant = true;
fun.isZoomConstant = false;
} else {
fun = function(zoom, feature) {
return innerFun(parameters, feature[parameters.property]);
};
fun.isFeatureConstant = false;
fun.isZoomConstant = true;
}
}
return fun;
}
function evaluateCategoricalFunction(parameters, input) {
for (var i = 0; i < parameters.stops.length; i++) {
if (input === parameters.stops[i][0]) {
return parameters.stops[i][1];
}
}
return parameters.stops[0][1];
}
function evaluateIntervalFunction(parameters, input) {
for (var i = 0; i < parameters.stops.length; i++) {
if (input < parameters.stops[i][0]) break;
}
return parameters.stops[Math.max(i - 1, 0)][1];
}
function evaluateExponentialFunction(parameters, input) {
var base = parameters.base !== undefined ? parameters.base : 1;
var i = 0;
while (true) {
if (i >= parameters.stops.length) break;
else if (input <= parameters.stops[i][0]) break;
else i++;
}
if (i === 0) {
return parameters.stops[i][1];
} else if (i === parameters.stops.length) {
return parameters.stops[i - 1][1];
} else {
return interpolate(
input,
base,
parameters.stops[i - 1][0],
parameters.stops[i][0],
parameters.stops[i - 1][1],
parameters.stops[i][1]
);
}
}
function interpolate(input, base, inputLower, inputUpper, outputLower, outputUpper) {
if (typeof outputLower === 'function') {
return function() {
var evaluatedLower = outputLower.apply(undefined, arguments);
var evaluatedUpper = outputUpper.apply(undefined, arguments);
return interpolate(input, base, inputLower, inputUpper, evaluatedLower, evaluatedUpper);
};
} else if (outputLower.length) {
return interpolateArray(input, base, inputLower, inputUpper, outputLower, outputUpper);
} else {
return interpolateNumber(input, base, inputLower, inputUpper, outputLower, outputUpper);
}
}
function interpolateNumber(input, base, inputLower, inputUpper, outputLower, outputUpper) {
var difference = inputUpper - inputLower;
var progress = input - inputLower;
var ratio;
if (base === 1) {
ratio = progress / difference;
} else {
ratio = (Math.pow(base, progress) - 1) / (Math.pow(base, difference) - 1);
}
return (outputLower * (1 - ratio)) + (outputUpper * ratio);
}
function interpolateArray(input, base, inputLower, inputUpper, outputLower, outputUpper) {
var output = [];
for (var i = 0; i < outputLower.length; i++) {
output[i] = interpolateNumber(input, base, inputLower, inputUpper, outputLower[i], outputUpper[i]);
}
return output;
}
function isFunctionDefinition(value) {
return typeof value === 'object' && value.stops;
}
module.exports.isFunctionDefinition = isFunctionDefinition;
module.exports.interpolated = function(parameters) {
return createFunction(parameters, 'exponential');
};
module.exports['piecewise-constant'] = function(parameters) {
return createFunction(parameters, 'interval');
};
},{}],8:[function(require,module,exports){
var fontWeights = {
thin: 100,
hairline: 100,
'ultra-light': 100,
'extra-light': 100,
light: 200,
book: 300,
regular: 400,
normal: 400,
plain: 400,
roman: 400,
standard: 400,
medium: 500,
'semi-bold': 600,
'demi-bold': 600,
bold: 700,
heavy: 800,
black: 800,
'extra-bold': 800,
'ultra-black': 900,
'extra-black': 900,
'ultra-bold': 900,
'heavy-black': 900,
fat: 900,
poster: 900
};
var fontMap = {};
function asCss(cssData, size) {
cssData[2] = size + 'px';
return cssData.join(' ');
}
function parseFont(font) {
var parts = font.split(' ');
var maybeWeight = parts[parts.length - 1].toLowerCase();
var weight = 'normal';
var style = 'normal';
if (maybeWeight == 'normal' || maybeWeight == 'italic' || maybeWeight == 'oblique') {
style = maybeWeight;
parts.pop();
maybeWeight = parts[parts.length - 1].toLowerCase();
}
for (var w in fontWeights) {
if (maybeWeight == w || maybeWeight == w.replace('-', '') || maybeWeight == w.replace('-', ' ')) {
weight = fontWeights[w];
parts.pop();
break;
}
}
if (typeof maybeWeight == 'number') {
weight = maybeWeight;
}
var fontFamily = parts.join(' ');
// CSS font property: font-style font-weight font-size font-family
return [style, weight, 16, fontFamily];
}
module.exports = {
parseFont: parseFont,
asCss: asCss
}
},{}]},{},[1]);
var _r=_m(1);_g.olms=_r;return _r;})})(typeof window!=='undefined'?window:(typeof global!=='undefined'?global:(typeof self!=='undefined'?self:this)));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment