From fceb8335720e67b99187600a7663a83202ca8867 Mon Sep 17 00:00:00 2001 From: Bertil Chapuis Date: Sun, 18 Feb 2024 22:51:30 +0100 Subject: [PATCH] Add style directives directives --- basemap/layers/aerialway/circle.js | 44 ++++++++++++++++++ basemap/layers/aerialway/line.js | 4 +- basemap/layers/attraction/line.js | 39 ++++++++++++++++ basemap/layers/attraction/style.js | 59 ------------------------ basemap/layers/barrier/line.js | 42 +++++++++++++++++ basemap/layers/boundary/line.js | 14 ++++-- basemap/layers/building/fill.js | 2 +- basemap/layers/landuse/background.js | 4 -- basemap/layers/landuse/overlay.js | 4 ++ basemap/layers/leisure/line.js | 39 ++++++++++++++++ basemap/layers/man_made/man_made_fill.js | 4 ++ basemap/layers/natural/background.js | 10 ++-- basemap/layers/natural/line.js | 48 +++++++++++++++++++ basemap/style.js | 12 +++++ basemap/themes/default.js | 23 ++++++--- 15 files changed, 266 insertions(+), 82 deletions(-) create mode 100644 basemap/layers/aerialway/circle.js create mode 100644 basemap/layers/attraction/line.js delete mode 100644 basemap/layers/attraction/style.js create mode 100644 basemap/layers/barrier/line.js create mode 100644 basemap/layers/leisure/line.js create mode 100644 basemap/layers/natural/line.js diff --git a/basemap/layers/aerialway/circle.js b/basemap/layers/aerialway/circle.js new file mode 100644 index 000000000..9b02a8fb7 --- /dev/null +++ b/basemap/layers/aerialway/circle.js @@ -0,0 +1,44 @@ +/** + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to you under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + **/ +import theme from "../../theme.js"; + + +export default { + "id": "aerialway_circle", + "type": "circle", + "filter": [ + "any", + ["==", "aerialway", "pylon"], + ["==", "aerialway", "station"], + ], + "source": "baremaps", + "source-layer": "point", + "layout": { + "visibility": "visible" + }, + "paint": { + 'circle-pitch-alignment': 'map', + "circle-color": theme.powerTowerCircleColor, + "circle-radius": [ + "interpolate", + ["exponential", 1], + ["zoom"], + 14, 1, + 20, 8 + ] + } +} diff --git a/basemap/layers/aerialway/line.js b/basemap/layers/aerialway/line.js index 0431d9092..57d705e79 100644 --- a/basemap/layers/aerialway/line.js +++ b/basemap/layers/aerialway/line.js @@ -15,12 +15,12 @@ limitations under the License. **/ import theme from "../../theme.js"; -import {asLayerObject, withSortKeys} from "../../utils/utils"; +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; let directives = [ { - filter: ['==', ["geometry-type"], 'LineString'], + filter: ['has', 'aerialway'], 'line-color': theme.aerialwayLineColor, 'line-width': 1, }, diff --git a/basemap/layers/attraction/line.js b/basemap/layers/attraction/line.js new file mode 100644 index 000000000..7765b3ce4 --- /dev/null +++ b/basemap/layers/attraction/line.js @@ -0,0 +1,39 @@ +/** + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to you under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + **/ +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; +import theme from "../../theme.js"; + +let directives = [ + { + filter: ['==', ['get', 'attraction'], "water_slide"], + 'line-color': theme.attractionWaterSlideLineColor, + 'line-width-stops': theme.attractionWaterSlideLineWidth, + }, + +]; + +export default asLayerObject(withSortKeys(directives), { + id: 'attraction_line', + type: 'line', + source: 'baremaps', + 'source-layer': 'attraction', + layout: { + visibility: 'visible', + 'line-cap': 'round', + 'line-join': 'round', + }, +}); diff --git a/basemap/layers/attraction/style.js b/basemap/layers/attraction/style.js deleted file mode 100644 index 9720166ac..000000000 --- a/basemap/layers/attraction/style.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - Licensed to the Apache Software Foundation (ASF) under one or more - contributor license agreements. See the NOTICE file distributed with - this work for additional information regarding copyright ownership. - The ASF licenses this file to you under the Apache License, Version 2.0 - (the "License"); you may not use this file except in compliance with - the License. You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. - **/ -import theme from "../../theme.js"; - -export default [ - { - id: 'water_slide_casing', - type: 'line', - filter: [ - 'all', - ['==', ['get', 'attraction'], 'water_slide'], - ['>=', ['zoom'], 15], - ], - source: 'baremaps', - 'source-layer': 'attraction', - paint: { - 'line-width': ['interpolate', ['exponential', 1], ['zoom'], 16, 2, 20, 8], - }, - }, - { - id: 'water_slide', - type: 'line', - filter: [ - 'all', - ['==', ['get', 'attraction'], 'water_slide'], - ['>=', ['zoom'], 16], - ], - source: 'baremaps', - 'source-layer': 'attraction', - paint: { - 'line-color': theme.attractionWaterSlideLineColor, - 'line-width': [ - 'interpolate', - ['exponential', 1], - ['zoom'], - 15, - 0.5, - 16, - 1, - 20, - 6, - ], - }, - }, -] diff --git a/basemap/layers/barrier/line.js b/basemap/layers/barrier/line.js new file mode 100644 index 000000000..b46ef88c0 --- /dev/null +++ b/basemap/layers/barrier/line.js @@ -0,0 +1,42 @@ +/** + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to you under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + **/ +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; +import theme from "../../theme.js"; + +let directives = [ + { + filter: ['==', ['get', 'barrier'], 'hedge'], + 'line-color': theme.barrierHedgeLineColor, + 'line-width-stops': theme.barrierHedgeLineWidth, + }, +]; + +export default asLayerObject(withSortKeys(directives), { + id: 'barrier_line', + source: 'baremaps', + 'source-layer': 'barrier', + type: 'line', + layout: { + visibility: 'visible', + 'line-cap': 'round', + 'line-join': 'round', + }, + filter: [ + 'all', + ['==', ['geometry-type'], 'LineString'], + ], +}); diff --git a/basemap/layers/boundary/line.js b/basemap/layers/boundary/line.js index 475843ebb..4d2572c04 100644 --- a/basemap/layers/boundary/line.js +++ b/basemap/layers/boundary/line.js @@ -18,25 +18,31 @@ import {asLayerObject, withSortKeys} from "../../utils/utils.js"; import theme from "../../theme.js"; let directives = [ - { - filter: ['==', ['get', 'admin_level'], "0"], - 'line-color': theme.boundaryAdminLevelLineColor, - }, + { filter: ['==', ['get', 'admin_level'], "1"], 'line-color': theme.boundaryAdminLevelLineColor, + 'line-width': 3, }, { filter: ['==', ['get', 'admin_level'], "2"], 'line-color': theme.boundaryAdminLevelLineColor, + 'line-width': 3, }, { filter: ['==', ['get', 'admin_level'], "3"], 'line-color': theme.boundaryAdminLevelLineColor, + 'line-width': 2, }, { filter: ['==', ['get', 'admin_level'], "4"], 'line-color': theme.boundaryAdminLevelLineColor, + 'line-width': 2, + }, + { + filter: ['has', 'boundary'], + 'line-color': theme.boundaryAdminLevelLineColor, + 'line-width': 1, }, ]; diff --git a/basemap/layers/building/fill.js b/basemap/layers/building/fill.js index 88f03c90a..14f598022 100644 --- a/basemap/layers/building/fill.js +++ b/basemap/layers/building/fill.js @@ -25,7 +25,7 @@ export default { visibility: 'visible', }, paint: { - 'fill-antialias': false, + 'fill-antialias': true, 'fill-color': theme.buildingFillColor, 'fill-outline-color': theme.buildingOutlineColor, 'fill-opacity': [ diff --git a/basemap/layers/landuse/background.js b/basemap/layers/landuse/background.js index 9717db706..44d9763ba 100644 --- a/basemap/layers/landuse/background.js +++ b/basemap/layers/landuse/background.js @@ -47,10 +47,6 @@ let directives = [ filter: ['==', ['get', 'landuse'], 'plant_nursery'], 'fill-color': theme.landusePlantNurseryBackgroundFillColor, }, - { - filter: ['==', ['get', 'landuse'], 'military'], - 'fill-color': theme.landuseMilitaryBackgroundFillColor, - }, { filter: ['==', ['get', 'landuse'], 'landfill'], 'fill-color': theme.landuseLandfillBackgroundFillColor, diff --git a/basemap/layers/landuse/overlay.js b/basemap/layers/landuse/overlay.js index 5627e170b..f2b66fd4c 100644 --- a/basemap/layers/landuse/overlay.js +++ b/basemap/layers/landuse/overlay.js @@ -19,6 +19,10 @@ import {asLayerObject, withSortKeys} from "../../utils/utils.js"; import theme from "../../theme.js"; let directives = [ + { + filter: ['==', ['get', 'landuse'], 'military'], + 'fill-color': theme.landuseMilitaryOverlayFillColor, + }, { filter: ['==', ['get', 'landuse'], 'forest'], 'fill-color': theme.landuseForestOverlayFillColor, diff --git a/basemap/layers/leisure/line.js b/basemap/layers/leisure/line.js new file mode 100644 index 000000000..d1cf9569b --- /dev/null +++ b/basemap/layers/leisure/line.js @@ -0,0 +1,39 @@ +/** + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to you under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + **/ +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; +import theme from "../../theme.js"; + + +export let directives = [ + { + 'filter': ['==', ['get', 'leisure'], 'nature_reserve'], + 'line-color': theme.leisureNatureReserveLineColor, + 'line-width': 2, + }, +]; + +export default asLayerObject(withSortKeys(directives), { + 'id': 'leisure_line', + 'source': 'baremaps', + 'source-layer': 'leisure', + 'type': 'line', + 'layout': { + 'visibility': 'visible', + 'line-cap': 'round', + 'line-join': 'round', + }, +}); diff --git a/basemap/layers/man_made/man_made_fill.js b/basemap/layers/man_made/man_made_fill.js index d92ecca55..a1b23e244 100644 --- a/basemap/layers/man_made/man_made_fill.js +++ b/basemap/layers/man_made/man_made_fill.js @@ -30,6 +30,10 @@ let directives = [ { filter: ['==', ['get', 'man_made'], 'pier'], 'fill-color': theme.manMadePierFillColor, + }, + { + filter: ['==', ['get', 'man_made'], 'wastewater_plant'], + 'fill-color': theme.manMadeWasteWaterPlantFillColor, } ]; diff --git a/basemap/layers/natural/background.js b/basemap/layers/natural/background.js index 78e9b9cf0..a4dc38178 100644 --- a/basemap/layers/natural/background.js +++ b/basemap/layers/natural/background.js @@ -21,7 +21,7 @@ import theme from "../../theme.js"; let directives = [ { filter: ['==', ['get', 'natural'], 'glacier'], - 'fill-color': theme.naturalGlacierBackgroundFillColor + 'fill-color': theme.naturalGlacierBackgroundFillColor, }, { filter: ['==', ['get', 'natural'], 'wood'], @@ -39,14 +39,14 @@ let directives = [ filter: ['==', ['get', 'natural'], 'grassland'], 'fill-color': theme.naturalGrasslandBackgroundFillColor }, - { - filter: ['==', ['get', 'natural'], 'bare_rock'], - 'fill-color': theme.naturalBareRockBackgroundFillColor - }, { filter: ['==', ['get', 'natural'], 'scree'], 'fill-color': theme.naturalScreeBackgroundFillColor }, + { + filter: ['==', ['get', 'natural'], 'bare_rock'], + 'fill-color': theme.naturalBareRockBackgroundFillColor + }, { filter: ['==', ['get', 'natural'], 'shingle'], 'fill-color': theme.naturalShingleBackgroundFillColor diff --git a/basemap/layers/natural/line.js b/basemap/layers/natural/line.js new file mode 100644 index 000000000..bc4a84642 --- /dev/null +++ b/basemap/layers/natural/line.js @@ -0,0 +1,48 @@ +/** + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to you under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + **/ +import {asLayerObject, withSortKeys} from "../../utils/utils.js"; +import theme from "../../theme.js"; + +let directives = [ + { + filter: ['==', ['get', 'natural'], 'cliff'], + 'line-color': theme.naturalCliffLineColor, + 'line-width-stops': theme.naturalCliffLineWidth, + }, + { + filter: ['==', ['get', 'natural'], 'tree_row'], + 'line-color': theme.naturalTreeRowLineColor, + 'line-width-stops': theme.naturalTreeRowLineWidth, + }, + +]; + +export default asLayerObject(withSortKeys(directives), { + id: 'natural_line', + source: 'baremaps', + 'source-layer': 'natural', + type: 'line', + layout: { + visibility: 'visible', + 'line-cap': 'round', + 'line-join': 'round', + }, + filter: [ + 'all', + ['==', ['geometry-type'], 'LineString'], + ], +}); diff --git a/basemap/style.js b/basemap/style.js index a04196085..cfe115fbd 100644 --- a/basemap/style.js +++ b/basemap/style.js @@ -17,22 +17,28 @@ import config from "./config.js"; import background from "./layers/background/style.js"; +import aerialway_line from "./layers/aerialway/line.js"; +import aerialway_circle from "./layers/aerialway/circle.js"; import aeroway_line from "./layers/aeroway/line.js"; import aeroway_fill from "./layers/aeroway/fill.js"; import amenity_background from "./layers/amenity/background.js"; import amenity_fountain from "./layers/amenity/fountain.js"; import amenity_overlay from "./layers/amenity/overlay.js"; +import attraction_line from "./layers/attraction/line.js"; import boundary_line from "./layers/boundary/line.js"; +import barrier_line from "./layers/barrier/line.js"; import landuse_background from "./layers/landuse/background.js"; import landuse_overlay from "./layers/landuse/overlay.js"; import natural_background from "./layers/natural/background.js"; import natural_overlay from "./layers/natural/overlay.js"; +import natural_line from "./layers/natural/line.js"; import natural_tree from "./layers/natural/tree.js"; import natural_trunk from "./layers/natural/trunk.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"; import leisure_background from "./layers/leisure/background.js"; +import leisure_line from "./layers/leisure/line.js"; import leisure_overlay from "./layers/leisure/overlay.js"; import railway_tunnel from "./layers/railway/tunnel.js"; import railway_line from "./layers/railway/line.js"; @@ -87,6 +93,8 @@ export default { amenity_overlay, leisure_overlay, ocean_overlay, + natural_line, + barrier_line, waterway_line, waterway_area, man_made_fill, @@ -102,15 +110,19 @@ export default { highway_line, highway_fill, railway_line, + attraction_line, highway_bridge_outline, highway_bridge_line, highway_label, aeroway_line, route_line, + aerialway_line, + aerialway_circle, power_cable, power_tower, natural_tree, natural_trunk, + leisure_line, boundary_line, waterway_label, //building_extrusion, diff --git a/basemap/themes/default.js b/basemap/themes/default.js index a5768a487..898698da6 100644 --- a/basemap/themes/default.js +++ b/basemap/themes/default.js @@ -8,7 +8,7 @@ */ export default { accommodationIconColor: 'rgb(0, 146, 218)', - aerialwayLineColor: 'rgb(177, 177, 175)', + aerialwayLineColor: 'rgb(145, 144, 143)', aerowayPolygonColor: 'rgba(213, 213, 220, 1.0)', aerowayRunwayLineColor: 'rgba(187, 187, 204, 1.0)', aerowayTaxiwayLineColor: 'rgba(187, 187, 204, 1.0)', @@ -74,9 +74,12 @@ export default { amenityTheatreTextColor: 'rgba(115, 74, 9, 1)', amenityTheatreTextHaloColor: 'rgba(255, 255, 255, 0.8)', amenityUniversityBackgroundFillColor: 'rgb(255, 255, 228)', - attractionWaterSlideLineColor: 'rgba(170, 224, 203, 1)', + attractionWaterSlideLineColor: 'rgb(126,204,173)', + attractionWaterSlideLineWidth: [5, 0.5, 16, 1], backgroundColor: 'rgb(242, 239, 233)', barrierGuardRailBackgroundLineColor: 'rgba(139, 177, 162, 1)', + barrierHedgeLineColor: 'rgb(173, 209, 158)', + barrierHedgeLineWidth: [5, 0.5, 16, 1], boundaryAdminLevelLineColor: 'rgb(207, 155, 203)', buildingCemeteryTextColor: 'rgba(69, 95, 72, 1)', buildingCemeteryTextHaloColor: 'rgba(255, 255, 255, 0.8)', @@ -95,7 +98,7 @@ export default { buildingFillColor: 'rgb(216, 208, 201)', buildingNumberTextColor: 'rgb(96,96,96)', buildingNumberTextHaloColor: 'rgba(255,255,255,0.8)', - buildingOutlineColor: 'rgb(199, 185, 174)', + buildingOutlineColor: 'rgb(196, 183, 171)', buildingSchoolTextColor: 'rgba(0, 0, 0, 1)', buildingSchoolTextHaloColor: 'rgba(255, 255, 255, 0.8)', buildingTextColor: 'rgba(0, 0, 0, 1)', @@ -243,7 +246,8 @@ export default { landuseIndustrialTextHaloColor: 'rgba(255, 255, 255, 0.8)', landuseLandfillBackgroundFillColor: 'rgb(182, 182, 144)', landuseMeadowOverlayFillColor: 'rgb(205, 235, 176)', - landuseMilitaryBackgroundFillColor: 'rgb(242, 228, 221)', + landuseMeadowOverlayMilitaryColor: 'rgb(205, 235, 176)', + landuseMilitaryOverlayFillColor: 'rgba(245, 197, 192, 0.2)', landuseOrchardOverlayFillColor: 'rgb(172, 225, 161)', landusePedestrianBackgroundFillColor: 'rgb(221, 221, 233)', landusePlantNurseryBackgroundFillColor: 'rgb(174, 223, 162)', @@ -269,7 +273,7 @@ export default { leisureMarinaOverlayFillColor: 'rgb(181, 208, 208)', leisureMarinaOverlayOutlineColor: 'rgb(164, 187, 212)', leisureMiniatureGolfOverlayFillColor: 'rgb(181, 226, 181)', - leisureNatureReserveLineColor: 'rgba(230, 233, 222, 0.5)', + leisureNatureReserveLineColor: 'rgba(126, 186, 115, 0.6)', leisureParkBackgroundFillColor: 'rgb(200, 250, 204)', leisureParkTextColor: 'rgba(31, 143, 40, 1)', leisureParkTextHaloColor: 'rgba(255, 255, 255, 0.8)', @@ -296,9 +300,12 @@ export default { manMadePierLineColor: 'rgb(242, 239, 233)', manMadePierLineWidth: [5, 0.5, 16, 3], manMadePierTextHaloColor: 'rgba(255,255,255,0.8)', + manMadeWasteWaterPlantFillColor: 'rgb(235, 219, 231)', naturalBareRockBackgroundFillColor: 'rgb(217, 212, 206)', naturalBeachGravelOverlayFillColor: 'rgb(229,217,180)', naturalBeachOverlayFillColor: 'rgb(255, 241, 186)', + naturalCliffLineColor: 'rgb(170, 170, 170)', + naturalCliffLineWidth: [5, 0.5, 16, 1], naturalGlacierBackgroundFillColor: 'rgb(221, 236, 236)', naturalGrasslandBackgroundFillColor: 'rgb(207, 236, 177)', naturalHeathBackgroundFillColor: 'rgb(214, 217, 159)', @@ -308,10 +315,12 @@ export default { naturalScrubOverlayFillColor: 'rgb(201, 216, 173)', naturalShingleBackgroundFillColor: 'rgb(232, 223, 216)', naturalTreeCircleColor: 'rgb(113, 205, 111)', + naturalTreeRowLineColor: 'rgb(176, 215, 151)', + naturalTreeRowLineWidth: [5, 0.5, 16, 4], naturalTrunkCircleColor: 'rgb(129, 94, 39)', naturalWaterBackgroundFillColor: 'rgb(170, 211, 223)', naturalWaterFillColor: 'rgb(170, 211, 223)', - naturalWetlandOverlayFillColor: 'rgba(213, 231, 211, 0.5)', + naturalWetlandOverlayFillColor: 'rgb(184, 224, 188)', naturalWoodBackgroundFillColor: 'rgb(157, 202, 138)', oceanWaterFillColor: 'rgb(170, 211, 223)', officeIconColor: 'rgb(72, 99, 160)', @@ -332,7 +341,7 @@ export default { powerIconColor: 'rgb(0, 0, 0)', powerPlantBackgroundFillColor: 'rgb(226, 203, 222)', powerPlantBackgroundOutlineColor: 'rgb(171, 171, 171)', - powerTowerCircleColor: 'rgb(171, 171, 171)', + powerTowerCircleColor: 'rgb(145, 144, 143)', railwayAbandonedLineColor: 'rgb(100,100,100)', railwayAbandonedLineWidth: [5, 0.5, 16, 1], railwayAllRailsLineColor: 'rgb(160,160,160)',