Skip to content

Commit

Permalink
feat: add sprite support
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: use geostyler-style Sprite instead of string syntax
  • Loading branch information
Kai Volland committed Nov 30, 2023
1 parent 9acb43f commit 9d883be
Show file tree
Hide file tree
Showing 17 changed files with 402 additions and 223 deletions.
2 changes: 1 addition & 1 deletion data/mapbox/fill_patternfill.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { MbStyle } from '../../src/MapboxStyleParser';
const fillSimpleFill: MbStyle = {
version: 8,
name: 'Pattern Fill',
sprite: 'https://testurl.com',
sprite: 'https://testurl.com/sprites/mysprite',
sources: {
testsource: {
type: 'vector'
Expand Down
2 changes: 1 addition & 1 deletion data/mapbox/icon_simpleicon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { MbStyle } from '../../src/MapboxStyleParser';
const iconSimpleIcon: MbStyle = {
version: 8,
name: 'Simple Icon',
sprite: 'https://testurl.com',
sprite: 'https://testurl.com/sprites/mysprite',
sources: {
testsource: {
type: 'vector'
Expand Down
2 changes: 1 addition & 1 deletion data/mapbox/icontext_symbolizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { MbStyle } from '../../src/MapboxStyleParser';
const iconTextSymbolizer: MbStyle = {
version: 8,
name: 'icontext symbolizer',
sprite: 'https://testurl.com',
sprite: 'https://testurl.com/sprites/mysprite',
sources: {
testsource: {
type: 'vector'
Expand Down
2 changes: 1 addition & 1 deletion data/mapbox/line_patternline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { MbStyle } from '../../src/MapboxStyleParser';
const linePatternLine: MbStyle = {
version: 8,
name: 'Pattern Line',
sprite: 'https://testurl.com',
sprite: 'https://testurl.com/sprites/mysprite',
sources: {
testsource: {
type: 'vector'
Expand Down
2 changes: 1 addition & 1 deletion data/mapbox_metadata/fill_patternfill.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { MbStyle } from '../../src/MapboxStyleParser';
const fillSimpleFill: MbStyle = {
version: 8,
name: 'Pattern Fill',
sprite: 'https://testurl.com',
sprite: 'https://testurl.com/sprites/mysprite',
sources: {
testsource: {
type: 'vector'
Expand Down
2 changes: 1 addition & 1 deletion data/mapbox_metadata/icon_simpleicon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { MbStyle } from '../../src/MapboxStyleParser';
const iconSimpleIcon: MbStyle = {
version: 8,
name: 'Simple Icon',
sprite: 'https://testurl.com',
sprite: 'https://testurl.com/sprites/mysprite',
sources: {
testsource: {
type: 'vector'
Expand Down
2 changes: 1 addition & 1 deletion data/mapbox_metadata/icontext_symbolizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { MbStyle } from '../../src/MapboxStyleParser';
const iconTextSymbolizer: MbStyle = {
version: 8,
name: 'icontext symbolizer',
sprite: 'https://testurl.com',
sprite: 'https://testurl.com/sprites/mysprite',
sources: {
testsource: {
type: 'vector'
Expand Down
2 changes: 1 addition & 1 deletion data/mapbox_metadata/line_patternline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { MbStyle } from '../../src/MapboxStyleParser';
const linePatternLine: MbStyle = {
version: 8,
name: 'Pattern Line',
sprite: 'https://testurl.com',
sprite: 'https://testurl.com/sprites/mysprite',
sources: {
testsource: {
type: 'vector'
Expand Down
20 changes: 18 additions & 2 deletions data/styles/fill_patternfill.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ const fillPatternFill: Style = {
opacity: 1,
graphicFill: {
kind: 'Icon',
image: '/sprites/?name=poi&baseurl=' + encodeURIComponent('https://testurl.com')
image: {
source: 'https://testurl.com/sprites/mysprite.png',
position: [0, 0],
size: [12, 12]
}
}
}]
}],
Expand All @@ -26,7 +30,19 @@ const fillPatternFill: Style = {
},
sourceLayerMapping: {
foo: [0]
}
},
sprite: {
poi: {
position: [
0,
0,
],
size: [
12,
12,
],
},
},
}
}
};
Expand Down
20 changes: 18 additions & 2 deletions data/styles/icon_simpleicon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ const iconSimpleIcon: Style = {
name: 'Simple Icon',
symbolizers: [{
kind: 'Icon',
image: '/sprites/?name=poi&baseurl=' + encodeURIComponent('https://testurl.com')
image: {
source: 'https://testurl.com/sprites/mysprite.png',
position: [0, 0],
size: [12, 12]
}
}]
}],
metadata: {
Expand All @@ -21,7 +25,19 @@ const iconSimpleIcon: Style = {
},
sourceLayerMapping: {
foo: [0]
}
},
sprite: {
poi: {
position: [
0,
0,
],
size: [
12,
12,
],
},
},
}
}
};
Expand Down
20 changes: 18 additions & 2 deletions data/styles/icon_simpleicon_mapboxapi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ const iconSimpleIcon: Style = {
name: 'Simple Icon',
symbolizers: [{
kind: 'Icon',
image: '/sprites/?name=poi&baseurl=' + encodeURIComponent('https://api.mapbox.com/sprites/mapbox/streets-v8')
image: {
source: 'https://api.mapbox.com/sprites/mapbox/streets-v8.png',
position: [0, 0],
size: [12, 12]
}
}]
}],
metadata: {
Expand All @@ -21,7 +25,19 @@ const iconSimpleIcon: Style = {
},
sourceLayerMapping: {
foo: [0]
}
},
sprite: {
poi: {
position: [
0,
0,
],
size: [
12,
12,
],
},
},
}
}
};
Expand Down
20 changes: 18 additions & 2 deletions data/styles/line_patternline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@ const linePatternLine: Style = {
join: 'miter',
graphicFill: {
kind: 'Icon',
image: '/sprites/?name=poi&baseurl=' + encodeURIComponent('https://testurl.com')
image: {
source: 'https://testurl.com/sprites/mysprite.png',
position: [0, 0],
size: [12, 12]
}
}
}]
}],
Expand All @@ -29,7 +33,19 @@ const linePatternLine: Style = {
},
sourceLayerMapping: {
foo: [0]
}
},
sprite: {
poi: {
position: [
0,
0,
],
size: [
12,
12,
],
},
},
}
}
};
Expand Down
20 changes: 18 additions & 2 deletions data/styles_metadata/icontext_symbolizer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ const iconTextSymbolizer: Style = {
{
kind: 'Icon',
visibility: true,
image: '/sprites/?name=poi&baseurl=' + encodeURIComponent('https://testurl.com')
image: {
source: 'https://testurl.com/sprites/mysprite.png',
position: [0, 0],
size: [12, 12]
}
}
]
}
Expand All @@ -37,7 +41,19 @@ const iconTextSymbolizer: Style = {
},
sourceLayerMapping: {
foo: [0]
}
},
sprite: {
poi: {
position: [
0,
0,
],
size: [
12,
12,
],
},
},
}
}
};
Expand Down
47 changes: 42 additions & 5 deletions src/MapboxStyleParser.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable no-console */
import MapboxStyleParser from './MapboxStyleParser';
import { mockFetchResult } from '../test/util';

