Skip to content

Commit d47c8fb

Browse files
author
bartvde
committed
Collapse mapbox-to-ol-style package
1 parent 91dd817 commit d47c8fb

File tree

7 files changed

+846
-2
lines changed

7 files changed

+846
-2
lines changed

Diff for: ‎README.md

+37
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,43 @@ Layers added by `apply()` will have two additional properties:
9494
Returns **ol.Map** The OpenLayers Map instance that will be populated with the
9595
contents described in the Mapbox Style object.
9696

97+
### stylefunction
98+
99+
Creates a style function from the `glStyle` object for all layers that use
100+
the specified `source`, which needs to be a `"type": "vector"` or
101+
`"type": "geojson"` source and applies it to the specified OpenLayers layer.
102+
103+
**Parameters**
104+
105+
- `olLayer` **(ol.layer.Vector | ol.layer.VectorTile)** OpenLayers layer to
106+
apply the style to. In addition to the style, the layer will get two
107+
properties: `mapbox-source` will be the `id` of the `glStyle`'s source used
108+
for the layer, and `mapbox-layers` will be an array of the `id`s of the
109+
`glStyle`'s layers.
110+
- `glStyle` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** Mapbox Style object.
111+
- `source` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>)** `source` key or an array of layer `id`s
112+
from the Mapbox Style object. When a `source` key is provided, all layers for
113+
the specified source will be included in the style function. When layer `id`s
114+
are provided, they must be from layers that use the same source.
115+
- `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 `[78271.51696402048,39135.75848201024,
116+
19567.87924100512,9783.93962050256,4891.96981025128,2445.98490512564,
117+
1222.99245256282,611.49622628141,305.748113140705,152.8740565703525,
118+
76.43702828517625,38.21851414258813,19.109257071294063,9.554628535647032,
119+
4.777314267823516,2.388657133911758,1.194328566955879,0.5971642834779395,
120+
0.29858214173896974,0.14929107086948487,0.07464553543474244]`)
121+
- `spriteData` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Sprite data from the url specified in
122+
the Mapbox Style object's `sprite` property. Only required if a `sprite`
123+
property is specified in the Mapbox Style object. (optional, default `undefined`)
124+
- `spriteImageUrl` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Sprite image url for the sprite
125+
specified in the Mapbox Style object's `sprite` property. Only required if a
126+
`sprite` property is specified in the Mapbox Style object. (optional, default `undefined`)
127+
- `fonts` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** Array of available fonts, using the
128+
same font names as the Mapbox Style object. If not provided, the style
129+
function will always use the first font from the font array. (optional, default `undefined`)
130+
131+
Returns **ol.style.StyleFunction** Style function for use in
132+
`ol.layer.Vector` or `ol.layer.VectorTile`.
133+
97134
## Building the library
98135

99136
npm install

Diff for: ‎__tests__/data/states.json

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
{
2+
"version": 8,
3+
"name": "states",
4+
"sources": {
5+
"states": {
6+
"type": "geojson",
7+
"data": "./states.geojson"
8+
}
9+
},
10+
"layers": [
11+
{
12+
"id": "background",
13+
"type": "background",
14+
"paint": {
15+
"background-color": "rgba(0,0,0,0)"
16+
}
17+
},
18+
{
19+
"id": "population_lt_2m",
20+
"type": "fill",
21+
"source": "states",
22+
"filter": ["<=", "PERSONS", 2000000],
23+
"paint": {
24+
"fill-color": "#A6CEE3",
25+
"fill-opacity": 0.7
26+
}
27+
},
28+
{
29+
"id": "2m_lt_population_lte_4m",
30+
"type": "fill",
31+
"source": "states",
32+
"filter": ["all", [">", "PERSONS", 2000000], ["<=", "PERSONS", 4000000]],
33+
"paint": {
34+
"fill-color": "#0F78B4",
35+
"fill-opacity": 0.7
36+
}
37+
},
38+
{
39+
"id": "population_gt_4m",
40+
"type": "fill",
41+
"source": "states",
42+
"filter": [">", "PERSONS", 4000000],
43+
"paint": {
44+
"fill-color": "#B2DF8A",
45+
"fill-opacity": 0.7
46+
}
47+
},
48+
{
49+
"id": "state_outlines",
50+
"type": "line",
51+
"source": "states",
52+
"paint": {
53+
"line-color": "#8cadbf",
54+
"line-width": 0.1
55+
}
56+
},
57+
{
58+
"id": "state_abbreviations",
59+
"type": "fill",
60+
"source": "states",
61+
"minzoom": 4,
62+
"maxzoom": 5,
63+
"layout": {
64+
"text-field": "{STATE_ABBR}",
65+
"text-size": 12,
66+
"text-font": ["Arial Normal", "sans-serif Normal"]
67+
}
68+
},
69+
{
70+
"id": "state_names",
71+
"type": "fill",
72+
"source": "states",
73+
"minzoom": 5,
74+
"layout": {
75+
"visibility": "none",
76+
"text-field": "{STATE_NAME}",
77+
"text-size": 12,
78+
"text-font": ["Arial Normal", "sans-serif Normal"]
79+
}
80+
},
81+
{
82+
"id": "has_male",
83+
"type": "fill",
84+
"source": "states",
85+
"filter": ["has", "MALE"],
86+
"paint": {
87+
"fill-color": "#000000",
88+
"fill-opacity": 0.001
89+
}
90+
},
91+
{
92+
"id": "not_has_male",
93+
"type": "fill",
94+
"source": "states",
95+
"filter": ["!has", "MALE"],
96+
"paint": {
97+
"fill-color": "#000000",
98+
"fill-opacity": 0.001
99+
}
100+
}
101+
]
102+
}

Diff for: ‎__tests__/stylefunction.test.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import should from 'should/as-function';
2+
import deepFreeze from 'deep-freeze';
3+
import applyStyleFunction from '../stylefunction';
4+
import states from './data/states.json';
5+
import Feature from 'ol/Feature';
6+
import VectorLayer from 'ol/layer/Vector';
7+
import Polygon from 'ol/geom/Polygon';
8+
9+
describe('mapbox-to-ol-style', function() {
10+
11+
let feature, layer;
12+
beforeEach(function() {
13+
feature = new Feature(new Polygon([[[-1, -1], [-1, 1], [1, 1], [1, -1], [-1, -1]]]));
14+
layer = new VectorLayer();
15+
});
16+
17+
it('does not modify the input style object', function() {
18+
const style = JSON.parse(JSON.stringify(states));
19+
deepFreeze(style);
20+
should.doesNotThrow(function() {
21+
applyStyleFunction(layer, style, 'states');
22+
});
23+
});
24+
25+
it('creates a style function with all layers of a source', function() {
26+
const style = applyStyleFunction(layer, states, 'states');
27+
should(style).be.a.Function();
28+
feature.set('PERSONS', 2000000);
29+
should(style(feature, 1)).be.an.Array();
30+
feature.set('PERSONS', 4000000);
31+
should(style(feature, 1)).be.an.Array();
32+
feature.set('PERSONS', 6000000);
33+
should(style(feature, 1)).be.an.Array();
34+
});
35+
36+
it('creates a style function with some layers of a source', function() {
37+
const style = applyStyleFunction(layer, states, ['population_lt_2m']);
38+
should(style).be.a.Function;
39+
feature.set('PERSONS', 2000000);
40+
should(style(feature, 1)).be.an.Array();
41+
feature.set('PERSONS', 4000000);
42+
should(style(feature, 1)).be.undefined();
43+
feature.set('PERSONS', 6000000);
44+
should(style(feature, 1)).be.undefined();
45+
});
46+
47+
it('should handle has and !has', function() {
48+
const style = applyStyleFunction(layer, states, ['has_male']);
49+
should(style).be.a.Function;
50+
should(style(feature, 1)).be.undefined();
51+
feature.set('MALE', 20000);
52+
should(style(feature, 1)).be.an.Array();
53+
const style2 = applyStyleFunction(layer, states, ['not_has_male']);
54+
should(style2(feature, 1)).be.undefined();
55+
feature.unset('MALE');
56+
should(style2(feature, 1)).be.an.Array();
57+
});
58+
59+
it('should handle layer visibility', function() {
60+
const style = applyStyleFunction(layer, states, ['state_names']);
61+
should(style(feature, 1)).be.undefined();
62+
});
63+
64+
});

Diff for: ‎index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ License: https://raw.githubusercontent.com/boundlessgeo/ol-mapbox-gl-style/maste
66

77
import glfun from '@mapbox/mapbox-gl-style-spec/function';
88
import mb2css from 'mapbox-to-css-font';
9-
import applyStyleFunction from 'mapbox-to-ol-style';
9+
import applyStyleFunction from './stylefunction';
1010
import googleFonts from 'webfont-matcher/lib/fonts/google';
1111
import {fromLonLat} from 'ol/proj';
1212
import {createXYZ} from 'ol/tilegrid';

Diff for: ‎package.json

+17-1
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,26 @@
2121
"name": "Attila Berényi",
2222
"email": "[email protected]"
2323
},
24+
{
25+
"name": "Bart van den Eijnden",
26+
"email": "[email protected]"
27+
},
2428
{
2529
"name": "Dan 'Ducky' Little",
2630
"email": "[email protected]"
2731
},
32+
{
33+
"name": "Yancy Matherne",
34+
"email": "[email protected]"
35+
},
2836
{
2937
"name": "Christian Mayer",
3038
"email": "[email protected]"
3139
},
40+
{
41+
"name": "James Milner",
42+
"email": "[email protected]"
43+
},
3244
{
3345
"name": "Adrien Pompée",
3446
"email": "[email protected]"
@@ -40,6 +52,10 @@
4052
{
4153
"name": "Petr Sloup",
4254
"email": "[email protected]"
55+
},
56+
{
57+
"name": "Antti Risteli",
58+
"email": "[email protected]"
4359
}
4460
],
4561
"license": "BSD-2-Clause",
@@ -56,7 +72,6 @@
5672
"dependencies": {
5773
"@mapbox/mapbox-gl-style-spec": "^9.0.1",
5874
"mapbox-to-css-font": "^2.1.0",
59-
"mapbox-to-ol-style": "^3.4.0",
6075
"webfont-matcher": "^1.1.0"
6176
},
6277
"peerDependencies": {
@@ -69,6 +84,7 @@
6984
"babel-loader": "^7.1.4",
7085
"babel-preset-env": "^1.6.1",
7186
"canvas": "^1.6.8",
87+
"deep-freeze": "0.0.1",
7288
"documentation": "^4.0.0-rc.1",
7389
"eslint": "^4.10.0",
7490
"eslint-config-openlayers": "^7.0.0",

0 commit comments

Comments
 (0)