This is an automated email from the ASF dual-hosted git repository.
bchapuis pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps.git
The following commit(s) were added to refs/heads/main by this push:
new 4f5ae71f Improve country and city labels (#690)
4f5ae71f is described below
commit 4f5ae71ff297241af9fcc894babefedeb8c71b28
Author: Leonard <[email protected]>
AuthorDate: Tue Jun 6 21:29:50 2023 +0200
Improve country and city labels (#690)
* Give priority to country labels
* Add new directives for interpolated labels
---
basemap/layers/point/country_label.js | 6 ++--
basemap/layers/point/point_label.js | 23 +++++++-------
basemap/layers/point/tileset.js | 6 ++--
basemap/style.js | 2 +-
basemap/utils/utils.js | 59 +++++++++++++++++++++++++++++++++++
5 files changed, 78 insertions(+), 18 deletions(-)
diff --git a/basemap/layers/point/country_label.js
b/basemap/layers/point/country_label.js
index c9358a79..b79c6959 100644
--- a/basemap/layers/point/country_label.js
+++ b/basemap/layers/point/country_label.js
@@ -17,8 +17,8 @@ let directives = [
'all',
['==', ['get', 'place'], 'country']
],
- 'text-size': 18,
- 'text-color': 'rgb(25, 25, 25)',
+ 'text-size': 16,
+ 'text-color': 'rgb(90, 56, 90)',
'symbol-sort-key': ["-", ["to-number", ['get', 'population'], 0]],
},
];
@@ -29,7 +29,7 @@ export default asLayerObject(withSymbolSortKeys(directives), {
source: 'baremaps',
'source-layer': 'point',
'minzoom': 1,
- 'maxzoom': 4,
+ 'maxzoom': 6,
layout: {
visibility: 'visible',
'text-font': ['Noto Sans Regular'],
diff --git a/basemap/layers/point/point_label.js
b/basemap/layers/point/point_label.js
index 5cce37ea..119d9f99 100644
--- a/basemap/layers/point/point_label.js
+++ b/basemap/layers/point/point_label.js
@@ -18,8 +18,8 @@ let directives = [
['==', ['get', 'capital'], 'yes'],
['==', ['get', 'place'], 'city']
],
- 'text-size': 16,
- 'text-color': 'rgb(25, 25, 25)',
+ 'label-color': 'rgb(25, 25, 25)',
+ 'label-size': 16,
'symbol-sort-key': ["-", ["to-number", ['get', 'population'], 0]],
},
{
@@ -28,24 +28,25 @@ let directives = [
['!=', ['get', 'capital'], 'yes'],
['==', ['get', 'place'], 'city']
],
- 'text-size': 16,
- 'text-color': 'rgb(25, 25, 25)',
+ 'label-color': ['rgb(100, 100, 100)', 'rgb(50, 50, 50)'],
+ 'label-size': 12,
'symbol-sort-key': ["-", ["to-number", ['get', 'population'], 0]],
},
{
filter: ['==', ['get', 'place'], 'town'],
- 'text-size': 14,
- 'text-color': 'rgb(50,50,50)',
+ 'label-size': 10,
+ 'label-color': ['rgb(100, 100, 100)', 'rgb(75, 75, 75)'],
+
},
{
filter: ['==', ['get', 'place'], 'village'],
- 'text-size': 12,
- 'text-color': 'rgb(75,75,75)',
+ 'label-size': 10,
+ 'label-color': 'rgb(100, 100, 100)',
},
{
filter: ['==', ['get', 'place'], 'locality'],
- 'text-size': 12,
- 'text-color': 'rgb(75,75,75)',
+ 'label-size': 8,
+ 'label-color': 'rgb(100, 100, 100)',
},
// {
// filter: [
@@ -72,7 +73,7 @@ export default asLayerObject(withSymbolSortKeys(directives), {
type: 'symbol',
source: 'baremaps',
'source-layer': 'point',
- 'minzoom': 4,
+ 'minzoom': 2,
'maxzoom': 24,
layout: {
visibility: 'visible',
diff --git a/basemap/layers/point/tileset.js b/basemap/layers/point/tileset.js
index 6c44cb74..7ccfd15f 100644
--- a/basemap/layers/point/tileset.js
+++ b/basemap/layers/point/tileset.js
@@ -14,13 +14,13 @@ export default {
"queries": [
{
"minzoom": 1,
- "maxzoom": 4,
+ "maxzoom": 2,
"sql": "SELECT id, jsonb_build_object('name', tags -> 'name',
'population', tags -> 'population', 'place', tags -> 'place') as tags, geom
FROM osm_point_z$zoom WHERE tags != '{}' AND (tags ->> 'place' = 'country')"
},
{
- "minzoom": 4,
+ "minzoom": 2,
"maxzoom": 8,
- "sql": "SELECT id, jsonb_build_object('name', tags -> 'name',
'population', tags -> 'population', 'place', tags -> 'place') as tags, geom
FROM osm_point_z$zoom WHERE tags != '{}'"
+ "sql": "SELECT id, jsonb_build_object('name', tags -> 'name',
'population', tags -> 'population', 'place', tags -> 'place', 'capital', tags
-> 'capital') as tags, geom FROM osm_point_z$zoom WHERE tags != '{}'"
},
{
"minzoom": 8,
diff --git a/basemap/style.js b/basemap/style.js
index dc40c4b6..a5ec7684 100644
--- a/basemap/style.js
+++ b/basemap/style.js
@@ -117,7 +117,7 @@ export default {
boundary_line,
waterway_label,
icon,
- country_label,
point_label,
+ country_label,
],
};
\ No newline at end of file
diff --git a/basemap/utils/utils.js b/basemap/utils/utils.js
index 9a15c351..3387512c 100644
--- a/basemap/utils/utils.js
+++ b/basemap/utils/utils.js
@@ -60,6 +60,7 @@ export function asLayoutProperty(directives = [], baseLayout
= {}) {
...lineSortKey(directives),
...fillSortKey(directives),
...symbolSortKey(directives),
+ ...labelSize(directives),
},
baseLayout,
)
@@ -79,6 +80,7 @@ export function asPaintProperty(directives = [], basePaint =
{}) {
...lineGapWidth(directives),
...roadWidth(directives),
...roadGapWidth(directives),
+ ...labelColor(directives),
},
basePaint,
)
@@ -192,6 +194,15 @@ function roadGapWidth(directives) {
return mergeInterpolatedDirective(directives, 'road-gap-width',
'line-gap-width', 1)
}
+function labelColor(directives) {
+ return mergeInterpolatedColorDirective(directives, 'label-color',
'text-color', 6, 8, 'rgb(0, 0, 0)')
+}
+
+
+function labelSize(directives) {
+ return mergeInterpolatedNumberDirective(directives, 'label-size',
'text-size', 6, 8, 4, 14)
+}
+
function mergeInterpolatedDirective(directives, property, alias, value) {
let cases = directives.flatMap((rule) => {
if (rule[property]) {
@@ -216,6 +227,54 @@ function mergeInterpolatedDirective(directives, property,
alias, 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],
+ ],
+ }
+}
+
function groupBy(xs, key) {
return xs.reduce(function (rv, x) {
;(rv[x[key]] = rv[x[key]] || []).push(x)