import line_simpleline from '../data/styles/line_simpleline';
import mb_line_simpleline from '../data/mapbox/line_simpleline';
Expand Down Expand Up @@ -68,6 +69,7 @@ import mb_text_placement_line_metadata from '../data/mapbox_metadata/text_placem
import mb_text_placement_point from '../data/mapbox/text_placement_point';
import text_placement_point from '../data/styles/text_placement_point';
import mb_text_placement_point_metadata from '../data/mapbox_metadata/text_placement_point';

it('MapboxStyleParser is defined', () => {
expect(MapboxStyleParser).toBeDefined();
});
Expand All @@ -79,14 +81,20 @@ describe('MapboxStyleParser implements StyleParser', () => {
});
describe('#readStyle', () => {
it('can read a mapbox Line style', async () => {
expect.assertions(2);
const { output: geoStylerStyle } = await styleParser.readStyle(mb_line_simpleline);
expect(geoStylerStyle).toBeDefined();
expect(geoStylerStyle).toEqual(line_simpleline);
});

it('can read a mapbox Line style with fill pattern', async () => {
expect.assertions(2);
mockFetchResult({
poi: {
width: 12,
height: 12,
x: 0,
y: 0
}
});
const { output: geoStylerStyle } = await styleParser.readStyle(mb_line_patternline);
expect(geoStylerStyle).toBeDefined();
expect(geoStylerStyle).toEqual(line_patternline);
Expand Down Expand Up @@ -127,7 +135,14 @@ describe('MapboxStyleParser implements StyleParser', () => {
});

it('can read a mapbox Fill style with fill pattern', async () => {
expect.assertions(2);
mockFetchResult({
poi: {
width: 12,
height: 12,
x: 0,
y: 0
}
});
const { output: geoStylerStyle } = await styleParser.readStyle(mb_fill_patternfill);
expect(geoStylerStyle).toBeDefined();
expect(geoStylerStyle).toEqual(fill_patternfill);
Expand Down Expand Up @@ -209,20 +224,42 @@ describe('MapboxStyleParser implements StyleParser', () => {
});

it('can read a mapbox style with an icon', async () => {
expect.assertions(2);
mockFetchResult({
poi: {
width: 12,
height: 12,
x: 0,
y: 0
}
});
const { output: geoStylerStyle } = await styleParser.readStyle(mb_icon_simpleicon);
expect(geoStylerStyle).toBeDefined();
expect(geoStylerStyle).toEqual(icon_simpleicon);
});

it('can read a mapbox style with an icon and resolves mapbox api', async () => {
expect.assertions(2);
mockFetchResult({
poi: {
width: 12,
height: 12,
x: 0,
y: 0
}
});
const { output: geoStylerStyle } = await styleParser.readStyle(mb_icon_simpleicon_mapboxapi);
expect(geoStylerStyle).toBeDefined();
expect(geoStylerStyle).toEqual(icon_simpleicon_mapboxapi);
});

it('can read a mapbox style with icontext symbolizer', async () => {
mockFetchResult({
poi: {
width: 12,
height: 12,
x: 0,
y: 0
}
});
const { output: geoStylerStyle } = await styleParser.readStyle(mb_icontext_symbolizer);
expect(geoStylerStyle).toBeDefined();
expect(geoStylerStyle).toEqual(icontext_symbolizer_metadata);
Expand Down
Loading

0 comments on commit 9d883be

Please sign in to comment.