From 7b8458bcc3a1706397858f4bf5d54b64f04abf3d Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 15 Feb 2022 09:31:33 +0100 Subject: [PATCH 1/7] feat: Use Swisstopo light base map as a base layer --- app/charts/map/map.tsx | 47 +---- app/next.config.js | 8 +- app/package.json | 3 + app/typings/deckgl.d.ts | 4 + yarn.lock | 407 ++++++++++++++++++++++++++++++++-------- 5 files changed, 349 insertions(+), 120 deletions(-) diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx index d125ccf96..c6b45aaec 100644 --- a/app/charts/map/map.tsx +++ b/app/charts/map/map.tsx @@ -1,8 +1,8 @@ import { MapController, WebMercatorViewport } from "@deck.gl/core"; -import { MVTLayer, TileLayer } from "@deck.gl/geo-layers"; -import { BitmapLayer, GeoJsonLayer, ScatterplotLayer } from "@deck.gl/layers"; +import { GeoJsonLayer, ScatterplotLayer } from "@deck.gl/layers"; import DeckGL from "@deck.gl/react"; import React, { useCallback, useMemo, useState } from "react"; +import { StaticMap } from "react-map-gl"; import { Box, Button } from "theme-ui"; import { GeoFeature, GeoPoint } from "../../domain/data"; import { Icon, IconName } from "../../icons"; @@ -183,27 +183,7 @@ export const MapComponent = () => { getCursor={() => "default"} > {showRelief && ( - { - const { - bbox: { west, south, east, north }, - } = props.tile; - - return [ - new BitmapLayer(props, { - data: null, - image: props.data, - bounds: [west, south, east, north], - }), - ]; - }} - /> + )} {areaLayer.show && ( @@ -276,27 +256,6 @@ export const MapComponent = () => { )} - { - return showWater && d.properties.layerName === "water" - ? [148, 198, 240] - : [148, 198, 240, 0]; - }} - updateTriggers={{ - getFillColor: [showWater], - }} - /> - {symbolLayer.show && ( Date: Tue, 15 Feb 2022 11:47:30 +0100 Subject: [PATCH 2/7] feat: Update types, translations and chart options --- app/charts/index.ts | 3 +- app/charts/map/map-state.tsx | 6 +- app/charts/map/map.tsx | 11 ++-- .../components/chart-configurator.tsx | 5 +- app/configurator/config-types.ts | 3 +- app/configurator/map/map-chart-options.tsx | 14 +---- app/locales/de/messages.po | 56 +++++++++---------- app/locales/en/messages.po | 56 +++++++++---------- app/locales/fr/messages.po | 56 +++++++++---------- app/locales/it/messages.po | 56 +++++++++---------- 10 files changed, 116 insertions(+), 150 deletions(-) diff --git a/app/charts/index.ts b/app/charts/index.ts index 5390fdde8..91597ef0f 100644 --- a/app/charts/index.ts +++ b/app/charts/index.ts @@ -292,8 +292,7 @@ export const getInitialConfig = ({ }, }, baseLayer: { - showRelief: true, - showWater: true, + show: true, }, }; diff --git a/app/charts/map/map-state.tsx b/app/charts/map/map-state.tsx index f68e12f60..c14a9d0fc 100644 --- a/app/charts/map/map-state.tsx +++ b/app/charts/map/map-state.tsx @@ -47,8 +47,7 @@ export interface MapState { chartType: "map"; bounds: Bounds; features: GeoData; - showRelief: boolean; - showWater: boolean; + showBaseLayer: boolean; identicalLayerComponentIris: boolean; areaLayer: { data: Observation[]; @@ -277,8 +276,7 @@ const useMapState = ({ chartType: "map", features, bounds, - showRelief: baseLayer.showRelief, - showWater: baseLayer.showWater, + showBaseLayer: baseLayer.show, identicalLayerComponentIris, areaLayer: { data: areaData, diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx index c6b45aaec..0e718746d 100644 --- a/app/charts/map/map.tsx +++ b/app/charts/map/map.tsx @@ -96,8 +96,7 @@ const constrainZoom = ( export const MapComponent = () => { const { - showRelief, - showWater, + showBaseLayer, features, identicalLayerComponentIris, areaLayer, @@ -163,10 +162,8 @@ export const MapComponent = () => { sx={{ zIndex: 13, position: "absolute", - bottom: 0, - right: 0, - mb: 3, - mr: 3, + bottom: 55, + right: 15, display: "flex", flexDirection: "column", }} @@ -182,7 +179,7 @@ export const MapComponent = () => { controller={{ type: MapController }} getCursor={() => "default"} > - {showRelief && ( + {showBaseLayer && ( )} diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx index 1d2c200f7..9473eb479 100644 --- a/app/configurator/components/chart-configurator.tsx +++ b/app/configurator/components/chart-configurator.tsx @@ -430,10 +430,7 @@ const ChartFields = ({ value={encoding.field} icon="baseLayer" label={Base Layer} - active={ - chartConfig.baseLayer.showRelief || - chartConfig.baseLayer.showWater - } + active={chartConfig.baseLayer.show} /> ) : ( ; const BaseLayer = t.type({ - showRelief: t.boolean, - showWater: t.boolean, + show: t.boolean, }); export type BaseLayer = t.TypeOf; const MapFields = t.type({ diff --git a/app/configurator/map/map-chart-options.tsx b/app/configurator/map/map-chart-options.tsx index bbf2f5ab7..a1ab95588 100644 --- a/app/configurator/map/map-chart-options.tsx +++ b/app/configurator/map/map-chart-options.tsx @@ -62,19 +62,11 @@ export const BaseLayersSettings = memo(() => { - diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index 68e7ca215..5a280e1be 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -115,7 +115,7 @@ msgid "button.share" msgstr "Teilen" #: app/configurator/components/ui-helpers.ts:417 -#: app/configurator/map/map-chart-options.tsx:167 +#: app/configurator/map/map-chart-options.tsx:159 msgid "chart.map.layers.area" msgstr "Flächen" @@ -123,15 +123,15 @@ msgstr "Flächen" #~ msgid "chart.map.layers.area.color.palette" #~ msgstr "Farbpalette" -#: app/configurator/map/map-chart-options.tsx:251 +#: app/configurator/map/map-chart-options.tsx:243 msgid "chart.map.layers.area.discretization.continuous" msgstr "Kontinuierlich" -#: app/configurator/map/map-chart-options.tsx:264 +#: app/configurator/map/map-chart-options.tsx:256 msgid "chart.map.layers.area.discretization.discrete" msgstr "Diskret" -#: app/configurator/map/map-chart-options.tsx:312 +#: app/configurator/map/map-chart-options.tsx:304 msgid "chart.map.layers.area.discretization.jenks" msgstr "Jenks (Natural Breaks)" @@ -143,11 +143,11 @@ msgstr "Jenks (Natural Breaks)" #~ msgid "chart.map.layers.area.discretization.number.class" #~ msgstr "Anzahl Klassen" -#: app/configurator/map/map-chart-options.tsx:305 +#: app/configurator/map/map-chart-options.tsx:297 msgid "chart.map.layers.area.discretization.quantiles" msgstr "Quantile (gleiche Anzahl Werte)" -#: app/configurator/map/map-chart-options.tsx:298 +#: app/configurator/map/map-chart-options.tsx:290 msgid "chart.map.layers.area.discretization.quantize" msgstr "Quantisierung (gleiche Wertebereiche)" @@ -158,24 +158,20 @@ msgid "chart.map.layers.base" msgstr "Basis-Ebene" #: app/configurator/map/map-chart-options.tsx:64 -msgid "chart.map.layers.base.show.relief" -msgstr "Relief anzeigen" - -#: app/configurator/map/map-chart-options.tsx:72 -msgid "chart.map.layers.base.show.water" -msgstr "Seen und Flüsse anzeigen" +msgid "chart.map.layers.base.show" +msgstr "Anzeigen" #: app/charts/map/prototype-right-controls.tsx:263 #~ msgid "chart.map.layers.no.selected" #~ msgstr "Wählen Sie einen Layer zum Bearbeiten aus." -#: app/configurator/map/map-chart-options.tsx:171 -#: app/configurator/map/map-chart-options.tsx:383 +#: app/configurator/map/map-chart-options.tsx:163 +#: app/configurator/map/map-chart-options.tsx:375 msgid "chart.map.layers.show" msgstr "Layer anzeigen" #: app/configurator/components/ui-helpers.ts:421 -#: app/configurator/map/map-chart-options.tsx:379 +#: app/configurator/map/map-chart-options.tsx:371 msgid "chart.map.layers.symbol" msgstr "Symbole" @@ -189,7 +185,7 @@ msgstr "Symbole" #~ msgid "chart.map.settings" #~ msgstr "Einstellungen" -#: app/configurator/map/map-chart-options.tsx:455 +#: app/configurator/map/map-chart-options.tsx:447 msgid "chart.map.warning.noGeoDimensions" msgstr "In diesem Datenset können keine geografischen Dimensionen angezeigt werden." @@ -275,8 +271,8 @@ msgid "controls.chart.type.table" msgstr "Tabelle" #: app/configurator/components/ui-helpers.ts:399 -#: app/configurator/map/map-chart-options.tsx:240 -#: app/configurator/map/map-chart-options.tsx:433 +#: app/configurator/map/map-chart-options.tsx:232 +#: app/configurator/map/map-chart-options.tsx:425 msgid "controls.color" msgstr "Farbe" @@ -302,7 +298,7 @@ msgstr "Farbpalette zurücksetzen" msgid "controls.color.palette.sequential" msgstr "Sequentiell" -#: app/configurator/map/map-chart-options.tsx:437 +#: app/configurator/map/map-chart-options.tsx:429 msgid "controls.color.select" msgstr "Farbe auswählen" @@ -322,8 +318,8 @@ msgstr "gestapelt" msgid "controls.description" msgstr "Beschreibung hinzufügen" -#: app/configurator/map/map-chart-options.tsx:182 -#: app/configurator/map/map-chart-options.tsx:394 +#: app/configurator/map/map-chart-options.tsx:174 +#: app/configurator/map/map-chart-options.tsx:386 msgid "controls.dimension.geographical" msgstr "Geografische Dimension" @@ -354,11 +350,11 @@ msgstr "Alle abwählen" msgid "controls.filters.time.range" msgstr "Zeitspanne" -#: app/configurator/map/map-chart-options.tsx:203 +#: app/configurator/map/map-chart-options.tsx:195 msgid "controls.hierarchy" msgstr "Hierarchieebene" -#: app/configurator/map/map-chart-options.tsx:208 +#: app/configurator/map/map-chart-options.tsx:200 msgid "controls.hierarchy.select" msgstr "Hierarchieebene auswählen" @@ -427,8 +423,8 @@ msgid "controls.language.italian" msgstr "Italienisch" #: app/configurator/components/ui-helpers.ts:391 -#: app/configurator/map/map-chart-options.tsx:222 -#: app/configurator/map/map-chart-options.tsx:415 +#: app/configurator/map/map-chart-options.tsx:214 +#: app/configurator/map/map-chart-options.tsx:407 msgid "controls.measure" msgstr "Messwert" @@ -440,7 +436,7 @@ msgstr "Ein" msgid "controls.option.isNotActive" msgstr "Aus" -#: app/configurator/map/map-chart-options.tsx:244 +#: app/configurator/map/map-chart-options.tsx:236 msgid "controls.scale.type" msgstr "Skalierungstyp" @@ -555,14 +551,14 @@ msgid "controls.select.columnStyle.textStyle" msgstr "Schriftstil" #: app/configurator/components/chart-options-selector.tsx:179 -#: app/configurator/map/map-chart-options.tsx:190 -#: app/configurator/map/map-chart-options.tsx:402 +#: app/configurator/map/map-chart-options.tsx:182 +#: app/configurator/map/map-chart-options.tsx:394 msgid "controls.select.dimension" msgstr "Dimension auswählen" #: app/configurator/components/chart-options-selector.tsx:180 -#: app/configurator/map/map-chart-options.tsx:227 -#: app/configurator/map/map-chart-options.tsx:420 +#: app/configurator/map/map-chart-options.tsx:219 +#: app/configurator/map/map-chart-options.tsx:412 msgid "controls.select.measure" msgstr "Messwert auswählen" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index 552464f4d..365502523 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -115,7 +115,7 @@ msgid "button.share" msgstr "Share" #: app/configurator/components/ui-helpers.ts:417 -#: app/configurator/map/map-chart-options.tsx:167 +#: app/configurator/map/map-chart-options.tsx:159 msgid "chart.map.layers.area" msgstr "Areas" @@ -123,15 +123,15 @@ msgstr "Areas" #~ msgid "chart.map.layers.area.color.palette" #~ msgstr "Color palette" -#: app/configurator/map/map-chart-options.tsx:251 +#: app/configurator/map/map-chart-options.tsx:243 msgid "chart.map.layers.area.discretization.continuous" msgstr "Continuous" -#: app/configurator/map/map-chart-options.tsx:264 +#: app/configurator/map/map-chart-options.tsx:256 msgid "chart.map.layers.area.discretization.discrete" msgstr "Discrete" -#: app/configurator/map/map-chart-options.tsx:312 +#: app/configurator/map/map-chart-options.tsx:304 msgid "chart.map.layers.area.discretization.jenks" msgstr "Jenks (natural breaks)" @@ -143,11 +143,11 @@ msgstr "Jenks (natural breaks)" #~ msgid "chart.map.layers.area.discretization.number.class" #~ msgstr "Number of classes" -#: app/configurator/map/map-chart-options.tsx:305 +#: app/configurator/map/map-chart-options.tsx:297 msgid "chart.map.layers.area.discretization.quantiles" msgstr "Quantiles (equal distribution of values)" -#: app/configurator/map/map-chart-options.tsx:298 +#: app/configurator/map/map-chart-options.tsx:290 msgid "chart.map.layers.area.discretization.quantize" msgstr "Quantize (equal intervals)" @@ -158,24 +158,20 @@ msgid "chart.map.layers.base" msgstr "Base Layer" #: app/configurator/map/map-chart-options.tsx:64 -msgid "chart.map.layers.base.show.relief" -msgstr "Show relief" - -#: app/configurator/map/map-chart-options.tsx:72 -msgid "chart.map.layers.base.show.water" -msgstr "Show water" +msgid "chart.map.layers.base.show" +msgstr "Show" #: app/charts/map/prototype-right-controls.tsx:263 #~ msgid "chart.map.layers.no.selected" #~ msgstr "Select a layer to edit in the left panel." -#: app/configurator/map/map-chart-options.tsx:171 -#: app/configurator/map/map-chart-options.tsx:383 +#: app/configurator/map/map-chart-options.tsx:163 +#: app/configurator/map/map-chart-options.tsx:375 msgid "chart.map.layers.show" msgstr "Show layer" #: app/configurator/components/ui-helpers.ts:421 -#: app/configurator/map/map-chart-options.tsx:379 +#: app/configurator/map/map-chart-options.tsx:371 msgid "chart.map.layers.symbol" msgstr "Symbols" @@ -189,7 +185,7 @@ msgstr "Symbols" #~ msgid "chart.map.settings" #~ msgstr "Settings" -#: app/configurator/map/map-chart-options.tsx:455 +#: app/configurator/map/map-chart-options.tsx:447 msgid "chart.map.warning.noGeoDimensions" msgstr "In this dataset there are no geographical dimensions to display." @@ -275,8 +271,8 @@ msgid "controls.chart.type.table" msgstr "Table" #: app/configurator/components/ui-helpers.ts:399 -#: app/configurator/map/map-chart-options.tsx:240 -#: app/configurator/map/map-chart-options.tsx:433 +#: app/configurator/map/map-chart-options.tsx:232 +#: app/configurator/map/map-chart-options.tsx:425 msgid "controls.color" msgstr "Color" @@ -302,7 +298,7 @@ msgstr "Reset color palette" msgid "controls.color.palette.sequential" msgstr "Sequential" -#: app/configurator/map/map-chart-options.tsx:437 +#: app/configurator/map/map-chart-options.tsx:429 msgid "controls.color.select" msgstr "Select a color" @@ -322,8 +318,8 @@ msgstr "Stacked" msgid "controls.description" msgstr "Description" -#: app/configurator/map/map-chart-options.tsx:182 -#: app/configurator/map/map-chart-options.tsx:394 +#: app/configurator/map/map-chart-options.tsx:174 +#: app/configurator/map/map-chart-options.tsx:386 msgid "controls.dimension.geographical" msgstr "Geographical dimension" @@ -354,11 +350,11 @@ msgstr "Select none" msgid "controls.filters.time.range" msgstr "Time Range" -#: app/configurator/map/map-chart-options.tsx:203 +#: app/configurator/map/map-chart-options.tsx:195 msgid "controls.hierarchy" msgstr "Hierarchy level" -#: app/configurator/map/map-chart-options.tsx:208 +#: app/configurator/map/map-chart-options.tsx:200 msgid "controls.hierarchy.select" msgstr "Select a hierarchy level" @@ -427,8 +423,8 @@ msgid "controls.language.italian" msgstr "Italian" #: app/configurator/components/ui-helpers.ts:391 -#: app/configurator/map/map-chart-options.tsx:222 -#: app/configurator/map/map-chart-options.tsx:415 +#: app/configurator/map/map-chart-options.tsx:214 +#: app/configurator/map/map-chart-options.tsx:407 msgid "controls.measure" msgstr "Measure" @@ -440,7 +436,7 @@ msgstr "On" msgid "controls.option.isNotActive" msgstr "Off" -#: app/configurator/map/map-chart-options.tsx:244 +#: app/configurator/map/map-chart-options.tsx:236 msgid "controls.scale.type" msgstr "Scale type" @@ -555,14 +551,14 @@ msgid "controls.select.columnStyle.textStyle" msgstr "Text Style" #: app/configurator/components/chart-options-selector.tsx:179 -#: app/configurator/map/map-chart-options.tsx:190 -#: app/configurator/map/map-chart-options.tsx:402 +#: app/configurator/map/map-chart-options.tsx:182 +#: app/configurator/map/map-chart-options.tsx:394 msgid "controls.select.dimension" msgstr "Select a dimension" #: app/configurator/components/chart-options-selector.tsx:180 -#: app/configurator/map/map-chart-options.tsx:227 -#: app/configurator/map/map-chart-options.tsx:420 +#: app/configurator/map/map-chart-options.tsx:219 +#: app/configurator/map/map-chart-options.tsx:412 msgid "controls.select.measure" msgstr "Select a measure" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 1b49f72dd..1a584477e 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -115,7 +115,7 @@ msgid "button.share" msgstr "Partager" #: app/configurator/components/ui-helpers.ts:417 -#: app/configurator/map/map-chart-options.tsx:167 +#: app/configurator/map/map-chart-options.tsx:159 msgid "chart.map.layers.area" msgstr "Zones" @@ -123,15 +123,15 @@ msgstr "Zones" #~ msgid "chart.map.layers.area.color.palette" #~ msgstr "Palette de couleurs" -#: app/configurator/map/map-chart-options.tsx:251 +#: app/configurator/map/map-chart-options.tsx:243 msgid "chart.map.layers.area.discretization.continuous" msgstr "Continue" -#: app/configurator/map/map-chart-options.tsx:264 +#: app/configurator/map/map-chart-options.tsx:256 msgid "chart.map.layers.area.discretization.discrete" msgstr "Discrète" -#: app/configurator/map/map-chart-options.tsx:312 +#: app/configurator/map/map-chart-options.tsx:304 msgid "chart.map.layers.area.discretization.jenks" msgstr "Jenks (intervalles naturels)" @@ -143,11 +143,11 @@ msgstr "Jenks (intervalles naturels)" #~ msgid "chart.map.layers.area.discretization.number.class" #~ msgstr "Nombre de classes" -#: app/configurator/map/map-chart-options.tsx:305 +#: app/configurator/map/map-chart-options.tsx:297 msgid "chart.map.layers.area.discretization.quantiles" msgstr "Quantiles (distribution homogène des valeurs)" -#: app/configurator/map/map-chart-options.tsx:298 +#: app/configurator/map/map-chart-options.tsx:290 msgid "chart.map.layers.area.discretization.quantize" msgstr "Intervalles égaux" @@ -158,24 +158,20 @@ msgid "chart.map.layers.base" msgstr "Couche de base" #: app/configurator/map/map-chart-options.tsx:64 -msgid "chart.map.layers.base.show.relief" -msgstr "Afficher le relief" - -#: app/configurator/map/map-chart-options.tsx:72 -msgid "chart.map.layers.base.show.water" -msgstr "Montrer les lacs et les rivières" +msgid "chart.map.layers.base.show" +msgstr "Afficher" #: app/charts/map/prototype-right-controls.tsx:263 #~ msgid "chart.map.layers.no.selected" #~ msgstr "Sélectionner une couche à modifier dans le panneau de gauche." -#: app/configurator/map/map-chart-options.tsx:171 -#: app/configurator/map/map-chart-options.tsx:383 +#: app/configurator/map/map-chart-options.tsx:163 +#: app/configurator/map/map-chart-options.tsx:375 msgid "chart.map.layers.show" msgstr "Afficher la couche" #: app/configurator/components/ui-helpers.ts:421 -#: app/configurator/map/map-chart-options.tsx:379 +#: app/configurator/map/map-chart-options.tsx:371 msgid "chart.map.layers.symbol" msgstr "Symboles" @@ -189,7 +185,7 @@ msgstr "Symboles" #~ msgid "chart.map.settings" #~ msgstr "Paramètres" -#: app/configurator/map/map-chart-options.tsx:455 +#: app/configurator/map/map-chart-options.tsx:447 msgid "chart.map.warning.noGeoDimensions" msgstr "Dans cet ensemble de données, il n'y a pas de dimensions géographiques à afficher!" @@ -275,8 +271,8 @@ msgid "controls.chart.type.table" msgstr "Tableau" #: app/configurator/components/ui-helpers.ts:399 -#: app/configurator/map/map-chart-options.tsx:240 -#: app/configurator/map/map-chart-options.tsx:433 +#: app/configurator/map/map-chart-options.tsx:232 +#: app/configurator/map/map-chart-options.tsx:425 msgid "controls.color" msgstr "Couleur" @@ -302,7 +298,7 @@ msgstr "Réinitialiser la palette de couleurs" msgid "controls.color.palette.sequential" msgstr "Séquentielle" -#: app/configurator/map/map-chart-options.tsx:437 +#: app/configurator/map/map-chart-options.tsx:429 msgid "controls.color.select" msgstr "Sélectionner une couleur" @@ -322,8 +318,8 @@ msgstr "empilées" msgid "controls.description" msgstr "Description" -#: app/configurator/map/map-chart-options.tsx:182 -#: app/configurator/map/map-chart-options.tsx:394 +#: app/configurator/map/map-chart-options.tsx:174 +#: app/configurator/map/map-chart-options.tsx:386 msgid "controls.dimension.geographical" msgstr "Dimension géographique" @@ -354,11 +350,11 @@ msgstr "Tout déselectionner" msgid "controls.filters.time.range" msgstr "Intervalle de temps" -#: app/configurator/map/map-chart-options.tsx:203 +#: app/configurator/map/map-chart-options.tsx:195 msgid "controls.hierarchy" msgstr "Niveau hiérarchique" -#: app/configurator/map/map-chart-options.tsx:208 +#: app/configurator/map/map-chart-options.tsx:200 msgid "controls.hierarchy.select" msgstr "Sélectionner le niveau hiérarchique" @@ -427,8 +423,8 @@ msgid "controls.language.italian" msgstr "Italien" #: app/configurator/components/ui-helpers.ts:391 -#: app/configurator/map/map-chart-options.tsx:222 -#: app/configurator/map/map-chart-options.tsx:415 +#: app/configurator/map/map-chart-options.tsx:214 +#: app/configurator/map/map-chart-options.tsx:407 msgid "controls.measure" msgstr "Variable mesurée" @@ -440,7 +436,7 @@ msgstr "Actif" msgid "controls.option.isNotActive" msgstr "Inactif" -#: app/configurator/map/map-chart-options.tsx:244 +#: app/configurator/map/map-chart-options.tsx:236 msgid "controls.scale.type" msgstr "Type d'échelle" @@ -555,14 +551,14 @@ msgid "controls.select.columnStyle.textStyle" msgstr "Style du texte" #: app/configurator/components/chart-options-selector.tsx:179 -#: app/configurator/map/map-chart-options.tsx:190 -#: app/configurator/map/map-chart-options.tsx:402 +#: app/configurator/map/map-chart-options.tsx:182 +#: app/configurator/map/map-chart-options.tsx:394 msgid "controls.select.dimension" msgstr "Sélectionner une dimension" #: app/configurator/components/chart-options-selector.tsx:180 -#: app/configurator/map/map-chart-options.tsx:227 -#: app/configurator/map/map-chart-options.tsx:420 +#: app/configurator/map/map-chart-options.tsx:219 +#: app/configurator/map/map-chart-options.tsx:412 msgid "controls.select.measure" msgstr "Sélectionner une variable" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index 8c2a77406..3606e9bba 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -115,7 +115,7 @@ msgid "button.share" msgstr "Condividi" #: app/configurator/components/ui-helpers.ts:417 -#: app/configurator/map/map-chart-options.tsx:167 +#: app/configurator/map/map-chart-options.tsx:159 msgid "chart.map.layers.area" msgstr "Aree" @@ -123,15 +123,15 @@ msgstr "Aree" #~ msgid "chart.map.layers.area.color.palette" #~ msgstr "Palette di colore" -#: app/configurator/map/map-chart-options.tsx:251 +#: app/configurator/map/map-chart-options.tsx:243 msgid "chart.map.layers.area.discretization.continuous" msgstr "Continuo" -#: app/configurator/map/map-chart-options.tsx:264 +#: app/configurator/map/map-chart-options.tsx:256 msgid "chart.map.layers.area.discretization.discrete" msgstr "Discreto" -#: app/configurator/map/map-chart-options.tsx:312 +#: app/configurator/map/map-chart-options.tsx:304 msgid "chart.map.layers.area.discretization.jenks" msgstr "Jenks (interruzioni naturali)" @@ -143,11 +143,11 @@ msgstr "Jenks (interruzioni naturali)" #~ msgid "chart.map.layers.area.discretization.number.class" #~ msgstr "Numero di classi" -#: app/configurator/map/map-chart-options.tsx:305 +#: app/configurator/map/map-chart-options.tsx:297 msgid "chart.map.layers.area.discretization.quantiles" msgstr "Quantili (distribuzione omogenea dei valori)" -#: app/configurator/map/map-chart-options.tsx:298 +#: app/configurator/map/map-chart-options.tsx:290 msgid "chart.map.layers.area.discretization.quantize" msgstr "Intervalli uguali" @@ -158,24 +158,20 @@ msgid "chart.map.layers.base" msgstr "Livello di base" #: app/configurator/map/map-chart-options.tsx:64 -msgid "chart.map.layers.base.show.relief" -msgstr "Mostra il rilievo" - -#: app/configurator/map/map-chart-options.tsx:72 -msgid "chart.map.layers.base.show.water" -msgstr "Mostra laghi e fiumi" +msgid "chart.map.layers.base.show" +msgstr "Mostra" #: app/charts/map/prototype-right-controls.tsx:263 #~ msgid "chart.map.layers.no.selected" #~ msgstr "Seleziona un livello da editare nel pannello di sinistra." -#: app/configurator/map/map-chart-options.tsx:171 -#: app/configurator/map/map-chart-options.tsx:383 +#: app/configurator/map/map-chart-options.tsx:163 +#: app/configurator/map/map-chart-options.tsx:375 msgid "chart.map.layers.show" msgstr "Mostra il livello" #: app/configurator/components/ui-helpers.ts:421 -#: app/configurator/map/map-chart-options.tsx:379 +#: app/configurator/map/map-chart-options.tsx:371 msgid "chart.map.layers.symbol" msgstr "Simboli" @@ -189,7 +185,7 @@ msgstr "Simboli" #~ msgid "chart.map.settings" #~ msgstr "Opzioni" -#: app/configurator/map/map-chart-options.tsx:455 +#: app/configurator/map/map-chart-options.tsx:447 msgid "chart.map.warning.noGeoDimensions" msgstr "In questo set di dati non ci sono dimensioni geografiche da mostrare!" @@ -275,8 +271,8 @@ msgid "controls.chart.type.table" msgstr "Tabella" #: app/configurator/components/ui-helpers.ts:399 -#: app/configurator/map/map-chart-options.tsx:240 -#: app/configurator/map/map-chart-options.tsx:433 +#: app/configurator/map/map-chart-options.tsx:232 +#: app/configurator/map/map-chart-options.tsx:425 msgid "controls.color" msgstr "Colore" @@ -302,7 +298,7 @@ msgstr "Ripristina la tavolozza dei colori" msgid "controls.color.palette.sequential" msgstr "Sequenziale" -#: app/configurator/map/map-chart-options.tsx:437 +#: app/configurator/map/map-chart-options.tsx:429 msgid "controls.color.select" msgstr "Seleziona un colore" @@ -322,8 +318,8 @@ msgstr "impilate" msgid "controls.description" msgstr "Descrizione" -#: app/configurator/map/map-chart-options.tsx:182 -#: app/configurator/map/map-chart-options.tsx:394 +#: app/configurator/map/map-chart-options.tsx:174 +#: app/configurator/map/map-chart-options.tsx:386 msgid "controls.dimension.geographical" msgstr "Dimensione geografica" @@ -354,11 +350,11 @@ msgstr "Deseleziona tutto" msgid "controls.filters.time.range" msgstr "intervallo di tempo" -#: app/configurator/map/map-chart-options.tsx:203 +#: app/configurator/map/map-chart-options.tsx:195 msgid "controls.hierarchy" msgstr "Livello gerarchico" -#: app/configurator/map/map-chart-options.tsx:208 +#: app/configurator/map/map-chart-options.tsx:200 msgid "controls.hierarchy.select" msgstr "Selezionare un livello gerarchico" @@ -427,8 +423,8 @@ msgid "controls.language.italian" msgstr "Italiano" #: app/configurator/components/ui-helpers.ts:391 -#: app/configurator/map/map-chart-options.tsx:222 -#: app/configurator/map/map-chart-options.tsx:415 +#: app/configurator/map/map-chart-options.tsx:214 +#: app/configurator/map/map-chart-options.tsx:407 msgid "controls.measure" msgstr "Misura" @@ -440,7 +436,7 @@ msgstr "Attivo" msgid "controls.option.isNotActive" msgstr "Inattivo" -#: app/configurator/map/map-chart-options.tsx:244 +#: app/configurator/map/map-chart-options.tsx:236 msgid "controls.scale.type" msgstr "Tipo di scala" @@ -555,14 +551,14 @@ msgid "controls.select.columnStyle.textStyle" msgstr "Stile del testo" #: app/configurator/components/chart-options-selector.tsx:179 -#: app/configurator/map/map-chart-options.tsx:190 -#: app/configurator/map/map-chart-options.tsx:402 +#: app/configurator/map/map-chart-options.tsx:182 +#: app/configurator/map/map-chart-options.tsx:394 msgid "controls.select.dimension" msgstr "Seleziona una dimensione" #: app/configurator/components/chart-options-selector.tsx:180 -#: app/configurator/map/map-chart-options.tsx:227 -#: app/configurator/map/map-chart-options.tsx:420 +#: app/configurator/map/map-chart-options.tsx:219 +#: app/configurator/map/map-chart-options.tsx:412 msgid "controls.select.measure" msgstr "Seleziona una misura" From 84e1f7ff2b43d696c97a3f0e9c4880d71fd8ecf5 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 15 Feb 2022 13:22:18 +0100 Subject: [PATCH 3/7] feat: Add language handling to base layer --- app/charts/map/get-base-layer-style.ts | 5891 ++++++++++++++++++++++++ app/charts/map/map.tsx | 18 +- 2 files changed, 5898 insertions(+), 11 deletions(-) create mode 100644 app/charts/map/get-base-layer-style.ts diff --git a/app/charts/map/get-base-layer-style.ts b/app/charts/map/get-base-layer-style.ts new file mode 100644 index 000000000..2adf71d56 --- /dev/null +++ b/app/charts/map/get-base-layer-style.ts @@ -0,0 +1,5891 @@ +import { Locale } from "../../locales/locales"; + +interface Props { + locale: Locale; +} + +export const getBaseLayerStyle = (props: Props) => { + const { locale } = props; + const translatedTextField = `{name:${locale === "en" ? "latin" : locale}}`; + + return { + version: 8, + name: "lbm_v1.0.0", + metadata: { "maputnik:renderer": "mbgljs", "openmaptiles:version": "3.x" }, + center: [7.969664962869274, 47.021278030856564], + zoom: 9.333879434342306, + bearing: 0, + pitch: 0, + sources: { + swissmaptiles: { + type: "vector", + url: "https://vectortiles.geo.admin.ch/tiles/ch.swisstopo.leichte-basiskarte.vt/v1.0.0/tiles.json", + }, + relief_shading: { + type: "raster", + tiles: [ + "https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.leichte-basiskarte_reliefschattierung/default/current/3857/{z}/{x}/{y}.png", + ], + tileSize: 256, + minzoom: 0, + maxzoom: 22, + }, + }, + sprite: + "https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/v1.0.1/sprite/sprite", + glyphs: "https://vectortiles.geo.admin.ch/fonts/{fontstack}/{range}.pbf", + transition: {}, + layers: [ + { + id: "background", + type: "background", + layout: { visibility: "visible" }, + paint: { "background-color": "rgba(255, 255, 255, 1)" }, + }, + { + id: "relief_shading", + type: "raster", + source: "relief_shading", + layout: { visibility: "visible" }, + paint: { + "raster-opacity": { + stops: [ + [15.5, 1], + [17, 0.6], + ], + }, + "raster-brightness-min": [ + "interpolate", + ["linear"], + ["zoom"], + 6, + 0, + 12, + 0.25, + ], + "raster-saturation": [ + "interpolate", + ["linear"], + ["zoom"], + 6, + -0.5, + 12, + -0.2, + ], + "raster-contrast": [ + "interpolate", + ["linear"], + ["zoom"], + 6, + 0.1, + 12, + 0, + ], + "raster-resampling": "nearest", + }, + }, + { + id: "contour_line", + type: "line", + metadata: { "maputnik:comment": "color: rgb(191,138,64)" }, + source: "swissmaptiles", + "source-layer": "contour_line", + minzoom: 13, + filter: ["all", ["!in", "class", "rock", "ice", "water"]], + layout: { visibility: "visible" }, + paint: { + "line-blur": 0.4, + "line-color": [ + "match", + ["get", "class"], + ["ice", "water"], + "rgb(0,136,208)", + ["scree"], + "rgb(0,0,0)", + "rgb(191,138,64)", + ], + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 13, + ["match", ["get", "class"], ["scree", "ice", "water"], 0.25, 0.45], + 14, + ["match", ["get", "class"], ["scree", "ice", "water"], 0.3, 0.55], + ], + "line-width": [ + "interpolate", + ["exponential", 1], + ["zoom"], + 12, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 13, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 14, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 1, + 0, + ], + 14.5, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 1.5, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 0.75, + 0, + ], + ], + 15, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 1.75, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 1, + 0, + ], + ], + 16.5, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 2, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 10], 0], + 1, + 0, + ], + ], + ], + }, + }, + { + id: "landcover", + type: "fill", + source: "swissmaptiles", + "source-layer": "landcover", + minzoom: 5, + filter: [ + "any", + [ + "in", + "subclass", + "wood", + "scrub", + "recreation_ground", + "park", + "golf_course", + "allotments", + "plant_nursery", + "forest", + "glacier", + ], + ["==", "class", "sand"], + ], + layout: { visibility: "visible" }, + paint: { + "fill-color": [ + "match", + ["get", "class"], + ["forest", "wood"], + "rgb(186, 210, 172)", + ["ice", "glacier"], + "rgb(205, 232, 244)", + ["wetland"], + "rgb(204, 229, 245)", + ["sand"], + "rgb(240, 218, 188)", + "rgb(215, 224, 209)", + ], + "fill-opacity": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 5, + 0, + 6, + ["match", ["get", "class"], ["ice", "glacier"], 0.3, 0], + 10, + ["match", ["get", "class"], ["ice", "glacier"], 0.2, 0], + 11, + ["match", ["get", "class"], ["ice", "glacier"], 0.2, 0.3], + 14, + ["match", ["get", "class"], ["ice", "glacier"], 0, 0.3], + ], + }, + }, + { + id: "landcover_casing", + type: "line", + source: "swissmaptiles", + "source-layer": "landcover", + minzoom: 10, + filter: [ + "all", + [ + "in", + "subclass", + "wood", + "scrub", + "recreation_ground", + "park", + "golf_course", + "allotments", + "plant_nursery", + "forest", + ], + ], + layout: { visibility: "visible" }, + paint: { + "line-blur": 0.5, + "line-color": "rgb(186, 199, 172)", + "line-opacity": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 12, + 0, + 14, + 1, + ], + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 6, + 0, + 11, + 0.25, + 16, + 0.75, + ], + }, + }, + { + id: "landuse", + type: "fill", + source: "swissmaptiles", + "source-layer": "landuse", + filter: [ + "all", + ["in", "class", "landfill", "cemetery", "quarry", "zoo", "pitch"], + ], + layout: { visibility: "visible" }, + paint: { + "fill-color": [ + "match", + ["get", "class"], + ["pitch"], + "rgb(224,234,221)", + ["landfill", "quarry"], + "rgb(240, 218, 188)", + ["cemetery", "zoo"], + "rgb(215, 224, 209)", + ["parking"], + "rgb(255, 255, 255)", + "rgb(215, 224, 209)", + ], + "fill-opacity": ["match", ["get", "class"], ["pitch"], 1, 0.3], + }, + }, + { + id: "landuse_outline", + type: "line", + source: "swissmaptiles", + "source-layer": "landuse", + filter: ["all", ["in", "class", "cemetery", "zoo", "pitch"]], + layout: { visibility: "visible" }, + paint: { + "line-color": [ + "match", + ["get", "class"], + ["pitch"], + "rgb(130, 130, 130)", + "rgba(186, 199, 172, 1)", + ], + "line-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 11, + 0.25, + 16, + 0.75, + ], + }, + }, + { + id: "water_line_intermittent", + type: "line", + source: "swissmaptiles", + "source-layer": "waterway", + minzoom: 12, + filter: ["all", ["==", "intermittent", 1]], + layout: { visibility: "visible" }, + paint: { + "line-blur": 0, + "line-color": "rgba(48, 48, 48, 1)", + "line-dasharray": { + stops: [ + [13, [0.5, 3]], + [14, [0.75, 4.5]], + [15, [1, 6]], + [16, [1.25, 7.5]], + ], + }, + "line-offset": 0, + "line-opacity": { + stops: [ + [13, 0.25], + [16, 0.35], + ], + }, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 13, + [ + "match", + ["to-string", ["get", "width"]], + ["10", "9", "8"], + 3.5, + ["7", "6", "5"], + 2.5, + ["4", "3"], + 1.5, + ["1", "2"], + 1, + ["match", ["get", "class"], ["river", "canal"], 3.5, 1], + ], + 16, + [ + "match", + ["to-string", ["get", "width"]], + "10", + 5, + "9", + 4.5, + "8", + 4, + "7", + 3.5, + ["6", "5"], + 3, + "4", + 2.5, + "3", + 2, + "2", + 1.5, + "1", + 1, + ["match", ["get", "class"], ["river", "canal"], 5, 1.5], + ], + 20, + [ + "match", + ["to-string", ["get", "width"]], + "10", + 10, + "9", + 9.6, + "8", + 8.9, + "7", + 8.2, + "6", + 7.5, + "5", + 6.8, + "4", + 6.1, + "3", + 5.4, + "2", + 4.7, + "1", + 4, + ["match", ["get", "class"], ["river", "canal"], 10, 4], + ], + ], + }, + }, + { + id: "water_line", + type: "line", + source: "swissmaptiles", + "source-layer": "waterway", + minzoom: 7, + filter: ["all", ["!=", "intermittent", 1]], + layout: { visibility: "visible" }, + paint: { + "line-blur": 0, + "line-color": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + "rgba(138, 195, 229, 1)", + 16, + [ + "match", + ["get", "class"], + ["river", "canal"], + "rgba(160, 205, 236, 1)", + "rgba(140, 185, 226, 1)", + ], + ], + "line-offset": 0, + "line-opacity": 0.7, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 7, + 1, + 10, + [ + "match", + ["to-string", ["get", "width"]], + ["10", "9", "8", "7", "6"], + 1.5, + ["5", "4", "3", "2", "1"], + 1, + ["match", ["get", "class"], ["river", "canal"], 1.5, 1], + ], + 13, + [ + "match", + ["to-string", ["get", "width"]], + ["10", "9", "8"], + 3.5, + ["7", "6", "5"], + 2.5, + ["4", "3"], + 1.5, + ["1", "2"], + 1, + ["match", ["get", "class"], ["river", "canal"], 3.5, 1], + ], + 16, + [ + "match", + ["to-string", ["get", "width"]], + "10", + 5, + "9", + 4.5, + "8", + 4, + "7", + 3.5, + ["6", "5"], + 3, + "4", + 2.5, + "3", + 2, + "2", + 1.5, + "1", + 1, + ["match", ["get", "class"], ["river", "canal"], 5, 1.5], + ], + 20, + [ + "match", + ["to-string", ["get", "width"]], + "10", + 10, + "9", + 9.6, + "8", + 8.9, + "7", + 8.2, + "6", + 7.5, + "5", + 6.8, + "4", + 6.1, + "3", + 5.4, + "2", + 4.7, + "1", + 4, + ["match", ["get", "class"], ["river", "canal"], 10, 4], + ], + ], + }, + }, + { + id: "water_polygon", + type: "fill", + source: "swissmaptiles", + "source-layer": "water", + layout: { visibility: "visible" }, + paint: { + "fill-color": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 4, + "rgb(209, 228, 240)", + 10, + "rgb(199, 224, 245)", + ], + }, + }, + { + id: "contour_line_water", + type: "line", + metadata: { "maputnik:comment": "color: rgb(191,138,64)" }, + source: "swissmaptiles", + "source-layer": "contour_line", + minzoom: 13, + filter: ["all", ["in", "class", "ice", "water"]], + layout: { visibility: "visible" }, + paint: { + "line-blur": 0.4, + "line-color": "rgb(0,136,208)", + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 13, + ["match", ["get", "class"], ["scree", "ice", "water"], 0.25, 0.45], + 14, + ["match", ["get", "class"], ["scree", "ice", "water"], 0.3, 0.55], + ], + "line-width": [ + "interpolate", + ["exponential", 1], + ["zoom"], + 12, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 13, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 14, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 1, + 0, + ], + 14.5, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 1.5, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 0.75, + 0, + ], + ], + 16, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 1.75, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 1, + 0, + ], + ], + 16.5, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 2, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 10], 0], + 1, + 0, + ], + ], + ], + }, + }, + { + id: "label_contour_line_20_grey", + type: "symbol", + source: "swissmaptiles", + "source-layer": "contour_line", + minzoom: 16, + filter: [ + "all", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + ["!=", ["%", ["to-number", ["get", "ele"]], 100], 0], + ["match", ["get", "class"], ["scree"], true, false], + ], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "line", + "symbol-spacing": 550, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": "{ele} ", + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-justify": "center", + "text-keep-upright": true, + "text-letter-spacing": 0.1, + "text-max-angle": 40, + "text-padding": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 0, + 15, + 12, + 16, + 80, + ], + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": 12, + "text-transform": "none", + visibility: "visible", + }, + paint: { + "text-color": "rgba(64,64,64, 1)", + "text-halo-blur": 0.5, + "text-halo-color": "rgba(238, 238, 238, .8)", + "text-halo-width": 2, + "text-opacity": [ + "step", + ["zoom"], + 0, + 12, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 16, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 0.75, + 0, + ], + ], + }, + }, + { + id: "label_contour_line_20_blue", + type: "symbol", + source: "swissmaptiles", + "source-layer": "contour_line", + minzoom: 16, + filter: [ + "all", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + ["!=", ["%", ["to-number", ["get", "ele"]], 100], 0], + ["match", ["get", "class"], ["ice", "water"], true, false], + ], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "line", + "symbol-spacing": 550, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": "{ele} ", + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-justify": "center", + "text-keep-upright": true, + "text-letter-spacing": 0.1, + "text-max-angle": 40, + "text-padding": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 0, + 15, + 12, + 16, + 80, + ], + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": 12, + "text-transform": "none", + visibility: "visible", + }, + paint: { + "text-color": "rgba(0,136,208, 1)", + "text-halo-blur": 0.5, + "text-halo-color": "rgba(238, 238, 238, .8)", + "text-halo-width": 2, + "text-opacity": [ + "step", + ["zoom"], + 0, + 12, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 16, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 0.75, + 0, + ], + ], + }, + }, + { + id: "label_contour_line_20_brown", + type: "symbol", + source: "swissmaptiles", + "source-layer": "contour_line", + minzoom: 16, + filter: [ + "all", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + ["!=", ["%", ["to-number", ["get", "ele"]], 100], 0], + ["match", ["get", "class"], ["land"], true, false], + ], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "line", + "symbol-spacing": 550, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": "{ele} ", + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-justify": "center", + "text-keep-upright": true, + "text-letter-spacing": 0.1, + "text-max-angle": 40, + "text-padding": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 0, + 15, + 12, + 16, + 80, + ], + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": 12, + "text-transform": "none", + visibility: "visible", + }, + paint: { + "text-color": "rgba(185,132,58, 1)", + "text-halo-blur": 0.5, + "text-halo-color": "rgba(238, 238, 238, .8)", + "text-halo-width": 2, + "text-opacity": [ + "step", + ["zoom"], + 0, + 12, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 16, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 0.75, + 0, + ], + ], + }, + }, + { + id: "label_contour_line_100_grey", + type: "symbol", + source: "swissmaptiles", + "source-layer": "contour_line", + minzoom: 14, + filter: [ + "all", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + ["match", ["get", "class"], ["scree"], true, false], + ], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "line", + "symbol-spacing": { + stops: [ + [14, 250], + [16, 450], + ], + }, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": "{ele} ", + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-justify": "center", + "text-keep-upright": true, + "text-letter-spacing": 0.1, + "text-max-angle": 35, + "text-padding": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 0, + 15, + 12, + 16, + 80, + ], + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 14, + 10.5, + 16, + 14, + ], + "text-transform": "none", + visibility: "visible", + }, + paint: { + "text-color": "rgba(64,64,64, 1)", + "text-halo-blur": 0.5, + "text-halo-color": "rgba(238, 238, 238, 0.8)", + "text-halo-width": 2, + "text-opacity": [ + "step", + ["zoom"], + 0, + 12, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 16, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 0.75, + 0, + ], + ], + }, + }, + { + id: "label_contour_line_100_blue", + type: "symbol", + source: "swissmaptiles", + "source-layer": "contour_line", + minzoom: 14, + filter: [ + "all", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + ["match", ["get", "class"], ["ice", "water"], true, false], + ], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "line", + "symbol-spacing": { + stops: [ + [14, 250], + [16, 450], + ], + }, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": "{ele} ", + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-justify": "center", + "text-keep-upright": true, + "text-letter-spacing": 0.1, + "text-max-angle": 35, + "text-padding": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 0, + 15, + 12, + 16, + 80, + ], + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 14, + 10.5, + 16, + 14, + ], + "text-transform": "none", + visibility: "visible", + }, + paint: { + "text-color": "rgba(0,136,208, 1)", + "text-halo-blur": 0.5, + "text-halo-color": "rgba(238, 238, 238, 0.8)", + "text-halo-width": 2, + "text-opacity": [ + "step", + ["zoom"], + 0, + 12, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 16, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 0.75, + 0, + ], + ], + }, + }, + { + id: "label_contour_line_100_brown", + type: "symbol", + source: "swissmaptiles", + "source-layer": "contour_line", + minzoom: 14, + filter: [ + "all", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + ["match", ["get", "class"], ["land"], true, false], + ], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "line", + "symbol-spacing": { + stops: [ + [14, 250], + [16, 450], + ], + }, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": "{ele} ", + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-justify": "center", + "text-keep-upright": true, + "text-letter-spacing": 0.1, + "text-max-angle": 35, + "text-padding": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 0, + 15, + 12, + 16, + 80, + ], + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 14, + 10.5, + 16, + 14, + ], + "text-transform": "none", + visibility: "visible", + }, + paint: { + "text-color": "rgba(185,132,58, 1)", + "text-halo-blur": 0.5, + "text-halo-color": "rgba(238, 238, 238, 0.8)", + "text-halo-width": 2, + "text-opacity": [ + "step", + ["zoom"], + 0, + 12, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 100], 0], + 0.75, + 0, + ], + 16, + [ + "case", + ["==", ["%", ["to-number", ["get", "ele"]], 20], 0], + 0.75, + 0, + ], + ], + }, + }, + { + id: "water_outline", + type: "line", + source: "swissmaptiles", + "source-layer": "water", + filter: ["all", ["!=", "class", "ocean"]], + layout: { visibility: "visible" }, + paint: { + "line-blur": 0.5, + "line-color": "rgba(133, 189, 224, 1)", + "line-opacity": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 0, + 0, + 8, + 1, + 14, + 0, + ], + "line-width": 0.5, + }, + }, + { + id: "pattern_landcover_vineyard", + type: "fill", + source: "swissmaptiles", + "source-layer": "landcover", + minzoom: 13, + filter: ["all", ["==", "subclass", "vineyard"]], + paint: { + "fill-opacity": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 13, + 0, + 13.1, + 0.6, + 17, + 1, + ], + "fill-pattern": "vinyard_green", + }, + }, + { + id: "pattern_landcover_wetlands", + type: "fill", + source: "swissmaptiles", + "source-layer": "landcover", + minzoom: 13, + filter: ["all", ["==", "class", "wetland"]], + paint: { + "fill-antialias": true, + "fill-color": "#000000", + "fill-opacity": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 13, + 0, + 13.2, + 0.4, + 17, + 1, + ], + "fill-pattern": "wetland_blue", + }, + }, + { + id: "pattern_landcover_orchard", + type: "fill", + source: "swissmaptiles", + "source-layer": "landcover", + minzoom: 13, + filter: ["all", ["==", "subclass", "orchard"]], + paint: { + "fill-opacity": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 13, + 0, + 13.2, + 0.8, + 17, + 1, + ], + "fill-pattern": "orchard_green", + }, + }, + { + id: "park", + type: "line", + source: "swissmaptiles", + "source-layer": "park", + minzoom: 7, + filter: ["all", ["in", "class", "national_park"]], + paint: { + "line-color": "rgba(171, 197, 159, 1)", + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 7, + 0, + 8, + 1, + 13, + 1, + 14, + 0.6, + ], + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 9, + 1.5, + 15, + 8, + 18, + 12, + ], + }, + }, + { + id: "boundary_disputed", + type: "line", + source: "swissmaptiles", + "source-layer": "boundary", + minzoom: 0, + filter: [ + "all", + ["in", "admin_level", 2, 4], + ["!=", "maritime", 1], + ["==", "disputed", 1], + ["==", "$type", "LineString"], + ], + layout: { + "line-cap": "square", + "line-join": "miter", + visibility: "visible", + }, + paint: { + "line-blur": 1, + "line-color": { + stops: [ + [6, "hsl(300, 55%, 80%)"], + [9, "hsl(315, 40%, 85%)"], + ], + }, + "line-dasharray": [1.5, 2.5], + "line-opacity": { + stops: [ + [13, 1], + [14, 0.7], + ], + }, + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 2, + ["match", ["get", "admin_level"], 2, 1, 0], + 3, + ["match", ["get", "admin_level"], 2, 2, 1], + 7, + ["match", ["get", "admin_level"], 2, 4, 1.5], + 18, + ["match", ["get", "admin_level"], 2, 16, 10], + ], + }, + }, + { + id: "boundary", + type: "line", + source: "swissmaptiles", + "source-layer": "boundary", + minzoom: 0, + filter: [ + "all", + ["in", "admin_level", 2, 4], + ["!=", "maritime", 1], + ["!=", "disputed", 1], + ["==", "$type", "LineString"], + ], + layout: { + "line-cap": ["literal", "round"], + "line-join": ["literal", "miter"], + visibility: "visible", + }, + paint: { + "line-blur": 1, + "line-color": { + stops: [ + [6, "hsl(0, 0%, 50%)"], + [9, "hsl(0, 0%, 75%)"], + ], + }, + "line-opacity": { + stops: [ + [13, 1], + [14, 0.8], + ], + }, + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 2, + ["match", ["get", "admin_level"], 2, 1, 0], + 3, + ["match", ["get", "admin_level"], 2, 2, 1], + 7, + ["match", ["get", "admin_level"], 2, 3, 1], + 18, + ["match", ["get", "admin_level"], 2, 16, 10], + ], + }, + }, + { + id: "tunnel_public_transport", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 8, + filter: [ + "all", + ["==", "brunnel", "tunnel"], + ["in", "class", "rail", "transit", "cable_car", "gondola"], + ["==", "$type", "LineString"], + ], + layout: { + "line-cap": "butt", + "line-join": "miter", + visibility: "visible", + }, + paint: { + "line-blur": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 18, + 0.4, + ], + "line-color": { + stops: [ + [7, "rgba(255, 50, 50, 1)"], + [15, "rgba(255, 80, 80, 1)"], + ], + }, + "line-dasharray": { + stops: [ + [13, [4, 2.5]], + [14, [6, 3.75]], + [15, [10, 6.25]], + [16, [14, 8.75]], + ], + }, + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + 0, + 9, + ["match", ["get", "class"], ["rail"], 0.8, 0], + 13, + [ + "match", + ["get", "subclass"], + ["rail", "subway", "funicular", "narrow_gauge"], + 0.8, + 0, + ], + 14, + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge", "funicular", "subway"], + ["match", ["get", "service"], ["yard", "siding"], 0, 0.8], + 0, + ], + 14.5, + 0.8, + ], + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 0.2, 0.75], + 0.2, + ], + 0.2, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 0.1, 1.25], + 1, + ], + ["cable_car"], + 1, + 0.75, + ], + 18, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 1, 2], + 2, + ], + ["cable_car"], + 2, + 1.5, + ], + ], + }, + }, + { + id: "tunnel_road", + type: "line", + metadata: { "maputnik:comment": "casing color for motorway is brown" }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 7, + filter: [ + "all", + ["==", "brunnel", "tunnel"], + [ + "!in", + "class", + "rail", + "ferry", + "transit", + "cable_car", + "gondola", + "path", + ], + ["==", "$type", "LineString"], + ], + layout: { + "line-cap": "butt", + "line-join": "miter", + visibility: "visible", + }, + paint: { + "line-blur": [ + "interpolate", + ["linear"], + ["zoom"], + 7, + ["literal", 3], + 8, + ["literal", 1], + 9, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary"], + 0.4, + 3, + ], + 10, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "secondary"], + 0.4, + 3, + ], + 11, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "secondary"], + 0.4, + 3, + ], + 12, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "secondary", "tertiary"], + 0.4, + 3, + ], + 13, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "secondary", "tertiary"], + 0.4, + ["minor"], + 1, + 3, + ], + 15, + 0.4, + ], + "line-color": "rgba(170, 170, 170, 1)", + "line-dasharray": { + stops: [ + [13, [3, 1.875]], + [14, [4, 2.5]], + [15, [5, 3.125]], + [16, [6, 3.75]], + ], + }, + "line-offset": 0, + "line-opacity": 1, + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 7, + ["literal", 0], + 8, + ["match", ["get", "class"], ["motorway", "trunk", "primary"], 1, 0], + 9, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary"], + 1.1, + 0, + ], + 10, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "secondary"], + 1.2, + 0, + ], + 11, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "secondary"], + 1.3, + 0, + ], + 12, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "secondary", "tertiary"], + 1.4, + 0, + ], + 13, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + 1.5, + ["primary", "secondary", "tertiary", "minor"], + 1, + 0, + ], + 14, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + 2, + ["primary", "secondary", "tertiary", "minor"], + 1.5, + 0, + ], + 15, + ["match", ["get", "class"], ["motorway", "trunk"], 3, 2], + 20, + ["match", ["get", "class"], ["motorway", "trunk"], 5, 2.5], + ], + }, + }, + { + id: "tunnel_road_path", + type: "line", + metadata: { "maputnik:comment": "casing color for motorway is brown" }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 6, + filter: [ + "all", + ["==", "brunnel", "tunnel"], + ["==", "class", "path"], + ["==", "$type", "LineString"], + ], + layout: { + "line-cap": "butt", + "line-join": "miter", + visibility: "visible", + }, + paint: { + "line-blur": 0.4, + "line-color": "rgba(140, 140, 140, 1)", + "line-dasharray": { + stops: [ + [14, [1, 0.6]], + [15, [1.5, 0.9]], + [16, [2, 1.2]], + [17, [3, 1.8]], + [18, [6, 3.6]], + ], + }, + "line-offset": 0, + "line-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 15, + 1.1, + 20, + 3, + ], + }, + }, + { + id: "construct_line", + type: "line", + source: "swissmaptiles", + "source-layer": "construct", + minzoom: 14, + filter: ["all", ["==", "class", "lock"]], + paint: { + "line-blur": 0.4, + "line-color": "hsl(220, 10%, 67%)", + "line-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + "line-width": { + stops: [ + [15, 1], + [18, 4], + ], + }, + }, + }, + { + id: "construct", + type: "fill", + source: "swissmaptiles", + "source-layer": "construct", + minzoom: 13, + filter: ["all", ["!=", "class", "lock"]], + paint: { + "fill-color": [ + "interpolate", + ["exponential", 1], + ["zoom"], + 13, + [ + "match", + ["get", "class"], + "weir", + "hsl(220, 10%, 82%)", + "hsl(220, 10%, 86%)", + ], + 17, + [ + "match", + ["get", "class"], + "weir", + "hsl(220, 10%, 75%)", + "dam", + "hsl(220, 10%, 82%)", + "hsl(220, 10%, 86%)", + ], + ], + "fill-opacity": [ + "interpolate", + ["exponential", 1], + ["zoom"], + 12, + 0, + 13, + ["match", ["get", "class"], "dam", 1, 0], + 14, + ["match", ["get", "class"], "dam", 1, 0], + 15, + 1, + ], + }, + }, + { + id: "aeroway_polygon_casing", + type: "line", + source: "swissmaptiles", + "source-layer": "aeroway", + minzoom: 11, + filter: [ + "all", + ["in", "class", "runway", "taxiway", "apron", "runway_grass"], + ["==", "$type", "Polygon"], + ], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": 0.4, + "line-color": "rgb(190, 190, 190)", + "line-opacity": 1, + "line-width": { + base: 1.5, + stops: [ + [13, 3], + [15, 4], + [17, 5], + ], + }, + }, + }, + { + id: "aeroway_line_casing", + type: "line", + source: "swissmaptiles", + "source-layer": "aeroway", + minzoom: 11, + filter: ["all", ["==", "$type", "LineString"]], + layout: { + "line-cap": "butt", + "line-join": "miter", + visibility: "visible", + }, + paint: { + "line-blur": 0.4, + "line-color": "rgba(110, 110, 110, 1)", + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 11.5, + 0, + 12, + 2.3, + 15, + 11.25, + 20, + 153, + ], + }, + }, + { + id: "road_via_ferrata", + type: "line", + metadata: { + "maputnik:comment": + "cannot be in the same layer as road_casings because dasharray doesn't support expressions", + }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 14, + filter: [ + "all", + ["in", "class", "via_ferrata"], + ["!in", "brunnel", "bridge", "tunnel"], + ["==", "$type", "LineString"], + ], + layout: { + "line-cap": "butt", + "line-join": "bevel", + visibility: "visible", + }, + paint: { + "line-blur": { + stops: [ + [15, 0.1], + [20, 0.4], + ], + }, + "line-color": { + stops: [ + [15, "rgba(20, 20, 20, 1)"], + [18, "rgba(90, 90, 90, 1)"], + ], + }, + "line-dasharray": { + stops: [ + [15, [0.75, 2]], + [16, [1.125, 3]], + [17, [1.5, 4]], + [18, [1.875, 5]], + ], + }, + "line-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 15, + 1.1, + 20, + 3, + ], + }, + }, + { + id: "road_path", + type: "line", + metadata: { + "maputnik:comment": + "cannot be in the same layer as road_casings because dasharray doesn't support expressions", + }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 14, + filter: [ + "all", + ["match", ["get", "class"], ["path"], true, false], + [ + "match", + ["get", "brunnel"], + ["bridge", "tunnel"], + ["match", ["get", "subclass"], "covered_bridge", true, false], + true, + ], + ["==", ["geometry-type"], "LineString"], + ], + layout: { + "line-cap": "butt", + "line-join": "bevel", + visibility: "visible", + }, + paint: { + "line-blur": { + stops: [ + [15, 0.1], + [20, 0.4], + ], + }, + "line-color": "rgba(115, 115, 115, 1)", + "line-dasharray": { + stops: [ + [14, [3, 1]], + [15, [6, 2]], + [16, [9, 3]], + [17, [12, 4]], + [18, [15, 5]], + ], + }, + "line-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 15, + 1.1, + 20, + 3, + ], + }, + }, + { + id: "building_ln", + type: "line", + source: "swissmaptiles", + "source-layer": "building_ln", + minzoom: 13, + paint: { + "line-blur": 0.4, + "line-color": [ + "match", + ["get", "class"], + "weir", + "rgb(20, 136, 205)", + "rgb(130, 130, 130)", + ], + "line-opacity": ["match", ["get", "class"], "weir", 0.2, 1], + "line-width": { + stops: [ + [13, 0], + [16, 2], + [18, 3], + ], + }, + }, + }, + { + id: "road_casing", + type: "line", + metadata: { "maputnik:comment": "casing color for motorway is brown" }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 7, + filter: [ + "all", + [ + "match", + ["get", "class"], + [ + "cable_car", + "car_ferry", + "chair_lift", + "ferry", + "gondola", + "path", + "rail", + "transit", + "via_ferrata", + ], + false, + true, + ], + [ + "match", + ["get", "brunnel"], + ["bridge", "tunnel"], + ["match", ["get", "subclass"], "covered_bridge", true, false], + true, + ], + ["==", ["geometry-type"], "LineString"], + ], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": { + stops: [ + [7, 3], + [8, 0.4], + ], + }, + "line-color": [ + "interpolate", + ["exponential", 1.7], + ["zoom"], + 9, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(170, 136, 30)", + "rgb(80, 80, 80)", + ], + 15, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(139, 107, 63)", + "rgb(90, 90, 90)", + ], + ], + "line-offset": 0, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 7, + ["literal", 0], + 8, + ["match", ["get", "ramp"], 1, 1.5, 3], + 10, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.5, 4], + ["trunk"], + 4, + 3, + ], + 12, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.5, 5], + ["trunk"], + ["match", ["get", "oneway"], 1, 5, 5], + ["primary"], + 5, + ["secondary"], + 4.5, + ["tertiary"], + 3.25, + 0, + ], + 13, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 3.5, 5.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 5.5, 5.5], + ["primary"], + 5.5, + ["secondary"], + 5, + ["tertiary"], + 4, + ["minor"], + 3, + 0, + ], + 15, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 6.5, 8], + ["trunk"], + ["match", ["get", "oneway"], 1, 8, 9], + ["primary"], + 9, + ["secondary"], + 8, + ["tertiary"], + 7, + ["minor"], + 5, + ["track"], + 1.1, + 4, + ], + 16, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 10, 12], + ["trunk"], + ["match", ["get", "oneway"], 1, 12, 15], + ["primary"], + 15, + ["secondary"], + 13, + ["tertiary"], + 11, + ["minor"], + 9, + ["track"], + 1.1, + 8, + ], + 20, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "rail"], + 120, + ["secondary"], + 115, + ["tertiary"], + 110, + ["minor"], + 100, + ["track"], + 3, + 95, + ], + ], + }, + }, + { + id: "landuse_parking", + type: "fill", + source: "swissmaptiles", + "source-layer": "landuse", + filter: ["all", ["in", "class", "parking"]], + layout: { visibility: "visible" }, + paint: { + "fill-color": "rgba(255, 255, 255, 1)", + "fill-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + }, + }, + { + id: "landuse_parking_outline", + type: "line", + source: "swissmaptiles", + "source-layer": "landuse", + filter: ["all", ["in", "class", "parking"]], + layout: { visibility: "visible" }, + paint: { + "line-color": "rgba(130, 130, 130, 1)", + "line-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 11, + 0.25, + 16, + 0.75, + ], + }, + }, + { + id: "road_fill", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 7, + filter: [ + "all", + [ + "match", + ["get", "class"], + [ + "cable_car", + "car_ferry", + "chair_lift", + "ferry", + "gondola", + "path", + "rail", + "track", + "transit", + "via_ferrata", + ], + false, + true, + ], + [ + "match", + ["get", "brunnel"], + ["bridge", "tunnel"], + ["match", ["get", "subclass"], "covered_bridge", true, false], + true, + ], + ["==", ["geometry-type"], "LineString"], + ], + layout: { + "line-cap": "round", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": { + stops: [ + [8, 0.4], + [14, 0.1], + ], + }, + "line-color": [ + "interpolate", + ["exponential", 1], + ["zoom"], + 9, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(255,230,160)", + "rgb(255,255,255)", + ], + 15, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(255, 224, 138)", + "rgb(255,255,255)", + ], + ], + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 7, + ["literal", 0], + 8, + ["match", ["get", "ramp"], 1, 0.5, 2], + 10, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 1.5, 2.75], + ["trunk"], + 2.75, + 2, + ], + 12, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 1.5, 3.75], + ["trunk"], + ["match", ["get", "oneway"], 1, 3.75, 3.75], + ["primary"], + 3.75, + ["secondary"], + 3.25, + ["tertiary"], + 2.25, + 0, + ], + 13, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.75, 4.25], + ["trunk"], + ["match", ["get", "oneway"], 1, 4.25, 4.25], + ["primary"], + 4.25, + ["secondary"], + 3.75, + ["tertiary"], + 2.75, + ["minor"], + 1.75, + 0, + ], + 15, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 5, 6.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 6.5, 7.5], + ["primary"], + 7.5, + ["secondary"], + 6.5, + ["tertiary", "rail"], + 5.5, + ["minor"], + 3.5, + 2.5, + ], + 16, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 8.5, 10.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 10.5, 13.5], + ["primary"], + 13.5, + ["secondary"], + 11.5, + ["tertiary", "rail"], + 9.5, + ["minor"], + 7.5, + 6.5, + ], + 20, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "rail"], + 117, + ["secondary"], + 112, + ["tertiary"], + 107, + ["minor"], + 97, + 92, + ], + ], + }, + }, + { + id: "aeroway_line_fill", + type: "line", + source: "swissmaptiles", + "source-layer": "aeroway", + minzoom: 11, + filter: ["all", ["==", "$type", "LineString"]], + layout: { + "line-cap": "butt", + "line-join": "miter", + visibility: "visible", + }, + paint: { + "line-blur": 0.4, + "line-color": [ + "match", + ["get", "class"], + ["runway_grass"], + "rgb(224,234,221)", + "rgb(255, 255, 255)", + ], + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 11, + 0, + 12, + 2, + 15, + 10, + 20, + 150, + ], + }, + }, + { + id: "aeroway_polygon_fill", + type: "fill", + source: "swissmaptiles", + "source-layer": "aeroway", + minzoom: 11, + filter: [ + "all", + ["in", "class", "runway", "taxiway", "apron", "runway_grass"], + ["==", "$type", "Polygon"], + ], + layout: { visibility: "visible" }, + paint: { + "fill-antialias": true, + "fill-color": [ + "match", + ["get", "class"], + ["runway_grass"], + "rgb(224,234,221)", + "rgb(255, 255, 255)", + ], + "fill-opacity": 1, + }, + }, + { + id: "car_ferry", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 9, + filter: ["all", ["==", "class", "car_ferry"]], + layout: { visibility: "visible" }, + paint: { + "line-blur": 0.4, + "line-color": "rgba(105, 187, 218, 1)", + "line-dasharray": { + stops: [ + [12, [6, 2]], + [13, [9, 3]], + [14, [12, 4]], + [15, [15, 5]], + [16, [18, 6]], + ], + }, + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 9, + 0, + 11, + ["match", ["get", "class"], ["car_ferry"], 1, 0], + 12, + ["match", ["get", "class"], ["car_ferry"], 1, 0], + 13, + 1, + ], + "line-width": { + stops: [ + [8, 0.4], + [14, 1], + [18, 2], + ], + }, + }, + }, + { + id: "ferry", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 12, + filter: ["all", ["==", "class", "ferry"]], + layout: { visibility: "visible" }, + paint: { + "line-blur": 0.4, + "line-color": "rgba(105, 187, 218, 1)", + "line-dasharray": { + stops: [ + [12, [3, 1]], + [13, [6, 2]], + [14, [9, 3]], + [15, [12, 4]], + [16, [15, 5]], + ], + }, + "line-opacity": { + stops: [ + [12, 0], + [13, 1], + ], + }, + "line-width": { + stops: [ + [8, 0.4], + [14, 1], + [18, 2], + ], + }, + }, + }, + { + id: "public_transport", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 8, + filter: [ + "all", + ["in", "class", "rail", "transit"], + ["!in", "brunnel", "bridge", "tunnel"], + ], + layout: { visibility: "visible" }, + paint: { + "line-blur": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 18, + 0.4, + ], + "line-color": { + stops: [ + [7, "rgba(255, 50, 50, 1)"], + [15, "rgba(255, 80, 80, 1)"], + ], + }, + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + 0, + 9, + ["match", ["get", "class"], ["rail"], 1, 0], + 12, + ["match", ["get", "class"], ["rail"], 1, 0], + 13, + ["match", ["get", "class"], ["rail"], 1, 0], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge", "funicular"], + ["match", ["get", "service"], ["yard", "siding"], 0, 1], + 0, + ], + 0, + ], + 14.5, + 1, + ], + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 0.2, 0.5], + 0.2, + ], + 0.2, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 0.2, 1], + 1, + ], + ["cable_car"], + 1, + 0.75, + ], + 18, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 1.5, 2], + 2, + ], + 1.5, + ], + ], + }, + }, + { + id: "sinkhole", + type: "symbol", + source: "swissmaptiles", + "source-layer": "spot_elevation", + minzoom: 14, + filter: [ + "all", + [ + "in", + "class", + "sinkhole", + "sinkhole_rock", + "sinkhole_scree", + "sinkhole_water", + "sinkhole_ice", + ], + ], + layout: { + "icon-anchor": "bottom", + "icon-image": [ + "match", + ["get", "class"], + "sinkhole", + "arrow_brown", + ["sinkhole_rock", "sinkhole_scree"], + "arrow_grey", + ["sinkhole_ice", "sinkhole_water"], + "arrow_blue", + "", + ], + "icon-offset": [0, 0], + "icon-optional": false, + "icon-padding": 30, + "icon-rotate": 15, + "icon-size": 1, + "symbol-placement": "point", + "text-allow-overlap": false, + "text-anchor": "center", + "text-field": "", + "text-font": [], + "text-ignore-placement": false, + "text-keep-upright": false, + "text-optional": false, + "text-size": 16, + visibility: "visible", + }, + paint: { + "icon-color": "#000000", + "icon-opacity": { + stops: [ + [14, 0], + [15, 0.6], + ], + }, + "text-color": "#000000", + "text-halo-blur": 1, + "text-halo-width": 0, + "text-opacity": 1, + }, + }, + { + id: "building_2d", + type: "fill", + source: "swissmaptiles", + "source-layer": "building", + minzoom: 13, + layout: { visibility: "visible" }, + paint: { + "fill-color": { + stops: [ + [13, "hsl(220, 10%, 82%)"], + [17, "hsl(220, 10%, 75%)"], + ], + }, + "fill-opacity": { + stops: [ + [13, 0], + [13.5, 1], + ], + }, + }, + }, + { + id: "building_2d_casing", + type: "line", + source: "swissmaptiles", + "source-layer": "building", + minzoom: 15, + layout: { visibility: "visible" }, + paint: { + "line-color": "hsl(220, 10%, 67%)", + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 15, + 0, + 16, + 0.5, + 19, + 1, + ], + "line-width": ["interpolate", ["linear"], ["zoom"], 15, 0.2, 18, 1.2], + }, + }, + { + id: "lake_elevation", + type: "symbol", + source: "swissmaptiles", + "source-layer": "spot_elevation", + minzoom: 12, + filter: ["all", ["==", "class", "lake_elevation"]], + layout: { + "icon-allow-overlap": true, + "icon-ignore-placement": true, + "icon-image": [ + "case", + ["has", "lake_depth"], + "arrow_line_blue", + ["==", ["length", ["to-string", ["get", "ele"]]], 3], + "line_blue_short", + "line_blue_long", + ], + "icon-offset": [0, 0], + "icon-optional": false, + "icon-size": 1, + "symbol-placement": "point", + "text-allow-overlap": false, + "text-anchor": "center", + "text-field": [ + "case", + ["has", "lake_depth"], + ["concat", ["get", "ele"], "\n\n", ["get", "lake_depth"]], + ["get", "ele"], + ], + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-justify": "center", + "text-keep-upright": false, + "text-line-height": 1, + "text-offset": [ + "case", + ["has", "lake_depth"], + ["literal", [0.35, -0.5]], + ["literal", [0, -0.5]], + ], + "text-optional": false, + "text-pitch-alignment": "auto", + "text-radial-offset": 0, + "text-rotation-alignment": "auto", + "text-size": ["interpolate", ["linear"], ["zoom"], 14, 10.5, 18, 13], + visibility: "visible", + }, + paint: { + "icon-color": "#000000", + "icon-opacity": 1, + "text-color": "rgba(20, 136, 205, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 12, + 1, + 18, + 2, + ], + "text-opacity": 1, + }, + }, + { + id: "bridge-l1_road_casing", + type: "line", + metadata: { "maputnik:comment": "casing color for motorway is brown" }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 10, + filter: [ + "all", + ["==", "layer", 1], + [ + "!in", + "class", + "rail", + "ferry", + "path", + "transit", + "cable_car", + "gondola", + ], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { + "line-cap": "butt", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": 0.4, + "line-color": [ + "interpolate", + ["exponential", 1.7], + ["zoom"], + 9, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(170, 136, 30)", + "rgb(80, 80, 80)", + ], + 15, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(139, 107, 63)", + "rgb(90, 90, 90)", + ], + ], + "line-offset": 0, + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 10, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.5, 4], + ["trunk"], + 4, + 3, + ], + 12, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.5, 5], + ["trunk"], + ["match", ["get", "oneway"], 1, 5, 5], + ["primary"], + 5, + ["secondary"], + 4.5, + ["tertiary"], + 3.25, + 0, + ], + 13, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 3.5, 5.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 5.5, 5.5], + ["primary"], + 5.5, + ["secondary"], + 5, + ["tertiary"], + 4, + ["minor"], + 3, + 0, + ], + 15, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 6.5, 8], + ["trunk"], + ["match", ["get", "oneway"], 1, 8, 9], + ["primary"], + 9, + ["secondary"], + 8, + ["tertiary"], + 7, + ["minor"], + 5, + ["track"], + 1.1, + 4, + ], + 16, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 10, 12], + ["trunk"], + ["match", ["get", "oneway"], 1, 12, 15], + ["primary"], + 15, + ["secondary"], + 13, + ["tertiary"], + 11, + ["minor"], + 9, + ["track"], + 1.1, + 8, + ], + 20, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "rail"], + 120, + ["secondary"], + 115, + ["tertiary"], + 110, + ["minor"], + 100, + ["track"], + 3, + 95, + ], + ], + }, + }, + { + id: "bridge-l1_fill", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 10, + filter: [ + "all", + ["==", "layer", 1], + ["!in", "class", "ferry", "cable_car", "gondola"], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { + "line-cap": "butt", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": { + stops: [ + [8, 0.4], + [14, 0.1], + ], + }, + "line-color": [ + "interpolate", + ["exponential", 1], + ["zoom"], + 9, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(255,230,160)", + ["rail", "path", "track"], + [ + "match", + ["get", "subclass"], + "funicular", + "rgba(243,243,246,0)", + "rgb(243,243,246)", + ], + "rgb(255,255,255)", + "rgb(243,243,246)", + "rgb(255,255,255)", + ], + 15, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(255, 224, 138)", + ["rail", "path", "track"], + [ + "match", + ["get", "subclass"], + "funicular", + "rgba(243,243,246,0)", + "rgb(243,243,246)", + ], + "rgb(255,255,255)", + ], + ], + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 10, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 1.5, 2.75], + ["trunk"], + 2.75, + 2, + ], + 12, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 1.5, 3.75], + ["trunk"], + ["match", ["get", "oneway"], 1, 3.75, 3.75], + ["primary"], + 3.75, + ["secondary"], + 3.25, + ["tertiary"], + 2.25, + 0, + ], + 13, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.75, 4.25], + ["trunk"], + ["match", ["get", "oneway"], 1, 4.25, 4.25], + ["primary"], + 4.25, + ["secondary"], + 3.75, + ["tertiary"], + 2.75, + ["minor"], + 1.75, + 0, + ], + 15, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 5, 6.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 6.5, 7.5], + ["primary"], + 7.5, + ["secondary"], + 6.5, + ["tertiary", "rail"], + 5.5, + ["minor"], + 3.5, + ["transit", "track", "path"], + 2.5, + 2.5, + ], + 16, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 8.5, 10.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 10.5, 13.5], + ["primary"], + 13.5, + ["secondary"], + 11.5, + ["tertiary", "rail"], + 9.5, + ["minor"], + 7.5, + ["transit", "track", "path"], + 6.5, + 6.5, + ], + 20, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "rail"], + 117, + ["secondary"], + 112, + ["tertiary"], + 107, + ["minor"], + 97, + 92, + ], + ], + }, + }, + { + id: "bridge-l1_road_track", + type: "line", + metadata: { "maputnik:comment": "casing color for motorway is brown" }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 14, + filter: [ + "all", + ["==", "class", "track"], + ["==", "layer", 1], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { + "line-cap": "butt", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": ["interpolate", ["linear"], ["zoom"], 14, 3, 15, 0.4], + "line-color": { + stops: [ + [9, "rgba(80, 80, 80, 1)"], + [15, "rgba(90, 90, 90, 1)"], + ], + }, + "line-offset": 0, + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 14, + 0, + 15, + 1.1, + 16, + 1.1, + 18, + 2, + 20, + 3, + ], + }, + }, + { + id: "bridge-l1_road_path", + type: "line", + metadata: { + "maputnik:comment": + "cannot be in the same layer as road_casings because dasharray doesn't support expressions", + }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 14, + filter: [ + "all", + ["in", "class", "path"], + ["==", "layer", 1], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { + "line-cap": "butt", + "line-join": "bevel", + visibility: "visible", + }, + paint: { + "line-blur": { + stops: [ + [15, 0.1], + [20, 0.4], + ], + }, + "line-color": "rgba(115, 115, 115, 1)", + "line-dasharray": { + stops: [ + [14, [3, 1]], + [15, [6, 2]], + [16, [9, 3]], + [17, [12, 4]], + [18, [15, 5]], + ], + }, + "line-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 15, + 1.1, + 20, + 3, + ], + }, + }, + { + id: "bridge-l1_public_transport", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 10, + filter: [ + "all", + ["==", "layer", 1], + ["in", "class", "rail", "transit"], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { "line-cap": "round", visibility: "visible" }, + paint: { + "line-blur": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 18, + 0.4, + ], + "line-color": { + stops: [ + [7, "rgba(255, 50, 50, 1)"], + [15, "rgba(255, 80, 80, 1)"], + ], + }, + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + 0, + 9, + ["match", ["get", "class"], ["rail"], 1, 0], + 12, + ["match", ["get", "class"], ["rail"], 1, 0], + 13, + ["match", ["get", "class"], ["rail"], 1, 0], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge", "funicular"], + ["match", ["get", "service"], ["yard", "siding"], 0, 1], + 0, + ], + 0, + ], + 14.5, + 1, + ], + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 0.2, 0.5], + 0.2, + ], + 0.2, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 0.1, 1], + 1, + ], + ["cable_car"], + 1, + 0.75, + ], + 18, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 1.5, 2], + 2, + ], + ["cable_car"], + 2, + 1.5, + ], + ], + }, + }, + { + id: "bridge-l2_road_casing", + type: "line", + metadata: { "maputnik:comment": "casing color for motorway is brown" }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 10, + filter: [ + "all", + [">", "layer", 1], + [ + "!in", + "class", + "rail", + "ferry", + "path", + "transit", + "cable_car", + "gondola", + ], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { + "line-cap": "butt", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": 0.4, + "line-color": [ + "interpolate", + ["exponential", 1.7], + ["zoom"], + 9, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(170, 136, 30)", + "rgb(80, 80, 80)", + ], + 15, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(139, 107, 63)", + "rgb(90, 90, 90)", + ], + ], + "line-offset": 0, + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 10, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.5, 4], + ["trunk"], + 4, + 3, + ], + 12, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.5, 5], + ["trunk"], + ["match", ["get", "oneway"], 1, 5, 5], + ["primary"], + 5, + ["secondary"], + 4.5, + ["tertiary"], + 3.25, + 0, + ], + 13, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 3.5, 5.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 5.5, 5.5], + ["primary"], + 5.5, + ["secondary"], + 5, + ["tertiary"], + 4, + ["minor"], + 3, + 0, + ], + 15, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 6.5, 8], + ["trunk"], + ["match", ["get", "oneway"], 1, 8, 9], + ["primary"], + 9, + ["secondary"], + 8, + ["tertiary"], + 7, + ["minor"], + 5, + ["track"], + 1.1, + 4, + ], + 16, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 10, 12], + ["trunk"], + ["match", ["get", "oneway"], 1, 12, 15], + ["primary"], + 15, + ["secondary"], + 13, + ["tertiary"], + 11, + ["minor"], + 9, + ["track"], + 1.1, + 8, + ], + 20, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "rail"], + 120, + ["secondary"], + 115, + ["tertiary"], + 110, + ["minor"], + 100, + ["track"], + 3, + 95, + ], + ], + }, + }, + { + id: "bridge-l2_fill", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 10, + filter: [ + "all", + [">", "layer", 1], + ["!in", "class", "ferry", "cable_car", "gondola"], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { + "line-cap": "butt", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": { + stops: [ + [8, 0.4], + [14, 0.1], + ], + }, + "line-color": [ + "interpolate", + ["exponential", 1], + ["zoom"], + 9, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(255,230,160)", + ["rail", "path", "track"], + [ + "match", + ["get", "subclass"], + "funicular", + "rgba(243,243,246,0)", + "rgb(243,243,246)", + ], + "rgb(255,255,255)", + "rgb(243,243,246)", + "rgb(255,255,255)", + ], + 15, + [ + "match", + ["get", "class"], + ["motorway", "trunk"], + "rgb(255, 224, 138)", + ["rail", "path", "track"], + [ + "match", + ["get", "subclass"], + "funicular", + "rgba(243,243,246,0)", + "rgb(243,243,246)", + ], + "rgb(255,255,255)", + ], + ], + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 10, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 1.5, 2.75], + ["trunk"], + 2.75, + 2, + ], + 12, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 1.5, 3.75], + ["trunk"], + ["match", ["get", "oneway"], 1, 3.75, 3.75], + ["primary"], + 3.75, + ["secondary"], + 3.25, + ["tertiary"], + 2.25, + 0, + ], + 13, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 2.75, 4.25], + ["trunk"], + ["match", ["get", "oneway"], 1, 4.25, 4.25], + ["primary"], + 4.25, + ["secondary"], + 3.75, + ["tertiary"], + 2.75, + ["minor"], + 1.75, + 0, + ], + 15, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 5, 6.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 6.5, 7.5], + ["primary"], + 7.5, + ["secondary"], + 6.5, + ["tertiary", "rail"], + 5.5, + ["minor"], + 3.5, + ["transit", "track", "path"], + 2.5, + 2.5, + ], + 16, + [ + "match", + ["get", "class"], + ["motorway"], + ["match", ["get", "ramp"], 1, 8.5, 10.5], + ["trunk"], + ["match", ["get", "oneway"], 1, 10.5, 13.5], + ["primary"], + 13.5, + ["secondary"], + 11.5, + ["tertiary", "rail"], + 9.5, + ["minor"], + 7.5, + ["transit", "track", "path"], + 6.5, + 6.5, + ], + 20, + [ + "match", + ["get", "class"], + ["motorway", "trunk", "primary", "rail"], + 117, + ["secondary"], + 112, + ["tertiary"], + 107, + ["minor"], + 97, + 92, + ], + ], + }, + }, + { + id: "bridge-l2_road_track", + type: "line", + metadata: { "maputnik:comment": "casing color for motorway is brown" }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 14, + filter: [ + "all", + [">", "layer", 1], + ["==", "class", "track"], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { + "line-cap": "butt", + "line-join": "round", + visibility: "visible", + }, + paint: { + "line-blur": ["interpolate", ["linear"], ["zoom"], 14, 3, 15, 0.4], + "line-color": { + stops: [ + [9, "rgba(80, 80, 80, 1)"], + [15, "rgba(90, 90, 90, 1)"], + ], + }, + "line-offset": 0, + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 2], + ["zoom"], + 14, + 0, + 15, + 1.1, + 16, + 1.1, + 18, + 2, + 20, + 3, + ], + }, + }, + { + id: "bridge-l2_road_path", + type: "line", + metadata: { + "maputnik:comment": + "cannot be in the same layer as road_casings because dasharray doesn't support expressions", + }, + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 14, + filter: [ + "all", + [">", "layer", 1], + ["in", "class", "path"], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { + "line-cap": "butt", + "line-join": "bevel", + visibility: "visible", + }, + paint: { + "line-blur": { + stops: [ + [15, 0.1], + [20, 0.4], + ], + }, + "line-color": "rgba(115, 115, 115, 1)", + "line-dasharray": { + stops: [ + [14, [3, 1]], + [15, [6, 2]], + [16, [9, 3]], + [17, [12, 4]], + [18, [15, 5]], + ], + }, + "line-opacity": { + stops: [ + [14, 0], + [15, 1], + ], + }, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 15, + 1.1, + 20, + 3, + ], + }, + }, + { + id: "bridge-l2_public_transport", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 10, + filter: [ + "all", + [">", "layer", 1], + ["in", "class", "rail", "transit", "cable_car", "gondola"], + ["==", "$type", "LineString"], + ["!=", "subclass", "covered_bridge"], + ], + layout: { "line-cap": "round", visibility: "visible" }, + paint: { + "line-blur": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 18, + 0.4, + ], + "line-color": { + stops: [ + [7, "rgba(255, 50, 50, 1)"], + [15, "rgba(255, 80, 80, 1)"], + ], + }, + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + 0, + 9, + ["match", ["get", "class"], ["rail"], 1, 0], + 12, + ["match", ["get", "class"], ["rail"], 1, 0], + 13, + ["match", ["get", "class"], ["rail"], 1, 0], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge", "funicular"], + ["match", ["get", "service"], ["yard", "siding"], 0, 1], + 0, + ], + 0, + ], + 14.5, + 1, + ], + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 0.2, 0.5], + 0.2, + ], + 0.2, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 0.1, 1], + 1, + ], + ["cable_car"], + 1, + 0.75, + ], + 18, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 1.5, 2], + 2, + ], + ["cable_car"], + 2, + 1.5, + ], + ], + }, + }, + { + id: "spot_elevation", + type: "symbol", + source: "swissmaptiles", + "source-layer": "spot_elevation", + minzoom: 14, + filter: [ + "all", + [ + "!in", + "class", + "lake_elevation", + "sinkhole", + "sinkhole_rock", + "sinkhole_scree", + "sinkhole_water", + "sinkhole_ice", + ], + ], + layout: { + "icon-image": [ + "match", + ["get", "class"], + "spot_elevation", + "dot_dark_grey_3", + "", + ], + "icon-offset": [0, 0], + "icon-optional": false, + "icon-padding": 30, + "icon-rotate": 0, + "icon-size": 1, + "symbol-placement": "point", + "text-allow-overlap": false, + "text-anchor": "center", + "text-field": ["get", "ele"], + "text-font": ["Frutiger Neue Regular"], + "text-ignore-placement": false, + "text-keep-upright": false, + "text-line-height": 0.9, + "text-optional": false, + "text-radial-offset": 0.3, + "text-size": ["interpolate", ["linear"], ["zoom"], 14, 10.5, 18, 13], + "text-variable-anchor": [ + "literal", + ["bottom-left", "top-left", "bottom-right", "top-right"], + ], + visibility: "visible", + }, + paint: { + "icon-color": "#000000", + "icon-opacity": 0.8, + "text-color": "rgba(80, 80, 80, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 12, + 1.5, + 18, + 3, + ], + "text-opacity": ["literal", 1], + }, + }, + { + id: "water_name_point_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "water_name", + filter: ["all", ["==", "$type", "Point"], ["==", "class", "lake"]], + layout: { + "symbol-placement": "point", + "symbol-spacing": 350, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-keep-upright": true, + "text-letter-spacing": 0.05, + "text-max-width": 1000, + "text-pitch-alignment": "map", + "text-rotation-alignment": "viewport", + "text-size": ["interpolate", ["linear"], ["zoom"], 10, 10.5, 16, 16], + visibility: "visible", + }, + paint: { + "text-color": "rgba(20, 136, 205, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.7)", + "text-halo-width": 1, + }, + }, + { + id: "waterway_line_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "waterway", + minzoom: 9, + filter: [ + "all", + ["==", "$type", "LineString"], + ["!=", "intermittent", 1], + ], + layout: { + "symbol-placement": "line", + "symbol-spacing": 650, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-keep-upright": true, + "text-letter-spacing": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + 0.1, + 12, + ["match", ["get", "class"], ["river"], 0.4, 0.2], + ], + "text-max-width": 9999, + "text-padding": 0, + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 10, + 10.5, + 16, + [ + "match", + ["to-string", ["get", "width"]], + ["9", "10"], + 18, + ["7", "8"], + 17, + ["5", "6"], + 16, + "4", + 15, + "3", + 14, + "2", + 13, + "1", + 12, + ["match", ["get", "class"], ["river", "canal"], 18, 14], + ], + ], + }, + paint: { + "text-color": [ + "match", + ["get", "intermittent"], + 1, + "rgb(64, 64, 64)", + "rgb(20, 136, 205)", + ], + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": 2, + }, + }, + { + id: "transportation_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "transportation_name", + minzoom: 13, + filter: ["all", ["==", "$type", "LineString"]], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "line", + "symbol-spacing": [ + "interpolate", + ["linear"], + ["zoom"], + 15, + 200, + 18, + 400, + ], + "symbol-z-order": "auto", + "text-anchor": "center", + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Regular"], + "text-keep-upright": true, + "text-letter-spacing": 0.1, + "text-max-angle": 40, + "text-offset": [0, 0], + "text-padding": 2, + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 14, + ["match", ["get", "class"], ["motorway", "trunk"], 11, 10.5], + 18, + ["match", ["get", "class"], ["motorway", "trunk"], 18, 16], + ], + "text-transform": "none", + visibility: "visible", + }, + paint: { + "text-color": [ + "match", + ["get", "class"], + ["rail", "transit", "cable_car", "gondola", "chair_lift"], + "rgba(255, 50, 50, 1)", + "rgba(60, 60, 70, 1)", + ], + "text-halo-blur": 0.2, + "text-halo-color": [ + "match", + ["get", "class"], + [ + "rail", + "transit", + "cable_car", + "gondola", + "chair_lift", + "motorway", + "trunk", + ], + "rgba(255, 255, 255, 0.6)", + "rgba(255, 255, 255, 0.8)", + ], + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + [ + "match", + ["get", "class"], + ["rail", "transit", "cable_car", "gondola", "chair_lift"], + 1, + 1.5, + ], + 20, + 3, + ], + }, + }, + { + id: "aerialway", + type: "line", + source: "swissmaptiles", + "source-layer": "transportation", + minzoom: 12, + filter: ["all", ["in", "class", "cable_car", "gondola", "chair_lift"]], + layout: { visibility: "visible" }, + paint: { + "line-blur": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 14, + [ + "match", + ["get", "class"], + ["rail"], + [ + "match", + ["get", "subclass"], + ["rail", "narrow_gauge"], + ["match", ["get", "service"], ["yard", "siding"], 2.5, 0.6], + 0.6, + ], + 0.6, + ], + 18, + 0.4, + ], + "line-color": { + stops: [ + [7, "rgba(255, 50, 50, 1)"], + [15, "rgba(255, 80, 80, 1)"], + ], + }, + "line-opacity": [ + "interpolate", + ["linear"], + ["zoom"], + 12, + 0, + 13, + ["match", ["get", "class"], ["cable_car", "gondola"], 1, 0], + 14, + [ + "match", + ["get", "class"], + ["cable_car", "gondola", "chair_lift"], + 1, + 0, + ], + ], + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 8, + 0.2, + 14, + ["match", ["get", "class"], ["cable_car"], 1, 0.75], + 18, + ["match", ["get", "class"], ["cable_car"], 2, 1.5], + ], + }, + }, + { + id: "road_number", + type: "symbol", + source: "swissmaptiles", + "source-layer": "transportation_name", + minzoom: 11, + filter: [ + "all", + ["in", "class", "motorway", "trunk", "primary"], + ["has", "ref"], + ["<=", "ref_length", 12], + ["==", "$type", "LineString"], + ], + layout: { + "icon-allow-overlap": false, + "icon-ignore-placement": false, + "icon-image": "box_white_grey_casing_{ref_length}", + "icon-keep-upright": false, + "icon-offset": [0, -1.3], + "icon-optional": false, + "icon-padding": 2, + "icon-pitch-alignment": "viewport", + "icon-rotation-alignment": "viewport", + "icon-size": 1, + "icon-text-fit": "none", + "symbol-avoid-edges": false, + "symbol-placement": "line", + "symbol-spacing": ["step", ["zoom"], 300, 10, 600, 14, 800], + "symbol-z-order": "auto", + "text-anchor": "center", + "text-field": ["get", "ref"], + "text-font": ["Frutiger Neue Condensed Bold"], + "text-justify": "center", + "text-keep-upright": true, + "text-letter-spacing": 0, + "text-optional": false, + "text-pitch-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-size": 10.5, + visibility: "visible", + }, + paint: { + "icon-opacity": 1, + "text-color": "rgba(64, 64, 64, 1)", + "text-halo-blur": 0, + "text-halo-color": "rgba(0, 0, 0, 0)", + "text-halo-width": 0, + "text-opacity": 1, + }, + }, + { + id: "area_name_glacier_point_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "area_name", + minzoom: 14, + filter: [ + "all", + ["==", "$type", "Point"], + ["in", "subclass", "glacier"], + ], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "point", + "symbol-spacing": { + stops: [ + [12, 250], + [14, 550], + ], + }, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-keep-upright": true, + "text-letter-spacing": 0.15, + "text-max-width": 99999, + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": ["interpolate", ["linear"], ["zoom"], 10, 11, 16, 20], + }, + paint: { + "text-color": "rgba(55, 146, 201, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": 1, + }, + }, + { + id: "area_name_glacier_line_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "area_name", + minzoom: 12, + filter: [ + "all", + ["==", "$type", "LineString"], + ["in", "subclass", "glacier"], + ], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "line-center", + "symbol-spacing": { + stops: [ + [12, 250], + [14, 550], + ], + }, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-keep-upright": true, + "text-letter-spacing": { + stops: [ + [10, 0.15], + [12, 0.3], + ], + }, + "text-max-width": 99999, + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": ["interpolate", ["linear"], ["zoom"], 10, 11, 16, 20], + }, + paint: { + "text-color": "rgba(55, 146, 201, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": 1, + }, + }, + { + id: "poi_rank3", + type: "symbol", + source: "swissmaptiles", + "source-layer": "poi", + minzoom: 15, + filter: [ + "all", + [ + "match", + ["get", "class"], + [ + "allottments", + "attraction", + "aerialway", + "bus", + "building", + "cave", + "entrance", + "garden", + "museum", + "place_of_worship", + "railway", + "survey_point", + "tower", + "wastewater_plant", + "waterfall", + ], + true, + false, + ], + [ + "match", + ["get", "subclass"], + [ + "allottments", + "attraction", + "bus_stop", + "cave", + "building", + "garden", + "halt", + "museum", + "observation", + "station", + "subway_entrance", + "survey_point", + "tram_stop", + "wastewater_plant", + "waterfall", + "", + ], + true, + false, + ], + ], + layout: { + "icon-allow-overlap": false, + "icon-ignore-placement": false, + "icon-image": [ + "match", + ["get", "subclass"], + ["tram_stop", "bus_stop", "halt", "station", "subway_entrance"], + "dot_red", + "waterfall", + "waterfall_blue", + "observation", + "observation_tower_grey", + "survey_point", + "dot_dark_grey_4", + "", + ], + "icon-optional": false, + "icon-rotate": ["to-number", ["get", "direction"]], + "icon-rotation-alignment": "map", + "icon-size": 1, + "text-anchor": [ + "match", + ["get", "subclass"], + [ + "halt", + "tram_stop", + "bus_stop", + "station", + "subway_entrance", + "survey_point", + ], + "bottom-left", + ["waterfall", "observation"], + "left", + "center", + ], + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Regular"], + "text-justify": "left", + "text-max-width": 10, + "text-offset": [ + "match", + ["get", "subclass"], + "observation", + ["literal", [0.5, 0.2]], + "waterfall", + ["literal", [0.5, 0.1]], + ["literal", [0.4, 0.1]], + ], + "text-optional": false, + "text-padding": 2, + "text-size": ["interpolate", ["linear"], ["zoom"], 14, 12, 18, 18], + visibility: "visible", + }, + paint: { + "icon-opacity": ["case", ["has", "name"], 1, 0], + "text-color": [ + "match", + ["get", "subclass"], + ["halt", "tram_stop", "bus_stop", "station", "subway_entrance"], + "rgba(255, 50, 50, 1)", + "waterfall", + "rgba(20, 136, 205, 1)", + "rgba(48, 48, 48, 1)", + ], + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 1, + 17, + 2, + ], + "text-opacity": [ + "step", + ["zoom"], + 0, + 15, + ["match", ["get", "class"], "college", 0, 1], + 16, + 1, + ], + }, + }, + { + id: "poi_rank2", + type: "symbol", + source: "swissmaptiles", + "source-layer": "poi", + minzoom: 13, + filter: [ + "any", + [ + "match", + ["get", "class"], + [ + "cemetery", + "tower", + "dam", + "ferry_terminal", + "funicular", + "attraction", + "fuel", + "golf", + "golf_course", + "horse_racing", + "military", + "monastery", + "park", + "pitch", + "prison", + "ruins", + "sports_centre", + "stadium", + "swimming_pool", + "power", + "weir", + "zoo", + ], + true, + false, + ], + ["match", ["get", "subclass"], "camp_site", true, false], + ], + layout: { + "icon-allow-overlap": false, + "icon-ignore-placement": false, + "icon-image": [ + "step", + ["zoom"], + [ + "match", + ["get", "subclass"], + "church_tower", + "dot_circle_dark_grey_8", + ["golf_course", "golf"], + "golf_grey", + "ferry_terminal", + "dot_blue", + "funicular_stop", + "dot_red", + "wind_turbine", + "windturbine_grey", + "communications_tower", + "communications_tower_grey", + "", + ], + 15, + [ + "match", + ["get", "subclass"], + ["camp_site", "caravan_site"], + "camping_grey", + "church_tower", + "dot_circle_dark_grey_10", + ["golf_course", "golf"], + "golf_grey", + "ferry_terminal", + "dot_blue", + "funicular_stop", + "dot_red", + "wind_turbine", + "windturbine_grey", + "communications_tower", + "communications_tower_grey", + "", + ], + 16, + [ + "match", + ["get", "subclass"], + ["camp_site", "caravan_site"], + "camping_grey", + "church_tower", + "dot_circle_dark_grey_12", + ["golf_course", "golf"], + "golf_grey", + "ferry_terminal", + "dot_blue", + "funicular_stop", + "dot_red", + "hospital", + "hospital_grey", + "wind_turbine", + "windturbine_grey", + "communications_tower", + "communications_tower_grey", + "", + ], + ], + "icon-offset": [0, 0], + "icon-optional": false, + "icon-size": 1, + "text-anchor": [ + "match", + ["get", "class"], + ["monastery"], + "left", + [ + "match", + ["get", "subclass"], + [ + "caravan_site", + "camp_site", + "church_tower", + "golf_course", + "golf", + "hospital", + "communications_tower", + ], + "left", + ["ferry_terminal", "funicular_stop"], + "bottom-left", + "center", + ], + ], + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Regular"], + "text-justify": "left", + "text-letter-spacing": ["match", ["get", "class"], ["park"], 0.05, 0], + "text-max-width": 10, + "text-offset": [ + "match", + ["get", "subclass"], + ["ferry_terminal", "funicular_stop"], + ["literal", [0.4, 0.1]], + ["literal", [0.8, 0.1]], + ], + "text-optional": true, + "text-size": ["interpolate", ["linear"], ["zoom"], 14, 12, 18, 18], + visibility: "visible", + }, + paint: { + "icon-opacity": [ + "step", + ["zoom"], + 0, + 13, + ["match", ["get", "subclass"], "wind_turbine", 0, 0], + 14, + [ + "match", + ["get", "class"], + ["place_of_worship"], + 1, + [ + "match", + ["get", "subclass"], + [ + "wind_turbine", + "caravan_site", + "camp_site", + "ferry_terminal", + "funicular_stop", + "golf_course", + "golf", + "cemetery", + "stadium", + "park", + ], + 1, + 0, + ], + ], + 15, + 1, + ], + "text-color": [ + "match", + ["get", "subclass"], + "ferry_terminal", + "rgba(20, 136, 205, 1)", + "funicular_stop", + "rgba(255, 50, 50, 1)", + "weir", + "rgba(20, 136, 205, 1)", + "rgba(48, 48, 48, 1)", + ], + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 1, + 17, + 2, + ], + "text-opacity": [ + "step", + ["zoom"], + 0, + 14, + [ + "match", + ["get", "class"], + [ + "ferry_terminal", + "funicular", + "golf", + "golf_course", + "cemetery", + "ruins", + "stadium", + "park", + "pitch", + ], + 1, + 0, + ], + 15, + [ + "match", + ["get", "class"], + [ + "campsite", + "ferry_terminal", + "funicular", + "golf", + "golf_course", + "cemetery", + "stadium", + "park", + "pitch", + "place_of_worship", + "sports_centre", + "zoo", + ], + 1, + 0, + ], + 16, + [ + "match", + ["get", "class"], + [ + "campsite", + "ferry_terminal", + "funicular", + "golf", + "golf_course", + "cemetery", + "stadium", + "park", + "pitch", + "place_of_worship", + "sports_centre", + "zoo", + ], + 1, + 0, + ], + 17, + 1, + ], + }, + }, + { + id: "peaks_other", + type: "symbol", + source: "swissmaptiles", + "source-layer": "mountain_peak", + minzoom: 15, + maxzoom: 24, + filter: [ + "match", + ["get", "class"], + ["rocky_knoll", "saddle"], + true, + false, + ], + layout: { + "icon-allow-overlap": false, + "icon-anchor": "center", + "icon-ignore-placement": false, + "icon-image": "dot_dark_grey_3", + "icon-offset": [0, 0], + "icon-optional": false, + "icon-padding": 0, + "icon-pitch-alignment": "auto", + "icon-rotation-alignment": "auto", + "icon-size": 1, + "symbol-placement": "point", + "symbol-z-order": ["literal", "auto"], + "text-allow-overlap": false, + "text-anchor": "center", + "text-field": [ + "format", + translatedTextField, + {}, + "\n", + {}, + ["get", "ele"], + { "font-scale": 0.75 }, + ], + "text-font": ["Frutiger Neue Regular"], + "text-ignore-placement": false, + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-line-height": 1.15, + "text-max-width": 8, + "text-offset": [0, 0], + "text-optional": false, + "text-padding": 2, + "text-radial-offset": 0.3, + "text-size": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + [ + "case", + ["<=", 4000, ["get", "ele"]], + 14, + ["<=", 3000, ["get", "ele"]], + 13, + ["<=", 2000, ["get", "ele"]], + 12, + 11, + ], + 18, + [ + "case", + ["<=", 4000, ["get", "ele"]], + 23, + ["<=", 3000, ["get", "ele"]], + 22, + ["<=", 2000, ["get", "ele"]], + 21, + 20, + ], + ], + "text-variable-anchor": [ + "literal", + ["bottom-left", "top-left", "bottom-right", "top-right"], + ], + visibility: "visible", + }, + paint: { + "icon-color": "rgba(0, 0, 0, 1)", + "icon-halo-blur": 0, + "icon-halo-color": "rgba(255, 255, 255, 1)", + "icon-halo-width": 0, + "icon-opacity": 1, + "text-color": "rgba(48, 48, 48, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 12, + 1.5, + 18, + 3, + ], + "text-opacity": 1, + }, + }, + { + id: "peaks_rank3+", + type: "symbol", + source: "swissmaptiles", + "source-layer": "mountain_peak", + minzoom: 14, + maxzoom: 24, + filter: [ + "all", + [">=", "rank", 3], + ["!in", "class", "rocky_knoll", "saddle", "mountain_pass"], + ], + layout: { + "icon-allow-overlap": false, + "icon-anchor": "center", + "icon-ignore-placement": false, + "icon-image": [ + "step", + ["zoom"], + "", + 10, + "dot_dark_grey_4", + 14, + "dot_dark_grey_6", + 18, + "dot_dark_grey_8", + ], + "icon-offset": [0, 0], + "icon-optional": false, + "icon-padding": 0, + "icon-pitch-alignment": "auto", + "icon-rotation-alignment": "auto", + "icon-size": 1, + "symbol-placement": "point", + "symbol-z-order": ["literal", "auto"], + "text-allow-overlap": false, + "text-anchor": "bottom-left", + "text-field": [ + "format", + translatedTextField, + {}, + "\n", + {}, + ["get", "ele"], + { "font-scale": 0.75 }, + ], + "text-font": ["Frutiger Neue Regular"], + "text-ignore-placement": false, + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-line-height": 1.15, + "text-max-width": 8, + "text-offset": [0, 0], + "text-optional": false, + "text-padding": 2, + "text-radial-offset": 0.3, + "text-size": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + [ + "case", + ["<=", 4000, ["get", "ele"]], + 14, + ["<=", 3000, ["get", "ele"]], + 13, + ["<=", 2000, ["get", "ele"]], + 12, + 11, + ], + 18, + [ + "case", + ["<=", 4000, ["get", "ele"]], + 23, + ["<=", 3000, ["get", "ele"]], + 22, + ["<=", 2000, ["get", "ele"]], + 21, + 20, + ], + ], + visibility: "visible", + }, + paint: { + "icon-color": "rgba(0, 0, 0, 1)", + "icon-halo-blur": 0, + "icon-halo-color": "rgba(255, 255, 255, 1)", + "icon-halo-width": 0, + "icon-opacity": 1, + "text-color": "rgba(48, 48, 48, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 12, + 1.5, + 18, + 3, + ], + "text-opacity": 1, + }, + }, + { + id: "peaks_rank2", + type: "symbol", + source: "swissmaptiles", + "source-layer": "mountain_peak", + minzoom: 11, + maxzoom: 24, + filter: [ + "all", + ["==", "rank", 2], + ["!in", "class", "rocky_knoll", "saddle", "mountain_pass"], + ], + layout: { + "icon-allow-overlap": false, + "icon-anchor": "center", + "icon-ignore-placement": false, + "icon-image": [ + "step", + ["zoom"], + "", + 10, + "dot_dark_grey_4", + 14, + "dot_dark_grey_6", + 18, + "dot_dark_grey_8", + ], + "icon-offset": [0, 0], + "icon-optional": false, + "icon-padding": 0, + "icon-pitch-alignment": "auto", + "icon-rotation-alignment": "auto", + "icon-size": 1, + "symbol-placement": "point", + "symbol-z-order": ["literal", "auto"], + "text-allow-overlap": false, + "text-anchor": "bottom-left", + "text-field": [ + "format", + translatedTextField, + {}, + "\n", + {}, + ["get", "ele"], + { "font-scale": 0.75 }, + ], + "text-font": ["Frutiger Neue Regular"], + "text-ignore-placement": false, + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-line-height": 1.15, + "text-max-width": 8, + "text-offset": [0, 0], + "text-optional": false, + "text-padding": 2, + "text-radial-offset": 0.3, + "text-size": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + [ + "case", + ["<=", 4000, ["get", "ele"]], + 14, + ["<=", 3000, ["get", "ele"]], + 13, + ["<=", 2000, ["get", "ele"]], + 12, + 11, + ], + 18, + [ + "case", + ["<=", 4000, ["get", "ele"]], + 23, + ["<=", 3000, ["get", "ele"]], + 22, + ["<=", 2000, ["get", "ele"]], + 21, + 20, + ], + ], + visibility: "visible", + }, + paint: { + "icon-color": "rgba(0, 0, 0, 1)", + "icon-halo-blur": 0, + "icon-halo-color": "rgba(255, 255, 255, 1)", + "icon-halo-width": 0, + "icon-opacity": 1, + "text-color": "rgba(48, 48, 48, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 12, + 1.5, + 18, + 3, + ], + "text-opacity": 1, + }, + }, + { + id: "peaks_rank1", + type: "symbol", + source: "swissmaptiles", + "source-layer": "mountain_peak", + minzoom: 9, + maxzoom: 24, + filter: [ + "all", + ["==", "rank", 1], + ["!in", "class", "rocky_knoll", "saddle", "mountain_pass"], + ], + layout: { + "icon-allow-overlap": false, + "icon-anchor": "center", + "icon-ignore-placement": false, + "icon-image": [ + "step", + ["zoom"], + "dot_dark_grey_4", + 14, + "dot_dark_grey_6", + 18, + "dot_dark_grey_8", + ], + "icon-offset": [0, 0], + "icon-optional": false, + "icon-padding": 2, + "icon-pitch-alignment": "auto", + "icon-rotation-alignment": "auto", + "icon-size": 1, + "symbol-placement": "point", + "symbol-z-order": ["literal", "auto"], + "text-allow-overlap": false, + "text-anchor": "bottom-left", + "text-field": [ + "format", + translatedTextField, + {}, + "\n", + {}, + ["get", "ele"], + { "font-scale": 0.75 }, + ], + "text-font": ["Frutiger Neue Regular"], + "text-ignore-placement": false, + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-line-height": 1.15, + "text-max-width": 8, + "text-optional": false, + "text-padding": 10, + "text-radial-offset": 0.3, + "text-size": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + [ + "case", + ["<=", 4000, ["get", "ele"]], + 14, + ["<=", 3000, ["get", "ele"]], + 13, + ["<=", 2000, ["get", "ele"]], + 12, + 11, + ], + 18, + [ + "case", + ["<=", 4000, ["get", "ele"]], + 23, + ["<=", 3000, ["get", "ele"]], + 22, + ["<=", 2000, ["get", "ele"]], + 21, + 20, + ], + ], + visibility: "visible", + }, + paint: { + "icon-color": "rgba(0, 0, 0, 1)", + "icon-halo-blur": 0, + "icon-halo-color": "rgba(255, 255, 255, 1)", + "icon-halo-width": 0, + "icon-opacity": [ + "step", + ["zoom"], + 0, + 9, + ["case", ["<=", 3200, ["get", "ele"]], 1, 0], + 10, + 1, + ], + "text-color": "rgba(48, 48, 48, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + 1.5, + 18, + 3, + ], + "text-opacity": [ + "step", + ["zoom"], + 0, + 9, + ["case", ["<=", 3200, ["get", "ele"]], 1, 0], + 10, + 1, + ], + }, + }, + { + id: "place_other", + type: "symbol", + source: "swissmaptiles", + "source-layer": "place", + minzoom: 11, + maxzoom: 24, + filter: [ + "all", + [ + "!in", + "class", + "continent", + "country", + "state", + "city", + "town", + "village", + "hamlet", + "isolated_dwelling", + ], + ], + layout: { + "icon-optional": false, + "icon-size": 1, + "symbol-sort-key": ["to-number", ["get", "rank"]], + "symbol-z-order": ["literal", "auto"], + "text-anchor": "center", + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Medium"], + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-max-width": 10, + "text-offset": ["literal", [0.3, 0.2]], + "text-padding": 20, + "text-size": [ + "interpolate", + ["cubic-bezier", 0.5, 0.1, 0.7, 1], + ["zoom"], + 4, + 6, + 16, + 20, + ], + "text-transform": "none", + visibility: "visible", + }, + paint: { + "icon-opacity": [ + "step", + ["zoom"], + 0, + 11, + ["case", [">", 18, ["get", "rank"]], 1, 0], + 13, + 1, + 14, + 0, + ], + "text-color": "rgba(64, 64, 64, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["cubic-bezier", 0, 0.75, 0.25, 1], + ["zoom"], + 12, + 0, + 16, + 2, + ], + "text-opacity": [ + "step", + ["zoom"], + 0, + 11, + ["case", [">", 18, ["get", "rank"]], 1, 0], + 13, + 1, + ], + }, + }, + { + id: "poi_rank1", + type: "symbol", + source: "swissmaptiles", + "source-layer": "poi", + minzoom: 14, + filter: [ + "all", + ["in", "subclass", "castle", "station"], + ["in", "class", "castle", "railway"], + ], + layout: { + "icon-image": [ + "match", + ["get", "subclass"], + "station", + "square_red", + "castle", + "castle_grey", + "", + ], + "icon-size": 1, + "symbol-avoid-edges": true, + "text-anchor": [ + "match", + ["get", "subclass"], + ["castle"], + "left", + "station", + "bottom-left", + "center", + ], + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Regular"], + "text-justify": "left", + "text-max-width": 10, + "text-offset": [ + "match", + ["get", "subclass"], + "station", + ["literal", [0.5, 0.15]], + ["literal", [0.8, 0.15]], + ], + "text-optional": false, + "text-padding": 10, + "text-size": ["interpolate", ["linear"], ["zoom"], 13, 13, 18, 20], + visibility: "visible", + }, + paint: { + "text-color": [ + "match", + ["get", "subclass"], + "station", + "rgba(255, 50, 50, 1)", + "rgba(48, 48, 48, 1)", + ], + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 1, + 17, + 2, + ], + "text-opacity": 1, + }, + }, + { + id: "place_hamlet_isolated_dwelling", + type: "symbol", + source: "swissmaptiles", + "source-layer": "place", + minzoom: 11, + maxzoom: 24, + filter: ["all", ["in", "class", "hamlet", "isolated_dwelling"]], + layout: { + "icon-image": [ + "step", + ["zoom"], + "circle_dark_grey_4", + 12, + "circle_dark_grey_6", + ], + "icon-optional": false, + "icon-size": 1, + "symbol-sort-key": ["to-number", ["get", "rank"]], + "symbol-z-order": ["literal", "auto"], + "text-anchor": ["literal", "bottom-left"], + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Medium"], + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-max-width": 10, + "text-offset": ["literal", [0.3, 0.2]], + "text-padding": [ + "interpolate", + ["linear"], + ["zoom"], + 10, + 2, + 13, + 2, + 14, + 0, + ], + "text-size": [ + "interpolate", + ["cubic-bezier", 0.5, 0.1, 0.7, 1], + ["zoom"], + 4, + 6, + 16, + 18, + ], + "text-transform": "none", + visibility: "visible", + }, + paint: { + "icon-opacity": [ + "step", + ["zoom"], + 0, + 11, + ["case", [">", 30, ["get", "rank"]], 1, 0], + 13, + ["case", [">", 31, ["get", "rank"]], 1, 0], + 14, + 0, + ], + "text-color": "rgba(64, 64, 64, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["cubic-bezier", 0, 0.75, 0.25, 1], + ["zoom"], + 12, + 0, + 16, + 2, + ], + "text-opacity": [ + "step", + ["zoom"], + 0, + 11, + ["case", [">", 30, ["get", "rank"]], 1, 0], + 13, + ["case", [">", 31, ["get", "rank"]], 1, 0], + 14, + 1, + ], + }, + }, + { + id: "place_village", + type: "symbol", + source: "swissmaptiles", + "source-layer": "place", + minzoom: 7, + maxzoom: 18, + filter: ["all", ["==", "class", "village"]], + layout: { + "icon-image": [ + "step", + ["zoom"], + "circle_dark_grey_4", + 6, + "circle_dark_grey_4", + 8, + "circle_dark_grey_6", + 10, + "circle_dark_grey_8", + 12, + "circle_dark_grey_10", + ], + "icon-optional": false, + "icon-size": 1, + "symbol-sort-key": ["to-number", ["get", "rank"]], + "symbol-z-order": ["literal", "auto"], + "text-anchor": ["literal", "bottom-left"], + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Medium"], + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-max-width": 10, + "text-offset": ["literal", [0.4, 0.2]], + "text-optional": false, + "text-padding": 20, + "text-size": [ + "interpolate", + ["cubic-bezier", 0.5, 0.1, 0.7, 1], + ["zoom"], + 4, + 6, + 10, + 16, + 16, + 28, + ], + "text-transform": "none", + visibility: "visible", + }, + paint: { + "icon-opacity": ["step", ["zoom"], 1, 13, 0], + "text-color": "rgba(64, 64, 64, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["cubic-bezier", 0, 0.75, 0.25, 1], + ["zoom"], + 12, + 0, + 16, + 2, + ], + "text-opacity": 1, + }, + }, + { + id: "aerodrome_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "aerodrome_label", + minzoom: 11, + filter: ["all", ["!=", "class", "helipad"]], + layout: { + "icon-anchor": "center", + "icon-image": [ + "match", + ["get", "class"], + "international", + "airplane_large_grey", + "regional", + "airplane_medium_grey", + "other", + "airplane_small_grey", + "helipad", + "helicopter_grey", + "", + ], + "icon-size": ["interpolate", ["linear"], ["zoom"], 11, 0.7, 14, 1], + "text-anchor": "left", + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Regular"], + "text-justify": "center", + "text-offset": [ + "match", + ["get", "class"], + "helipad", + ["literal", [0.9, 0.2]], + ["literal", [0.9, 0]], + ], + "text-padding": 2, + "text-size": [ + "interpolate", + ["linear"], + ["zoom"], + 11, + [ + "match", + ["get", "class"], + "international", + 16, + "regional", + 16, + 12, + ], + 14, + [ + "match", + ["get", "class"], + "international", + 20, + "regional", + 18, + 16, + ], + ], + "text-transform": "none", + }, + paint: { + "icon-opacity": ["literal", 1], + "text-color": "rgba(64, 64, 64, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.8)", + "text-halo-width": [ + "interpolate", + ["linear"], + ["zoom"], + 14, + 1, + 17, + 2, + ], + "text-opacity": 1, + }, + }, + { + id: "water_name_line_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "water_name", + filter: [ + "all", + ["==", "$type", "LineString"], + ["!=", "class", "lake_part"], + ], + layout: { + "symbol-avoid-edges": false, + "symbol-placement": "line-center", + "symbol-spacing": { + stops: [ + [10, 250], + [13, 950], + ], + }, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Italic"], + "text-ignore-placement": false, + "text-keep-upright": true, + "text-letter-spacing": 0.15, + "text-max-width": 99999, + "text-padding": 2, + "text-pitch-alignment": "map", + "text-rotation-alignment": "map", + "text-size": ["interpolate", ["linear"], ["zoom"], 10, 14, 16, 24], + }, + paint: { + "text-color": "rgba(20, 136, 205, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": 1, + }, + }, + { + id: "place_town", + type: "symbol", + source: "swissmaptiles", + "source-layer": "place", + minzoom: 6, + maxzoom: 16, + filter: ["all", ["==", "class", "town"]], + layout: { + "icon-image": [ + "step", + ["zoom"], + "circle_dark_grey_4", + 6, + "circle_dark_grey_6", + 8, + "circle_dark_grey_8", + 10, + "circle_dark_grey_10", + 12, + "circle_dark_grey_12", + ], + "icon-optional": false, + "icon-size": 1, + "symbol-placement": "point", + "symbol-sort-key": ["to-number", ["get", "rank"]], + "symbol-z-order": ["literal", "auto"], + "text-anchor": ["literal", "bottom-left"], + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Bold"], + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-max-width": 10, + "text-offset": ["literal", [0.35, 0.1]], + "text-padding": 10, + "text-size": [ + "interpolate", + ["cubic-bezier", 0.5, 0.1, 0.7, 1], + ["zoom"], + 4, + 8, + 16, + 32, + ], + "text-transform": "uppercase", + visibility: "visible", + }, + paint: { + "icon-opacity": ["step", ["zoom"], 1, 12, 0], + "text-color": "rgba(64, 64, 64, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["cubic-bezier", 0, 0.75, 0.25, 1], + ["zoom"], + 12, + 0, + 16, + 3, + ], + "text-opacity": 1, + }, + }, + { + id: "park_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "park", + minzoom: 8, + filter: [ + "all", + ["in", "class", "national_park"], + ["==", "$type", "Point"], + ], + layout: { + "symbol-z-order": ["literal", "auto"], + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Regular"], + "text-padding": ["interpolate", ["linear"], ["zoom"], 10, 2, 14, 10], + "text-size": [ + "interpolate", + ["cubic-bezier", 0.5, 0.1, 0.7, 1], + ["zoom"], + 8, + 14, + 16, + 28, + ], + }, + paint: { + "text-color": "rgba(70, 130, 25, 0.9)", + "text-halo-blur": 1, + "text-halo-color": "rgba(255, 255, 255, 0.8)", + "text-halo-width": 1, + }, + }, + { + id: "area_name_massif_label", + type: "symbol", + source: "swissmaptiles", + "source-layer": "area_name", + minzoom: 11, + filter: ["all", ["==", "$type", "Point"], ["in", "subclass", "massif"]], + layout: { + "symbol-avoid-edges": true, + "symbol-placement": "point", + "symbol-spacing": { + stops: [ + [12, 250], + [14, 550], + ], + }, + "symbol-z-order": "auto", + "text-allow-overlap": false, + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Regular"], + "text-ignore-placement": false, + "text-keep-upright": true, + "text-letter-spacing": 0.07, + "text-max-width": 99999, + "text-pitch-alignment": "viewport", + "text-rotation-alignment": "viewport", + "text-size": ["interpolate", ["linear"], ["zoom"], 10, 14, 16, 23], + }, + paint: { + "text-color": "rgba(48, 48, 48, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": 1, + }, + }, + { + id: "place_city", + type: "symbol", + source: "swissmaptiles", + "source-layer": "place", + minzoom: 2, + maxzoom: 14, + filter: ["all", ["==", "class", "city"]], + layout: { + "icon-image": [ + "step", + ["zoom"], + "dot_circle_dark_grey_6", + 6, + "dot_circle_dark_grey_8", + 8, + "circle_circle_dark_grey_10", + 10, + "circle_circle_dark_grey_12", + 12, + "circle_circle_dark_grey_12", + ], + "icon-optional": false, + "icon-size": 1, + "symbol-sort-key": ["to-number", ["get", "rank"]], + "symbol-z-order": ["literal", "auto"], + "text-anchor": "bottom-left", + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Bold"], + "text-justify": "auto", + "text-letter-spacing": 0.025, + "text-max-width": 10, + "text-offset": ["literal", [0.35, 0.1]], + "text-padding": 10, + "text-size": [ + "interpolate", + ["cubic-bezier", 0.5, 0.1, 0.7, 1], + ["zoom"], + 1, + 11, + 4, + 12, + 16, + 48, + ], + "text-transform": "uppercase", + visibility: "visible", + }, + paint: { + "icon-opacity": ["step", ["zoom"], 1, 11, 0], + "text-color": "rgba(64, 64, 64, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(242, 242, 242, 0.6)", + "text-halo-width": [ + "interpolate", + ["cubic-bezier", 0, 0.75, 0.25, 1], + ["zoom"], + 12, + 0, + 16, + 3, + ], + "text-opacity": 1, + }, + }, + { + id: "place_country", + type: "symbol", + source: "swissmaptiles", + "source-layer": "place", + minzoom: 0, + maxzoom: 7, + filter: ["all", ["in", "class", "country"], ["in", "iso_a2", "CH"]], + layout: { + "text-field": translatedTextField, + "text-font": ["Frutiger Neue Condensed Regular"], + "text-letter-spacing": 0.12, + "text-max-width": 10, + "text-size": ["interpolate", ["linear"], ["zoom"], 1, 12, 6, 16], + "text-transform": "uppercase", + visibility: "visible", + }, + paint: { + "text-color": "rgba(145, 70, 145, 0.9)", + "text-halo-blur": 1, + "text-halo-color": "rgba(255, 255, 255, 0.8)", + "text-halo-width": 1, + "text-opacity": ["interpolate", ["linear"], ["zoom"], 6, 1, 7, 0], + }, + }, + ], + id: "b484873e-ac8c-45d6-a562-5402ab0f4985", + }; +}; diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx index 0e718746d..8616881e1 100644 --- a/app/charts/map/map.tsx +++ b/app/charts/map/map.tsx @@ -6,21 +6,14 @@ import { StaticMap } from "react-map-gl"; import { Box, Button } from "theme-ui"; import { GeoFeature, GeoPoint } from "../../domain/data"; import { Icon, IconName } from "../../icons"; +import { useLocale } from "../../src"; import { convertHexToRgbArray } from "../shared/colors"; import { useChartState } from "../shared/use-chart-state"; import { useInteraction } from "../shared/use-interaction"; +import { getBaseLayerStyle } from "./get-base-layer-style"; import { MapState } from "./map-state"; import { useMapTooltip } from "./map-tooltip"; -type TileData = { - z: number; - x: number; - y: number; - url: string; - bbox: { west: number; north: number; east: number; south: number }; - signal: { aborted: boolean }; -}; - const MIN_ZOOM = 3; const MAX_ZOOM = 13; @@ -102,6 +95,8 @@ export const MapComponent = () => { areaLayer, symbolLayer, } = useChartState() as MapState; + const locale = useLocale(); + const [, dispatchInteraction] = useInteraction(); const [, setMapTooltipType] = useMapTooltip(); @@ -156,6 +151,8 @@ export const MapComponent = () => { [areaLayer.hierarchyLevel, features.areaLayer?.shapes] ); + const baseLayerStyle = useMemo(() => getBaseLayerStyle({ locale }), [locale]); + return ( { { getCursor={() => "default"} > {showBaseLayer && ( - + )} {areaLayer.show && ( From e8cbe67b26ad9bd128731a7158e42481319a99ac Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 15 Feb 2022 13:39:28 +0100 Subject: [PATCH 4/7] chore: Update yarn.lock --- yarn.lock | 185 +++++++++++++++++++++--------------------------------- 1 file changed, 73 insertions(+), 112 deletions(-) diff --git a/yarn.lock b/yarn.lock index 790df57c5..912020d19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -111,39 +111,17 @@ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.8.tgz#31560f9f29fdf1868de8cb55049538a1b9732a60" integrity sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q== -"@babel/core@7.12.9": - version "7.12.9" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8" - integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ== - dependencies: - "@babel/code-frame" "^7.10.4" - "@babel/generator" "^7.12.5" - "@babel/helper-module-transforms" "^7.12.1" - "@babel/helpers" "^7.12.5" - "@babel/parser" "^7.12.7" - "@babel/template" "^7.12.7" - "@babel/traverse" "^7.12.9" - "@babel/types" "^7.12.7" - convert-source-map "^1.7.0" - debug "^4.1.0" - gensync "^1.0.0-beta.1" - json5 "^2.1.2" - lodash "^4.17.19" - resolve "^1.3.2" - semver "^5.4.1" - source-map "^0.5.0" - -"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7": - version "7.17.0" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.0.tgz#16b8772b0a567f215839f689c5ded6bb20e864d5" - integrity sha512-x/5Ea+RO5MvF9ize5DeVICJoVrNv0Mi2RnIABrZEKYvPEpldXwauPkgvYA17cKa6WpU3LoYvYbuEMFtSNFsarA== +"@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7": + version "7.17.2" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.2.tgz#2c77fc430e95139d816d39b113b31bf40fb22337" + integrity sha512-R3VH5G42VSDolRHyUO4V2cfag8WHcZyxdq5Z/m8Xyb92lW/Erm/6kM+XtRFGf3Mulre3mveni2NHfEUws8wSvw== dependencies: "@ampproject/remapping" "^2.0.0" "@babel/code-frame" "^7.16.7" "@babel/generator" "^7.17.0" "@babel/helper-compilation-targets" "^7.16.7" "@babel/helper-module-transforms" "^7.16.7" - "@babel/helpers" "^7.17.0" + "@babel/helpers" "^7.17.2" "@babel/parser" "^7.17.0" "@babel/template" "^7.16.7" "@babel/traverse" "^7.17.0" @@ -163,15 +141,6 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/generator@^7.12.5", "@babel/generator@^7.17.0": - version "7.17.0" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.0.tgz#7bd890ba706cd86d3e2f727322346ffdbf98f65e" - integrity sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw== - dependencies: - "@babel/types" "^7.17.0" - jsesc "^2.5.1" - source-map "^0.5.0" - "@babel/generator@^7.16.8": version "7.16.8" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.8.tgz#359d44d966b8cd059d543250ce79596f792f2ebe" @@ -181,6 +150,15 @@ jsesc "^2.5.1" source-map "^0.5.0" +"@babel/generator@^7.17.0": + version "7.17.0" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.0.tgz#7bd890ba706cd86d3e2f727322346ffdbf98f65e" + integrity sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw== + dependencies: + "@babel/types" "^7.17.0" + jsesc "^2.5.1" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61" @@ -294,20 +272,6 @@ dependencies: "@babel/types" "^7.16.7" -"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.16.7": - version "7.16.7" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz#7665faeb721a01ca5327ddc6bba15a5cb34b6a41" - integrity sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng== - dependencies: - "@babel/helper-environment-visitor" "^7.16.7" - "@babel/helper-module-imports" "^7.16.7" - "@babel/helper-simple-access" "^7.16.7" - "@babel/helper-split-export-declaration" "^7.16.7" - "@babel/helper-validator-identifier" "^7.16.7" - "@babel/template" "^7.16.7" - "@babel/traverse" "^7.16.7" - "@babel/types" "^7.16.7" - "@babel/helper-module-transforms@^7.14.5": version "7.15.8" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz#d8c0e75a87a52e374a8f25f855174786a09498b2" @@ -322,6 +286,20 @@ "@babel/traverse" "^7.15.4" "@babel/types" "^7.15.6" +"@babel/helper-module-transforms@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz#7665faeb721a01ca5327ddc6bba15a5cb34b6a41" + integrity sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng== + dependencies: + "@babel/helper-environment-visitor" "^7.16.7" + "@babel/helper-module-imports" "^7.16.7" + "@babel/helper-simple-access" "^7.16.7" + "@babel/helper-split-export-declaration" "^7.16.7" + "@babel/helper-validator-identifier" "^7.16.7" + "@babel/template" "^7.16.7" + "@babel/traverse" "^7.16.7" + "@babel/types" "^7.16.7" + "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz#f310a5121a3b9cc52d9ab19122bd729822dee171" @@ -404,7 +382,7 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23" integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ== -"@babel/helpers@^7.12.5", "@babel/helpers@^7.17.0": +"@babel/helpers@^7.17.0": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.0.tgz#79cdf6c66a579f3a7b5e739371bc63ca0306886b" integrity sha512-Xe/9NFxjPwELUvW2dsukcMZIp6XwPSbI4ojFBJuX5ramHuVE22SVcZIwqzdWo5uCgeTXW8qV97lMvSOjq+1+nQ== @@ -413,6 +391,15 @@ "@babel/traverse" "^7.17.0" "@babel/types" "^7.17.0" +"@babel/helpers@^7.17.2": + version "7.17.2" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.2.tgz#23f0a0746c8e287773ccd27c14be428891f63417" + integrity sha512-0Qu7RLR1dILozr/6M0xgj+DFPmi6Bnulgm9M8BVa9ZCWxDqlSnqt3cf8IDPB5m45sVXUZ0kuQAgUrdSFFH79fQ== + dependencies: + "@babel/template" "^7.16.7" + "@babel/traverse" "^7.17.0" + "@babel/types" "^7.17.0" + "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9" @@ -431,12 +418,7 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@7.12.16": - version "7.12.16" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4" - integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw== - -"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.13", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.16.10", "@babel/parser@^7.16.7", "@babel/parser@^7.17.0", "@babel/parser@^7.7.2": +"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.16.10", "@babel/parser@^7.16.7", "@babel/parser@^7.17.0", "@babel/parser@^7.7.2": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.0.tgz#f0ac33eddbe214e4105363bb17c3341c5ffcc43c" integrity sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw== @@ -758,15 +740,6 @@ resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.14.6.tgz#9070bd3cc2bb997d42e14bdf3b0d24a11b00242b" integrity sha512-oAoSp82jhJFnXKybKTOj5QF04XxiDRyiiqrFToiU1udlBXuZoADlPmmnOcuqBrZxSNNUjzJIVK8vt838Qoqjxg== -"@babel/template@^7.12.7", "@babel/template@^7.16.7": - version "7.16.7" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" - integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w== - dependencies: - "@babel/code-frame" "^7.16.7" - "@babel/parser" "^7.16.7" - "@babel/types" "^7.16.7" - "@babel/template@^7.15.4", "@babel/template@^7.3.3": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194" @@ -776,6 +749,15 @@ "@babel/parser" "^7.15.4" "@babel/types" "^7.15.4" +"@babel/template@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" + integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w== + dependencies: + "@babel/code-frame" "^7.16.7" + "@babel/parser" "^7.16.7" + "@babel/types" "^7.16.7" + "@babel/traverse@7.12.13": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.13.tgz#689f0e4b4c08587ad26622832632735fb8c4e0c0" @@ -806,35 +788,35 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.12.9", "@babel/traverse@^7.17.0": - version "7.17.0" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.0.tgz#3143e5066796408ccc880a33ecd3184f3e75cd30" - integrity sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg== +"@babel/traverse@^7.16.7": + version "7.16.10" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f" + integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw== dependencies: "@babel/code-frame" "^7.16.7" - "@babel/generator" "^7.17.0" + "@babel/generator" "^7.16.8" "@babel/helper-environment-visitor" "^7.16.7" "@babel/helper-function-name" "^7.16.7" "@babel/helper-hoist-variables" "^7.16.7" "@babel/helper-split-export-declaration" "^7.16.7" - "@babel/parser" "^7.17.0" - "@babel/types" "^7.17.0" + "@babel/parser" "^7.16.10" + "@babel/types" "^7.16.8" debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.16.7": - version "7.16.10" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f" - integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw== +"@babel/traverse@^7.17.0": + version "7.17.0" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.0.tgz#3143e5066796408ccc880a33ecd3184f3e75cd30" + integrity sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg== dependencies: "@babel/code-frame" "^7.16.7" - "@babel/generator" "^7.16.8" + "@babel/generator" "^7.17.0" "@babel/helper-environment-visitor" "^7.16.7" "@babel/helper-function-name" "^7.16.7" "@babel/helper-hoist-variables" "^7.16.7" "@babel/helper-split-export-declaration" "^7.16.7" - "@babel/parser" "^7.16.10" - "@babel/types" "^7.16.8" + "@babel/parser" "^7.17.0" + "@babel/types" "^7.17.0" debug "^4.1.0" globals "^11.1.0" @@ -863,14 +845,6 @@ "@babel/helper-validator-identifier" "^7.14.9" to-fast-properties "^2.0.0" -"@babel/types@^7.12.7", "@babel/types@^7.17.0": - version "7.17.0" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b" - integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw== - dependencies: - "@babel/helper-validator-identifier" "^7.16.7" - to-fast-properties "^2.0.0" - "@babel/types@^7.16.7", "@babel/types@^7.16.8": version "7.16.8" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1" @@ -879,6 +853,14 @@ "@babel/helper-validator-identifier" "^7.16.7" to-fast-properties "^2.0.0" +"@babel/types@^7.17.0": + version "7.17.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b" + integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw== + dependencies: + "@babel/helper-validator-identifier" "^7.16.7" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -8091,7 +8073,7 @@ fwd-stream@^1.0.4: dependencies: readable-stream "~1.0.26-4" -gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2: +gensync@^1.0.0-beta.2: version "1.0.0-beta.2" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== @@ -9058,13 +9040,6 @@ is-core-module@^2.2.0, is-core-module@^2.4.0: dependencies: has "^1.0.3" -is-core-module@^2.8.1: - version "2.8.1" - resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211" - integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA== - dependencies: - has "^1.0.3" - is-date-object@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.4.tgz#550cfcc03afada05eea3dd30981c7b09551f73e5" @@ -11747,7 +11722,7 @@ path-key@^3.0.0, path-key@^3.1.0: resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== -path-parse@^1.0.6, path-parse@^1.0.7: +path-parse@^1.0.6: version "1.0.7" resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== @@ -12884,15 +12859,6 @@ resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.1 is-core-module "^2.2.0" path-parse "^1.0.6" -resolve@^1.3.2: - version "1.22.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" - integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw== - dependencies: - is-core-module "^2.8.1" - path-parse "^1.0.7" - supports-preserve-symlinks-flag "^1.0.0" - resolve@^2.0.0-next.3: version "2.0.0-next.3" resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46" @@ -13118,7 +13084,7 @@ semver-compare@^1.0.0: resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc" integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w= -"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.6.0: +"semver@2 || 3 || 4 || 5", semver@^5.6.0: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== @@ -13882,11 +13848,6 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" -supports-preserve-symlinks-flag@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" - integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== - svg-parser@^2.0.2: version "2.0.4" resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5" From 0985e38ff5f07a45fcde5e895bb9526734ca77cb Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 15 Feb 2022 13:52:46 +0100 Subject: [PATCH 5/7] refactor: Remove preventStyleDiffing from StaticMap --- app/charts/map/map.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx index 8616881e1..a0ac30539 100644 --- a/app/charts/map/map.tsx +++ b/app/charts/map/map.tsx @@ -176,7 +176,7 @@ export const MapComponent = () => { getCursor={() => "default"} > {showBaseLayer && ( - + )} {areaLayer.show && ( From 6a18a4a0117b207b48490bb903a519d21853b087 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 15 Feb 2022 16:58:23 +0100 Subject: [PATCH 6/7] fix: Base Layer translations --- app/charts/map/get-base-layer-style.ts | 55 ++++++++++++++------------ app/charts/map/map.tsx | 4 +- 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/app/charts/map/get-base-layer-style.ts b/app/charts/map/get-base-layer-style.ts index 2adf71d56..185cb3fb6 100644 --- a/app/charts/map/get-base-layer-style.ts +++ b/app/charts/map/get-base-layer-style.ts @@ -1,12 +1,17 @@ import { Locale } from "../../locales/locales"; +const BORDER_COLOR = { + lowZoom: "hsl(0, 0%, 50%)", + highZoom: "hsl(0, 0%, 75%)", +}; + interface Props { locale: Locale; } export const getBaseLayerStyle = (props: Props) => { const { locale } = props; - const translatedTextField = `{name:${locale === "en" ? "latin" : locale}}`; + const languageTag = `name:${locale === "en" ? "latin" : locale}`; return { version: 8, @@ -1289,8 +1294,8 @@ export const getBaseLayerStyle = (props: Props) => { "line-blur": 1, "line-color": { stops: [ - [6, "hsl(0, 0%, 50%)"], - [9, "hsl(0, 0%, 75%)"], + [6, BORDER_COLOR.lowZoom], + [9, BORDER_COLOR.highZoom], ], }, "line-opacity": { @@ -4002,7 +4007,7 @@ export const getBaseLayerStyle = (props: Props) => { "symbol-spacing": 350, "symbol-z-order": "auto", "text-allow-overlap": false, - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Italic"], "text-ignore-placement": false, "text-keep-upright": true, @@ -4036,7 +4041,7 @@ export const getBaseLayerStyle = (props: Props) => { "symbol-spacing": 650, "symbol-z-order": "auto", "text-allow-overlap": false, - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Italic"], "text-ignore-placement": false, "text-keep-upright": true, @@ -4115,7 +4120,7 @@ export const getBaseLayerStyle = (props: Props) => { ], "symbol-z-order": "auto", "text-anchor": "center", - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Condensed Regular"], "text-keep-upright": true, "text-letter-spacing": 0.1, @@ -4329,7 +4334,7 @@ export const getBaseLayerStyle = (props: Props) => { }, "symbol-z-order": "auto", "text-allow-overlap": false, - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Italic"], "text-ignore-placement": false, "text-keep-upright": true, @@ -4368,7 +4373,7 @@ export const getBaseLayerStyle = (props: Props) => { }, "symbol-z-order": "auto", "text-allow-overlap": false, - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Italic"], "text-ignore-placement": false, "text-keep-upright": true, @@ -4482,7 +4487,7 @@ export const getBaseLayerStyle = (props: Props) => { "left", "center", ], - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Regular"], "text-justify": "left", "text-max-width": 10, @@ -4665,7 +4670,7 @@ export const getBaseLayerStyle = (props: Props) => { "center", ], ], - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Regular"], "text-justify": "left", "text-letter-spacing": ["match", ["get", "class"], ["park"], 0.05, 0], @@ -4838,7 +4843,7 @@ export const getBaseLayerStyle = (props: Props) => { "text-anchor": "center", "text-field": [ "format", - translatedTextField, + ["get", languageTag], {}, "\n", {}, @@ -4948,7 +4953,7 @@ export const getBaseLayerStyle = (props: Props) => { "text-anchor": "bottom-left", "text-field": [ "format", - translatedTextField, + ["get", languageTag], {}, "\n", {}, @@ -5054,7 +5059,7 @@ export const getBaseLayerStyle = (props: Props) => { "text-anchor": "bottom-left", "text-field": [ "format", - translatedTextField, + ["get", languageTag], {}, "\n", {}, @@ -5158,7 +5163,7 @@ export const getBaseLayerStyle = (props: Props) => { "text-anchor": "bottom-left", "text-field": [ "format", - translatedTextField, + ["get", languageTag], {}, "\n", {}, @@ -5268,7 +5273,7 @@ export const getBaseLayerStyle = (props: Props) => { "symbol-sort-key": ["to-number", ["get", "rank"]], "symbol-z-order": ["literal", "auto"], "text-anchor": "center", - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Medium"], "text-justify": "auto", "text-letter-spacing": 0.025, @@ -5354,7 +5359,7 @@ export const getBaseLayerStyle = (props: Props) => { "bottom-left", "center", ], - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Regular"], "text-justify": "left", "text-max-width": 10, @@ -5413,7 +5418,7 @@ export const getBaseLayerStyle = (props: Props) => { "symbol-sort-key": ["to-number", ["get", "rank"]], "symbol-z-order": ["literal", "auto"], "text-anchor": ["literal", "bottom-left"], - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Medium"], "text-justify": "auto", "text-letter-spacing": 0.025, @@ -5506,7 +5511,7 @@ export const getBaseLayerStyle = (props: Props) => { "symbol-sort-key": ["to-number", ["get", "rank"]], "symbol-z-order": ["literal", "auto"], "text-anchor": ["literal", "bottom-left"], - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Medium"], "text-justify": "auto", "text-letter-spacing": 0.025, @@ -5569,7 +5574,7 @@ export const getBaseLayerStyle = (props: Props) => { ], "icon-size": ["interpolate", ["linear"], ["zoom"], 11, 0.7, 14, 1], "text-anchor": "left", - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Regular"], "text-justify": "center", "text-offset": [ @@ -5645,7 +5650,7 @@ export const getBaseLayerStyle = (props: Props) => { }, "symbol-z-order": "auto", "text-allow-overlap": false, - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Italic"], "text-ignore-placement": false, "text-keep-upright": true, @@ -5691,7 +5696,7 @@ export const getBaseLayerStyle = (props: Props) => { "symbol-sort-key": ["to-number", ["get", "rank"]], "symbol-z-order": ["literal", "auto"], "text-anchor": ["literal", "bottom-left"], - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Bold"], "text-justify": "auto", "text-letter-spacing": 0.025, @@ -5740,7 +5745,7 @@ export const getBaseLayerStyle = (props: Props) => { ], layout: { "symbol-z-order": ["literal", "auto"], - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Regular"], "text-padding": ["interpolate", ["linear"], ["zoom"], 10, 2, 14, 10], "text-size": [ @@ -5778,7 +5783,7 @@ export const getBaseLayerStyle = (props: Props) => { }, "symbol-z-order": "auto", "text-allow-overlap": false, - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Regular"], "text-ignore-placement": false, "text-keep-upright": true, @@ -5822,7 +5827,7 @@ export const getBaseLayerStyle = (props: Props) => { "symbol-sort-key": ["to-number", ["get", "rank"]], "symbol-z-order": ["literal", "auto"], "text-anchor": "bottom-left", - "text-field": translatedTextField, + "text-field": ["get", languageTag], "text-font": ["Frutiger Neue Condensed Bold"], "text-justify": "auto", "text-letter-spacing": 0.025, @@ -5869,7 +5874,7 @@ export const getBaseLayerStyle = (props: Props) => { maxzoom: 7, filter: ["all", ["in", "class", "country"], ["in", "iso_a2", "CH"]], layout: { - "text-field": translatedTextField, + "text-field": `{${languageTag}}`, "text-font": ["Frutiger Neue Condensed Regular"], "text-letter-spacing": 0.12, "text-max-width": 10, diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx index a0ac30539..9bb7a0baf 100644 --- a/app/charts/map/map.tsx +++ b/app/charts/map/map.tsx @@ -175,9 +175,7 @@ export const MapComponent = () => { controller={{ type: MapController }} getCursor={() => "default"} > - {showBaseLayer && ( - - )} + {showBaseLayer && } {areaLayer.show && ( <> From 77e7471b9a2188333f86f2cecce5c655d1fa06b4 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 16 Feb 2022 11:52:38 +0100 Subject: [PATCH 7/7] docs: Update changelog --- CHANGELOG.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f57f6e1c..08c118fb1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Page have improved titles now, depending on where you are on the application. Helpful when you have multiple tabs with visualize.admin or when you bookmark things. [#331](https://github.com/visualize-admin/visualization-tool/pull/331) - Theme and organization navigation counts take into account the search field now. [#329](https://github.com/visualize-admin/visualization-tool/pull/329) -- Added rivers and lakes through vector layer [#309](https://github.com/visualize-admin/visualization-tool/pull/309) +- Implemented a new base layer which makes use of vector tiles [#351](https://github.com/visualize-admin/visualization-tool/pull/351) - Improved chart editing navigation [#337](https://github.com/visualize-admin/visualization-tool/pull/337) - Improved chart publish action buttons [#337](https://github.com/visualize-admin/visualization-tool/pull/337) @@ -25,9 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Maps -It is now possible to use maps as a new visualization type. Quantities can be encoded -as a scatterplot on the map. Datasets which have a shared dimension containing -geo coordinates can be charted on a map. +It is now possible to use maps as a new visualization type. Quantities can be encoded as a scatterplot on the map. Datasets which have GeoShapes or GeoCoordinates dimensions can be charted on a map. [#294](https://github.com/visualize-admin/visualization-tool/pull/294) [#289](https://github.com/visualize-admin/visualization-tool/pull/289) [#292](https://github.com/visualize-admin/visualization-tool/pull/292) [#286](https://github.com/visualize-admin/visualization-tool/pull/286) [#240](https://github.com/visualize-admin/visualization-tool/pull/240) [#293](https://github.com/visualize-admin/visualization-tool/pull/293) [#301](https://github.com/visualize-admin/visualization-tool/pull/301) [#302](https://github.com/visualize-admin/visualization-tool/pull/302)