diff --git a/app/UI.tsx b/app/UI.tsx index 1fe20250c..d3f5cf069 100644 --- a/app/UI.tsx +++ b/app/UI.tsx @@ -1,13 +1,15 @@ import closeIcon from '@/public/close-circle-stroke.svg' import Image from 'next/image' import { styled, css } from 'next-yak' -import { oceanColor } from './styles/france' +import { colors } from './styles/france' + +const oceanColor = colors.light.ocean export const MapContainer = styled.div` ${(p) => !p.$isMapLoaded ? css` - background: ${oceanColor}; + background: #71a0e9; ` : css` background: black; diff --git a/app/styles/france.ts b/app/styles/france.ts index 9655b2ae2..728ad8511 100644 --- a/app/styles/france.ts +++ b/app/styles/france.ts @@ -10,10 +10,66 @@ import { cycleHighwayLayers, cycleHighwayMaxZoom } from './cycleHighwayLayers' // // -const highwayColor = '#cebcbc' -const highwayOutlineColor = '#cebcbc' +export const colors = { + light: { + highway: '#cebcbc', + highwayOutline: '#cebcbc', + land: '#dbedb7', + residential: 'hsl(54, 45%, 91%)', + ocean: '#71a0e9', + background: '#dbedb7', + grass: '#c6ddaa', + sand: '#fbf4ab', + rock: '#d0cbbc', + glacier: '#ffffff', + wetland: '#61b6cb', + industrial: '#f7e7c7', + retail: '#ededed', + school: '#e8f4f7', + hospital: '#fdf0ed', + pedestrian: '#feecdf', + cemetery: '#e0e0e0', + park: '#94d2a5', + river: '#c2cff0', + railway: '#916BD4', + stateLabel: '#736e6c', + countryLabel: '#333333', + buildingFill: '#d1b7b7', + buildingOutline: '#d1c7c7', + }, + dark: { + highway: '#404040', + highwayOutline: '#505050', + land: '#202020', + residential: 'hsl(54, 15%, 15%)', + ocean: '#152238', + background: '#202020', + grass: '#3c4434', + sand: '#4d4936', + rock: '#3e3c38', + glacier: '#333333', + wetland: '#1e373d', + industrial: '#3d3a33', + retail: '#2d2d2d', + school: '#293436', + hospital: '#3d2e2c', + pedestrian: '#3d3936', + cemetery: '#2d2d2d', + park: '#2c3d31', + river: '#364066', + railway: '#2d2147', + stateLabel: '#a9a6a5', + countryLabel: '#cccccc', + buildingFill: '#3d3535', + buildingOutline: '#3d3b3b', + }, +} -export default function franceStyle(transportMode, noVariableTiles = false) { +export default function franceStyle( + transportMode, + noVariableTiles = false, + dark = false +) { const openmaptilesUrl = // see the protocol CartesProtocol !noVariableTiles ? 'cartes://hybrid' @@ -56,7 +112,7 @@ export default function franceStyle(transportMode, noVariableTiles = false) { url: 'pmtiles://' + pmtilesServerUrl + '/bathymetry.pmtiles', }, }, - layers: transportMode ? lightenLayers(layers) : layers, + layers: transportMode ? lightenLayers(layers(dark)) : layers(dark), // Voir nos villes juste avec les arbres //layers: layers.filter(({ id }) => id === 'Background' || id === 'Trees'), glyphs: getFetchUrlBase() + '/fonts/glyphs/{fontstack}/{range}.pbf', @@ -133,111 +189,110 @@ const hasNameExpression = [ export const name = 'name:fr' -export const oceanColor = '#71a0e9' -//'#6688dd' past color, darker. Could be cool to vary in the day, dawn color ? +export const getOceanColor = (dark) => + dark ? colors.dark.ocean : colors.light.ocean -const landColor = '#dbedb7', - residentialColor = 'hsl(54, 45%, 91%)' - -const layers = [ - { - id: 'Background', - type: 'background', - layout: { visibility: 'visible' }, - paint: { - 'background-color': { - base: 1, - stops: [ - [1, landColor], - [15, residentialColor], - ], +const layers = (dark) => { + const theme = dark ? colors.dark : colors.light + return [ + { + id: 'Background', + type: 'background', + layout: { visibility: 'visible' }, + paint: { + 'background-color': { + base: 1, + stops: [ + [1, theme.background], + [15, theme.residential], + ], + }, }, }, - }, - //https://github.com/wipfli/h3-landcover/blob/main/style.json - { - id: 'Grass-Bare-Snow', - type: 'fill', - source: 'landcover', - 'source-layer': 'landcover', - filter: ['==', ['get', 'kind'], 'Grass-Bare-Snow'], - layout: { - visibility: 'visible', - }, - paint: { - 'fill-color': '#b6dcc1', - 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], - }, - }, - { - id: 'Bare-Snow', - type: 'fill', - source: 'landcover', - 'source-layer': 'landcover', - filter: ['==', ['get', 'kind'], 'Bare-Snow'], - layout: { - visibility: 'visible', - }, - paint: { - 'fill-color': '#f3ede0', - 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], - }, - }, - { - id: 'Snow', - type: 'fill', - source: 'landcover', - 'source-layer': 'landcover', - filter: ['==', ['get', 'kind'], 'Snow'], - layout: { - visibility: 'visible', + //https://github.com/wipfli/h3-landcover/blob/main/style.json + { + id: 'Grass-Bare-Snow', + type: 'fill', + source: 'landcover', + 'source-layer': 'landcover', + filter: ['==', ['get', 'kind'], 'Grass-Bare-Snow'], + layout: { + visibility: 'visible', + }, + paint: { + 'fill-color': theme.grass, + 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], + }, }, - paint: { - 'fill-color': 'white', - 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], + { + id: 'Bare-Snow', + type: 'fill', + source: 'landcover', + 'source-layer': 'landcover', + filter: ['==', ['get', 'kind'], 'Bare-Snow'], + layout: { + visibility: 'visible', + }, + paint: { + 'fill-color': theme.rock, + 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], + }, }, - }, - { - id: 'Crops', - type: 'fill', - source: 'landcover', - 'source-layer': 'landcover', - filter: ['==', ['get', 'kind'], 'Crops'], - layout: { - visibility: 'visible', + { + id: 'Snow', + type: 'fill', + source: 'landcover', + 'source-layer': 'landcover', + filter: ['==', ['get', 'kind'], 'Snow'], + layout: { + visibility: 'visible', + }, + paint: { + 'fill-color': theme.glacier, + 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], + }, }, - paint: { - 'fill-color': '#d4e6b9', - 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], + { + id: 'Crops', + type: 'fill', + source: 'landcover', + 'source-layer': 'landcover', + filter: ['==', ['get', 'kind'], 'Crops'], + layout: { + visibility: 'visible', + }, + paint: { + 'fill-color': theme.grass, + 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], + }, }, - }, - { - id: 'Tree', - type: 'fill', - source: 'landcover', - 'source-layer': 'landcover', - filter: ['==', ['get', 'kind'], 'Tree'], - paint: { - 'fill-color': '#94d2a5', - 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], + { + id: 'Tree', + type: 'fill', + source: 'landcover', + 'source-layer': 'landcover', + filter: ['==', ['get', 'kind'], 'Tree'], + paint: { + 'fill-color': theme.park, + 'fill-opacity': ['interpolate', ['linear'], ['zoom'], 10, 1, 11, 0], + }, }, - }, - { - id: 'Wood', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landcover', - layout: { visibility: 'visible' }, - paint: { - //'fill-color': '#a8c884', + { + id: 'Wood', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landcover', + layout: { visibility: 'visible' }, + paint: { + //'fill-color': '#a8c884', - 'fill-color': '#94d2a5', // same as Tree, honestly don't really know what I'm doing here, just trying - 'fill-opacity': 0.4, + 'fill-color': '#94d2a5', // same as Tree, honestly don't really know what I'm doing here, just trying + 'fill-opacity': 0.4, + }, + metadata: {}, + filter: ['==', 'class', 'wood'], }, - metadata: {}, - filter: ['==', 'class', 'wood'], - }, - /* + /* * * Because of our choice to use our tiles for France, we have no ocean shapes * in our tiles. Hence we set the base fill as blue, and the land as green @@ -259,3296 +314,3330 @@ const layers = [ }, }, */ - { - id: 'Glacier', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landcover', - maxzoom: 24, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': 'hsl(0,0%,100%)', - 'fill-opacity': { - stops: [ - [0, 1], - [10, 0.7], - ], + { + id: 'Glacier', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landcover', + maxzoom: 24, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': 'hsl(0,0%,100%)', + 'fill-opacity': { + stops: [ + [0, 1], + [10, 0.7], + ], + }, + 'fill-antialias': true, + }, + filter: ['==', 'class', 'ice'], + }, + { + id: 'Airport zone', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'aeroway', + minzoom: 11, + layout: { visibility: 'visible' }, + paint: { 'fill-color': 'hsl(0,0%,93%)', 'fill-opacity': 1 }, + metadata: {}, + filter: ['==', '$type', 'Polygon'], + }, + { + id: 'Residential', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landuse', + minzoom: 5, + maxzoom: 22, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': { + base: 1, + stops: [ + [1, '#efede6'], + [16, theme.residential], + ], + }, }, - 'fill-antialias': true, + metadata: {}, + filter: [ + 'all', + ['in', 'class', 'residential', 'suburbs', 'neighbourhood'], + ], }, - filter: ['==', 'class', 'ice'], - }, - { - id: 'Airport zone', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'aeroway', - minzoom: 11, - layout: { visibility: 'visible' }, - paint: { 'fill-color': 'hsl(0,0%,93%)', 'fill-opacity': 1 }, - metadata: {}, - filter: ['==', '$type', 'Polygon'], - }, - { - id: 'Residential', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landuse', - minzoom: 5, - maxzoom: 22, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': { - base: 1, - stops: [ - [1, '#efede6'], - [16, residentialColor], - ], + { + id: 'Water', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'water', + layout: { visibility: 'visible' }, + paint: { + 'fill-color': theme.ocean, + 'fill-opacity': ['match', ['get', 'intermittent'], 1, 0.85, 1], + 'fill-antialias': true, }, - }, - metadata: {}, - filter: ['all', ['in', 'class', 'residential', 'suburbs', 'neighbourhood']], - }, - { - id: 'Water', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'water', - layout: { visibility: 'visible' }, - paint: { - 'fill-color': oceanColor, - 'fill-opacity': ['match', ['get', 'intermittent'], 1, 0.85, 1], - 'fill-antialias': true, - }, - metadata: {}, - filter: [ - 'any', - ['!has', 'intermittent'], - ['==', 'intermittent', 0], - //['==', 'class', 'ocean'], - ], - }, - { - id: 'water-depth', - type: 'fill', - source: 'bathymetry', - 'source-layer': 'bathymetry', - layout: {}, - paint: { - // cubic bezier is a four point curve for smooth and precise styling - // adjust the points to change the rate and intensity of interpolation - 'fill-color': [ - 'interpolate', - ['cubic-bezier', 0, 0.5, 1, 0.5], - ['get', 'amin'], - -9000, - '#260167', - 0, - oceanColor, + metadata: {}, + filter: [ + 'any', + ['!has', 'intermittent'], + ['==', 'intermittent', 0], + //['==', 'class', 'ocean'], ], }, - }, - - { - id: 'Rock', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landcover', - layout: { visibility: 'visible' }, - paint: { - 'fill-color': '#d0cbbc', - 'fill-opacity': 1, - 'fill-antialias': false, - }, - metadata: {}, - filter: ['==', 'class', 'rock'], - }, - { - id: 'Beach', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landcover', - layout: { visibility: 'visible' }, - paint: { - 'fill-color': '#fbf4ab', - 'fill-opacity': 1, - 'fill-antialias': false, - }, - metadata: {}, - filter: ['all', ['==', 'class', 'sand'], ['==', 'subclass', 'beach']], - }, - { - id: 'Wetland (medium scale)', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landcover', - layout: { - visibility: 'visible', - }, - paint: { - 'fill-color': '#61b6cb40', - 'fill-opacity': { - stops: [ - [7, 0.5], - [10, 1], + { + id: 'water-depth', + type: 'fill', + source: 'bathymetry', + 'source-layer': 'bathymetry', + layout: {}, + paint: { + // cubic bezier is a four point curve for smooth and precise styling + // adjust the points to change the rate and intensity of interpolation + 'fill-color': [ + 'interpolate', + ['cubic-bezier', 0, 0.5, 1, 0.5], + ['get', 'amin'], + -9000, + '#260167', + 0, + theme.ocean, ], }, - 'fill-antialias': false, - }, - metadata: {}, - filter: ['in', 'class', 'wetland'], - }, - { - id: 'Industrial', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landuse', - maxzoom: 24, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': [ - 'interpolate', - ['linear'], - ['zoom'], - 9, - [ - 'match', - ['get', 'class'], - ['industrial'], - 'hsl(40,67%,90%)', - 'quarry', - 'hsla(32, 47%, 87%, 0.2)', - 'hsl(60, 31%, 87%)', - ], - 16, - [ - 'match', - ['get', 'class'], - ['industrial'], - 'hsl(49,54%,90%)', - 'quarry', - 'hsla(32, 47%, 87%, 0.5)', - 'hsl(60, 31%, 87%)', - ], - ], - 'fill-opacity': [ - 'step', - ['zoom'], - 1, - 9, - ['match', ['get', 'class'], 'quarry', 0, 1], - 10, - 1, - ], }, - metadata: {}, - filter: ['all', ['in', 'class', 'industrial', 'quarry']], - }, - { - id: 'Retail', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landuse', - minzoom: 5, - maxzoom: 22, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': { - base: 1, - stops: [ - [1, '#ededed'], - [16, '#ededed'], - ], + + { + id: 'Rock', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landcover', + layout: { visibility: 'visible' }, + paint: { + 'fill-color': theme.rock, + 'fill-opacity': 1, + 'fill-antialias': false, + }, + metadata: {}, + filter: ['==', 'class', 'rock'], + }, + { + id: 'Beach', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landcover', + layout: { visibility: 'visible' }, + paint: { + 'fill-color': theme.sand, + 'fill-opacity': 1, + 'fill-antialias': false, }, + metadata: {}, + filter: ['all', ['==', 'class', 'sand'], ['==', 'subclass', 'beach']], }, - metadata: {}, - filter: ['all', ['in', 'class', 'retail']], - }, - { - id: 'School', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landuse', - minzoom: 9, - maxzoom: 22, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': 'hsl(194,52%,94%)', - 'fill-opacity': { - stops: [ - [9, 0.25], - [16, 1], + { + id: 'Wetland (medium scale)', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landcover', + layout: { + visibility: 'visible', + }, + paint: { + 'fill-color': theme.wetland, + 'fill-opacity': { + stops: [ + [7, 0.5], + [10, 1], + ], + }, + 'fill-antialias': false, + }, + metadata: {}, + filter: ['in', 'class', 'wetland'], + }, + { + id: 'Industrial', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landuse', + maxzoom: 24, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': [ + 'interpolate', + ['linear'], + ['zoom'], + 9, + [ + 'match', + ['get', 'class'], + ['industrial'], + 'hsl(40,67%,90%)', + 'quarry', + 'hsla(32, 47%, 87%, 0.2)', + 'hsl(60, 31%, 87%)', + ], + 16, + [ + 'match', + ['get', 'class'], + ['industrial'], + 'hsl(49,54%,90%)', + 'quarry', + 'hsla(32, 47%, 87%, 0.5)', + 'hsl(60, 31%, 87%)', + ], + ], + 'fill-opacity': [ + 'step', + ['zoom'], + 1, + 9, + ['match', ['get', 'class'], 'quarry', 0, 1], + 10, + 1, ], }, - 'fill-antialias': true, + metadata: {}, + filter: ['all', ['in', 'class', 'industrial', 'quarry']], }, - metadata: {}, - filter: ['all', ['in', 'class', 'college', 'school', 'university']], - }, - { - id: 'Hospital', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landuse', - minzoom: 9, - maxzoom: 22, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': 'hsl(12,63%,94%)', - 'fill-opacity': { - stops: [ - [9, 0.25], - [16, 1], - ], + { + id: 'Retail', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landuse', + minzoom: 5, + maxzoom: 22, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': { + base: 1, + stops: [ + [1, '#ededed'], + [16, '#ededed'], + ], + }, + }, + metadata: {}, + filter: ['all', ['in', 'class', 'retail']], + }, + { + id: 'School', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landuse', + minzoom: 9, + maxzoom: 22, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': 'hsl(194,52%,94%)', + 'fill-opacity': { + stops: [ + [9, 0.25], + [16, 1], + ], + }, + 'fill-antialias': true, + }, + metadata: {}, + filter: ['all', ['in', 'class', 'college', 'school', 'university']], + }, + { + id: 'Hospital', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landuse', + minzoom: 9, + maxzoom: 22, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': 'hsl(12,63%,94%)', + 'fill-opacity': { + stops: [ + [9, 0.25], + [16, 1], + ], + }, + 'fill-antialias': true, }, - 'fill-antialias': true, + metadata: {}, + filter: ['all', ['==', 'class', 'hospital']], }, - metadata: {}, - filter: ['all', ['==', 'class', 'hospital']], - }, - /* + /* Une zone piétonne est assez bas niveau. En général elle englobe plus large que le sable qui est dessus, et l'herbe On n'est pas à l'abri d'effets secondaires ici. */ - { - id: 'Pedestrian', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { 'fill-color': '#feecdf', 'fill-opacity': 0.9 }, - metadata: {}, - filter: [ - 'all', - ['any', ['==', '$type', 'Polygon'], ['==', '$type', 'LineString']], - ['!has', 'brunnel'], - [ - 'any', - ['!has', 'class'], + { + id: 'Pedestrian', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { 'fill-color': theme.pedestrian, 'fill-opacity': 0.9 }, + metadata: {}, + filter: [ + 'all', + ['any', ['==', '$type', 'Polygon'], ['==', '$type', 'LineString']], + ['!has', 'brunnel'], [ - 'in', - 'class', - 'aerialway', - 'bus_guideway', - 'busway', - 'courtyard', - 'ferry', - 'minor', - 'minor_construction', - 'motorway', - 'motorway_construction', - 'path', - 'path_construction', - 'primary', - 'primary_construction', - 'raceway', - 'raceway_construction', - 'rail', - 'secondary', - 'secondary_construction', - 'service', - 'service_construction', - 'storage_tank', - 'tertiary', - 'tertiary_construction', - 'track', - 'track_construction', - 'transit', - 'trunk', - 'trunk_construction', - ], - ], - ['in', 'subclass', 'pedestrian', 'platform'], - ], - }, - { - id: 'Sand', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landcover', - layout: { visibility: 'visible' }, - paint: { - 'fill-color': '#fbf4ab', - 'fill-opacity': 0.4, - 'fill-antialias': false, - }, - metadata: {}, - filter: ['all', ['==', 'class', 'sand'], ['!=', 'subclass', 'beach']], - }, - { - id: 'Grass', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landcover', - layout: { visibility: 'visible' }, - paint: { - 'fill-color': '#c6ddaa', - 'fill-opacity': 0.6, - 'fill-antialias': false, - }, - metadata: {}, - filter: ['==', 'class', 'grass'], - }, - { - id: 'Cemetery', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landuse', - minzoom: 9, - maxzoom: 22, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': 'hsl(0,0%,88%)', - 'fill-opacity': { - stops: [ - [9, 0.25], - [16, 1], - ], - }, - 'fill-antialias': true, - }, - metadata: {}, - filter: ['all', ['in', 'class', 'cemetery']], - }, - { - id: 'Trees', - type: 'circle', - source: 'trees', - 'source-layer': 'trees', - minzoom: 14, - paint: { - 'circle-radius': { - stops: [ - [14, 2], - [16, 4], - [22, 20], - ], - }, - 'circle-color': '#94d2a5', - 'circle-opacity': { - stops: [ - [14, 0.2], - [22, 0.4], - ], - }, - }, - }, - { - id: 'Stadium', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'landuse', - minzoom: 9, - maxzoom: 22, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': 'hsl(94,100%,88%)', - 'fill-opacity': { - stops: [ - [9, 0.25], - [16, 1], + 'any', + ['!has', 'class'], + [ + 'in', + 'class', + 'aerialway', + 'bus_guideway', + 'busway', + 'courtyard', + 'ferry', + 'minor', + 'minor_construction', + 'motorway', + 'motorway_construction', + 'path', + 'path_construction', + 'primary', + 'primary_construction', + 'raceway', + 'raceway_construction', + 'rail', + 'secondary', + 'secondary_construction', + 'service', + 'service_construction', + 'storage_tank', + 'tertiary', + 'tertiary_construction', + 'track', + 'track_construction', + 'transit', + 'trunk', + 'trunk_construction', + ], ], - }, - 'fill-antialias': true, + ['in', 'subclass', 'pedestrian', 'platform'], + ], }, - metadata: {}, - filter: ['all', ['in', 'class', 'pitch', 'stadium', 'playground']], - }, - { - id: 'River tunnel', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'waterway', - minzoom: 14, - layout: { 'line-cap': 'round', visibility: 'visible' }, - paint: { - 'line-color': 'hsl(210,73%,78%)', - 'line-width': { - base: 1.3, - stops: [ - [12, 0.5], - [20, 6], - ], + { + id: 'Sand', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landcover', + layout: { visibility: 'visible' }, + paint: { + 'fill-color': '#fbf4ab', + 'fill-opacity': 0.4, + 'fill-antialias': false, + }, + metadata: {}, + filter: ['all', ['==', 'class', 'sand'], ['!=', 'subclass', 'beach']], + }, + { + id: 'Grass', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landcover', + layout: { visibility: 'visible' }, + paint: { + 'fill-color': theme.grass, + 'fill-opacity': 0.6, + 'fill-antialias': false, + }, + metadata: {}, + filter: ['==', 'class', 'grass'], + }, + { + id: 'Cemetery', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landuse', + minzoom: 9, + maxzoom: 22, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': 'hsl(0,0%,88%)', + 'fill-opacity': { + stops: [ + [9, 0.25], + [16, 1], + ], + }, + 'fill-antialias': true, + }, + metadata: {}, + filter: ['all', ['in', 'class', 'cemetery']], + }, + { + id: 'Trees', + type: 'circle', + source: 'trees', + 'source-layer': 'trees', + minzoom: 14, + paint: { + 'circle-radius': { + stops: [ + [14, 2], + [16, 4], + [22, 20], + ], + }, + 'circle-color': '#94d2a5', + 'circle-opacity': { + stops: [ + [14, 0.2], + [22, 0.4], + ], + }, }, - 'line-opacity': 0.5, - 'line-dasharray': [2, 4], }, - filter: ['all', ['==', 'brunnel', 'tunnel']], - }, - { - id: 'River', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'waterway', - layout: { 'line-cap': 'round', visibility: 'visible' }, - paint: { - 'line-color': 'hsl(210,73%,78%)', - 'line-width': { - stops: [ - [12, 0.5], - [20, 6], - ], + { + id: 'Stadium', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'landuse', + minzoom: 9, + maxzoom: 22, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': 'hsl(94,100%,88%)', + 'fill-opacity': { + stops: [ + [9, 0.25], + [16, 1], + ], + }, + 'fill-antialias': true, + }, + metadata: {}, + filter: ['all', ['in', 'class', 'pitch', 'stadium', 'playground']], + }, + { + id: 'River tunnel', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'waterway', + minzoom: 14, + layout: { 'line-cap': 'round', visibility: 'visible' }, + paint: { + 'line-color': 'hsl(210,73%,78%)', + 'line-width': { + base: 1.3, + stops: [ + [12, 0.5], + [20, 6], + ], + }, + 'line-opacity': 0.5, + 'line-dasharray': [2, 4], + }, + filter: ['all', ['==', 'brunnel', 'tunnel']], + }, + { + id: 'River', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'waterway', + layout: { 'line-cap': 'round', visibility: 'visible' }, + paint: { + 'line-color': 'hsl(210,73%,78%)', + 'line-width': { + stops: [ + [12, 0.5], + [20, 6], + ], + }, }, + metadata: {}, + filter: ['all', ['!=', 'brunnel', 'tunnel']], }, - metadata: {}, - filter: ['all', ['!=', 'brunnel', 'tunnel']], - }, - { - id: 'Water intermittent', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'water', - layout: { visibility: 'visible' }, - paint: { - 'fill-color': 'hsl(205,91%,83%)', - 'fill-opacity': 0.85, - 'fill-antialias': true, - }, - metadata: {}, - filter: ['any', ['has', 'intermittent'], ['==', 'intermittent', 1]], - }, - { - id: 'Aeroway', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'aeroway', - minzoom: 11, - layout: { visibility: 'visible' }, - paint: { - 'line-color': 'hsl(0,0%,100%)', - 'line-width': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 11, - ['match', ['get', 'class'], ['runway'], 3, 0.5], - 20, - ['match', ['get', 'class'], ['runway'], 16, 6], - ], - }, - metadata: {}, - }, - { - id: 'Heliport', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'aeroway', - minzoom: 11, - layout: { visibility: 'visible' }, - paint: { 'fill-color': 'hsl(0,0%,100%)', 'fill-opacity': 1 }, - metadata: {}, - filter: ['in', 'class', 'helipad', 'heliport'], - }, - { - id: 'Ferry line', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { 'line-join': 'round', visibility: 'visible' }, - paint: { - 'line-color': { - stops: [[16, '#c2cff0']], + { + id: 'Water intermittent', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'water', + layout: { visibility: 'visible' }, + paint: { + 'fill-color': 'hsl(205,91%,83%)', + 'fill-opacity': 0.85, + 'fill-antialias': true, + }, + metadata: {}, + filter: ['any', ['has', 'intermittent'], ['==', 'intermittent', 1]], + }, + { + id: 'Aeroway', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'aeroway', + minzoom: 11, + layout: { visibility: 'visible' }, + paint: { + 'line-color': 'hsl(0,0%,100%)', + 'line-width': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 11, + ['match', ['get', 'class'], ['runway'], 3, 0.5], + 20, + ['match', ['get', 'class'], ['runway'], 16, 6], + ], + }, + metadata: {}, + }, + { + id: 'Heliport', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'aeroway', + minzoom: 11, + layout: { visibility: 'visible' }, + paint: { 'fill-color': 'hsl(0,0%,100%)', 'fill-opacity': 1 }, + metadata: {}, + filter: ['in', 'class', 'helipad', 'heliport'], + }, + { + id: 'Ferry line', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { 'line-join': 'round', visibility: 'visible' }, + paint: { + 'line-color': { + stops: [[16, '#c2cff0']], + }, + 'line-width': 1.1, + 'line-dasharray': [2, 2], + }, + filter: ['all', ['in', 'class', 'ferry']], + }, + { + id: 'Tunnel outline', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 4, + layout: { + 'line-cap': 'butt', + 'line-join': 'round', + visibility: 'visible', }, - 'line-width': 1.1, - 'line-dasharray': [2, 2], - }, - filter: ['all', ['in', 'class', 'ferry']], - }, - { - id: 'Tunnel outline', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 4, - layout: { - 'line-cap': 'butt', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': [ - 'match', - ['get', 'class'], - 'motorway', - 'hsl(28,72%,69%)', - ['trunk', 'primary'], - 'hsl(28,72%,69%)', - 'hsl(36,5%,80%)', - ], - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 6, - 0, - 7, - 0.5, - 10, - [ + paint: { + 'line-color': [ 'match', ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 0, 2.5], + 'motorway', + 'hsl(28,72%,69%)', ['trunk', 'primary'], - 2, + 'hsl(28,72%,69%)', + 'hsl(36,5%,80%)', + ], + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 6, 0, + 7, + 0.5, + 10, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 0, 2.5], + ['trunk', 'primary'], + 2, + 0, + ], + 12, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 2, 6], + ['trunk', 'primary'], + 3, + ['secondary', 'tertiary'], + 2, + ['minor', 'service', 'track'], + 1, + 0.5, + ], + 14, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 5, 8], + ['trunk'], + 4, + ['primary'], + 6, + ['secondary'], + 6, + ['tertiary'], + 4, + ['minor', 'service', 'track'], + 3, + 3, + ], + 16, + [ + 'match', + ['get', 'class'], + ['motorway', 'trunk', 'primary'], + 10, + ['secondary'], + 8, + ['tertiary'], + 8, + ['minor', 'service', 'track'], + 4, + 4, + ], + 20, + [ + 'match', + ['get', 'class'], + ['motorway', 'trunk', 'primary'], + 26, + ['secondary'], + 26, + ['tertiary'], + 26, + ['minor', 'service', 'track'], + 18, + 18, + ], ], - 12, + 'line-opacity': 0.1, + 'line-dasharray': [0.5, 0.25], + }, + metadata: {}, + filter: [ + 'all', + ['==', 'brunnel', 'tunnel'], [ + '!in', + 'class', + 'bridge', + 'ferry', + 'rail', + 'transit', + 'pier', + 'path', + 'aerialway', + 'motorway_construction', + 'trunk_construction', + 'primary_construction', + 'secondary_construction', + 'tertiary_construction', + 'minor_construction', + 'service_construction', + 'track_construction', + ], + ], + }, + { + id: 'Tunnel', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 4, + layout: { + 'line-cap': 'butt', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-color': [ 'match', ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 2, 6], + 'motorway', + 'hsl(35,100%,76%)', ['trunk', 'primary'], - 3, - ['secondary', 'tertiary'], - 2, - ['minor', 'service', 'track'], - 1, - 0.5, + 'hsl(48,100%,88%)', + 'hsl(0,0%,96%)', ], - 14, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 5, 8], - ['trunk'], - 4, - ['primary'], - 6, - ['secondary'], + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 5, + 0, 6, - ['tertiary'], - 4, - ['minor', 'service', 'track'], - 3, - 3, - ], - 16, - [ - 'match', - ['get', 'class'], - ['motorway', 'trunk', 'primary'], + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'brunnel'], ['bridge'], 0, 1], + ['trunk', 'primary'], + 0, + 0, + ], 10, - ['secondary'], - 8, - ['tertiary'], - 8, - ['minor', 'service', 'track'], - 4, - 4, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 0, 2.5], + ['trunk', 'primary'], + 1.5, + 1, + ], + 12, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 1, 4], + ['trunk'], + 2.5, + ['primary'], + 2.5, + ['secondary', 'tertiary'], + 1.5, + ['minor', 'service', 'track'], + 1, + 1, + ], + 14, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 5, 6], + ['trunk'], + 3, + ['primary'], + 5, + ['secondary'], + 4, + ['tertiary'], + 3, + ['minor', 'service', 'track'], + 2, + 2, + ], + 16, + [ + 'match', + ['get', 'class'], + ['motorway', 'trunk', 'primary'], + 8, + ['secondary'], + 7, + ['tertiary'], + 6, + ['minor', 'service', 'track'], + 4, + 4, + ], + 20, + [ + 'match', + ['get', 'class'], + ['motorway', 'trunk', 'primary'], + 24, + ['secondary'], + 24, + ['tertiary'], + 24, + ['minor', 'service', 'track'], + 16, + 16, + ], ], - 20, + 'line-opacity': 0.1, + }, + metadata: {}, + filter: [ + 'all', + ['==', 'brunnel', 'tunnel'], [ - 'match', - ['get', 'class'], - ['motorway', 'trunk', 'primary'], - 26, - ['secondary'], - 26, - ['tertiary'], - 26, - ['minor', 'service', 'track'], - 18, - 18, + '!in', + 'class', + 'ferry', + 'rail', + 'transit', + 'pier', + 'bridge', + 'path', + 'aerialway', + 'motorway_construction', + 'trunk_construction', + 'primary_construction', + 'secondary_construction', + 'tertiary_construction', + 'minor_construction', + 'service_construction', + 'track_construction', ], ], - 'line-opacity': 0.1, - 'line-dasharray': [0.5, 0.25], }, - metadata: {}, - filter: [ - 'all', - ['==', 'brunnel', 'tunnel'], - [ - '!in', - 'class', - 'bridge', - 'ferry', - 'rail', - 'transit', - 'pier', - 'path', - 'aerialway', - 'motorway_construction', - 'trunk_construction', - 'primary_construction', - 'secondary_construction', - 'tertiary_construction', - 'minor_construction', - 'service_construction', - 'track_construction', + { + id: 'Railway tunnel', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { + 'line-color': 'hsl(0,0%,73%)', + 'line-width': { + base: 1.4, + stops: [ + [14, 0.4], + [15, 0.75], + [20, 2], + ], + }, + 'line-opacity': 0.5, + }, + metadata: {}, + filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'rail']], + }, + { + id: 'Railway tunnel hatching', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { + 'line-color': 'hsl(0,0%,73%)', + 'line-width': { + base: 1.4, + stops: [ + [14.5, 0], + [15, 3], + [20, 8], + ], + }, + 'line-opacity': 0.5, + 'line-dasharray': [0.2, 8], + }, + metadata: {}, + filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'rail']], + }, + { + id: 'Footway tunnel outline', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 12, + layout: { + 'line-cap': 'round', + 'line-join': 'miter', + visibility: 'visible', + }, + paint: { + 'line-color': 'hsl(0,0%,100%)', + 'line-width': { + base: 1.2, + stops: [ + [14, 0], + [16, 0], + [18, 4], + [22, 8], + ], + }, + 'line-opacity': 1, + }, + metadata: {}, + filter: [ + 'all', + ['==', '$type', 'LineString'], + ['in', 'class', 'path', 'pedestrian'], + ['==', 'brunnel', 'tunnel'], ], - ], - }, - { - id: 'Tunnel', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 4, - layout: { - 'line-cap': 'butt', - 'line-join': 'round', - visibility: 'visible', }, - paint: { - 'line-color': [ - 'match', - ['get', 'class'], - 'motorway', - 'hsl(35,100%,76%)', - ['trunk', 'primary'], - 'hsl(48,100%,88%)', - 'hsl(0,0%,96%)', - ], - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 5, - 0, - 6, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'brunnel'], ['bridge'], 0, 1], - ['trunk', 'primary'], - 0, + { + id: 'Footway tunnel', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 12, + layout: { + 'line-cap': 'butt', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-color': 'hsl(0,0%,63%)', + 'line-width': { + base: 1.2, + stops: [ + [14, 0.5], + [16, 1], + [18, 2], + [22, 5], + ], + }, + 'line-opacity': 0.4, + 'line-dasharray': { + stops: [ + [14, [1, 0.5]], + [18, [1, 0.25]], + ], + }, + }, + metadata: {}, + filter: [ + 'all', + ['==', '$type', 'LineString'], + ['in', 'class', 'path', 'pedestrian'], + ['==', 'brunnel', 'tunnel'], + ], + }, + { + id: 'Pier', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { 'fill-color': 'hsl(42,49%,93%)', 'fill-antialias': true }, + metadata: {}, + filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'pier']], + }, + { + id: 'Pier road', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-color': 'hsl(42,49%,93%)', + 'line-width': { + base: 1.2, + stops: [ + [15, 1], + [17, 4], + ], + }, + }, + metadata: {}, + filter: ['all', ['==', '$type', 'LineString'], ['in', 'class', 'pier']], + }, + { + id: 'Bridge', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { + 'fill-color': 'hsl(42,49%,93%)', + 'fill-opacity': 0.6, + 'fill-antialias': true, + }, + metadata: {}, + filter: ['==', 'brunnel', 'bridge'], + }, + { + id: 'Minor road outline', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 11, + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-color': 'hsl(240,13%,70%)', + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 6, 0, - ], - 10, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 0, 2.5], - ['trunk', 'primary'], - 1.5, - 1, - ], - 12, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 1, 4], - ['trunk'], - 2.5, - ['primary'], - 2.5, - ['secondary', 'tertiary'], - 1.5, - ['minor', 'service', 'track'], - 1, - 1, - ], - 14, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 5, 6], - ['trunk'], - 3, - ['primary'], - 5, - ['secondary'], - 4, - ['tertiary'], - 3, - ['minor', 'service', 'track'], - 2, - 2, - ], - 16, - [ - 'match', - ['get', 'class'], - ['motorway', 'trunk', 'primary'], - 8, - ['secondary'], 7, - ['tertiary'], - 6, - ['minor', 'service', 'track'], - 4, - 4, + 0.5, + 12, + [ + 'match', + ['get', 'class'], + ['secondary', 'tertiary'], + 2, + ['minor', 'service', 'track'], + 1, + 0.5, + ], + 14, + [ + 'match', + ['get', 'class'], + ['secondary'], + 6, + ['tertiary'], + 4, + ['minor', 'service', 'track'], + 3, + 3, + ], + 16, + [ + 'match', + ['get', 'class'], + ['secondary'], + 8, + ['tertiary'], + 8, + ['minor', 'service', 'track'], + 6, + 4, + ], + 20, + [ + 'match', + ['get', 'class'], + ['secondary'], + 26, + ['tertiary'], + 26, + ['minor', 'service', 'track'], + 18, + 18, + ], ], - 20, + 'line-opacity': 1, + }, + metadata: {}, + filter: [ + 'all', + ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], [ - 'match', - ['get', 'class'], - ['motorway', 'trunk', 'primary'], - 24, - ['secondary'], - 24, - ['tertiary'], - 24, - ['minor', 'service', 'track'], - 16, - 16, + 'any', + ['!has', 'class'], + [ + 'in', + 'class', + 'bus_guideway', + 'busway', + 'courtyard', + 'minor', + 'raceway', + 'raceway_construction', + 'secondary', + 'service', + 'storage_tank', + 'tertiary', + 'track', + 'trunk', + ], ], ], - 'line-opacity': 0.1, - }, - metadata: {}, - filter: [ - 'all', - ['==', 'brunnel', 'tunnel'], - [ - '!in', - 'class', - 'ferry', - 'rail', - 'transit', - 'pier', - 'bridge', - 'path', - 'aerialway', - 'motorway_construction', - 'trunk_construction', - 'primary_construction', - 'secondary_construction', - 'tertiary_construction', - 'minor_construction', - 'service_construction', - 'track_construction', - ], - ], - }, - { - id: 'Railway tunnel', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { - 'line-color': 'hsl(0,0%,73%)', - 'line-width': { - base: 1.4, - stops: [ - [14, 0.4], - [15, 0.75], - [20, 2], - ], - }, - 'line-opacity': 0.5, }, - metadata: {}, - filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'rail']], - }, - { - id: 'Railway tunnel hatching', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { - 'line-color': 'hsl(0,0%,73%)', - 'line-width': { - base: 1.4, - stops: [ - [14.5, 0], - [15, 3], - [20, 8], - ], + { + id: 'Major road outline', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 8, + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', }, - 'line-opacity': 0.5, - 'line-dasharray': [0.2, 8], - }, - metadata: {}, - filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'rail']], - }, - { - id: 'Footway tunnel outline', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 12, - layout: { - 'line-cap': 'round', - 'line-join': 'miter', - visibility: 'visible', - }, - paint: { - 'line-color': 'hsl(0,0%,100%)', - 'line-width': { - base: 1.2, - stops: [ - [14, 0], - [16, 0], - [18, 4], - [22, 8], + paint: { + 'line-color': '#8c97ae', + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 6, + 0, + 7, + 0.5, + 10, + ['match', ['get', 'class'], ['trunk', 'primary'], 1.5, 0], + 12, + ['match', ['get', 'class'], ['trunk', 'primary'], 3, 0.5], + 14, + ['match', ['get', 'class'], ['trunk'], 4, ['primary'], 6, 3], + 16, + ['match', ['get', 'class'], ['trunk', 'primary'], 12, 8], + 20, + ['match', ['get', 'class'], ['trunk', 'primary'], 55, 36], ], }, - 'line-opacity': 1, - }, - metadata: {}, - filter: [ - 'all', - ['==', '$type', 'LineString'], - ['in', 'class', 'path', 'pedestrian'], - ['==', 'brunnel', 'tunnel'], - ], - }, - { - id: 'Footway tunnel', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 12, - layout: { - 'line-cap': 'butt', - 'line-join': 'round', - visibility: 'visible', + metadata: {}, + filter: [ + 'all', + ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], + ['in', 'class', 'primary', 'trunk'], + ], }, - paint: { - 'line-color': 'hsl(0,0%,63%)', - 'line-width': { - base: 1.2, - stops: [ - [14, 0.5], - [16, 1], - [18, 2], - [22, 5], - ], + { + id: 'Highway outline', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 4, + layout: { + 'line-cap': 'butt', + 'line-join': 'round', + visibility: 'visible', }, - 'line-opacity': 0.4, - 'line-dasharray': { - stops: [ - [14, [1, 0.5]], - [18, [1, 0.25]], + paint: { + //'line-color': 'Silver', + 'line-color': theme.highwayOutline, + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 6, + 0, + 7, + 0.5, + 10, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 0, 2.5], + 0, + ], + 12, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 2, 6], + 0.5, + ], + 14, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 5, 8], + 3, + ], + 16, + ['match', ['get', 'class'], ['motorway'], 10, 4], + 20, + ['match', ['get', 'class'], ['motorway'], 26, 18], ], + 'line-opacity': 1, }, + metadata: {}, + filter: [ + 'all', + ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], + ['==', 'class', 'motorway'], + ], }, - metadata: {}, - filter: [ - 'all', - ['==', '$type', 'LineString'], - ['in', 'class', 'path', 'pedestrian'], - ['==', 'brunnel', 'tunnel'], - ], - }, - { - id: 'Pier', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { 'fill-color': 'hsl(42,49%,93%)', 'fill-antialias': true }, - metadata: {}, - filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'pier']], - }, - { - id: 'Pier road', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { - 'line-cap': 'round', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': 'hsl(42,49%,93%)', - 'line-width': { - base: 1.2, - stops: [ - [15, 1], - [17, 4], - ], + { + id: 'Road under construction', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 8, + layout: { + 'line-cap': 'square', + 'line-join': 'round', + visibility: 'visible', }, - }, - metadata: {}, - filter: ['all', ['==', '$type', 'LineString'], ['in', 'class', 'pier']], - }, - { - id: 'Bridge', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { - 'fill-color': 'hsl(42,49%,93%)', - 'fill-opacity': 0.6, - 'fill-antialias': true, - }, - metadata: {}, - filter: ['==', 'brunnel', 'bridge'], - }, - { - id: 'Minor road outline', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 11, - layout: { - 'line-cap': 'round', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': 'hsl(240,13%,70%)', - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 6, - 0, - 7, - 0.5, - 12, - [ - 'match', - ['get', 'class'], - ['secondary', 'tertiary'], - 2, - ['minor', 'service', 'track'], - 1, - 0.5, - ], - 14, - [ + paint: { + 'line-color': [ 'match', ['get', 'class'], - ['secondary'], - 6, - ['tertiary'], - 4, - ['minor', 'service', 'track'], - 3, - 3, + 'motorway_construction', + theme.highway, + ['trunk_construction', 'primary_construction'], + theme.highway, + 'hsl(0,0%,100%)', ], - 16, - [ - 'match', - ['get', 'class'], - ['secondary'], - 8, - ['tertiary'], - 8, - ['minor', 'service', 'track'], + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 5, + 0, 6, - 4, - ], - 20, - [ - 'match', - ['get', 'class'], - ['secondary'], - 26, - ['tertiary'], - 26, - ['minor', 'service', 'track'], - 18, - 18, - ], - ], - 'line-opacity': 1, - }, - metadata: {}, - filter: [ - 'all', - ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], - [ - 'any', - ['!has', 'class'], - [ - 'in', - 'class', - 'bus_guideway', - 'busway', - 'courtyard', - 'minor', - 'raceway', - 'raceway_construction', - 'secondary', - 'service', - 'storage_tank', - 'tertiary', - 'track', - 'trunk', - ], - ], - ], - }, - { - id: 'Major road outline', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 8, - layout: { - 'line-cap': 'round', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': '#8c97ae', - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 6, - 0, - 7, - 0.5, - 10, - ['match', ['get', 'class'], ['trunk', 'primary'], 1.5, 0], - 12, - ['match', ['get', 'class'], ['trunk', 'primary'], 3, 0.5], - 14, - ['match', ['get', 'class'], ['trunk'], 4, ['primary'], 6, 3], - 16, - ['match', ['get', 'class'], ['trunk', 'primary'], 12, 8], - 20, - ['match', ['get', 'class'], ['trunk', 'primary'], 55, 36], - ], - }, - metadata: {}, - filter: [ - 'all', - ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], - ['in', 'class', 'primary', 'trunk'], - ], - }, - { - id: 'Highway outline', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 4, - layout: { - 'line-cap': 'butt', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - //'line-color': 'Silver', - 'line-color': highwayOutlineColor, - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 6, - 0, - 7, - 0.5, - 10, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 0, 2.5], - 0, - ], - 12, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 2, 6], - 0.5, - ], - 14, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 5, 8], - 3, - ], - 16, - ['match', ['get', 'class'], ['motorway'], 10, 4], - 20, - ['match', ['get', 'class'], ['motorway'], 26, 18], - ], - 'line-opacity': 1, - }, - metadata: {}, - filter: [ - 'all', - ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], - ['==', 'class', 'motorway'], - ], - }, - { - id: 'Road under construction', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 8, - layout: { - 'line-cap': 'square', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': [ - 'match', - ['get', 'class'], - 'motorway_construction', - highwayColor, - ['trunk_construction', 'primary_construction'], - highwayColor, - 'hsl(0,0%,100%)', - ], - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 5, - 0, - 6, - [ - 'match', - ['get', 'class'], - ['motorway_construction'], - ['match', ['get', 'brunnel'], ['bridge'], 0, 1], - ['trunk_construction', 'primary_construction'], - 0, - 0, - ], - 10, - [ - 'match', - ['get', 'class'], - ['motorway_construction'], - ['match', ['get', 'ramp'], 1, 0, 2.5], - ['trunk_construction', 'primary_construction'], - 1.5, - 1, - ], - 12, - [ - 'match', - ['get', 'class'], - ['motorway_construction'], - ['match', ['get', 'ramp'], 1, 1, 4], - ['trunk_construction'], - 2.5, - ['primary_construction'], - 2.5, - ['secondary_construction', 'tertiary_construction'], - 1.5, - ['minor_construction', 'service_construction', 'track_construction'], - 1, - 1, - ], - 14, - [ - 'match', - ['get', 'class'], - ['motorway_construction'], - ['match', ['get', 'ramp'], 1, 5, 6], - ['trunk_construction'], - 3, - ['primary_construction'], - 5, - ['secondary_construction'], - 4, - ['tertiary_construction'], - 3, - ['minor_construction', 'service_construction', 'track_construction'], - 2, - 2, - ], - 16, - [ - 'match', - ['get', 'class'], [ - 'motorway_construction', - 'trunk_construction', - 'primary_construction', + 'match', + ['get', 'class'], + ['motorway_construction'], + ['match', ['get', 'brunnel'], ['bridge'], 0, 1], + ['trunk_construction', 'primary_construction'], + 0, + 0, ], - 8, - ['secondary_construction'], - 7, - ['tertiary_construction'], - 6, - ['minor_construction', 'service_construction', 'track_construction'], - 4, - 4, - ], - 20, - [ - 'match', - ['get', 'class'], + 10, [ - 'motorway_construction', - 'trunk_construction', - 'primary_construction', + 'match', + ['get', 'class'], + ['motorway_construction'], + ['match', ['get', 'ramp'], 1, 0, 2.5], + ['trunk_construction', 'primary_construction'], + 1.5, + 1, ], - 24, - ['secondary_construction'], - 24, - ['tertiary_construction'], - 24, - ['minor_construction', 'service_construction', 'track_construction'], - 16, - 16, - ], - ], - 'line-opacity': ['case', ['==', ['get', 'brunnel'], 'tunnel'], 0.7, 1], - 'line-dasharray': [2, 2], - }, - metadata: {}, - filter: [ - 'all', - [ - 'in', - 'class', - 'motorway_construction', - 'trunk_construction', - 'primary_construction', - 'secondary_construction', - 'tertiary_construction', - 'minor_construction', - 'service_construction', - 'track_construction', - ], - ], - }, - { - id: 'Minor road', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 10, - layout: { - 'line-cap': 'round', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - //'line-color': 'hsl(0,0%,100%)', - - 'line-color': [ - 'case', - [ - 'any', - ['==', ['get', 'subclass'], 'living_street'], - ['==', ['get', 'maxspeed'], 'walk'], - ], - 'hsl(0,0%,100%)', - ['==', ['get', 'maxspeed'], 'FR:zone30'], - 'hsl(215,20%,95%)', - ['==', ['get', 'maxspeed'], 'FR:urban'], - 'hsl(215,20%,80%)', - ['==', ['get', 'maxspeed'], 'FR:rural'], - '#99a6c3', - [ - 'any', - ['==', ['get', 'class'], 'service'], - ['==', ['get', 'access'], 'private'], - ], - 'hsl(0,0%,97%)', - ['!', ['has', 'maxspeed']], - // we consider minor roads without maxspeed and that are not - // living_street or other tags that remain to be found, as - // "medium"-friendly to pedestrians, cyclists and buses - 'hsl(215,20%,85%)', - ['<=', ['to-number', ['get', 'maxspeed']], 20], - 'hsl(0,0%,100%)', - ['<=', ['to-number', ['get', 'maxspeed']], 30], - 'hsl(215,20%,95%)', - ['<=', ['to-number', ['get', 'maxspeed']], 50], - 'hsl(215,20%,80%)', - 'hsl(215,20%,70%)', - ], - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 5, - 0.5, - 10, - 1, - 12, - [ - 'match', - ['get', 'class'], - ['secondary', 'tertiary'], - 1.5, - ['minor', 'service', 'track'], - 1, - 1, - ], - 14, - [ - 'match', - ['get', 'class'], - ['secondary'], - 4, - ['tertiary'], - 3, - ['minor', 'service', 'track'], - 2, - 2, - ], - 16, - [ - 'match', - ['get', 'class'], - ['secondary'], - 7, - ['tertiary'], - 6, - ['minor', 'service', 'track'], - 4, - 4, - ], - 20, - [ - 'match', - ['get', 'class'], - ['secondary'], - 24, - ['tertiary'], - 24, - ['minor', 'service', 'track'], - 16, - 16, - ], - ], - }, - metadata: {}, - filter: [ - 'all', - ['in', '$type', 'LineString', 'Polygon'], - [ - 'all', - ['any', ['in', 'brunnel', 'bridge', 'ford'], ['!has', 'brunnel']], - [ - 'any', + 12, [ - 'in', - 'class', - 'bus_guideway', - 'busway', - 'courtyard', - 'minor', - 'raceway', - 'raceway_construction', - 'secondary', - 'service', - 'storage_tank', - 'tertiary', - 'track', - 'trunk', + 'match', + ['get', 'class'], + ['motorway_construction'], + ['match', ['get', 'ramp'], 1, 1, 4], + ['trunk_construction'], + 2.5, + ['primary_construction'], + 2.5, + ['secondary_construction', 'tertiary_construction'], + 1.5, + [ + 'minor_construction', + 'service_construction', + 'track_construction', + ], + 1, + 1, + ], + 14, + [ + 'match', + ['get', 'class'], + ['motorway_construction'], + ['match', ['get', 'ramp'], 1, 5, 6], + ['trunk_construction'], + 3, + ['primary_construction'], + 5, + ['secondary_construction'], + 4, + ['tertiary_construction'], + 3, + [ + 'minor_construction', + 'service_construction', + 'track_construction', + ], + 2, + 2, + ], + 16, + [ + 'match', + ['get', 'class'], + [ + 'motorway_construction', + 'trunk_construction', + 'primary_construction', + ], + 8, + ['secondary_construction'], + 7, + ['tertiary_construction'], + 6, + [ + 'minor_construction', + 'service_construction', + 'track_construction', + ], + 4, + 4, + ], + 20, + [ + 'match', + ['get', 'class'], + [ + 'motorway_construction', + 'trunk_construction', + 'primary_construction', + ], + 24, + ['secondary_construction'], + 24, + ['tertiary_construction'], + 24, + [ + 'minor_construction', + 'service_construction', + 'track_construction', + ], + 16, + 16, ], - ['!has', 'class'], - ], - ], - ], - }, - { - id: 'Major road', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 8, - layout: { - 'line-cap': 'round', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': [ - // simplified version of the "case" of Minor road - 'case', - ['!', ['has', 'maxspeed']], - // we consider minor roads without maxspeed and that are not - // living_street or other tags that remain to be found, as - // "medium"-friendly to pedestrians, cyclists and buses - '#99a6c3', - [ - 'any', - ['==', ['get', 'maxspeed'], 'walk'], - ['<=', ['to-number', ['get', 'maxspeed']], 30], - ], - 'hsl(215,20%,95%)', - '#99a6c3', - ], - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 10, - ['match', ['get', 'class'], ['trunk', 'primary'], 1.3, 0.8], - 12, - ['match', ['get', 'class'], ['trunk', 'primary'], 2.5, 1], - 14, - ['match', ['get', 'class'], ['trunk'], 3, ['primary'], 5, 2], - 16, - ['match', ['get', 'class'], ['trunk', 'primary'], 10, 6], - 20, - ['match', ['get', 'class'], ['trunk', 'primary'], 50, 30], - ], - }, - metadata: {}, - filter: [ - 'all', - ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], - ['in', 'class', 'primary', 'trunk'], - ], - }, - { - id: 'Highway', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 6, - maxzoom: 22, - layout: { - 'line-cap': 'butt', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - //'line-color': 'LightGray', - 'line-color': highwayColor, - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 5, - 0.5, - 6, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'brunnel'], ['bridge'], 0, 1], - 0, - ], - 10, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 0, 2.5], - 1, - ], - 12, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 1, 4], - 1, - ], - 14, - [ - 'match', - ['get', 'class'], - ['motorway'], - ['match', ['get', 'ramp'], 1, 5, 6], - 2, - ], - 16, - ['match', ['get', 'class'], ['motorway'], 8, 4], - 20, - ['match', ['get', 'class'], ['motorway'], 24, 16], - ], - 'line-opacity': 1, - }, - metadata: {}, - filter: [ - 'all', - ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], - ['==', 'class', 'motorway'], - ], - }, - /* Not sure we need a path outline, hence deactivated for now - { - id: 'Path outline', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 12, - layout: { - 'line-cap': 'round', - 'line-join': 'miter', - visibility: 'visible', - }, - paint: { - 'line-color': '#E8DFFB', - 'line-width': { - base: 1.2, - stops: [ - [14, 0], - [16, 0], - [18, 4], - [22, 8], - ], - }, - }, - metadata: {}, - filter: [ - 'all', - ['==', '$type', 'LineString'], - ['in', 'class', 'path', 'pedestrian'], - ['!=', 'brunnel', 'tunnel'], - ], - },*/ - { - id: 'Path', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 12, - layout: { - 'line-cap': 'butt', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': 'rgba(199, 152, 128, 1)', - 'line-width': { - base: 1.2, - stops: [ - [14, 0.5], - [16, 1], - [18, 2], - [22, 5], - ], - }, - 'line-dasharray': { - stops: [ - [14, [1, 2]], - [18, [1, 1]], - ], - }, - }, - metadata: {}, - filter: [ - 'all', - ['==', '$type', 'LineString'], - ['in', 'class', 'path', 'pedestrian'], - ['!=', 'brunnel', 'tunnel'], - ['!=', 'subclass', 'cycleway'], - ], - }, - { - id: 'Major rail', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 4, - maxzoom: 22, - layout: { visibility: 'visible' }, - paint: { - 'line-blur': 0, - 'line-color': [ - 'interpolate', - ['exponential', 1], - ['zoom'], - 8, - '#916BD4', - 19, - 'hsl(0, 0%, 70%)', - ], - 'line-width': [ - 'interpolate', - ['linear'], - ['zoom'], - 0, - 0, - 9, - 2, - 14, - 1, - 17, - 3, - 22, - 6, - ], - 'line-opacity': ['match', ['get', 'service'], 'yard', 0.4, 1], - }, - metadata: {}, - filter: ['all', ['!in', 'brunnel', 'tunnel'], ['==', 'class', 'rail']], - }, - { - id: 'Major rail hatching', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { - 'line-color': [ - 'interpolate', - ['exponential', 1], - ['zoom'], - 8, - '#916BD4', - 18, - 'hsl(0, 0%, 90%)', - ], - 'line-width': { - base: 1.4, - stops: [ - [14.5, 2], - [15, 6], - [20, 10], - ], - }, - 'line-opacity': ['match', ['get', 'service'], 'yard', 0.5, 1], - 'line-dasharray': [0.2, 9], - }, - metadata: {}, - filter: [ - 'all', - ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], - ['==', 'class', 'rail'], - ], - }, - { - id: 'Minor rail', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 4, - maxzoom: 22, - layout: { - 'line-cap': 'butt', - 'line-join': 'miter', - visibility: 'visible', - }, - paint: { - 'line-color': 'hsl(319, 82%, 33%)', - 'line-width': ['interpolate', ['linear'], ['zoom'], 0, 0, 22, 2], - 'line-opacity': 0.2, - 'line-gap-width': 0, - }, - metadata: {}, - filter: [ - 'all', - ['in', '$type', 'LineString', 'Polygon'], - ['in', 'subclass', 'light_rail', 'subway', 'tram'], - ], - }, - { - id: 'Minor rail hatching', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { - 'line-color': 'hsl(0,0%,73%)', - 'line-width': { - base: 1.4, - stops: [ - [14.5, 0], - [15, 2], - [20, 6], - ], - }, - 'line-dasharray': [0.2, 4], - }, - metadata: {}, - filter: ['all', ['in', 'subclass', 'tram', 'light_rail']], - }, - ...cycleHighwayLayers, - { - id: 'Cycleway outline', - type: 'line', - minzoom: cycleHighwayMaxZoom, - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { - 'line-color': 'hsl(240, 45%, 33%)', - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 5, - 0, - 10, - 0, - 12, - 1, - 14, - 1, - 16, - 3, - 22, - 14, - ], - 'line-opacity': 0.8, - }, - filter: [ - 'all', - ['==', '$type', 'LineString'], - ['in', 'subclass', 'cycleway'], - ], - }, - { - id: 'Cycleway', - type: 'line', - minzoom: cycleHighwayMaxZoom, - source: 'openmaptiles', - 'source-layer': 'transportation', - layout: { visibility: 'visible' }, - paint: { - 'line-color': 'hsl(240, 71%, 72%)', - 'line-width': [ - 'interpolate', - ['linear', 2], - ['zoom'], - 5, - 0, - 10, - 0, - 12, - 1, - 14, - 1, - 16, - 2, - 22, - 9, - ], - 'line-opacity': 1, - }, - filter: [ - 'all', - ['==', '$type', 'LineString'], - ['in', 'subclass', 'cycleway'], - ], - }, - { - id: 'Building', - type: 'fill', - source: 'openmaptiles', - 'source-layer': 'building', - minzoom: 13, - maxzoom: 15, - layout: { visibility: 'visible' }, - paint: { - 'fill-color': 'hsl(30,6%,73%)', - 'fill-opacity': 0.3, - 'fill-outline-color': { - base: 1, - stops: [ - [13, 'hsla(35, 6%, 79%, 0.3)'], - [14, 'hsl(35, 6%, 79%)'], - ], - }, - }, - metadata: {}, - }, - { - id: 'Building 3D', - type: 'fill-extrusion', - source: 'openmaptiles', - 'source-layer': 'building', - minzoom: 15, - layout: { visibility: 'visible' }, - paint: { - 'fill-extrusion-base': { - type: 'identity', - property: 'render_min_height', - }, - 'fill-extrusion-color': ['string', ['get', 'colour'], 'hsl(44,84%,99%)'], - 'fill-extrusion-height': { - type: 'identity', - property: 'render_height', - }, - 'fill-extrusion-opacity': 0.4, - }, - metadata: {}, - filter: ['all', ['!has', 'hide_3d']], - }, - { - id: 'Aqueduct outline', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'waterway', - layout: { - 'line-cap': 'round', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': 'hsl(0,0%,51%)', - 'line-width': { - base: 1.3, - stops: [ - [14, 1], - [20, 6], - ], - }, - }, - filter: ['==', 'brunnel', 'bridge'], - }, - { - id: 'Aqueduct', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'waterway', - layout: { - 'line-cap': 'round', - 'line-join': 'round', - visibility: 'visible', - }, - paint: { - 'line-color': 'hsl(204,92%,75%)', - 'line-width': { - base: 1.3, - stops: [ - [12, 0.5], - [20, 5], ], + 'line-opacity': ['case', ['==', ['get', 'brunnel'], 'tunnel'], 0.7, 1], + 'line-dasharray': [2, 2], }, + metadata: {}, + filter: [ + 'all', + [ + 'in', + 'class', + 'motorway_construction', + 'trunk_construction', + 'primary_construction', + 'secondary_construction', + 'tertiary_construction', + 'minor_construction', + 'service_construction', + 'track_construction', + ], + ], }, - filter: ['all', ['==', '$type', 'LineString'], ['==', 'brunnel', 'bridge']], - }, - { - id: 'Cablecar', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 13, - layout: { 'line-cap': 'round', visibility: 'visible' }, - paint: { - 'line-blur': 1, - 'line-color': 'hsl(0,0%,100%)', - 'line-width': { - base: 1, - stops: [ - [13, 2], - [19, 4], + { + id: 'Minor road', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 10, + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + //'line-color': 'hsl(0,0%,100%)', + + 'line-color': [ + 'case', + [ + 'any', + ['==', ['get', 'subclass'], 'living_street'], + ['==', ['get', 'maxspeed'], 'walk'], + ], + 'hsl(0,0%,100%)', + ['==', ['get', 'maxspeed'], 'FR:zone30'], + 'hsl(215,20%,95%)', + ['==', ['get', 'maxspeed'], 'FR:urban'], + 'hsl(215,20%,80%)', + ['==', ['get', 'maxspeed'], 'FR:rural'], + '#99a6c3', + [ + 'any', + ['==', ['get', 'class'], 'service'], + ['==', ['get', 'access'], 'private'], + ], + 'hsl(0,0%,97%)', + ['!', ['has', 'maxspeed']], + // we consider minor roads without maxspeed and that are not + // living_street or other tags that remain to be found, as + // "medium"-friendly to pedestrians, cyclists and buses + 'hsl(215,20%,85%)', + ['<=', ['to-number', ['get', 'maxspeed']], 20], + 'hsl(0,0%,100%)', + ['<=', ['to-number', ['get', 'maxspeed']], 30], + 'hsl(215,20%,95%)', + ['<=', ['to-number', ['get', 'maxspeed']], 50], + 'hsl(215,20%,80%)', + 'hsl(215,20%,70%)', + ], + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 5, + 0.5, + 10, + 1, + 12, + [ + 'match', + ['get', 'class'], + ['secondary', 'tertiary'], + 1.5, + ['minor', 'service', 'track'], + 1, + 1, + ], + 14, + [ + 'match', + ['get', 'class'], + ['secondary'], + 4, + ['tertiary'], + 3, + ['minor', 'service', 'track'], + 2, + 2, + ], + 16, + [ + 'match', + ['get', 'class'], + ['secondary'], + 7, + ['tertiary'], + 6, + ['minor', 'service', 'track'], + 4, + 4, + ], + 20, + [ + 'match', + ['get', 'class'], + ['secondary'], + 24, + ['tertiary'], + 24, + ['minor', 'service', 'track'], + 16, + 16, + ], ], }, + metadata: {}, + filter: [ + 'all', + ['in', '$type', 'LineString', 'Polygon'], + [ + 'all', + ['any', ['in', 'brunnel', 'bridge', 'ford'], ['!has', 'brunnel']], + [ + 'any', + [ + 'in', + 'class', + 'bus_guideway', + 'busway', + 'courtyard', + 'minor', + 'raceway', + 'raceway_construction', + 'secondary', + 'service', + 'storage_tank', + 'tertiary', + 'track', + 'trunk', + ], + ['!has', 'class'], + ], + ], + ], }, - filter: ['==', 'class', 'aerialway'], - }, - { - id: 'Cablecar dash', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 13, - layout: { - 'line-cap': 'round', - 'line-join': 'bevel', - visibility: 'visible', - }, - paint: { - 'line-color': 'hsl(0,0%,64%)', - 'line-width': { - base: 1, - stops: [ - [13, 1], - [19, 2], + { + id: 'Major road', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 8, + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-color': [ + // simplified version of the "case" of Minor road + 'case', + ['!', ['has', 'maxspeed']], + // we consider minor roads without maxspeed and that are not + // living_street or other tags that remain to be found, as + // "medium"-friendly to pedestrians, cyclists and buses + '#99a6c3', + [ + 'any', + ['==', ['get', 'maxspeed'], 'walk'], + ['<=', ['to-number', ['get', 'maxspeed']], 30], + ], + 'hsl(215,20%,95%)', + '#99a6c3', + ], + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 10, + ['match', ['get', 'class'], ['trunk', 'primary'], 1.3, 0.8], + 12, + ['match', ['get', 'class'], ['trunk', 'primary'], 2.5, 1], + 14, + ['match', ['get', 'class'], ['trunk'], 3, ['primary'], 5, 2], + 16, + ['match', ['get', 'class'], ['trunk', 'primary'], 10, 6], + 20, + ['match', ['get', 'class'], ['trunk', 'primary'], 50, 30], ], }, - 'line-dasharray': [2, 2], - }, - filter: ['==', 'class', 'aerialway'], - }, - { - id: 'Other border', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'boundary', - minzoom: 3, - maxzoom: 22, - layout: { visibility: 'visible' }, - paint: { - 'line-color': 'hsl(0, 0%, 40%)', - 'line-width': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 3, - 0.5, - 4, - 0.6, - 11, - ['case', ['<=', ['get', 'admin_level'], 6], 0.8, 0.75], - 18, - ['case', ['<=', ['get', 'admin_level'], 6], 1.5, 1], + metadata: {}, + filter: [ + 'all', + ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], + ['in', 'class', 'primary', 'trunk'], ], - 'line-dasharray': [1, 1], - }, - filter: ['all', ['in', 'admin_level', 3, 4, 5, 6, 7, 8, 9, 10]], - }, - { - id: 'Disputed border', - type: 'line', - source: 'openmaptiles', - 'source-layer': 'boundary', - minzoom: 0, - layout: { - 'line-cap': 'round', - 'line-join': 'round', - visibility: 'visible', }, - paint: { - 'line-color': 'hsl(0, 0%, 63%)', - 'line-width': { - stops: [ - [1, 0.5], - [5, 1.5], - [10, 2], - [24, 12], + { + id: 'Highway', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 6, + maxzoom: 22, + layout: { + 'line-cap': 'butt', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + //'line-color': 'LightGray', + 'line-color': theme.highway, + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 5, + 0.5, + 6, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'brunnel'], ['bridge'], 0, 1], + 0, + ], + 10, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 0, 2.5], + 1, + ], + 12, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 1, 4], + 1, + ], + 14, + [ + 'match', + ['get', 'class'], + ['motorway'], + ['match', ['get', 'ramp'], 1, 5, 6], + 2, + ], + 16, + ['match', ['get', 'class'], ['motorway'], 8, 4], + 20, + ['match', ['get', 'class'], ['motorway'], 24, 16], ], + 'line-opacity': 1, }, - 'line-dasharray': [2, 2], + metadata: {}, + filter: [ + 'all', + ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], + ['==', 'class', 'motorway'], + ], }, - filter: ['all', ['==', 'admin_level', 2], ['==', 'disputed', 1]], - }, + /* Not sure we need a path outline, hence deactivated for now { - id: 'Country border', + id: 'Path outline', type: 'line', source: 'openmaptiles', - 'source-layer': 'boundary', - minzoom: 0, + 'source-layer': 'transportation', + minzoom: 12, layout: { 'line-cap': 'round', - 'line-join': 'round', + 'line-join': 'miter', visibility: 'visible', }, paint: { - 'line-blur': 0, - 'line-color': 'hsl(0, 0%, 54%)', + 'line-color': '#E8DFFB', 'line-width': { + base: 1.2, stops: [ - [1, 0.5], - [5, 1.5], - [10, 2], - [24, 12], + [14, 0], + [16, 0], + [18, 4], + [22, 8], ], }, }, - filter: ['all', ['==', 'admin_level', 2], ['==', 'disputed', 0]], - }, - { - id: 'River labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'waterway', - minzoom: 13, - layout: { - 'text-font': ['RobotoItalic-NotoSansItalic'], - 'text-size': { - stops: [ - [12, 8], - [16, 14], - [22, 20], - ], + metadata: {}, + filter: [ + 'all', + ['==', '$type', 'LineString'], + ['in', 'class', 'path', 'pedestrian'], + ['!=', 'brunnel', 'tunnel'], + ], + },*/ + { + id: 'Path', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 12, + layout: { + 'line-cap': 'butt', + 'line-join': 'round', + visibility: 'visible', }, - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'symbol-spacing': 400, - 'text-max-width': 5, - 'symbol-placement': 'line', - 'text-letter-spacing': 0.2, - 'text-rotation-alignment': 'map', - }, - paint: { - 'text-halo-color': '#DFEDF6', - 'text-halo-blur': 1, - 'text-color': '#182772', - 'text-halo-width': { - stops: [ - [10, 1], - [18, 2], - ], + paint: { + 'line-color': 'rgba(199, 152, 128, 1)', + 'line-width': { + base: 1.2, + stops: [ + [14, 0.5], + [16, 1], + [18, 2], + [22, 5], + ], + }, + 'line-dasharray': { + stops: [ + [14, [1, 2]], + [18, [1, 1]], + ], + }, }, - }, - filter: ['all', ['==', '$type', 'LineString']], - }, - { - id: 'Ocean labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'water_name', - minzoom: 0, - maxzoom: 14, - layout: { - 'text-font': ['RobotoItalic-NotoSansItalic'], - 'text-size': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 1, - ['match', ['get', 'class'], ['ocean'], 14, 8], - 3, - ['match', ['get', 'class'], ['ocean'], 18, 12], - 9, - ['match', ['get', 'class'], ['ocean'], 22, 14], - 14, - ['match', ['get', 'class'], ['lake'], 12, ['sea'], 18, 26], - ], - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-max-width': 5, - }, - paint: { - 'text-color': 'white', - 'text-opacity': [ - 'step', - ['zoom'], - 0, - 1, - ['match', ['get', 'class'], ['ocean'], 1, 0], - 3, - 1, + metadata: {}, + filter: [ + 'all', + ['==', '$type', 'LineString'], + ['in', 'class', 'path', 'pedestrian'], + ['!=', 'brunnel', 'tunnel'], + ['!=', 'subclass', 'cycleway'], ], - 'text-halo-blur': 1, - 'text-halo-color': '#35a', - 'text-halo-width': 1, }, - metadata: {}, - filter: ['all', ['==', '$type', 'Point'], ['!=', 'class', 'lake']], - }, - { - id: 'Lake labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'water_name', - minzoom: 0, - layout: { - 'text-font': ['RobotoItalic-NotoSansItalic'], - 'text-size': { - stops: [ - [10, 13], - [14, 16], - [22, 20], + { + id: 'Major rail', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 4, + maxzoom: 22, + layout: { visibility: 'visible' }, + paint: { + 'line-blur': 0, + 'line-color': [ + 'interpolate', + ['exponential', 1], + ['zoom'], + 8, + theme.railway, + 19, + 'hsl(0, 0%, 70%)', + ], + 'line-width': [ + 'interpolate', + ['linear'], + ['zoom'], + 0, + 0, + 9, + 2, + 14, + 1, + 17, + 3, + 22, + 6, ], + 'line-opacity': ['match', ['get', 'service'], 'yard', 0.4, 1], }, - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-max-width': 5, - 'text-letter-spacing': 0.1, - }, - paint: { - 'text-color': 'white', - 'text-halo-color': '#3051a4', - 'text-halo-width': 1.5, - }, - metadata: {}, - filter: ['all', ['==', '$type', 'Point'], ['==', 'class', 'lake']], - }, - { - id: 'Housenumber', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'housenumber', - minzoom: 18, - layout: { - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': 10, - 'text-field': '{housenumber}', - visibility: 'visible', - }, - paint: { - 'text-color': 'hsl(26,10%,44%)', - 'text-halo-blur': 1, - 'text-halo-color': 'hsl(21,64%,96%)', - 'text-halo-width': 1, + metadata: {}, + filter: ['all', ['!in', 'brunnel', 'tunnel'], ['==', 'class', 'rail']], }, - }, - { - id: 'Gondola', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'transportation_name', - minzoom: 13, - layout: { - 'text-font': ['RobotoItalic-NotoSansItalic'], - 'text-size': { - base: 1, - stops: [ - [13, 11], - [15, 12], - [18, 13], - [22, 14], - ], + { + id: 'Major rail hatching', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { + 'line-color': [ + 'interpolate', + ['exponential', 1], + ['zoom'], + 8, + '#916BD4', + 18, + 'hsl(0, 0%, 90%)', + ], + 'line-width': { + base: 1.4, + stops: [ + [14.5, 2], + [15, 6], + [20, 10], + ], + }, + 'line-opacity': ['match', ['get', 'service'], 'yard', 0.5, 1], + 'line-dasharray': [0.2, 9], }, - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'center', - 'text-offset': [0.8, 0.8], - 'symbol-placement': 'line', - }, - paint: { - 'text-color': 'hsl(0,0%,40%)', - 'text-halo-blur': 1, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, + metadata: {}, + filter: [ + 'all', + ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']], + ['==', 'class', 'rail'], + ], }, - metadata: {}, - filter: ['all', ['in', 'subclass', 'gondola', 'cable_car']], - }, - { - id: 'Ferry', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'transportation_name', - minzoom: 12, - layout: { - 'text-font': ['RobotoItalic-NotoSansItalic'], - 'text-size': { - base: 1, - stops: [ - [13, 11], - [15, 12], - ], + { + id: 'Minor rail', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 4, + maxzoom: 22, + layout: { + 'line-cap': 'butt', + 'line-join': 'miter', + visibility: 'visible', }, - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'center', - 'text-offset': [0.8, 0.8], - 'symbol-placement': 'line', - }, - paint: { - 'text-color': 'white', - 'text-halo-blur': 0.5, - 'text-halo-width': 1, + paint: { + 'line-color': 'hsl(319, 82%, 33%)', + 'line-width': ['interpolate', ['linear'], ['zoom'], 0, 0, 22, 2], + 'line-opacity': 0.2, + 'line-gap-width': 0, + }, + metadata: {}, + filter: [ + 'all', + ['in', '$type', 'LineString', 'Polygon'], + ['in', 'subclass', 'light_rail', 'subway', 'tram'], + ], }, - filter: ['all', ['==', 'class', 'ferry']], - }, - { - id: 'Oneway', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'transportation', - minzoom: 16, - layout: { - 'icon-size': { - stops: [ - [16, 0.7], - [19, 1], + { + id: 'Minor rail hatching', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { + 'line-color': 'hsl(0,0%,73%)', + 'line-width': { + base: 1.4, + stops: [ + [14.5, 0], + [15, 2], + [20, 6], + ], + }, + 'line-dasharray': [0.2, 4], + }, + metadata: {}, + filter: ['all', ['in', 'subclass', 'tram', 'light_rail']], + }, + ...cycleHighwayLayers, + { + id: 'Cycleway outline', + type: 'line', + minzoom: cycleHighwayMaxZoom, + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { + 'line-color': 'hsl(240, 45%, 33%)', + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 5, + 0, + 10, + 0, + 12, + 1, + 14, + 1, + 16, + 3, + 22, + 14, ], + 'line-opacity': 0.8, }, - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'icon-image': 'oneway', - visibility: 'visible', - 'icon-rotate': ['match', ['get', 'oneway'], 1, 90, -90], - 'icon-padding': 2, - 'symbol-spacing': 75, - // This seems to break after a diff from other maptiler styles. Dunno - // why . Hence we disable the diff - 'symbol-placement': 'line', - 'icon-rotation-alignment': 'map', - }, - paint: { - // it looks like we can't control the color here - 'icon-color': 'hsl(0, 0%, 65%)', - 'icon-opacity': 0.5, - }, - filter: [ - 'all', - ['has', 'oneway'], - [ - 'in', - 'class', - 'motorway', - 'trunk', - 'primary', - 'secondary', - 'tertiary', - 'minor', - 'service', + filter: [ + 'all', + ['==', '$type', 'LineString'], + ['in', 'subclass', 'cycleway'], ], - ], - }, - { - id: 'Road labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'transportation_name', - minzoom: 6, - maxzoom: 22, - layout: { - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [13, 10], - [14, 11], - [18, 13], - [22, 15], + }, + { + id: 'Cycleway', + type: 'line', + minzoom: cycleHighwayMaxZoom, + source: 'openmaptiles', + 'source-layer': 'transportation', + layout: { visibility: 'visible' }, + paint: { + 'line-color': 'hsl(240, 71%, 72%)', + 'line-width': [ + 'interpolate', + ['linear', 2], + ['zoom'], + 5, + 0, + 10, + 0, + 12, + 1, + 14, + 1, + 16, + 2, + 22, + 9, ], + 'line-opacity': 1, }, - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'center', - 'text-offset': [0, 0.15], - 'text-justify': 'center', - 'text-optional': false, - 'text-max-width': 10, - 'symbol-placement': 'line', - 'icon-keep-upright': false, - 'icon-allow-overlap': false, - 'text-allow-overlap': false, - 'icon-ignore-placement': false, - 'text-ignore-placement': false, + filter: [ + 'all', + ['==', '$type', 'LineString'], + ['in', 'subclass', 'cycleway'], + ], }, - paint: { - 'text-color': 'hsl(19, 0%, 16%)', - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, + { + id: 'Building', + type: 'fill', + source: 'openmaptiles', + 'source-layer': 'building', + minzoom: 13, + maxzoom: 15, + layout: { visibility: 'visible' }, + paint: { + 'fill-color': theme.buildingFill, + 'fill-opacity': 0.3, + 'fill-outline-color': theme.buildingOutline, + }, + metadata: {}, + }, + { + id: 'Building 3D', + type: 'fill-extrusion', + source: 'openmaptiles', + 'source-layer': 'building', + minzoom: 15, + layout: { visibility: 'visible' }, + paint: { + 'fill-extrusion-base': { + type: 'identity', + property: 'render_min_height', + }, + 'fill-extrusion-color': [ + 'string', + ['get', 'colour'], + 'hsl(44,84%,99%)', + ], + 'fill-extrusion-height': { + type: 'identity', + property: 'render_height', + }, + 'fill-extrusion-opacity': 0.4, + }, + metadata: {}, + filter: ['all', ['!has', 'hide_3d']], + }, + { + id: 'Aqueduct outline', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'waterway', + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-color': 'hsl(0,0%,51%)', + 'line-width': { + base: 1.3, + stops: [ + [14, 1], + [20, 6], + ], + }, + }, + filter: ['==', 'brunnel', 'bridge'], }, - metadata: {}, - filter: [ - 'all', - ['!in', 'class', 'ferry', 'gondola', 'cable_car'], - ['!in', 'class', 'service'], - ], - }, - { - id: 'Highway junction', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'transportation_name', - minzoom: 16, - maxzoom: 22, - layout: { - 'icon-size': 1, - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': 9, - 'icon-image': 'exit_{ref_length}', - 'text-field': '{ref}', - visibility: 'visible', - 'text-offset': [0, 0.1], - 'symbol-spacing': 200, - 'symbol-z-order': 'auto', - 'symbol-placement': 'point', - 'symbol-avoid-edges': true, - 'icon-rotation-alignment': 'viewport', - 'text-rotation-alignment': 'viewport', + { + id: 'Aqueduct', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'waterway', + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-color': 'hsl(204,92%,75%)', + 'line-width': { + base: 1.3, + stops: [ + [12, 0.5], + [20, 5], + ], + }, + }, + filter: [ + 'all', + ['==', '$type', 'LineString'], + ['==', 'brunnel', 'bridge'], + ], }, - paint: { - 'text-color': 'hsl(0,0%,21%)', - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, + { + id: 'Cablecar', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 13, + layout: { 'line-cap': 'round', visibility: 'visible' }, + paint: { + 'line-blur': 1, + 'line-color': 'hsl(0,0%,100%)', + 'line-width': { + base: 1, + stops: [ + [13, 2], + [19, 4], + ], + }, + }, + filter: ['==', 'class', 'aerialway'], }, - filter: [ - 'all', - ['>', 'ref_length', 0], - ['==', '$type', 'Point'], - ['==', 'subclass', 'junction'], - ], - }, - { - id: 'Highway shield', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'transportation_name', - minzoom: 22, - maxzoom: 22, - layout: { - 'icon-size': 1, - 'text-font': [ - 'match', - ['get', 'class'], - 'motorway', - ['literal', ['RobotoBold-NotoSansBold']], - ['literal', ['RobotoRegular-NotoSansRegular']], - ], - 'text-size': 10, - 'icon-image': 'road_{ref_length}', - 'text-field': '{ref}', - visibility: 'visible', - 'text-offset': [0, 0.1], - 'text-padding': 2, - 'symbol-spacing': { - stops: [ - [10, 200], - [18, 400], + { + id: 'Cablecar dash', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 13, + layout: { + 'line-cap': 'round', + 'line-join': 'bevel', + visibility: 'visible', + }, + paint: { + 'line-color': 'hsl(0,0%,64%)', + 'line-width': { + base: 1, + stops: [ + [13, 1], + [19, 2], + ], + }, + 'line-dasharray': [2, 2], + }, + filter: ['==', 'class', 'aerialway'], + }, + { + id: 'Other border', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'boundary', + minzoom: 3, + maxzoom: 22, + layout: { visibility: 'visible' }, + paint: { + 'line-color': 'hsl(0, 0%, 40%)', + 'line-width': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 3, + 0.5, + 4, + 0.6, + 11, + ['case', ['<=', ['get', 'admin_level'], 6], 0.8, 0.75], + 18, + ['case', ['<=', ['get', 'admin_level'], 6], 1.5, 1], ], + 'line-dasharray': [1, 1], }, - 'text-transform': 'uppercase', - 'symbol-placement': 'line', - 'symbol-avoid-edges': true, - 'icon-rotation-alignment': 'viewport', - 'text-rotation-alignment': 'viewport', + filter: ['all', ['in', 'admin_level', 3, 4, 5, 6, 7, 8, 9, 10]], }, - paint: { 'text-color': 'hsl(0,0%,18%)' }, - filter: [ - 'all', - ['<=', 'ref_length', 6], - ['==', '$type', 'LineString'], - ['!in', 'network', 'us-interstate', 'us-highway', 'us-state'], - ['!in', 'class', 'path'], - ], - }, - { - id: 'Highway shield (US)', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'transportation_name', - minzoom: 7, - layout: { - 'icon-size': 1.1, - 'text-font': [ - 'match', - ['get', 'class'], - 'motorway', - ['literal', ['RobotoBold-NotoSansBold']], - ['literal', ['RobotoRegular-NotoSansRegular']], - ], - 'text-size': 9, - 'icon-image': '{network}_{ref_length}', - 'text-field': '{ref}', - visibility: 'visible', - 'text-offset': [0, 0.2], - 'symbol-spacing': 200, - 'symbol-placement': { - base: 1, - stops: [ - [7, 'point'], - [7, 'line'], - [8, 'line'], + { + id: 'Disputed border', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'boundary', + minzoom: 0, + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-color': 'hsl(0, 0%, 63%)', + 'line-width': { + stops: [ + [1, 0.5], + [5, 1.5], + [10, 2], + [24, 12], + ], + }, + 'line-dasharray': [2, 2], + }, + filter: ['all', ['==', 'admin_level', 2], ['==', 'disputed', 1]], + }, + { + id: 'Country border', + type: 'line', + source: 'openmaptiles', + 'source-layer': 'boundary', + minzoom: 0, + layout: { + 'line-cap': 'round', + 'line-join': 'round', + visibility: 'visible', + }, + paint: { + 'line-blur': 0, + 'line-color': 'hsl(0, 0%, 54%)', + 'line-width': { + stops: [ + [1, 0.5], + [5, 1.5], + [10, 2], + [24, 12], + ], + }, + }, + filter: ['all', ['==', 'admin_level', 2], ['==', 'disputed', 0]], + }, + { + id: 'River labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'waterway', + minzoom: 13, + layout: { + 'text-font': ['RobotoItalic-NotoSansItalic'], + 'text-size': { + stops: [ + [12, 8], + [16, 14], + [22, 20], + ], + }, + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'symbol-spacing': 400, + 'text-max-width': 5, + 'symbol-placement': 'line', + 'text-letter-spacing': 0.2, + 'text-rotation-alignment': 'map', + }, + paint: { + 'text-halo-color': '#DFEDF6', + 'text-halo-blur': 1, + 'text-color': '#182772', + 'text-halo-width': { + stops: [ + [10, 1], + [18, 2], + ], + }, + }, + filter: ['all', ['==', '$type', 'LineString']], + }, + { + id: 'Ocean labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'water_name', + minzoom: 0, + maxzoom: 14, + layout: { + 'text-font': ['RobotoItalic-NotoSansItalic'], + 'text-size': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 1, + ['match', ['get', 'class'], ['ocean'], 14, 8], + 3, + ['match', ['get', 'class'], ['ocean'], 18, 12], + 9, + ['match', ['get', 'class'], ['ocean'], 22, 14], + 14, + ['match', ['get', 'class'], ['lake'], 12, ['sea'], 18, 26], + ], + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-max-width': 5, + }, + paint: { + 'text-color': 'white', + 'text-opacity': [ + 'step', + ['zoom'], + 0, + 1, + ['match', ['get', 'class'], ['ocean'], 1, 0], + 3, + 1, ], + 'text-halo-blur': 1, + 'text-halo-color': '#35a', + 'text-halo-width': 1, + }, + metadata: {}, + filter: ['all', ['==', '$type', 'Point'], ['!=', 'class', 'lake']], + }, + { + id: 'Lake labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'water_name', + minzoom: 0, + layout: { + 'text-font': ['RobotoItalic-NotoSansItalic'], + 'text-size': { + stops: [ + [10, 13], + [14, 16], + [22, 20], + ], + }, + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-max-width': 5, + 'text-letter-spacing': 0.1, + }, + paint: { + 'text-color': 'white', + 'text-halo-color': '#3051a4', + 'text-halo-width': 1.5, + }, + metadata: {}, + filter: ['all', ['==', '$type', 'Point'], ['==', 'class', 'lake']], + }, + { + id: 'Housenumber', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'housenumber', + minzoom: 18, + layout: { + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': 10, + 'text-field': '{housenumber}', + visibility: 'visible', + }, + paint: { + 'text-color': 'hsl(26,10%,44%)', + 'text-halo-blur': 1, + 'text-halo-color': 'hsl(21,64%,96%)', + 'text-halo-width': 1, + }, + }, + { + id: 'Gondola', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'transportation_name', + minzoom: 13, + layout: { + 'text-font': ['RobotoItalic-NotoSansItalic'], + 'text-size': { + base: 1, + stops: [ + [13, 11], + [15, 12], + [18, 13], + [22, 14], + ], + }, + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'center', + 'text-offset': [0.8, 0.8], + 'symbol-placement': 'line', + }, + paint: { + 'text-color': 'hsl(0,0%,40%)', + 'text-halo-blur': 1, + 'text-halo-color': dark ? 'hsla(0,0%,100%,0.2)' : 'hsl(0,0%,100%)', + 'text-halo-width': dark ? 0.5 : 1, + }, + metadata: {}, + filter: ['all', ['in', 'subclass', 'gondola', 'cable_car']], + }, + { + id: 'Ferry', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'transportation_name', + minzoom: 12, + layout: { + 'text-font': ['RobotoItalic-NotoSansItalic'], + 'text-size': { + base: 1, + stops: [ + [13, 11], + [15, 12], + ], + }, + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'center', + 'text-offset': [0.8, 0.8], + 'symbol-placement': 'line', + }, + paint: { + 'text-color': 'white', + 'text-halo-blur': 0.5, + 'text-halo-width': 1, + }, + filter: ['all', ['==', 'class', 'ferry']], + }, + { + id: 'Oneway', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'transportation', + minzoom: 16, + layout: { + 'icon-size': { + stops: [ + [16, 0.7], + [19, 1], + ], + }, + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'icon-image': 'oneway', + visibility: 'visible', + 'icon-rotate': ['match', ['get', 'oneway'], 1, 90, -90], + 'icon-padding': 2, + 'symbol-spacing': 75, + // This seems to break after a diff from other maptiler styles. Dunno + // why . Hence we disable the diff + 'symbol-placement': 'line', + 'icon-rotation-alignment': 'map', }, - 'symbol-avoid-edges': true, - 'icon-rotation-alignment': 'viewport', - 'text-rotation-alignment': 'viewport', + paint: { + // it looks like we can't control the color here + 'icon-color': 'hsl(0, 0%, 65%)', + 'icon-opacity': 0.5, + }, + filter: [ + 'all', + ['has', 'oneway'], + [ + 'in', + 'class', + 'motorway', + 'trunk', + 'primary', + 'secondary', + 'tertiary', + 'minor', + 'service', + ], + ], }, - paint: { - 'text-color': [ - 'match', - ['get', 'network'], - 'us-interstate', - 'hsl(0,0%,100%)', - 'hsl(0,0%,14%)', + { + id: 'Road labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'transportation_name', + minzoom: 6, + maxzoom: 22, + layout: { + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [13, 10], + [14, 11], + [18, 13], + [22, 15], + ], + }, + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'center', + 'text-offset': [0, 0.15], + 'text-justify': 'center', + 'text-optional': false, + 'text-max-width': 10, + 'symbol-placement': 'line', + 'icon-keep-upright': false, + 'icon-allow-overlap': false, + 'text-allow-overlap': false, + 'icon-ignore-placement': false, + 'text-ignore-placement': false, + }, + paint: { + 'text-color': 'hsl(19, 0%, 16%)', + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + metadata: {}, + filter: [ + 'all', + ['!in', 'class', 'ferry', 'gondola', 'cable_car'], + ['!in', 'class', 'service'], ], }, - filter: [ - 'all', - ['<=', 'ref_length', 6], - ['==', '$type', 'LineString'], - ['in', 'network', 'us-interstate', 'us-highway', 'us-state'], - ], - }, - { - id: 'Parking', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'poi', - minzoom: 17, - layout: { - 'icon-size': 0.7, - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [12, 10], - [16, 12], - [22, 14], - ], + { + id: 'Highway junction', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'transportation_name', + minzoom: 16, + maxzoom: 22, + layout: { + 'icon-size': 1, + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': 9, + 'icon-image': 'exit_{ref_length}', + 'text-field': '{ref}', + visibility: 'visible', + 'text-offset': [0, 0.1], + 'symbol-spacing': 200, + 'symbol-z-order': 'auto', + 'symbol-placement': 'point', + 'symbol-avoid-edges': true, + 'icon-rotation-alignment': 'viewport', + 'text-rotation-alignment': 'viewport', }, - 'icon-image': 'parking', - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'top', - 'text-offset': [0, 0.8], - 'text-padding': 2, - 'text-max-width': 8, - 'icon-allow-overlap': false, + paint: { + 'text-color': 'hsl(0,0%,21%)', + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + filter: [ + 'all', + ['>', 'ref_length', 0], + ['==', '$type', 'Point'], + ['==', 'subclass', 'junction'], + ], }, - paint: { - 'icon-color': 'hsl(55, 84%, 44%)', - 'text-color': 'hsl(17,17%,38%)', - 'icon-opacity': 1, - 'text-opacity': 1, - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, + { + id: 'Highway shield', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'transportation_name', + minzoom: 22, + maxzoom: 22, + layout: { + 'icon-size': 1, + 'text-font': [ + 'match', + ['get', 'class'], + 'motorway', + ['literal', ['RobotoBold-NotoSansBold']], + ['literal', ['RobotoRegular-NotoSansRegular']], + ], + 'text-size': 10, + 'icon-image': 'road_{ref_length}', + 'text-field': '{ref}', + visibility: 'visible', + 'text-offset': [0, 0.1], + 'text-padding': 2, + 'symbol-spacing': { + stops: [ + [10, 200], + [18, 400], + ], + }, + 'text-transform': 'uppercase', + 'symbol-placement': 'line', + 'symbol-avoid-edges': true, + 'icon-rotation-alignment': 'viewport', + 'text-rotation-alignment': 'viewport', + }, + paint: { 'text-color': 'hsl(0,0%,18%)' }, + filter: [ + 'all', + ['<=', 'ref_length', 6], + ['==', '$type', 'LineString'], + ['!in', 'network', 'us-interstate', 'us-highway', 'us-state'], + ['!in', 'class', 'path'], + ], }, - metadata: {}, - filter: ['==', 'class', 'parking'], - }, - { - id: 'Park', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'poi', - minzoom: 13, - layout: { - 'icon-size': 1, - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [12, 10], - [16, 12], - [22, 14], + { + id: 'Highway shield (US)', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'transportation_name', + minzoom: 7, + layout: { + 'icon-size': 1.1, + 'text-font': [ + 'match', + ['get', 'class'], + 'motorway', + ['literal', ['RobotoBold-NotoSansBold']], + ['literal', ['RobotoRegular-NotoSansRegular']], + ], + 'text-size': 9, + 'icon-image': '{network}_{ref_length}', + 'text-field': '{ref}', + visibility: 'visible', + 'text-offset': [0, 0.2], + 'symbol-spacing': 200, + 'symbol-placement': { + base: 1, + stops: [ + [7, 'point'], + [7, 'line'], + [8, 'line'], + ], + }, + 'symbol-avoid-edges': true, + 'icon-rotation-alignment': 'viewport', + 'text-rotation-alignment': 'viewport', + }, + paint: { + 'text-color': [ + 'match', + ['get', 'network'], + 'us-interstate', + 'hsl(0,0%,100%)', + 'hsl(0,0%,14%)', ], }, - 'icon-image': '{class}', - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'top', - 'text-offset': [0, 0.8], - 'text-padding': 2, - 'text-max-width': 8, - 'icon-allow-overlap': false, + filter: [ + 'all', + ['<=', 'ref_length', 6], + ['==', '$type', 'LineString'], + ['in', 'network', 'us-interstate', 'us-highway', 'us-state'], + ], }, - paint: { - 'icon-color': 'hsl(82,83%,25%)', - 'text-color': 'hsl(82,43%,25%)', - 'icon-opacity': 1, - 'text-opacity': 1, - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, + { + id: 'Parking', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'poi', + minzoom: 17, + layout: { + 'icon-size': 0.7, + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [12, 10], + [16, 12], + [22, 14], + ], + }, + 'icon-image': 'parking', + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'top', + 'text-offset': [0, 0.8], + 'text-padding': 2, + 'text-max-width': 8, + 'icon-allow-overlap': false, + }, + paint: { + 'icon-color': 'hsl(55, 84%, 44%)', + 'text-color': 'hsl(17,17%,38%)', + 'icon-opacity': 1, + 'text-opacity': 1, + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + metadata: {}, + filter: ['==', 'class', 'parking'], + }, + { + id: 'Park', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'poi', + minzoom: 13, + layout: { + 'icon-size': 1, + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [12, 10], + [16, 12], + [22, 14], + ], + }, + 'icon-image': '{class}', + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'top', + 'text-offset': [0, 0.8], + 'text-padding': 2, + 'text-max-width': 8, + 'icon-allow-overlap': false, + }, + paint: { + 'icon-color': 'hsl(82,83%,25%)', + 'text-color': 'hsl(82,43%,25%)', + 'icon-opacity': 1, + 'text-opacity': 1, + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + metadata: {}, + filter: ['all', ['in', 'class', 'golf', 'park'], hasNameExpression], + }, + { + id: 'Healthcare', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'poi', + minzoom: 13, + layout: { + 'icon-size': 1, + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [12, 10], + [16, 12], + [22, 14], + ], + }, + 'icon-image': '{subclass}', + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'top', + 'text-offset': [0, 0.8], + 'text-padding': 2, + 'text-max-width': 8, + 'icon-allow-overlap': false, + }, + paint: { + 'icon-color': 'hsl(6,94%,35%)', + 'text-color': 'hsl(6,94%,35%)', + 'icon-opacity': 1, + 'text-opacity': 1, + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + metadata: {}, + filter: [ + 'all', + ['==', 'class', 'hospital'], + ['==', 'subclass', 'hospital'], + ], }, - metadata: {}, - filter: ['all', ['in', 'class', 'golf', 'park'], hasNameExpression], - }, - { - id: 'Healthcare', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'poi', - minzoom: 13, - layout: { - 'icon-size': 1, - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [12, 10], - [16, 12], - [22, 14], + { + id: 'Other POI', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'poi', + minzoom: 13, + layout: { + 'icon-size': 1, + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [12, 10], + [16, 12], + [22, 14], + ], + }, + 'icon-image': [ + 'coalesce', + ['image', ['get', 'subclass']], + ['image', ['get', 'class']], + ['image', 'dot'], + ], + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'top', + 'text-offset': [0, 0.8], + 'text-padding': 2, + 'text-max-width': 8, + 'icon-allow-overlap': false, + }, + paint: { + 'text-color': [ + 'match', + ['get', 'class'], + ['aerialway', 'bus', 'bicycle_rental', 'entrance'], + 'hsl(215,83%,53%)', + ['ferry_terminal', 'harbor'], + '#06066f', + ['hospital'], + 'hsl(6,94%,35%)', + 'hsl(17,17%,38%)', + ], + 'icon-opacity': [ + 'step', + ['zoom'], + 0, + 15, + [ + 'match', + ['get', 'class'], + [ + 'aerialway', + 'castle', + 'cemetery', + 'diplomatic', + 'ferry_terminal', + 'harbor', + 'hospital', + 'stadium', + 'place_of_worship', + 'zoo', + ], + 1, + 0, + ], + 16, + [ + 'match', + ['get', 'class'], + [ + 'castle', + 'cemetery', + 'town_hall', + 'diplomatic', + 'ferry_terminal', + 'hospital', + 'stadium', + 'college', + 'university', + 'place_of_worship', + 'zoo', + 'museum', + 'school', + 'parking', + 'lodging', + ], + 1, + 0, + ], + 17, + 1, + 22, + 1, + ], + 'text-opacity': [ + 'step', + ['zoom'], + 0, + 15, + [ + 'match', + ['get', 'class'], + [ + 'castle', + 'courthouse', + 'diplomatic', + 'ferry_terminal', + 'aerialway', + 'harbor', + 'stadium', + 'university', + 'hospital', + 'place_of_worship', + 'zoo', + ], + 1, + 0, + ], + 16, + [ + 'match', + ['get', 'class'], + [ + 'castle', + 'cemetery', + 'town_hall', + 'diplomatic', + 'harbor', + 'college', + 'university', + 'ferry_terminal', + 'hospital', + 'stadium', + 'place_of_worship', + 'zoo', + 'museum', + 'school', + 'lodging', + ], + 1, + 0, + ], + 17, + 1, + 22, + 1, ], + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, }, - 'icon-image': '{subclass}', - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'top', - 'text-offset': [0, 0.8], - 'text-padding': 2, - 'text-max-width': 8, - 'icon-allow-overlap': false, - }, - paint: { - 'icon-color': 'hsl(6,94%,35%)', - 'text-color': 'hsl(6,94%,35%)', - 'icon-opacity': 1, - 'text-opacity': 1, - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, + metadata: {}, + filter: [ + 'all', + ['!in', 'class', 'hospital', 'parking', 'railway', 'park'], + ], }, - metadata: {}, - filter: [ - 'all', - ['==', 'class', 'hospital'], - ['==', 'subclass', 'hospital'], - ], - }, - { - id: 'Other POI', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'poi', - minzoom: 13, - layout: { - 'icon-size': 1, - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [12, 10], - [16, 12], - [22, 14], + // TODO this should be done way better. Should be areas with boundaries. + // Should include large areas like Parc naturel régional d'armorique + { + id: 'Protected area labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'park', + minzoom: 9, + maxzoom: 22, + layout: { + 'text-font': ['RobotoItalic-NotoSansItalic'], + 'text-size': ['interpolate', ['linear'], ['zoom'], 9, 11, 14, 14], + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-padding': { + stops: [ + [6, 39], + [14, 99], + ], + }, + 'symbol-spacing': 750, + 'symbol-sort-key': ['to-number', ['get', 'rank']], + 'text-letter-spacing': 0.1, + 'text-ignore-placement': false, + }, + paint: { + 'icon-color': 'hsl(120, 11%, 5%)', + 'text-color': 'hsl(120, 11%, 5%)', + 'text-opacity': [ + 'step', + ['zoom'], + 0, + 9, + ['case', ['==', ['get', 'rank'], 1], 1, 0], + 10, + 1, ], + 'text-halo-blur': 2, + 'text-halo-color': 'hsla(0, 0%, 100%, 0.6)', + 'text-halo-width': 2, }, - 'icon-image': [ - 'coalesce', - ['image', ['get', 'subclass']], - ['image', ['get', 'class']], - ['image', 'dot'], + filter: [ + '!in', + 'class', + 'aire_d’adhésion_de_parc_national', + 'parc_national', + 'narodni_park', + 'national_nature_park', + 'national_park', + 'nationalpark', + 'natural_parc', + 'národní_park', + 'národný_park', + 'ochranné_pásmo_národného_parku', + 'parc_naturel_national', + 'parc_național', + 'parco_nazionale', + 'parque_nacional', + 'национальный_парк', ], - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'top', - 'text-offset': [0, 0.8], - 'text-padding': 2, - 'text-max-width': 8, - 'icon-allow-overlap': false, }, - paint: { - 'text-color': [ - 'match', - ['get', 'class'], - ['aerialway', 'bus', 'bicycle_rental', 'entrance'], - 'hsl(215,83%,53%)', - ['ferry_terminal', 'harbor'], - '#06066f', - ['hospital'], - 'hsl(6,94%,35%)', - 'hsl(17,17%,38%)', - ], - 'icon-opacity': [ - 'step', - ['zoom'], - 0, - 15, - [ - 'match', - ['get', 'class'], + { + id: 'Place labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'place', + minzoom: 4, + layout: { + 'icon-size': { + stops: [ + [6, 0.5], + [8.9, 0.8], + [9, 0], + ], + }, + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 3, + 11, + 8, + 13, + 11, [ - 'aerialway', - 'castle', - 'cemetery', - 'diplomatic', - 'ferry_terminal', - 'harbor', - 'hospital', - 'stadium', - 'place_of_worship', - 'zoo', + 'match', + ['get', 'class'], + 'village', + 12, + [ + 'suburb', + 'neighbourhood', + 'quarter', + 'hamlet', + 'isolated_dwelling', + ], + 9, + 'island', + 8, + 12, ], - 1, + 16, + [ + 'match', + ['get', 'class'], + 'village', + 18, + [ + 'suburb', + 'neighbourhood', + 'quarter', + 'hamlet', + 'isolated_dwelling', + ], + 15, + 'island', + 11, + 16, + ], + ], + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'bottom', + 'text-offset': [0, 0], + 'text-padding': 2, + 'icon-optional': false, + 'text-max-width': ['match', ['get', 'class'], ['island'], 6, 8], + 'text-transform': [ + 'match', + ['get', 'class'], + ['suburb', 'neighborhood', 'neighbourhood', 'quarter', 'island'], + 'uppercase', + 'none', + ], + 'icon-allow-overlap': true, + 'text-letter-spacing': [ + 'match', + ['get', 'class'], + ['suburb', 'neighborhood', 'neighbourhood', 'quarter', 'island'], + 0.2, 0, ], - 16, + }, + paint: { + 'text-color': !dark ? 'hsl(0,0%,15%)' : 'hsl(0,0%,100%)', + 'icon-opacity': 1, + 'text-opacity': [ + 'step', + ['zoom'], + 1, + 8, + ['match', ['get', 'class'], ['island'], 0, 1], + 9, + ['match', ['get', 'class'], ['island'], 1, 1], + ], + 'text-halo-color': dark ? 'hsla(0,0%,10%)' : 'hsl(0,0%,100%)', + 'text-halo-width': dark ? 0.6 : 1.2, + }, + metadata: {}, + filter: [ + 'all', [ + '!in', + 'class', + 'continent', + 'country', + 'state', + 'region', + 'province', + 'city', + 'town', + ], + ], + }, + { + id: 'Station', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'poi', + minzoom: 10, + maxzoom: 22, + layout: { + 'icon-size': { + stops: [ + [10, 0.7], + [13, 0.8], + [18, 1], + ], + }, + 'text-font': ['RobotoMediumRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [10, 10], + [13, 11], + [16, 12], + [22, 16], + ], + }, + 'icon-image': [ 'match', - ['get', 'class'], + ['get', 'subclass'], + ['station', 'halt'], + 'railway', + ['subway'], + 'subway', + ['tram_stop'], + 'tramway', + '', + ], + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'icon-anchor': 'center', + 'text-anchor': 'top', + 'text-offset': [0, 0.9], + 'text-padding': 2, + 'text-max-width': 9, + 'text-line-height': 0.9, + }, + paint: { + 'text-color': 'hsl(215,83%,53%)', + 'icon-opacity': [ + 'step', + ['zoom'], + 0, + 10, + ['match', ['get', 'subclass'], ['station'], 1, 0], + 14, + ['match', ['get', 'subclass'], ['station', 'subway'], 1, 0], + 15, [ - 'castle', - 'cemetery', - 'town_hall', - 'diplomatic', - 'ferry_terminal', - 'hospital', - 'stadium', - 'college', - 'university', - 'place_of_worship', - 'zoo', - 'museum', - 'school', - 'parking', - 'lodging', + 'match', + ['get', 'subclass'], + ['station', 'halt', 'subway', 'tram_stop'], + 1, + 0, ], + 17, + 1, + 22, 1, - 0, ], - 17, - 1, - 22, - 1, - ], - 'text-opacity': [ - 'step', - ['zoom'], - 0, - 15, - [ - 'match', - ['get', 'class'], + 'text-opacity': [ + 'step', + ['zoom'], + 0, + 10, + ['match', ['get', 'subclass'], ['station'], 1, 0], + 14, + ['match', ['get', 'subclass'], ['station', 'subway'], 1, 0], + 15, [ - 'castle', - 'courthouse', - 'diplomatic', - 'ferry_terminal', - 'aerialway', - 'harbor', - 'stadium', - 'university', - 'hospital', - 'place_of_worship', - 'zoo', + 'match', + ['get', 'subclass'], + ['station', 'subway', 'halt', 'tram_stop'], + 1, + 0, ], + 17, + 1, + 22, 1, - 0, ], - 16, - [ + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + metadata: {}, + filter: ['all', ['==', 'class', 'railway'], hasNameExpression], + }, + { + id: 'Airport', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'aerodrome_label', + minzoom: 8, + layout: { + 'icon-size': [ + 'interpolate', + ['linear'], + ['zoom'], + 8, + 0.6, + 10, + ['match', ['get', 'class'], 'international', 0.8, 0.6], + 16, + ['match', ['get', 'class'], 'international', 1, 0.8], + ], + 'text-font': ['RobotoMediumRegular-NotoSansRegular'], + 'text-size': [ + 'interpolate', + ['linear'], + ['zoom'], + 9, + 9, + 10, + ['match', ['get', 'class'], 'international', 10, 7], + 14, + ['match', ['get', 'class'], 'international', 13, 11], + ], + 'icon-image': [ 'match', ['get', 'class'], + 'international', + 'airport', + 'airfield', + ], + 'text-field': { + stops: [ + [8, ' '], + [9, '{iata}'], + [12, '{name:fr} \n {name:en}'], // dunno why I can't use the coalesce + nameExpression like anywhere else, hence this hack + ], + }, + visibility: 'visible', + 'text-anchor': 'top', + 'text-offset': [0, 0.8], + 'text-padding': 2, + 'text-optional': true, + 'text-max-width': 9, + 'text-line-height': 1.4, + }, + paint: { + 'text-color': 'hsl(215,83%,53%)', + 'icon-opacity': 1, + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + filter: [ + 'all', + ['has', 'iata'], + [ + 'any', + ['!has', 'class'], [ - 'castle', - 'cemetery', - 'town_hall', - 'diplomatic', - 'harbor', - 'college', - 'university', - 'ferry_terminal', - 'hospital', - 'stadium', - 'place_of_worship', - 'zoo', - 'museum', - 'school', - 'lodging', + 'in', + 'class', + 'international', + 'military', + 'other', + 'private', + 'regional', ], - 1, - 0, ], - 17, - 1, - 22, - 1, ], - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, }, - metadata: {}, - filter: [ - 'all', - ['!in', 'class', 'hospital', 'parking', 'railway', 'park'], - ], - }, - // TODO this should be done way better. Should be areas with boundaries. - // Should include large areas like Parc naturel régional d'armorique - { - id: 'Protected area labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'park', - minzoom: 9, - maxzoom: 22, - layout: { - 'text-font': ['RobotoItalic-NotoSansItalic'], - 'text-size': ['interpolate', ['linear'], ['zoom'], 9, 11, 14, 14], - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-padding': { - stops: [ - [6, 39], - [14, 99], + { + id: 'Airport gate', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'aeroway', + minzoom: 15, + layout: { + 'text-font': ['RobotoMediumRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [15, 10], + [22, 18], + ], + }, + 'text-field': '{ref}', + visibility: 'visible', + }, + paint: { + 'text-color': 'hsl(0,0%,40%)', + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + filter: ['==', 'class', 'gate'], + }, + { + id: 'State labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'place', + minzoom: 3, + maxzoom: 9, + layout: { + 'text-font': ['RobotoMediumRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [3, 8], + [5, 9], + [6, 10], + ], + }, + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-padding': 2, + 'text-max-width': 8, + 'text-transform': 'uppercase', + 'text-letter-spacing': 0.1, + }, + paint: { + 'text-color': theme.stateLabel, + 'text-opacity': [ + 'step', + ['zoom'], + 0, + 3, + ['case', ['<=', ['get', 'rank'], 3], 1, 0], + 8, + ['case', ['==', ['get', 'rank'], 0], 0, 1], + ], + 'text-halo-color': 'hsla(0,0%,100%,0.75)', + 'text-halo-width': 0.8, + }, + metadata: {}, + filter: ['all', ['in', 'class', 'state', 'province'], ['<=', 'rank', 6]], + }, + { + id: 'Town labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'place', + minzoom: 4, + maxzoom: 16, + layout: { + 'icon-size': { + stops: [ + [6, 0.5], + [14, 0.8], + ], + }, + 'text-font': ['RobotoRegular-NotoSansRegular'], + 'text-size': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 6, + ['case', ['<=', ['get', 'rank'], 12], 11, 10], + 9, + ['case', ['<=', ['get', 'rank'], 15], 18, 16], + 16, + ['case', ['<=', ['get', 'rank'], 15], 26, 22], ], + 'icon-image': { + stops: [ + [6, 'circle'], + [12, ' '], + ], + }, + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'bottom', + 'text-offset': [0, 0], + 'icon-optional': false, + 'text-max-width': 8, + 'icon-allow-overlap': true, }, - 'symbol-spacing': 750, - 'symbol-sort-key': ['to-number', ['get', 'rank']], - 'text-letter-spacing': 0.1, - 'text-ignore-placement': false, - }, - paint: { - 'icon-color': 'hsl(120, 11%, 5%)', - 'text-color': 'hsl(120, 11%, 5%)', - 'text-opacity': [ - 'step', - ['zoom'], - 0, - 9, - ['case', ['==', ['get', 'rank'], 1], 1, 0], - 10, - 1, - ], - 'text-halo-blur': 2, - 'text-halo-color': 'hsla(0, 0%, 100%, 0.6)', - 'text-halo-width': 2, - }, - filter: [ - '!in', - 'class', - 'aire_d’adhésion_de_parc_national', - 'parc_national', - 'narodni_park', - 'national_nature_park', - 'national_park', - 'nationalpark', - 'natural_parc', - 'národní_park', - 'národný_park', - 'ochranné_pásmo_národného_parku', - 'parc_naturel_national', - 'parc_național', - 'parco_nazionale', - 'parque_nacional', - 'национальный_парк', - ], - }, - { - id: 'Place labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'place', - minzoom: 4, - layout: { - 'icon-size': { - stops: [ - [6, 0.5], - [8.9, 0.8], - [9, 0], - ], - }, - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 3, - 11, - 8, - 13, - 11, - [ - 'match', - ['get', 'class'], - 'village', + paint: { + 'text-color': [ + 'interpolate', + ['linear'], + ['zoom'], + 6, + 'hsl(0,0%,20%)', 12, - ['suburb', 'neighbourhood', 'quarter', 'hamlet', 'isolated_dwelling'], - 9, - 'island', + 'hsl(0,0%,0%)', + ], + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + metadata: {}, + filter: ['all', ['==', 'class', 'town']], + }, + { + id: 'City labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'place', + minzoom: 4, + maxzoom: 16, + layout: { + 'icon-size': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 4, + ['case', ['==', ['get', 'capital'], 2], 1, 0.8], 8, - 12, + ['case', ['==', ['get', 'capital'], 2], 1, 0.8], + 12.9, + ['case', ['==', ['get', 'capital'], 2], 1.2, 1], + 13, + 0, ], - 16, - [ - 'match', - ['get', 'class'], - 'village', - 18, - ['suburb', 'neighbourhood', 'quarter', 'hamlet', 'isolated_dwelling'], - 15, - 'island', - 11, + 'text-font': ['RobotoMediumRegular-NotoSansRegular'], + 'text-size': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 4, + ['case', ['<=', ['get', 'rank'], 2], 14, 12], + 8, + ['case', ['<=', ['get', 'rank'], 4], 24, 18], 16, + ['case', ['<=', ['get', 'rank'], 4], 32, 26], ], - ], - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'bottom', - 'text-offset': [0, 0], - 'text-padding': 2, - 'icon-optional': false, - 'text-max-width': ['match', ['get', 'class'], ['island'], 6, 8], - 'text-transform': [ - 'match', - ['get', 'class'], - ['suburb', 'neighborhood', 'neighbourhood', 'quarter', 'island'], - 'uppercase', - 'none', - ], - 'icon-allow-overlap': true, - 'text-letter-spacing': [ - 'match', - ['get', 'class'], - ['suburb', 'neighborhood', 'neighbourhood', 'quarter', 'island'], - 0.2, - 0, - ], - }, - paint: { - 'text-color': 'hsl(0,0%,15%)', - 'icon-opacity': 1, - 'text-opacity': [ - 'step', - ['zoom'], - 1, - 8, - ['match', ['get', 'class'], ['island'], 0, 1], - 9, - ['match', ['get', 'class'], ['island'], 1, 1], - ], - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1.2, - }, - metadata: {}, - filter: [ - 'all', - [ - '!in', - 'class', - 'continent', - 'country', - 'state', - 'region', - 'province', - 'city', - 'town', - ], - ], - }, - { - id: 'Station', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'poi', - minzoom: 10, - maxzoom: 22, - layout: { - 'icon-size': { - stops: [ - [10, 0.7], - [13, 0.8], - [18, 1], - ], + 'icon-image': ['step', ['zoom'], 'circle-stroke', 13, ''], + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'bottom', + 'text-offset': [0, -0.1], + 'icon-optional': false, + 'text-max-width': 8, + 'icon-allow-overlap': true, }, - 'text-font': ['RobotoMediumRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [10, 10], - [13, 11], - [16, 12], - [22, 16], - ], - }, - 'icon-image': [ - 'match', - ['get', 'subclass'], - ['station', 'halt'], - 'railway', - ['subway'], - 'subway', - ['tram_stop'], - 'tramway', - '', - ], - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'icon-anchor': 'center', - 'text-anchor': 'top', - 'text-offset': [0, 0.9], - 'text-padding': 2, - 'text-max-width': 9, - 'text-line-height': 0.9, - }, - paint: { - 'text-color': 'hsl(215,83%,53%)', - 'icon-opacity': [ - 'step', - ['zoom'], - 0, - 10, - ['match', ['get', 'subclass'], ['station'], 1, 0], - 14, - ['match', ['get', 'subclass'], ['station', 'subway'], 1, 0], - 15, - [ - 'match', - ['get', 'subclass'], - ['station', 'halt', 'subway', 'tram_stop'], + paint: { + 'text-color': 'hsl(0,0%,15%)', + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 0.8, + }, + metadata: {}, + filter: ['all', ['==', 'class', 'city'], ['>', 'capital', 2]], + }, + { + id: 'Capital city labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'place', + minzoom: 4, + maxzoom: 16, + layout: { + 'icon-size': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 4, 1, - 0, - ], - 17, - 1, - 22, - 1, - ], - 'text-opacity': [ - 'step', - ['zoom'], - 0, - 10, - ['match', ['get', 'subclass'], ['station'], 1, 0], - 14, - ['match', ['get', 'subclass'], ['station', 'subway'], 1, 0], - 15, - [ - 'match', - ['get', 'subclass'], - ['station', 'subway', 'halt', 'tram_stop'], + 8, 1, + 12.9, + 1.2, + 13, 0, ], - 17, - 1, - 22, - 1, - ], - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, - }, - metadata: {}, - filter: ['all', ['==', 'class', 'railway'], hasNameExpression], - }, - { - id: 'Airport', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'aerodrome_label', - minzoom: 8, - layout: { - 'icon-size': [ - 'interpolate', - ['linear'], - ['zoom'], - 8, - 0.6, - 10, - ['match', ['get', 'class'], 'international', 0.8, 0.6], - 16, - ['match', ['get', 'class'], 'international', 1, 0.8], - ], - 'text-font': ['RobotoMediumRegular-NotoSansRegular'], - 'text-size': [ - 'interpolate', - ['linear'], - ['zoom'], - 9, - 9, - 10, - ['match', ['get', 'class'], 'international', 10, 7], - 14, - ['match', ['get', 'class'], 'international', 13, 11], - ], - 'icon-image': [ - 'match', - ['get', 'class'], - 'international', - 'airport', - 'airfield', - ], - 'text-field': { - stops: [ - [8, ' '], - [9, '{iata}'], - [12, '{name:fr} \n {name:en}'], // dunno why I can't use the coalesce + nameExpression like anywhere else, hence this hack - ], - }, - visibility: 'visible', - 'text-anchor': 'top', - 'text-offset': [0, 0.8], - 'text-padding': 2, - 'text-optional': true, - 'text-max-width': 9, - 'text-line-height': 1.4, - }, - paint: { - 'text-color': 'hsl(215,83%,53%)', - 'icon-opacity': 1, - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, - }, - filter: [ - 'all', - ['has', 'iata'], - [ - 'any', - ['!has', 'class'], - [ - 'in', - 'class', - 'international', - 'military', - 'other', - 'private', - 'regional', - ], - ], - ], - }, - { - id: 'Airport gate', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'aeroway', - minzoom: 15, - layout: { - 'text-font': ['RobotoMediumRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [15, 10], - [22, 18], - ], - }, - 'text-field': '{ref}', - visibility: 'visible', - }, - paint: { - 'text-color': 'hsl(0,0%,40%)', - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, - }, - filter: ['==', 'class', 'gate'], - }, - { - id: 'State labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'place', - minzoom: 3, - maxzoom: 9, - layout: { - 'text-font': ['RobotoMediumRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [3, 8], - [5, 9], - [6, 10], + 'text-font': ['RobotoMediumRegular-NotoSansRegular'], + 'text-size': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 4, + 16, + 8, + 26, + 16, + 32, ], + 'icon-image': ['step', ['zoom'], 'circle-stroke', 13, ''], + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-anchor': 'bottom', + 'text-offset': [0, -0.1], + 'icon-optional': false, + 'text-max-width': 8, + 'icon-allow-overlap': true, }, - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-padding': 2, - 'text-max-width': 8, - 'text-transform': 'uppercase', - 'text-letter-spacing': 0.1, - }, - paint: { - 'text-color': 'hsl(48,4%,44%)', - 'text-opacity': [ - 'step', - ['zoom'], - 0, - 3, - ['case', ['<=', ['get', 'rank'], 3], 1, 0], - 8, - ['case', ['==', ['get', 'rank'], 0], 0, 1], - ], - 'text-halo-color': 'hsla(0,0%,100%,0.75)', - 'text-halo-width': 0.8, - }, - metadata: {}, - filter: ['all', ['in', 'class', 'state', 'province'], ['<=', 'rank', 6]], - }, - { - id: 'Town labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'place', - minzoom: 4, - maxzoom: 16, - layout: { - 'icon-size': { - stops: [ - [6, 0.5], - [14, 0.8], - ], - }, - 'text-font': ['RobotoRegular-NotoSansRegular'], - 'text-size': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 6, - ['case', ['<=', ['get', 'rank'], 12], 11, 10], - 9, - ['case', ['<=', ['get', 'rank'], 15], 18, 16], - 16, - ['case', ['<=', ['get', 'rank'], 15], 26, 22], - ], - 'icon-image': { - stops: [ - [6, 'circle'], - [12, ' '], - ], + paint: { + 'text-color': 'hsl(0,0%,5%)', + 'text-halo-blur': 0.5, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 0.8, + }, + metadata: {}, + filter: ['all', ['==', 'class', 'city'], ['<=', 'capital', 2]], + }, + { + id: 'Country labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'place', + minzoom: 1, + maxzoom: 12, + layout: { + 'text-font': ['RobotoMediumRegular-NotoSansRegular'], + 'text-size': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 0, + 8, + 1, + 10, + 4, + ['case', ['>', ['get', 'rank'], 2], 15, 17], + 8, + ['case', ['>', ['get', 'rank'], 2], 19, 23], + ], + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-padding': 1, + 'text-max-width': { + stops: [ + [1, 5], + [5, 8], + ], + }, + 'text-transform': 'none', + 'text-allow-overlap': false, + 'text-letter-spacing': 0.07, }, - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'bottom', - 'text-offset': [0, 0], - 'icon-optional': false, - 'text-max-width': 8, - 'icon-allow-overlap': true, - }, - paint: { - 'text-color': [ - 'interpolate', - ['linear'], - ['zoom'], - 6, - 'hsl(0,0%,20%)', - 12, - 'hsl(0,0%,0%)', - ], - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, - }, - metadata: {}, - filter: ['all', ['==', 'class', 'town']], - }, - { - id: 'City labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'place', - minzoom: 4, - maxzoom: 16, - layout: { - 'icon-size': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 4, - ['case', ['==', ['get', 'capital'], 2], 1, 0.8], - 8, - ['case', ['==', ['get', 'capital'], 2], 1, 0.8], - 12.9, - ['case', ['==', ['get', 'capital'], 2], 1.2, 1], - 13, - 0, - ], - 'text-font': ['RobotoMediumRegular-NotoSansRegular'], - 'text-size': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 4, - ['case', ['<=', ['get', 'rank'], 2], 14, 12], - 8, - ['case', ['<=', ['get', 'rank'], 4], 24, 18], - 16, - ['case', ['<=', ['get', 'rank'], 4], 32, 26], - ], - 'icon-image': ['step', ['zoom'], 'circle-stroke', 13, ''], - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'bottom', - 'text-offset': [0, -0.1], - 'icon-optional': false, - 'text-max-width': 8, - 'icon-allow-overlap': true, - }, - paint: { - 'text-color': 'hsl(0,0%,15%)', - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 0.8, - }, - metadata: {}, - filter: ['all', ['==', 'class', 'city'], ['>', 'capital', 2]], - }, - { - id: 'Capital city labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'place', - minzoom: 4, - maxzoom: 16, - layout: { - 'icon-size': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 4, - 1, - 8, - 1, - 12.9, - 1.2, - 13, - 0, - ], - 'text-font': ['RobotoMediumRegular-NotoSansRegular'], - 'text-size': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 4, - 16, - 8, - 26, - 16, - 32, - ], - 'icon-image': ['step', ['zoom'], 'circle-stroke', 13, ''], - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-anchor': 'bottom', - 'text-offset': [0, -0.1], - 'icon-optional': false, - 'text-max-width': 8, - 'icon-allow-overlap': true, - }, - paint: { - 'text-color': 'hsl(0,0%,5%)', - 'text-halo-blur': 0.5, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 0.8, - }, - metadata: {}, - filter: ['all', ['==', 'class', 'city'], ['<=', 'capital', 2]], - }, - { - id: 'Country labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'place', - minzoom: 1, - maxzoom: 12, - layout: { - 'text-font': ['RobotoMediumRegular-NotoSansRegular'], - 'text-size': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 0, - 8, - 1, - 10, - 4, - ['case', ['>', ['get', 'rank'], 2], 15, 17], - 8, - ['case', ['>', ['get', 'rank'], 2], 19, 23], - ], - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-padding': 1, - 'text-max-width': { - stops: [ - [1, 5], - [5, 8], - ], + paint: { + 'text-color': theme.countryLabel, + 'text-opacity': [ + 'interpolate', + ['linear', 1], + ['zoom'], + 4, + ['case', ['>', ['get', 'rank'], 4], 0, 1], + 5.9, + ['case', ['>', ['get', 'rank'], 4], 0, 1], + 6, + ['case', ['>', ['get', 'rank'], 4], 1, 1], + ], + 'text-halo-blur': 0.8, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, + }, + metadata: {}, + filter: ['all', ['==', 'class', 'country'], ['has', 'iso_a2']], + }, + { + id: 'Continent labels', + type: 'symbol', + source: 'openmaptiles', + 'source-layer': 'place', + maxzoom: 1, + layout: { + 'text-font': ['RobotoMediumRegular-NotoSansRegular'], + 'text-size': { + stops: [ + [0, 12], + [2, 13], + ], + }, + 'text-field': ['coalesce', ...nameExpression], + visibility: 'visible', + 'text-justify': 'center', + 'text-transform': 'uppercase', }, - 'text-transform': 'none', - 'text-allow-overlap': false, - 'text-letter-spacing': 0.07, - }, - paint: { - 'text-color': 'hsl(0, 0%, 20%)', - 'text-opacity': [ - 'interpolate', - ['linear', 1], - ['zoom'], - 4, - ['case', ['>', ['get', 'rank'], 4], 0, 1], - 5.9, - ['case', ['>', ['get', 'rank'], 4], 0, 1], - 6, - ['case', ['>', ['get', 'rank'], 4], 1, 1], - ], - 'text-halo-blur': 0.8, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, - }, - metadata: {}, - filter: ['all', ['==', 'class', 'country'], ['has', 'iso_a2']], - }, - { - id: 'Continent labels', - type: 'symbol', - source: 'openmaptiles', - 'source-layer': 'place', - maxzoom: 1, - layout: { - 'text-font': ['RobotoMediumRegular-NotoSansRegular'], - 'text-size': { - stops: [ - [0, 12], - [2, 13], - ], + paint: { + 'text-color': 'hsl(0,0%,19%)', + 'text-halo-blur': 1, + 'text-halo-color': 'hsl(0,0%,100%)', + 'text-halo-width': 1, }, - 'text-field': ['coalesce', ...nameExpression], - visibility: 'visible', - 'text-justify': 'center', - 'text-transform': 'uppercase', - }, - paint: { - 'text-color': 'hsl(0,0%,19%)', - 'text-halo-blur': 1, - 'text-halo-color': 'hsl(0,0%,100%)', - 'text-halo-width': 1, + metadata: {}, + filter: ['all', ['==', 'class', 'continent']], }, - metadata: {}, - filter: ['all', ['==', 'class', 'continent']], - }, - //...hillshadeLayers, - // ...contourLayers, -] + //...hillshadeLayers, + // ...contourLayers, + ] +} diff --git a/app/styles/styles.ts b/app/styles/styles.ts index f4ad1a0cd..9747b13e2 100644 --- a/app/styles/styles.ts +++ b/app/styles/styles.ts @@ -17,7 +17,7 @@ export const styles = { * purposes (50 to 100 €/month in june !) */ france: { - url: franceStyle(false), + url: franceStyle(false, false, true), name: 'France', description: `Notre style maison, avec des bonus inédits : rail visible à haut niveau, arbres, et plein de futures nouveautés. Hébergé sur nos serveurs, contrairement aux autres il ne nous coûte rien. C'est le futur.`, attribution: