This is an automated email from the ASF dual-hosted git repository. bchapuis pushed a commit to branch 578-fix-styling-issues in repository https://gitbox.apache.org/repos/asf/incubator-baremaps.git
commit 1c6e1accb41cc84af78fa849b6a4aff9f48d5fd4 Author: Bertil Chapuis <[email protected]> AuthorDate: Mon Feb 6 22:15:20 2023 +0100 Fix styling issues --- basemap/layers/highway/bridge_line.js | 9 +++++++++ basemap/layers/man_made/{bridge.js => polygon.js} | 3 ++- basemap/layers/natural/overlay.js | 5 ----- basemap/layers/natural/tree.js | 1 + basemap/layers/natural/trunk.js | 1 + basemap/layers/natural/water.js | 19 +++++++++++++++++++ basemap/style.js | 10 ++++++---- basemap/utils/layer.js | 10 +++++----- 8 files changed, 43 insertions(+), 15 deletions(-) diff --git a/basemap/layers/highway/bridge_line.js b/basemap/layers/highway/bridge_line.js index 431105b0..44994b40 100644 --- a/basemap/layers/highway/bridge_line.js +++ b/basemap/layers/highway/bridge_line.js @@ -104,5 +104,14 @@ export default { 'line-color': 'rgb(159, 126, 57)', 'road-width': 2, }, + { + filter: [ + 'any', + ['==', ['get', 'highway'], 'footway'], + ['==', ['get', 'highway'], 'path'], + ], + 'line-color': 'rgb(255, 255, 255)', + 'road-width': 2, + }, ], } diff --git a/basemap/layers/man_made/bridge.js b/basemap/layers/man_made/polygon.js similarity index 69% rename from basemap/layers/man_made/bridge.js rename to basemap/layers/man_made/polygon.js index b5c6e9f5..c048d238 100644 --- a/basemap/layers/man_made/bridge.js +++ b/basemap/layers/man_made/polygon.js @@ -6,9 +6,10 @@ export default { layout: { visibility: 'visible', }, + filter: ['==', ['geometry-type'], 'Polygon'], directives: [ { - filter: ['==', ['get', 'man_made'], 'bridge'], + filter: ['in', ['get', 'man_made'], ['literal', ['bridge', 'breakwater']]], 'fill-color': 'rgb(184, 184, 184)', }, ], diff --git a/basemap/layers/natural/overlay.js b/basemap/layers/natural/overlay.js index e7fef47f..d2aa693d 100644 --- a/basemap/layers/natural/overlay.js +++ b/basemap/layers/natural/overlay.js @@ -14,11 +14,6 @@ export default { filter: ['==', ['get', 'natural'], 'beach'], 'fill-color': 'rgb(255, 241, 186)' }, - { - filter: ['==', ['get', 'natural'], 'water'], - 'fill-color': 'rgb(170, 211, 223)', - 'fill-sort-key': 10, - }, { filter: ['==', ['get', 'natural'], 'wetland'], 'fill-color': 'rgb(213, 231, 211)' diff --git a/basemap/layers/natural/tree.js b/basemap/layers/natural/tree.js index a3729c42..fbc0419a 100644 --- a/basemap/layers/natural/tree.js +++ b/basemap/layers/natural/tree.js @@ -8,6 +8,7 @@ export default { visibility: 'visible', }, paint: { + 'circle-pitch-alignment': 'map', 'circle-color': 'rgb(113, 205, 111)', 'circle-radius': [ 'interpolate', diff --git a/basemap/layers/natural/trunk.js b/basemap/layers/natural/trunk.js index 91b0f9d7..8d214278 100644 --- a/basemap/layers/natural/trunk.js +++ b/basemap/layers/natural/trunk.js @@ -8,6 +8,7 @@ export default { visibility: 'visible', }, paint: { + 'circle-pitch-alignment': 'map', 'circle-color': 'rgb(129, 94, 39)', 'circle-radius': [ 'interpolate', diff --git a/basemap/layers/natural/water.js b/basemap/layers/natural/water.js new file mode 100644 index 00000000..22a24e17 --- /dev/null +++ b/basemap/layers/natural/water.js @@ -0,0 +1,19 @@ +export default { + id: 'natural_water', + type: 'fill', + source: 'baremaps', + 'source-layer': 'natural', + layout: { + visibility: 'visible', + }, + paint: { + 'fill-antialias': true, + }, + directives: [ + { + filter: ['==', ['get', 'natural'], 'water'], + 'fill-color': 'rgb(170, 211, 223)', + 'fill-sort-key': 10, + } + ] +} diff --git a/basemap/style.js b/basemap/style.js index 438b2d6a..07b233d0 100644 --- a/basemap/style.js +++ b/basemap/style.js @@ -12,6 +12,7 @@ import natural_background from "./layers/natural/background.js"; import natural_overlay from "./layers/natural/overlay.js"; import natural_tree from "./layers/natural/tree.js"; import natural_trunk from "./layers/natural/trunk.js"; +import natural_water from "./layers/natural/water.js"; import power_background from "./layers/power/background.js"; import power_tower from "./layers/power/tower.js"; import power_cable from "./layers/power/cable.js"; @@ -32,7 +33,7 @@ import ocean_background from './layers/ocean/background.js'; import route_line from "./layers/route/style.js" import building_shape from "./layers/building/shape.js"; import building_number from "./layers/building/number.js"; -import man_made_bridge from "./layers/man_made/bridge.js"; +import man_made_polygon from "./layers/man_made/polygon.js"; import man_made_pier_line from "./layers/man_made/pier_line.js"; import man_made_pier_label from "./layers/man_made/pier_label.js"; import waterway_line from "./layers/waterway/line.js" @@ -57,6 +58,7 @@ export default { "glyphs": "https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf";, "layers": [ background, + layer(natural_water), layer(power_background), layer(amenity_background), layer(landuse_background), @@ -69,18 +71,18 @@ export default { layer(waterway_line), layer(waterway_tunnel_casing), layer(waterway_tunnel_line), - layer(man_made_bridge), + layer(man_made_polygon), layer(amenity_fountain), layer(highway_tunnel_outline), layer(highway_tunnel_line), layer(railway_tunnel), + layer(highway_bridge_outline), + layer(highway_bridge_line), layer(highway_outline), layer(highway_line), layer(highway_dash), layer(highway_pedestrian_area), layer(railway_line), - layer(highway_bridge_outline), - layer(highway_bridge_line), layer(highway_label), layer(route_line), layer(power_cable), diff --git a/basemap/utils/layer.js b/basemap/utils/layer.js index ce6dab0b..8943a4e7 100644 --- a/basemap/utils/layer.js +++ b/basemap/utils/layer.js @@ -148,9 +148,9 @@ function roadGapWidth(layer) { } function mergeInterpolatedDirective(layer, property, alias, value) { - let cases = layer['directives'].flatMap((rule) => { - if (rule[property]) { - return [rule['filter'], rule[property]] + let cases = layer['directives'].flatMap((directive) => { + if (directive[property]) { + return [directive['filter'], directive[property]] } else { return [] } @@ -161,10 +161,10 @@ function mergeInterpolatedDirective(layer, property, alias, value) { return { [alias]: [ 'interpolate', - ['exponential', 1.2], + ['exponential', 1.1], ['zoom'], 5, - 0.2, + 0.1, 20, ['case', ...cases, value], ],
