Skip to content

Commit 8ec42aa

Browse files
bdonbdon
authored
Styles 4 1 (#317)
* cleanup base layers; add landuse kind=runway * make halos more consistent * change light waterway labels to blue * remove dedicated peaks layer * add poi object to themes [#238] * add main sprites layer [#238] limit to 4 kinds of green icons for now * point sprites at v4 [#238] * add beach and zoo [#238] * styles 4.1.0; CHANGELOG
1 parent 6a009d0 commit 8ec42aa

File tree

9 files changed

+116
-89
lines changed

9 files changed

+116
-89
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
Styles v4.1.0
2+
------
3+
- add icon sprites for six green kinds [#238]
4+
- point v4 styles at v4 sprites assets URL
5+
- change light theme water color to blue instead of white for contrast
6+
- consistent halo size across layers
7+
- add landuse `kind=runway`
8+
19
Tiles v4.0.1
210
------
311
- fix `roads` `kind=ferry`, remove ferry `kind_detail` [#312]

‎app/src/MapViewComponent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ function getMaplibreStyle(
9696
if (localSprites) {
9797
style.sprite = `${location.protocol}//${location.host}/${theme}`;
9898
} else {
99-
style.sprite = `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`;
99+
style.sprite = `https://protomaps.github.io/basemaps-assets/sprites/v4/${theme}`;
100100
}
101101

102102
style.glyphs =

‎app/src/VisualTestsComponent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const createMap = (
5555
zoom: zoom,
5656
glyphs:
5757
"https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
58-
sprite: "https://protomaps.github.io/basemaps-assets/sprites/v3/light",
58+
sprite: "https://protomaps.github.io/basemaps-assets/sprites/v4/light",
5959
sources: {
6060
protomaps: {
6161
type: "vector",

‎app/src/examples.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,5 +75,12 @@
7575
"tags": ["roads"],
7676
"center": [-122.440512, 37.807891],
7777
"zoom": 16
78+
},
79+
{
80+
"name": "edwards-afb",
81+
"description": "edwards air force base runways",
82+
"tags": ["landuse"],
83+
"center": [-118.0726, 34.8328],
84+
"zoom": 10
7885
}
7986
]

‎styles/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎styles/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "protomaps-themes-base",
3-
"version": "4.0.1",
3+
"version": "4.1.0",
44
"description": "Protomaps basemap themes for MapLibre GL JS",
55
"type": "module",
66
"main": "dist/cjs/index.cjs",

‎styles/src/base_layers.ts‎

Lines changed: 76 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -236,20 +236,16 @@ export function nolabels_layers(
236236
],
237237
},
238238
},
239-
// {
240-
// id: "landuse_runway",
241-
// type: "fill",
242-
// source: source,
243-
// "source-layer": "landuse",
244-
// minzoom: 14,
245-
// filter: [
246-
// "any",
247-
// ["in", "kind_detail", "runway", "taxiway"],
248-
// ],
249-
// paint: {
250-
// "fill-color": t.runway,
251-
// },
252-
// },
239+
{
240+
id: "landuse_runway",
241+
type: "fill",
242+
source: source,
243+
"source-layer": "landuse",
244+
filter: ["any", ["in", "kind", "runway", "taxiway"]],
245+
paint: {
246+
"fill-color": t.runway,
247+
},
248+
},
253249
{
254250
id: "water",
255251
type: "fill",
@@ -1204,40 +1200,6 @@ export function nolabels_layers(
12041200
],
12051201
},
12061202
},
1207-
// {
1208-
// id: "roads_bridges_highway_casing",
1209-
// type: "line",
1210-
// source: source,
1211-
// "source-layer": "roads",
1212-
// minzoom: 12,
1213-
// filter: ["all", [">", "level", 0], ["==", "kind", "highway"], ["!=", "link", 1]],
1214-
// paint: {
1215-
// "line-color": t.bridges_highway_casing,
1216-
// "line-gap-width": [
1217-
// "interpolate",
1218-
// ["exponential", 1.6],
1219-
// ["zoom"],
1220-
// 3,
1221-
// 0,
1222-
// 3.5,
1223-
// 0.5,
1224-
// 18,
1225-
// 32,
1226-
// ],
1227-
// "line-width": [
1228-
// "interpolate",
1229-
// ["exponential", 1.6],
1230-
// ["zoom"],
1231-
// 7,
1232-
// 0,
1233-
// 7.5,
1234-
// 1,
1235-
// ],
1236-
// },
1237-
// layout: {
1238-
// visibility: casingVisibility,
1239-
// },
1240-
// },
12411203
{
12421204
id: "roads_bridges_other",
12431205
type: "line",
@@ -1416,37 +1378,16 @@ export function labels_layers(
14161378
filter: ["in", "kind", "river", "stream"],
14171379
layout: {
14181380
"symbol-placement": "line",
1419-
"text-font": ["Noto Sans Regular"],
1420-
"text-field": get_multiline_name(
1421-
lang,
1422-
script,
1423-
) as DataDrivenPropertyValueSpecification<string>,
1424-
"text-size": 12,
1425-
"text-letter-spacing": 0.3,
1426-
},
1427-
paint: {
1428-
"text-color": t.waterway_label,
1429-
},
1430-
},
1431-
{
1432-
id: "pois_peak",
1433-
type: "symbol",
1434-
source: source,
1435-
"source-layer": "pois",
1436-
filter: ["==", "kind", "peak"],
1437-
layout: {
14381381
"text-font": ["Noto Sans Italic"],
14391382
"text-field": get_multiline_name(
14401383
lang,
14411384
script,
14421385
) as DataDrivenPropertyValueSpecification<string>,
1443-
"text-size": ["interpolate", ["linear"], ["zoom"], 10, 8, 16, 12],
1444-
"text-letter-spacing": 0.1,
1445-
"text-max-width": 9,
1386+
"text-size": 12,
1387+
"text-letter-spacing": 0.2,
14461388
},
14471389
paint: {
1448-
"text-color": t.peak_label,
1449-
"text-halo-width": 1.5,
1390+
"text-color": t.ocean_label,
14501391
},
14511392
},
14521393
{
@@ -1469,7 +1410,8 @@ export function labels_layers(
14691410
paint: {
14701411
"text-color": t.roads_label_minor,
14711412
"text-halo-color": t.roads_label_minor_halo,
1472-
"text-halo-width": 2,
1413+
"text-halo-width": 1,
1414+
"text-halo-blur": 1,
14731415
},
14741416
},
14751417
{
@@ -1489,7 +1431,7 @@ export function labels_layers(
14891431
"fjord",
14901432
],
14911433
layout: {
1492-
"text-font": ["Noto Sans Medium"],
1434+
"text-font": ["Noto Sans Italic"],
14931435
"text-field": get_multiline_name(
14941436
lang,
14951437
script,
@@ -1510,7 +1452,7 @@ export function labels_layers(
15101452
"source-layer": "water",
15111453
filter: ["in", "kind", "lake", "water"],
15121454
layout: {
1513-
"text-font": ["Noto Sans Medium"],
1455+
"text-font": ["Noto Sans Italic"],
15141456
"text-field": get_multiline_name(
15151457
lang,
15161458
script,
@@ -1543,9 +1485,60 @@ export function labels_layers(
15431485
paint: {
15441486
"text-color": t.roads_label_major,
15451487
"text-halo-color": t.roads_label_major_halo,
1546-
"text-halo-width": 2,
1547-
},
1548-
},
1488+
"text-halo-width": 1,
1489+
"text-halo-blur": 1,
1490+
},
1491+
},
1492+
...((t.pois
1493+
? [
1494+
{
1495+
id: "pois",
1496+
type: "symbol",
1497+
source: source,
1498+
"source-layer": "pois",
1499+
filter: [
1500+
"all",
1501+
[
1502+
"in",
1503+
["get", "kind"],
1504+
[
1505+
"literal",
1506+
["beach", "forest", "marina", "park", "peak", "zoo"],
1507+
],
1508+
],
1509+
[">=", ["zoom"], ["get", "min_zoom"]],
1510+
],
1511+
layout: {
1512+
"icon-image": ["get", "kind"],
1513+
"text-font": ["Noto Sans Regular"],
1514+
"text-justify": "auto",
1515+
"text-field": get_multiline_name(
1516+
lang,
1517+
script,
1518+
) as DataDrivenPropertyValueSpecification<string>,
1519+
"text-size": 10,
1520+
"text-max-width": 8,
1521+
"text-offset": [1, 0],
1522+
"text-variable-anchor": ["left", "right"],
1523+
},
1524+
paint: {
1525+
"text-color": [
1526+
"case",
1527+
[
1528+
"in",
1529+
["get", "kind"],
1530+
[
1531+
"literal",
1532+
["beach", "forest", "marina", "park", "peak", "zoo"],
1533+
],
1534+
],
1535+
t.pois.green,
1536+
t.earth,
1537+
],
1538+
},
1539+
},
1540+
]
1541+
: []) as LayerSpecification[]),
15491542
{
15501543
id: "places_subplace",
15511544
type: "symbol",
@@ -1590,7 +1583,8 @@ export function labels_layers(
15901583
paint: {
15911584
"text-color": t.subplace_label,
15921585
"text-halo-color": t.subplace_label_halo,
1593-
"text-halo-width": 1.5,
1586+
"text-halo-width": 1,
1587+
"text-halo-blur": 1,
15941588
},
15951589
},
15961590
{
@@ -1705,6 +1699,7 @@ export function labels_layers(
17051699
"text-color": t.city_label,
17061700
"text-halo-color": t.city_label_halo,
17071701
"text-halo-width": 1,
1702+
"text-halo-blur": 1,
17081703
},
17091704
},
17101705
{
@@ -1731,7 +1726,8 @@ export function labels_layers(
17311726
paint: {
17321727
"text-color": t.state_label,
17331728
"text-halo-color": t.state_label_halo,
1734-
"text-halo-width": 2,
1729+
"text-halo-width": 1,
1730+
"text-halo-blur": 1,
17351731
},
17361732
},
17371733
{

‎styles/src/generate_styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ for (const theme of ["light", "dark", "white", "grayscale", "black"]) {
3030
},
3131
},
3232
layers: layers,
33-
sprite: `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`,
33+
sprite: `https://protomaps.github.io/basemaps-assets/sprites/v4/${theme}`,
3434
glyphs:
3535
"https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
3636
};

‎styles/src/themes.ts‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ export interface Theme {
5151

5252
railway: string;
5353
boundaries: string;
54-
waterway_label: string;
5554

5655
bridges_other_casing: string;
5756
bridges_minor_casing: string;
@@ -69,14 +68,23 @@ export interface Theme {
6968
roads_label_major: string;
7069
roads_label_major_halo: string;
7170
ocean_label: string;
72-
peak_label: string;
7371
subplace_label: string;
7472
subplace_label_halo: string;
7573
city_label: string;
7674
city_label_halo: string;
7775
state_label: string;
7876
state_label_halo: string;
7977
country_label: string;
78+
79+
pois?: Pois;
80+
81+
// deprecated
82+
peak_label: string;
83+
waterway_label: string;
84+
}
85+
86+
export interface Pois {
87+
green: string;
8088
}
8189

8290
export const CONTRAST: Theme = {
@@ -230,7 +238,7 @@ export const LIGHT: Theme = {
230238
roads_label_minor_halo: "#ffffff",
231239
roads_label_major: "#938a8d",
232240
roads_label_major_halo: "#ffffff",
233-
ocean_label: "#ffffff",
241+
ocean_label: "#728dd4",
234242
peak_label: "#7e9aa0",
235243
subplace_label: "#8f8f8f",
236244
subplace_label_halo: "#e0e0e0",
@@ -239,6 +247,10 @@ export const LIGHT: Theme = {
239247
state_label: "#b3b3b3",
240248
state_label_halo: "#e0e0e0",
241249
country_label: "#a3a3a3",
250+
251+
pois: {
252+
green: "#20834D",
253+
},
242254
};
243255

244256
export const DARK: Theme = {
@@ -320,6 +332,10 @@ export const DARK: Theme = {
320332
state_label: "#3d3d3d",
321333
state_label_halo: "#1f1f1f",
322334
country_label: "#5c5c5c",
335+
336+
pois: {
337+
green: "#30C573",
338+
},
323339
};
324340

325341
export const WHITE: Theme = {

0 commit comments

Comments
 (0)