This is an automated email from the ASF dual-hosted git repository.
bchapuis pushed a commit to branch legends
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps.git
The following commit(s) were added to refs/heads/legends by this push:
new aabea6ad Improve text size with stops
aabea6ad is described below
commit aabea6adb55ad10286be35d6171806217d6f9b0f
Author: Bertil Chapuis <[email protected]>
AuthorDate: Wed Jan 10 13:20:32 2024 +0100
Improve text size with stops
---
basemap/layers/highway/highway_label.js | 9 +-
basemap/layers/point/icon.js | 12 +--
basemap/layers/point/{point_label.js => place.js} | 49 +++++++---
basemap/style.js | 4 +-
basemap/themes/default.js | 1 +
basemap/utils/utils.js | 113 +++++-----------------
6 files changed, 75 insertions(+), 113 deletions(-)
diff --git a/basemap/layers/highway/highway_label.js
b/basemap/layers/highway/highway_label.js
index e024a677..d8f2f90d 100644
--- a/basemap/layers/highway/highway_label.js
+++ b/basemap/layers/highway/highway_label.js
@@ -26,7 +26,14 @@ export default {
'text-anchor': 'center',
'text-field': ['get', 'name'],
'text-font': ['Noto Sans Regular'],
- 'text-size': ['interpolate', ['exponential', 1], ['zoom'], 13, 10, 14,
12],
+ 'text-size': [
+ 'interpolate',
+ ['linear'],
+ ['zoom'],
+ 0, 0,
+ 10, 6,
+ 24, 24
+ ],
visibility: 'visible',
},
paint: {
diff --git a/basemap/layers/point/icon.js b/basemap/layers/point/icon.js
index 7e8f76a5..aa2df6b7 100644
--- a/basemap/layers/point/icon.js
+++ b/basemap/layers/point/icon.js
@@ -2002,12 +2002,12 @@ let directives = [
'icon-color': theme.otherIconColor,
'text-color': theme.otherIconColor,
},
- {
- 'filter': ['has', 'capital'],
- 'icon-image': 'place_capital',
- 'icon-color': theme.otherIconColor,
- 'text-color': theme.otherIconColor,
- },
+ // {
+ // 'filter': ['has', 'capital'],
+ // 'icon-image': 'place_capital',
+ // 'icon-color': theme.otherIconColor,
+ // 'text-color': theme.otherIconColor,
+ // },
// {
// 'filter': ['==', ['get', 'entrance'], 'yes'],
// 'icon-image': 'entrance',
diff --git a/basemap/layers/point/point_label.js b/basemap/layers/point/place.js
similarity index 74%
rename from basemap/layers/point/point_label.js
rename to basemap/layers/point/place.js
index 8dc58fcf..8464a918 100644
--- a/basemap/layers/point/point_label.js
+++ b/basemap/layers/point/place.js
@@ -19,40 +19,61 @@ import {asLayerObject, withSymbolSortKeys} from
"../../utils/utils.js";
let directives = [
{
- filter: [
+ 'filter': [
'all',
+ ['==', ['get', 'place'], 'city'],
['==', ['get', 'capital'], 'yes'],
- ['==', ['get', 'place'], 'city']
],
- 'label-color': theme.pointLabelCityLabelColor,
- 'label-size': 16,
'symbol-sort-key': ["-", ["to-number", ['get', 'population'], 0]],
+ 'label-color': theme.placeIconColor,
+ 'text-size-stops': [
+ 0, 0,
+ 10, 18,
+ 24, 72
+ ],
},
{
- filter: [
+ 'filter': [
'all',
+ ['==', ['get', 'place'], 'city'],
['!=', ['get', 'capital'], 'yes'],
- ['==', ['get', 'place'], 'city']
],
- 'label-color': [theme.pointLabelCityFilterOneLabelColor,
theme.pointLabelCityFilterTwoLabelColor],
- 'label-size': 12,
'symbol-sort-key': ["-", ["to-number", ['get', 'population'], 0]],
+ 'label-color': [theme.pointLabelCityFilterOneLabelColor,
theme.pointLabelCityFilterTwoLabelColor],
+ 'text-size-stops': [
+ 0, 0,
+ 10, 16,
+ 24, 64
+ ],
},
{
- filter: ['==', ['get', 'place'], 'town'],
- 'label-size': 10,
+ 'filter': ['==', ['get', 'place'], 'town'],
+ 'symbol-sort-key': ["-", ["to-number", ['get', 'population'], 0]],
'label-color': [theme.pointLabelTownFilterOneLabelColor,
theme.pointLabelTownFilterTwoLabelColor],
-
+ 'text-size-stops': [
+ 0, 0,
+ 10, 14,
+ 24, 56
+ ],
},
{
filter: ['==', ['get', 'place'], 'village'],
- 'label-size': 10,
+ 'symbol-sort-key': ["-", ["to-number", ['get', 'population'], 0]],
'label-color': theme.pointLabelVillageLabelColor,
+ 'text-size-stops': [
+ 0, 0,
+ 10, 10,
+ 24, 40
+ ],
},
{
filter: ['==', ['get', 'place'], 'locality'],
- 'label-size': 8,
'label-color': theme.pointLabelLocalityLabelColor,
+ 'text-size-stops': [
+ 0, 0,
+ 10, 8,
+ 24, 32
+ ],
},
// {
// filter: [
@@ -85,6 +106,8 @@ export default asLayerObject(withSymbolSortKeys(directives),
{
visibility: 'visible',
'text-font': ['Noto Sans Regular'],
'text-field': ['get', 'name'],
+ 'icon-size': 1,
+ 'text-optional': true,
},
paint: {
'text-halo-color': theme.pointLabelPaintTextHaloColor,
diff --git a/basemap/style.js b/basemap/style.js
index 0ea9a4b0..99eb7689 100644
--- a/basemap/style.js
+++ b/basemap/style.js
@@ -58,8 +58,8 @@ import waterway_line from "./layers/waterway/line.js"
import waterway_area from "./layers/waterway/area.js"
import waterway_label from "./layers/waterway/label.js"
import icon from "./layers/point/icon.js";
+import place from './layers/point/place.js';
import country_label from './layers/point/country_label.js';
-import point_label from './layers/point/point_label.js';
export default {
"version": 8,
@@ -115,7 +115,7 @@ export default {
waterway_label,
building_extrusion,
icon,
- point_label,
+ place,
country_label,
],
};
\ No newline at end of file
diff --git a/basemap/themes/default.js b/basemap/themes/default.js
index f2c56432..67ea2648 100644
--- a/basemap/themes/default.js
+++ b/basemap/themes/default.js
@@ -357,6 +357,7 @@ export default {
gastronomyIconColor: 'rgb(199, 116, 0)',
religionIconColor: 'rgb(0, 0, 0)',
powerIconColor: 'rgb(0, 0, 0)',
+ placeIconColor: 'rgb(0, 0, 0)',
waterIconColor: 'rgb(0, 146, 219)',
officeIconColor: 'rgb(72, 99, 160)',
manMadeIconColor: 'rgb(85, 85, 85)',
diff --git a/basemap/utils/utils.js b/basemap/utils/utils.js
index c05aaaa1..6f4c2707 100644
--- a/basemap/utils/utils.js
+++ b/basemap/utils/utils.js
@@ -61,12 +61,12 @@ export function asLayoutProperty(directives = [],
baseLayout = {}) {
...textFont(directives),
...textField(directives),
...textSize(directives),
+ ...textSizeStops(directives),
...textMaxWidth(directives),
...iconImage(directives),
...lineSortKey(directives),
...fillSortKey(directives),
...symbolSortKey(directives),
- ...labelSize(directives),
},
baseLayout,
)
@@ -83,10 +83,10 @@ export function asPaintProperty(directives = [], basePaint
= {}) {
...fillOutlineColor(directives),
...lineColor(directives),
...lineWidth(directives),
+ ...lineWidthStops(directives),
...lineGapWidth(directives),
- ...roadWidth(directives),
- ...roadGapWidth(directives),
- ...labelColor(directives),
+ ...lineGapWidthStops(directives),
+ ...textColor(directives),
},
basePaint,
)
@@ -124,10 +124,6 @@ function textField(directives) {
return mergeDirectives(directives, 'text-field', null)
}
-function textSize(directives) {
- return mergeDirectives(directives, 'text-size', 12)
-}
-
function textMaxWidth(directives) {
return mergeDirectives(directives, 'text-max-width', 4)
}
@@ -176,6 +172,10 @@ function symbolSortKey(directives) {
return mergeDirectives(directives, 'symbol-sort-key', 0)
}
+function textSize(directives) {
+ return mergeDirectives(directives, 'text-size', 0)
+}
+
function mergeDirectives(directives, property, value) {
let cases = directives.flatMap((rule) => {
if (rule[property]) {
@@ -192,23 +192,19 @@ function mergeDirectives(directives, property, value) {
}
}
-function roadWidth(directives) {
- return mergeRoadDirective(directives, 'line-width-stops', 'line-width', 1)
-}
-
-function roadGapWidth(directives) {
- return mergeRoadDirective(directives, 'line-gap-width-stops',
'line-gap-width', 1)
+function lineWidthStops(directives) {
+ return interpolateStops(directives, 'line-width-stops', 'line-width', 1)
}
-function labelColor(directives) {
- return mergeInterpolatedColorDirective(directives, 'label-color',
'text-color', 6, 8, 'rgb(0, 0, 0)')
+function lineGapWidthStops(directives) {
+ return interpolateStops(directives, 'line-gap-width-stops',
'line-gap-width', 1)
}
-function labelSize(directives) {
- return mergeInterpolatedNumberDirective(directives, 'label-size',
'text-size', 6, 8, 4, 14)
+function textSizeStops(directives) {
+ return interpolateStops(directives, 'text-size-stops', 'text-size', 1)
}
-function mergeRoadDirective(directives, property, alias, value) {
+function interpolateStops(directives, property, alias, value) {
if (directives.filter((directive) => directive[property]).length == 0) {
return {};
}
@@ -236,78 +232,13 @@ function mergeRoadDirective(directives, property, alias,
value) {
}
}
-function mergeInterpolatedDirective(directives, property, alias, value) {
- let cases = directives.flatMap((rule) => {
- if (rule[property]) {
- return [rule['filter'], rule[property]]
- } else {
- return []
- }
- })
- if (cases.length == 0) {
- return {}
- }
- return {
- [alias]: [
- 'interpolate',
- ['exponential', 1.2],
- ['zoom'],
- 5,
- 0.2,
- 20,
- ['case', ...cases, value],
- ],
- }
-}
-
-function mergeInterpolatedColorDirective(directives, property, alias,
startZoom, endZoom, fallback) {
- const cases = directives.filter((rule) => rule[property]).map((rule) => {
- const propertyValue = rule[property]
- if (propertyValue instanceof Array) {
- return [rule['filter'], propertyValue]
- } else {
- return [rule['filter'], [propertyValue, propertyValue]]
- }
- })
- if (cases.length == 0) {
- return {}
- }
- return {
- [alias]: [
- 'interpolate',
- ['linear'],
- ['zoom'],
- startZoom,
- ['case', ...(cases.flatMap((c) => ([c[0], c[1][0]]))), fallback],
- endZoom,
- ['case', ...(cases.flatMap((c) => ([c[0], c[1][1]]))), fallback],
- ],
- }
-}
-
-function mergeInterpolatedNumberDirective(directives, property, alias,
startZoom, endZoom, offset, fallback) {
- let cases = []
- directives.forEach((rule) => {
- if (rule[property]) {
- cases.push([rule['filter'], rule[property]])
- }
- })
- if (cases.length == 0) {
- return {}
- }
- return {
- [alias]: [
- 'interpolate',
- ['linear'],
- ['zoom'],
- startZoom,
- ['case', ...(cases.flatMap((c) => ([c[0], c[1]]))), fallback],
- endZoom,
- ['case', ...(cases.flatMap((c) => ([c[0], c[1] + offset]))),
fallback],
- ],
- }
-}
-
+/**
+ * Group an array of objects by a given key.
+ *
+ * @param xs
+ * @param key
+ * @returns {*}
+ */
function groupBy(xs, key) {
return xs.reduce(function (rv, x) {
;(rv[x[key]] = rv[x[key]] || []).push(x)
