Skip to content

Commit

Permalink
Upgrade to style spec v9
Browse files Browse the repository at this point in the history
  • Loading branch information
Lucas Wojciechowski committed Feb 17, 2016
1 parent 5f04abc commit 2da2bdb
Show file tree
Hide file tree
Showing 17 changed files with 67 additions and 118 deletions.
2 changes: 1 addition & 1 deletion debug/featuresIn.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"source": "queried",
"paint": {
"line-color": "#8D8DEC",
"line-width": {base: 1.5, stops: [[5, 0.75], [18, 32]]}
"line-width": {base: 1.5, domain: [5, 18], range: [0.75, 32]}
}
}, 'country-label-sm');

Expand Down
2 changes: 1 addition & 1 deletion debug/multiple.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

var style = {
"version": 8,
"version": 9,
"sources": {
"satellite": {
"type": "raster",
Expand Down
15 changes: 3 additions & 12 deletions debug/site.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ var map = new mapboxgl.Map({
container: 'map',
zoom: 12.5,
center: [-77.01866, 38.888],
style: 'mapbox://styles/mapbox/streets-v8',
style: 'streets-v9.json',
hash: true
});

Expand All @@ -25,16 +25,8 @@ map.on('load', function() {
"line-color": "#EC8D8D",
"line-width": {
"base": 1.5,
"stops": [
[
5,
0.75
],
[
18,
32
]
]
"domain": [5, 18],
"range": [0.75, 32]
}
}
}, 'country-label-lg');
Expand All @@ -50,7 +42,6 @@ map.on('load', function() {
"source": "geojson-random-points",
"paint": {
"circle-radius": 5,
"circle-opacity": 0.5,
"circle-color": {
range: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
domain: [0, 16, 32, 48, 64, 80, 100],
Expand Down
2 changes: 1 addition & 1 deletion debug/video.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}

var videoStyle = {
"version": 8,
"version": 9,
"sources": {
"satellite": {
"type": "raster",
Expand Down
2 changes: 1 addition & 1 deletion docs/_posts/examples/3400-01-02-map-tiles.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"version": 9,
"sources": {
"raster-tiles": {
"type": "raster",
Expand Down
6 changes: 3 additions & 3 deletions docs/_posts/examples/3400-01-07-image-on-a-map.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div id='map'></div>
<script>
var mapStyle = {
"version": 8,
"version": 9,
"name": "Dark",
"sources": {
"mapbox": {
Expand Down Expand Up @@ -62,7 +62,7 @@
"layout": {
"text-field": "{name_en}",
"text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
"text-size": {"stops": [[4, 9], [6, 12]]}
"text-size": {"domain": [4, 6], "range": [9, 12]}
},
"paint": {
"text-color": "#969696",
Expand All @@ -81,7 +81,7 @@
"text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
"text-letter-spacing": 0.15,
"text-max-width": 7,
"text-size": {"stops": [[4, 10], [6, 14]]}
"text-size": {"domain": [4, 6], "range": [10, 14]}
},
"filter": [">=", "area", 80000],
"paint": {
Expand Down
2 changes: 1 addition & 1 deletion docs/_posts/examples/3400-01-07-video-on-a-map.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div id='map'></div>
<script>
var videoStyle = {
"version": 8,
"version": 9,
"sources": {
"satellite": {
"type": "raster",
Expand Down
2 changes: 1 addition & 1 deletion docs/_posts/examples/3400-01-08-third-party.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div id='map'></div>
<script>
var simple = {
"version": 8,
"version": 9,
"sources": {
"osm": {
"type": "vector",
Expand Down
10 changes: 0 additions & 10 deletions js/style/parse_color.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,6 @@ function parseColor(input) {
range: input.range.map(parseColor)
});

// legacy style function
} else if (input && input.stops) {
return util.extend({}, input, {
stops: input.stops.map(parseFunctionStopColor)
});

// Color string
} else if (typeof input === 'string') {
var parsedColor = parseCSSColor(input);
Expand All @@ -41,10 +35,6 @@ function parseColor(input) {

}

function parseFunctionStopColor(stop) {
return [stop[0], parseColor(stop[1])];
}

function colorDowngrade(color) {
return [color[0] / 255, color[1] / 255, color[2] / 255, color[3]];
}
Expand Down
6 changes: 3 additions & 3 deletions js/style/style_declaration.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use strict';

var parseColor = require('./parse_color');
var createStyleFunction = require('./style_function');
var createStyleFunction = require('mapbox-gl-function');

module.exports = StyleDeclaration;

Expand All @@ -14,11 +14,11 @@ function StyleDeclaration(reference, value) {
this.json = JSON.stringify(this.value);

var parsedValue = this.type === 'color' ? parseColor(value) : value;
this.calculate = createStyleFunction(reference, parsedValue);
this.calculate = createStyleFunction(parsedValue);
this.isFeatureConstant = this.calculate.isFeatureConstant;
this.isGlobalConstant = this.calculate.isGlobalConstant;

if (reference.function !== 'interpolated' && reference.transition) {
if (reference.function === 'discrete' && reference.transition) {
this.calculate = transitioned(this.calculate);
}
}
Expand Down
30 changes: 0 additions & 30 deletions js/style/style_function.js

This file was deleted.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"geojson-vt": "^2.1.0",
"gl-matrix": "^2.3.1",
"mapbox-gl-function": "^1.0.0",
"mapbox-gl-style-spec": "^8.4.2",
"mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#f5c1c29cc1f5799f42d837388882ed133d865bdc",
"mapbox-gl-function": "^2.1.0",
"minifyify": "^7.0.1",
"pbf": "^1.3.2",
Expand All @@ -40,7 +40,7 @@
"eslint": "^1.5.0",
"eslint-config-mourner": "^1.0.0",
"istanbul": "^0.4.1",
"mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#8859b504ef241bca49d4c2f9a79ff4d0bfdf81a1",
"mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#bb9f0a9940dfc14338425882d17bc534b0341c13",
"prova": "^2.1.2",
"sinon": "^1.15.4",
"st": "^1.0.0",
Expand Down
8 changes: 5 additions & 3 deletions test/fixtures/style-basic.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": 8,
"version": 9,
"sources": {
"mapbox.mapbox-streets-v5": {
"type": "vector",
Expand Down Expand Up @@ -43,7 +43,8 @@
"fill-color": "#ddd",
"fill-opacity": {
"base": 1.01,
"stops": [[13, 0], [14, 1]]
"domain": [13, 14],
"range": [0, 1]
},
"fill-opacity-transition": {
"duration": 500,
Expand Down Expand Up @@ -96,7 +97,8 @@
"text-max-angle": 59.59,
"symbol-spacing": 250,
"text-size": {
"stops": [[4.770835839035499, 8.01], [15.477225251693334, 12]]
"domain": [4.770835839035499, 15.477225251693334],
"range": [8.01, 12]
}
},
"paint": {
Expand Down
20 changes: 10 additions & 10 deletions test/js/style/style.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ var util = require('../../../js/util/util');

function createStyleJSON(properties) {
return util.extend({
"version": 8,
"version": 9,
"sources": {},
"layers": []
}, properties);
Expand Down Expand Up @@ -132,7 +132,7 @@ test('Style', function(t) {

test('Style#_broadcastLayers', function(t) {
var style = new Style({
'version': 8,
'version': 9,
'sources': {
'source': {
'type': 'vector'
Expand Down Expand Up @@ -165,7 +165,7 @@ test('Style#_broadcastLayers', function(t) {
test('Style#_resolve', function(t) {
t.test('creates StyleLayers', function(t) {
var style = new Style({
"version": 8,
"version": 9,
"sources": {
"foo": {
"type": "vector"
Expand All @@ -189,7 +189,7 @@ test('Style#_resolve', function(t) {

t.test('handles ref layer preceding referent', function(t) {
var style = new Style({
"version": 8,
"version": 9,
"sources": {
"foo": {
"type": "vector"
Expand Down Expand Up @@ -364,7 +364,7 @@ test('Style#removeSource', function(t) {
stylesheet.version = 'INVALID';
var style = new Style(stylesheet);
style.on('error', function (e) {
t.deepEqual(e.error.message, 'version: expected one of [8], INVALID found');
t.deepEqual(e.error.message, 'version: expected one of [9], INVALID found');
t.end();
});
});
Expand Down Expand Up @@ -701,7 +701,7 @@ test('Style#removeLayer', function(t) {
test('Style#setFilter', function(t) {
t.test('sets a layer filter', function(t) {
var style = new Style({
"version": 8,
"version": 9,
"sources": {
"geojson": {
"type": "geojson",
Expand Down Expand Up @@ -779,7 +779,7 @@ test('Style#setFilter', function(t) {
test('Style#setLayerZoomRange', function(t) {
t.test('sets zoom range', function(t) {
var style = new Style({
"version": 8,
"version": 9,
"sources": {
"geojson": createGeoJSONSourceJSON()
},
Expand All @@ -800,7 +800,7 @@ test('Style#setLayerZoomRange', function(t) {

t.test('throw before loaded', function(t) {
var style = new Style(createStyleJSON({
"version": 8,
"version": 9,
"sources": {
"geojson": createGeoJSONSourceJSON()
},
Expand All @@ -821,7 +821,7 @@ test('Style#setLayerZoomRange', function(t) {

test('Style#featuresAt - race condition', function(t) {
var style = new Style({
"version": 8,
"version": 9,
"sources": {
"mapbox": {
"type": "vector",
Expand Down Expand Up @@ -872,7 +872,7 @@ test('Style#featuresAt - race condition', function(t) {

test('Style#featuresAt', function(t) {
var style = new Style({
"version": 8,
"version": 9,
"sources": {
"mapbox": {
"type": "vector",
Expand Down
26 changes: 13 additions & 13 deletions test/js/style/style_declaration.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,33 @@ test('StyleDeclaration', function(t) {

t.test('interpolated functions', function(t) {
var reference = {type: "number", function: "interpolated"};
t.equal((new StyleDeclaration(reference, { stops: [[0, 1]] })).calculate({$zoom: 0}), 1);
t.equal((new StyleDeclaration(reference, { stops: [[2, 2], [5, 10]] })).calculate({$zoom: 0}), 2);
t.equal((new StyleDeclaration(reference, { stops: [[0, 0], [5, 10]] })).calculate({$zoom: 12}), 10);
t.equal((new StyleDeclaration(reference, { stops: [[0, 0], [5, 10]] })).calculate({$zoom: 6}), 10);
t.equal(Math.round((new StyleDeclaration(reference, { stops: [[0, 0], [5, 10]], base: 1.01 })).calculate({$zoom: 2.5})), 5);
t.equal((new StyleDeclaration(reference, { stops: [[0, 0], [1, 10], [2, 20]] })).calculate({$zoom: 2}), 20);
t.equal((new StyleDeclaration(reference, { stops: [[0, 0], [1, 10], [2, 20]] })).calculate({$zoom: 1}), 10);
t.equal((new StyleDeclaration(reference, { stops: [[0, 0]] })).calculate({$zoom: 6}), 0);
t.equal((new StyleDeclaration(reference, { domain: [0], range: [1] })).calculate({$zoom: 0}), 1);
t.equal((new StyleDeclaration(reference, { domain: [2, 5], range: [2, 10] })).calculate({$zoom: 0}), 2);
t.equal((new StyleDeclaration(reference, { domain: [0, 5], range: [0, 10] })).calculate({$zoom: 12}), 10);
t.equal((new StyleDeclaration(reference, { domain: [0, 5], range: [0, 10] })).calculate({$zoom: 6}), 10);
t.equal(Math.round((new StyleDeclaration(reference, { domain: [0, 5], range: [0, 10], base: 1.01 })).calculate({$zoom: 2.5})), 5);
t.equal((new StyleDeclaration(reference, { domain: [0, 1, 2], range: [0, 10, 20] })).calculate({$zoom: 2}), 20);
t.equal((new StyleDeclaration(reference, { domain: [0, 1, 2], range: [0, 10, 20] })).calculate({$zoom: 1}), 10);
t.equal((new StyleDeclaration(reference, { domain: [0], range: [0] })).calculate({$zoom: 6}), 0);
t.end();
});

t.test('non-interpolated piecewise-constant function', function(t) {
var decl = new StyleDeclaration({type: "array", function: "piecewise-constant"}, {stops: [[0, [0, 10, 5]]]});
var decl = new StyleDeclaration({type: "array", function: "discrete"}, { domain: [0], range: [[0, 10, 5]] });
t.deepEqual(decl.calculate({$zoom: 0}), [0, 10, 5]);
t.end();
});

t.test('interpolated piecewise-constant function', function(t) {
var reference = {type: "image", function: "piecewise-constant", transition: true};
var reference = {type: "image", function: "discrete", transition: true};

var constant = new StyleDeclaration(reference, 'a.png');
t.deepEqual(
constant.calculate({$zoom: 0, $zoomHistory: { lastIntegerZoomTime: 0, lastIntegerZoom: 0 }, $duration: 300}),
{ to: 'a.png', toScale: 1, from: 'a.png', fromScale: 0.5, t: 1 }
);

var variable = new StyleDeclaration(reference, {stops: [[0, 'a.png'], [1, 'b.png']]});
var variable = new StyleDeclaration(reference, {type: 'interval', domain: [1], range: ['a.png', 'b.png']});
t.deepEqual(
variable.calculate({
$zoom: 1,
Expand All @@ -55,9 +55,9 @@ test('StyleDeclaration', function(t) {
var reference = {type: "color", function: "interpolated"};
t.deepEqual(new StyleDeclaration(reference, 'red').calculate({$zoom: 0}), [ 1, 0, 0, 1 ]);
t.deepEqual(new StyleDeclaration(reference, '#ff00ff').calculate({$zoom: 0}), [ 1, 0, 1, 1 ]);
t.deepEqual(new StyleDeclaration(reference, { stops: [[0, '#f00'], [1, '#0f0']] }).calculate({$zoom: 0}), [1, 0, 0, 1]);
t.deepEqual(new StyleDeclaration(reference, { domain: [0, 1], range: ['#f00', '#0f0'] }).calculate({$zoom: 0}), [1, 0, 0, 1]);
t.throws(function () {
t.ok(new StyleDeclaration(reference, { stops: [[0, '#f00'], [1, null]] }));
t.ok(new StyleDeclaration(reference, { domain: [0, 1], range: ['#f00', null] }));
}, /Invalid color/);
t.throws(function() {
// hex value with only 5 digits should throw an Invalid color error
Expand Down
Loading

0 comments on commit 2da2bdb

Please sign in to comment.