diff --git a/app/UI.tsx b/app/UI.tsx
index 1fe20250c..6406041d6 100644
--- a/app/UI.tsx
+++ b/app/UI.tsx
@@ -1,13 +1,13 @@
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 { getOceanColor } from './styles/france'
export const MapContainer = styled.div`
${(p) =>
!p.$isMapLoaded
? css`
- background: ${oceanColor};
+ background: ${getOceanColor(p.$darkMode)};
`
: css`
background: black;
diff --git a/app/styles/cycleHighwayLayers.ts b/app/styles/cycleHighwayLayers.ts
index 5c9612e28..dfed7b795 100644
--- a/app/styles/cycleHighwayLayers.ts
+++ b/app/styles/cycleHighwayLayers.ts
@@ -15,7 +15,7 @@ const cycleHighwaysLineWidth = (outline = false) => [
outline ? 5 : 3,
]
-export const cycleHighwayLayers = [
+export const cycleHighwayLayers = (dark = false) => [
{
id: 'Cycle highways outline',
type: 'line',
@@ -28,7 +28,7 @@ export const cycleHighwayLayers = [
'line-join': 'round',
},
paint: {
- 'line-color': 'hsl(240, 71%, 72%)',
+ 'line-color': dark ? 'hsl(240, 20%, 30%)' : 'hsl(240, 71%, 72%)',
'line-width': cycleHighwaysLineWidth(true),
},
},
@@ -44,7 +44,7 @@ export const cycleHighwayLayers = [
'line-join': 'round',
},
paint: {
- 'line-color': 'hsl(0,0%,97%)',
+ 'line-color': dark ? 'hsl(240,40%,60%)' : 'hsl(0,0%,97%)',
'line-width': cycleHighwaysLineWidth(),
},
},
@@ -87,7 +87,7 @@ export const cycleHighwayLayers = [
'text-rotation-alignment': 'viewport',
},
paint: {
- 'icon-color': 'red',
+ 'icon-color': dark ? '#aa3333' : 'red',
},
},
]
diff --git a/app/styles/france.ts b/app/styles/france.ts
index fdc257548..94b584b1b 100644
--- a/app/styles/france.ts
+++ b/app/styles/france.ts
@@ -11,10 +11,16 @@ import categoryGroupColors from '@/app/categoryGroupColors.yaml'
//
//
-const highwayColor = '#cebcbc'
-const highwayOutlineColor = '#cebcbc'
+// Définir les couleurs en fonction du mode sombre
+const getHighwayColor = (dark) => (dark ? '#3a3636' : '#cebcbc')
+const getHighwayOutlineColor = (dark) => (dark ? '#3a3636' : '#cebcbc')
-export default function franceStyle(transportMode, noVariableTiles = false) {
+export default function franceStyle(
+ transportMode,
+ noVariableTiles = false,
+ dark = false
+) {
+ // Appliquer les couleurs en fonction du mode sombre
const openmaptilesUrl = // see the protocol CartesProtocol
!noVariableTiles
? 'cartes://hybrid'
@@ -57,7 +63,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',
@@ -138,108 +144,118 @@ export const name = 'name:fr'
export const oceanColor = '#71a0e9'
//'#6688dd' past color, darker. Could be cool to vary in the day, dawn color ?
-const landColor = '#dbedb7',
- residentialColor = 'hsl(54, 45%, 91%)'
+// Export a function to get the ocean color based on dark mode
+export const getOceanColor = (dark = false) => (dark ? '#0a1a3a' : '#71a0e9')
-const layers = [
- {
- id: 'Background',
- type: 'background',
- layout: { visibility: 'visible' },
- paint: {
- 'background-color': {
- base: 1,
- stops: [
- [1, landColor],
- [15, residentialColor],
- ],
+// Définir les fonctions pour obtenir les couleurs
+const getLandColor = (dark) => (dark ? '#1a2e17' : '#dbedb7')
+const getResidentialColor = (dark) =>
+ dark ? 'hsl(54, 15%, 15%)' : 'hsl(54, 45%, 91%)'
+
+// Appliquer les couleurs en fonction du mode sombre
+const layers = (dark) => {
+ const landColor = getLandColor(dark)
+ const residentialColor = getResidentialColor(dark)
+
+ return [
+ {
+ id: 'Background',
+ type: 'background',
+ layout: { visibility: 'visible' },
+ paint: {
+ 'background-color': {
+ base: 1,
+ stops: [
+ [1, landColor],
+ [15, residentialColor],
+ ],
+ },
},
},
- },
- //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': dark ? '#1a3d21' : '#b6dcc1',
+ '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': dark ? '#2a2a25' : '#f3ede0',
+ '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': dark ? '#303030' : 'white',
+ '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': dark ? '#1a2e17' : '#d4e6b9',
+ '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': dark ? '#1a3d21' : '#94d2a5',
+ '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': dark ? '#1a3d21' : '#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
@@ -261,1382 +277,1018 @@ 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': dark ? 'hsl(0,0%,30%)' : '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': dark ? 'hsl(0,0%,20%)' : '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, dark ? '#2a2a25' : '#efede6'],
+ [16, residentialColor],
+ ],
+ },
},
- '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': dark ? '#0a1a3a' : oceanColor,
+ '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,
+ dark ? '#0a0030' : '#260167',
+ 0,
+ dark ? '#0a1a3a' : oceanColor,
],
},
- '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': dark ? '#2a2a25' : '#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': dark ? '#3a3a20' : '#fbf4ab',
+ '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': '#eee5d5',
- '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': dark ? '#1a3a4a40' : '#61b6cb40',
+ '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'],
+ dark ? 'hsl(40,17%,20%)' : 'hsl(40,67%,90%)',
+ 'quarry',
+ dark ? 'hsla(32, 17%, 20%, 0.2)' : 'hsla(32, 47%, 87%, 0.2)',
+ dark ? 'hsl(60, 10%, 20%)' : 'hsl(60, 31%, 87%)',
+ ],
+ 16,
+ [
+ 'match',
+ ['get', 'class'],
+ ['industrial'],
+ dark ? 'hsl(49,20%,25%)' : 'hsl(49,54%,90%)',
+ 'quarry',
+ dark ? 'hsla(32, 17%, 20%, 0.5)' : 'hsla(32, 47%, 87%, 0.5)',
+ dark ? 'hsl(60, 10%, 20%)' : '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': '#f4dfdf',
- 'fill-opacity': {
- stops: [
- [9, 0.6],
- [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, dark ? '#2a2a2a' : '#ededed'],
+ [16, dark ? '#2a2a2a' : '#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': dark ? '#2a2a20' : '#eee5d5',
+ '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': dark ? '#2a1a1a' : '#f4dfdf',
+ 'fill-opacity': {
+ stops: [
+ [9, 0.6],
+ [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': dark ? '#2a2520' : '#feecdf',
+ '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],
- ],
- },
- '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']],
- },
- {
- 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',
- },
- 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,
- [
- '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,
- ],
- ],
- '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',
- '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,
- 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,
- ],
- 20,
- [
- 'match',
- ['get', 'class'],
- ['motorway', 'trunk', 'primary'],
- 24,
- ['secondary'],
- 24,
- ['tertiary'],
- 24,
- ['minor', 'service', 'track'],
- 16,
- 16,
- ],
- ],
- '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],
- ],
- },
- '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: '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,
- 7,
- 0.5,
- 12,
- [
- 'match',
- ['get', 'class'],
- ['secondary', 'tertiary'],
- 2,
- ['minor', 'track'],
- 1,
- ['service'],
- 0,
- 0.5,
- ],
- 14,
- [
- 'match',
- ['get', 'class'],
- ['secondary'],
- 7,
- ['tertiary'],
- 5,
- ['minor', 'track'],
- 4,
- ['service'],
- 0,
- 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,
- ],
- ],
- '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',
+ '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',
+ ],
],
+ ['in', 'subclass', 'pedestrian', 'platform'],
],
- ],
- },
- {
- 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],
- ],
+ {
+ id: 'Sand',
+ type: 'fill',
+ source: 'openmaptiles',
+ 'source-layer': 'landcover',
+ layout: { visibility: 'visible' },
+ paint: {
+ 'fill-color': dark ? '#3a3a20' : '#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': dark ? '#1a2e17' : '#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': dark ? 'hsl(0,0%,20%)' : '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': dark ? '#1a3d21' : '#94d2a5',
+ 'circle-opacity': {
+ stops: [
+ [14, 0.2],
+ [22, 0.4],
+ ],
+ },
+ },
},
- 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',
+ {
+ id: 'Stadium',
+ type: 'fill',
+ source: 'openmaptiles',
+ 'source-layer': 'landuse',
+ minzoom: 9,
+ maxzoom: 22,
+ layout: { visibility: 'visible' },
+ paint: {
+ 'fill-color': dark ? 'hsl(94,20%,20%)' : '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': dark ? 'hsl(210,50%,30%)' : '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': dark ? 'hsl(210,50%,30%)' : 'hsl(210,73%,78%)',
+ 'line-width': {
+ stops: [
+ [12, 0.5],
+ [20, 6],
+ ],
+ },
+ },
+ metadata: {},
+ filter: ['all', ['!=', 'brunnel', 'tunnel']],
},
- paint: {
- //'line-color': 'Silver',
- 'line-color': highwayOutlineColor,
- 'line-width': [
- 'interpolate',
- ['linear', 2],
- ['zoom'],
- 6,
- 0,
- 7,
- 0.5,
- 10,
- [
+ {
+ id: 'Water intermittent',
+ type: 'fill',
+ source: 'openmaptiles',
+ 'source-layer': 'water',
+ layout: { visibility: 'visible' },
+ paint: {
+ 'fill-color': dark ? 'hsl(205,50%,25%)' : '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',
+ },
+ paint: {
+ 'line-color': [
'match',
['get', 'class'],
- ['motorway'],
- ['match', ['get', 'ramp'], 1, 0, 2.5],
- 0,
+ 'motorway',
+ 'hsl(28,72%,69%)',
+ ['trunk', 'primary'],
+ 'hsl(28,72%,69%)',
+ 'hsl(36,5%,80%)',
],
- 12,
- [
- 'match',
- ['get', 'class'],
- ['motorway'],
- ['match', ['get', 'ramp'], 1, 2, 6],
+ '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,
+ ],
],
- 14,
+ 'line-opacity': 0.1,
+ 'line-dasharray': [0.5, 0.25],
+ },
+ metadata: {},
+ filter: [
+ 'all',
+ ['==', 'brunnel', 'tunnel'],
[
- 'match',
- ['get', 'class'],
- ['motorway'],
- ['match', ['get', 'ramp'], 1, 5, 8],
- 3,
+ '!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',
],
- 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,
- [
+ {
+ 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_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,
+ 'motorway',
+ 'hsl(35,100%,76%)',
+ ['trunk', 'primary'],
+ 'hsl(48,100%,88%)',
+ 'hsl(0,0%,96%)',
],
- 14,
- [
- 'match',
- ['get', 'class'],
- ['motorway_construction'],
- ['match', ['get', 'ramp'], 1, 5, 6],
- ['trunk_construction'],
- 3,
- ['primary_construction'],
+ 'line-width': [
+ 'interpolate',
+ ['linear', 2],
+ ['zoom'],
5,
- ['secondary_construction'],
- 4,
- ['tertiary_construction'],
- 3,
- ['minor_construction', 'service_construction', 'track_construction'],
- 2,
- 2,
- ],
- 16,
- [
- 'match',
- ['get', 'class'],
+ 0,
+ 6,
[
- 'motorway_construction',
- 'trunk_construction',
- 'primary_construction',
+ 'match',
+ ['get', 'class'],
+ ['motorway'],
+ ['match', ['get', 'brunnel'], ['bridge'], 0, 1],
+ ['trunk', 'primary'],
+ 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'],
+ ['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,
],
- 24,
- ['secondary_construction'],
- 24,
- ['tertiary_construction'],
- 24,
- ['minor_construction', 'service_construction', 'track_construction'],
- 16,
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,
+ ],
+ ],
+ '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',
],
],
- '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: 'Railway tunnel',
+ type: 'line',
+ source: 'openmaptiles',
+ 'source-layer': 'transportation',
+ layout: { visibility: 'visible' },
+ paint: {
+ 'line-color': dark ? 'hsl(0,0%,40%)' : '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: '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%)',
+ {
+ 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'],
],
- 'line-width': [
- 'interpolate',
- ['linear', 2],
- ['zoom'],
- 5,
- 0.5,
- 10,
- 1,
- 12,
- [
- 'match',
- ['get', 'class'],
- ['secondary', 'tertiary'],
- 1.5,
- ['minor', 'track'],
- 1,
- ['service'],
- 0,
- 1,
- ],
- 14,
- [
- 'match',
- ['get', 'class'],
- ['secondary'],
- 4,
- ['tertiary'],
- 3,
- ['minor', 'track'],
- 2,
- ['service'],
- 0,
- 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,
+ },
+ {
+ 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': dark ? 'hsl(240,13%,40%)' : 'hsl(240,13%,70%)',
+ 'line-width': [
+ 'interpolate',
+ ['linear', 2],
+ ['zoom'],
+ 6,
+ 0,
+ 7,
+ 0.5,
+ 12,
+ [
+ 'match',
+ ['get', 'class'],
+ ['secondary', 'tertiary'],
+ 2,
+ ['minor', 'track'],
+ 1,
+ ['service'],
+ 0,
+ 0.5,
+ ],
+ 14,
+ [
+ 'match',
+ ['get', 'class'],
+ ['secondary'],
+ 7,
+ ['tertiary'],
+ 5,
+ ['minor', 'track'],
+ 4,
+ ['service'],
+ 0,
+ 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,
+ ],
],
- ],
- },
- metadata: {},
- filter: [
- 'all',
- ['in', '$type', 'LineString', 'Polygon'],
- [
+ 'line-opacity': 1,
+ },
+ metadata: {},
+ filter: [
'all',
- ['any', ['in', 'brunnel', 'bridge', 'ford'], ['!has', 'brunnel']],
+ ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']],
[
'any',
+ ['!has', 'class'],
[
'in',
'class',
@@ -1653,1922 +1305,2336 @@ On n'est pas à l'abri d'effets secondaires ici.
'track',
'trunk',
],
- ['!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',
- ['==', ['get', 'maxspeed'], 'FR:rural'],
- '#99a6c3',
- ['==', ['get', 'maxspeed'], 'FR:urban'],
- 'hsl(215,20%,80%)',
- [
- 'any',
- ['==', ['get', 'maxspeed'], 'walk'],
- ['<=', ['to-number', ['get', 'maxspeed']], 30],
+ {
+ 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': dark ? '#5a6070' : '#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],
],
- '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'],
],
},
- 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',
+ {
+ 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': dark ? '#4a4646' : getHighwayOutlineColor(dark),
+ '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'],
+ ],
},
- paint: {
- //'line-color': 'LightGray',
- 'line-color': highwayColor,
- 'line-width': [
- 'interpolate',
- ['linear', 2],
- ['zoom'],
- 5,
- 0.5,
- 6,
- [
+ {
+ 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'],
- ['match', ['get', 'brunnel'], ['bridge'], 0, 1],
+ 'motorway_construction',
+ getHighwayColor(dark),
+ ['trunk_construction', 'primary_construction'],
+ getHighwayColor(dark),
+ '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',
+ ],
+ 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,
+ ],
],
- 10,
+ 'line-opacity': ['case', ['==', ['get', 'brunnel'], 'tunnel'], 0.7, 1],
+ 'line-dasharray': [2, 2],
+ },
+ metadata: {},
+ filter: [
+ 'all',
[
- 'match',
- ['get', 'class'],
- ['motorway'],
- ['match', ['get', 'ramp'], 1, 0, 2.5],
- 1,
+ 'in',
+ 'class',
+ 'motorway_construction',
+ 'trunk_construction',
+ 'primary_construction',
+ 'secondary_construction',
+ 'tertiary_construction',
+ 'minor_construction',
+ 'service_construction',
+ 'track_construction',
],
- 12,
- [
- 'match',
- ['get', 'class'],
- ['motorway'],
- ['match', ['get', 'ramp'], 1, 1, 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'],
+ ],
+ dark ? 'hsl(0,0%,30%)' : 'hsl(0,0%,100%)',
+ ['==', ['get', 'maxspeed'], 'FR:zone30'],
+ dark ? 'hsl(215,20%,25%)' : 'hsl(215,20%,95%)',
+ ['==', ['get', 'maxspeed'], 'FR:urban'],
+ dark ? 'hsl(215,20%,30%)' : 'hsl(215,20%,80%)',
+ ['==', ['get', 'maxspeed'], 'FR:rural'],
+ dark ? '#2a3040' : '#99a6c3',
+ [
+ 'any',
+ ['==', ['get', 'class'], 'service'],
+ ['==', ['get', 'access'], 'private'],
+ ],
+ dark ? 'hsl(0,0%,25%)' : '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
+ dark ? 'hsl(215,20%,35%)' : 'hsl(215,20%,85%)',
+ ['<=', ['to-number', ['get', 'maxspeed']], 20],
+ dark ? 'hsl(0,0%,30%)' : 'hsl(0,0%,100%)',
+ ['<=', ['to-number', ['get', 'maxspeed']], 30],
+ dark ? 'hsl(215,20%,25%)' : 'hsl(215,20%,95%)',
+ ['<=', ['to-number', ['get', 'maxspeed']], 50],
+ dark ? 'hsl(215,20%,30%)' : 'hsl(215,20%,80%)',
+ dark ? 'hsl(215,20%,25%)' : 'hsl(215,20%,70%)',
+ ],
+ 'line-width': [
+ 'interpolate',
+ ['linear', 2],
+ ['zoom'],
+ 5,
+ 0.5,
+ 10,
1,
+ 12,
+ [
+ 'match',
+ ['get', 'class'],
+ ['secondary', 'tertiary'],
+ 1.5,
+ ['minor', 'track'],
+ 1,
+ ['service'],
+ 0,
+ 1,
+ ],
+ 14,
+ [
+ 'match',
+ ['get', 'class'],
+ ['secondary'],
+ 4,
+ ['tertiary'],
+ 3,
+ ['minor', 'track'],
+ 2,
+ ['service'],
+ 0,
+ 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,
+ ],
],
- 14,
+ },
+ metadata: {},
+ filter: [
+ 'all',
+ ['in', '$type', 'LineString', 'Polygon'],
[
- 'match',
- ['get', 'class'],
- ['motorway'],
- ['match', ['get', 'ramp'], 1, 5, 6],
- 2,
+ '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'],
+ ],
],
- 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],
- ],
+ {
+ id: 'Major road',
+ type: 'line',
+ source: 'openmaptiles',
+ 'source-layer': 'transportation',
+ minzoom: 8,
+ layout: {
+ 'line-cap': 'round',
+ 'line-join': 'round',
+ visibility: 'visible',
},
- },
- 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],
+ 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
+ dark ? '#2a3040' : '#99a6c3',
+ ['==', ['get', 'maxspeed'], 'FR:rural'],
+ dark ? '#2a3040' : '#99a6c3',
+ ['==', ['get', 'maxspeed'], 'FR:urban'],
+ dark ? 'hsl(215,20%,30%)' : 'hsl(215,20%,80%)',
+ [
+ 'any',
+ ['==', ['get', 'maxspeed'], 'walk'],
+ ['<=', ['to-number', ['get', 'maxspeed']], 30],
+ ],
+ dark ? 'hsl(215,20%,25%)' : 'hsl(215,20%,95%)',
+ dark ? '#2a3040' : '#99a6c3',
],
- },
- 'line-dasharray': {
- stops: [
- [14, [1, 2]],
- [18, [1, 1]],
+ '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',
- ['==', '$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,
+ metadata: {},
+ filter: [
+ 'all',
+ ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']],
+ ['in', 'class', 'primary', 'trunk'],
],
- '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],
+ {
+ 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': getHighwayColor(dark),
+ '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-opacity': ['match', ['get', 'service'], 'yard', 0.5, 1],
- 'line-dasharray': [0.2, 9],
+ metadata: {},
+ filter: [
+ 'all',
+ ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']],
+ ['==', 'class', 'motorway'],
+ ],
},
- metadata: {},
- filter: [
- 'all',
- ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']],
- ['==', 'class', 'rail'],
- ],
- },
+ /* Not sure we need a path outline, hence deactivated for now
{
- id: 'Minor rail',
+ id: 'Path outline',
type: 'line',
source: 'openmaptiles',
'source-layer': 'transportation',
- minzoom: 4,
- maxzoom: 22,
+ minzoom: 12,
layout: {
- 'line-cap': 'butt',
+ 'line-cap': 'round',
'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-color': '#E8DFFB',
'line-width': {
- base: 1.4,
+ base: 1.2,
stops: [
- [14.5, 0],
- [15, 2],
- [20, 6],
+ [14, 0],
+ [16, 0],
+ [18, 4],
+ [22, 8],
],
},
- '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'],
+ ['in', 'class', 'path', 'pedestrian'],
+ ['!=', 'brunnel', 'tunnel'],
],
- },
- {
- 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,
+ },*/
+ {
+ id: 'Path',
+ type: 'line',
+ source: 'openmaptiles',
+ 'source-layer': 'transportation',
+ minzoom: 12,
+ layout: {
+ 'line-cap': 'butt',
+ 'line-join': 'round',
+ visibility: 'visible',
+ },
+ paint: {
+ 'line-color': dark ? 'rgba(120, 90, 70, 1)' : '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'],
],
- 'line-opacity': 1,
},
- filter: [
- 'all',
- ['==', '$type', 'LineString'],
- ['in', 'subclass', 'cycleway'],
- ],
- },
- {
- id: 'Building',
- type: 'fill',
- source: 'openmaptiles',
- 'source-layer': 'building',
- minzoom: 15,
- maxzoom: 16,
- 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%)'],
+ {
+ 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,
+ dark ? '#4a3570' : '#916BD4',
+ 19,
+ dark ? 'hsl(0, 0%, 40%)' : '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']],
},
- metadata: {},
- },
- {
- id: 'Building 3D',
- type: 'fill-extrusion',
- source: 'openmaptiles',
- 'source-layer': 'building',
- minzoom: 16,
- 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',
+ {
+ id: 'Major rail hatching',
+ type: 'line',
+ source: 'openmaptiles',
+ 'source-layer': 'transportation',
+ layout: { visibility: 'visible' },
+ paint: {
+ 'line-color': [
+ 'interpolate',
+ ['exponential', 1],
+ ['zoom'],
+ 8,
+ dark ? '#4a3570' : '#916BD4',
+ 18,
+ dark ? 'hsl(0, 0%, 40%)' : '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],
},
- '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',
+ metadata: {},
+ filter: [
+ 'all',
+ ['any', ['!has', 'brunnel'], ['in', 'brunnel', 'bridge', 'ford']],
+ ['==', 'class', 'rail'],
+ ],
},
- paint: {
- 'line-color': 'hsl(0,0%,51%)',
- 'line-width': {
- base: 1.3,
- stops: [
- [14, 1],
- [20, 6],
- ],
+ {
+ 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': dark ? 'hsl(319, 30%, 25%)' : '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: ['==', '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],
+ {
+ 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(dark),
+ {
+ id: 'Cycleway outline',
+ type: 'line',
+ minzoom: cycleHighwayMaxZoom,
+ source: 'openmaptiles',
+ 'source-layer': 'transportation',
+ layout: { visibility: 'visible' },
+ paint: {
+ 'line-color': dark ? 'hsl(240, 70%, 50%)' : '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'],
+ ],
},
- 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: 'Cycleway',
+ type: 'line',
+ minzoom: cycleHighwayMaxZoom,
+ source: 'openmaptiles',
+ 'source-layer': 'transportation',
+ layout: { visibility: 'visible' },
+ paint: {
+ 'line-color': dark ? 'hsl(240, 70%, 70%)' : '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'],
+ ],
},
- filter: ['==', 'class', 'aerialway'],
- },
- {
- id: 'Cablecar dash',
- type: 'line',
- source: 'openmaptiles',
- 'source-layer': 'transportation',
- minzoom: 13,
- layout: {
- 'line-cap': 'round',
- 'line-join': 'bevel',
- visibility: 'visible',
+ {
+ id: 'Building',
+ type: 'fill',
+ source: 'openmaptiles',
+ 'source-layer': 'building',
+ minzoom: 15,
+ maxzoom: 16,
+ 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: {},
},
- paint: {
- 'line-color': 'hsl(0,0%,64%)',
- 'line-width': {
- base: 1,
- stops: [
- [13, 1],
- [19, 2],
- ],
+ {
+ id: 'Building 3D',
+ type: 'fill-extrusion',
+ source: 'openmaptiles',
+ 'source-layer': 'building',
+ minzoom: 16,
+ 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',
},
- 'line-dasharray': [2, 2],
+ paint: {
+ 'line-color': 'hsl(0,0%,51%)',
+ 'line-width': {
+ base: 1.3,
+ stops: [
+ [14, 1],
+ [20, 6],
+ ],
+ },
+ },
+ filter: ['==', 'brunnel', 'bridge'],
},
- 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],
+ {
+ 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'],
],
- '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: '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],
+ ],
+ },
},
- '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',
+ filter: ['==', 'class', 'aerialway'],
},
- paint: {
- 'line-blur': 0,
- 'line-color': 'hsl(0, 0%, 54%)',
- 'line-width': {
- stops: [
- [1, 0.5],
- [5, 1.5],
- [10, 2],
- [24, 12],
+ {
+ 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],
},
+ filter: ['all', ['in', 'admin_level', 3, 4, 5, 6, 7, 8, 9, 10]],
},
- 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],
+ {
+ 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': dark ? '#0a1a3a' : '#DFEDF6',
+ 'text-halo-blur': 1,
+ 'text-color': dark ? '#8aa0d0' : '#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,
},
- '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: {
+ 'text-color': dark ? '#8aa0d0' : 'white',
+ 'text-opacity': [
+ 'step',
+ ['zoom'],
+ 0,
+ 1,
+ ['match', ['get', 'class'], ['ocean'], 1, 0],
+ 3,
+ 1,
],
+ 'text-halo-blur': 1,
+ 'text-halo-color': dark ? '#0a1a3a' : '#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,
},
- },
- 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],
+ paint: {
+ 'text-color': dark ? '#8aa0d0' : 'white',
+ 'text-halo-color': dark ? '#0a1a3a' : '#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': dark ? 'hsl(26,10%,70%)' : 'hsl(26,10%,44%)',
+ 'text-halo-blur': 1,
+ 'text-halo-color': dark ? 'hsl(21,30%,20%)' : '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': dark ? 'hsl(0,0%,70%)' : 'hsl(0,0%,40%)',
+ 'text-halo-blur': 1,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : 'hsl(0,0%,100%)',
+ 'text-halo-width': 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': dark ? '#8aa0d0' : 'white',
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? '#0a1a3a' : 'hsl(0,0%,40%)',
+ '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.6],
+ [19, 0.9],
+ ],
+ },
+ 'text-font': ['RobotoRegular-NotoSansRegular'],
+ 'icon-image': 'cartesapp-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-opacity': 0.5,
+ },
+ filter: [
+ 'all',
+ ['has', 'oneway'],
+ [
+ 'in',
+ 'class',
+ 'motorway',
+ 'trunk',
+ 'primary',
+ 'secondary',
+ 'tertiary',
+ 'minor',
+ 'service',
+ ],
],
- '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,
+ {
+ 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': dark ? 'hsl(19, 10%, 80%)' : 'hsl(19, 0%, 16%)',
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : 'hsl(0,0%,100%)',
+ 'text-halo-width': 1,
+ },
+ metadata: {},
+ filter: [
+ 'all',
+ ['!in', 'class', 'ferry', 'gondola', 'cable_car'],
+ ['!in', 'class', 'service'],
],
- '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: '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',
},
- '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],
- ],
+ paint: {
+ 'text-color': dark ? 'hsl(0,0%,80%)' : 'hsl(0,0%,21%)',
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : 'hsl(0,0%,100%)',
+ 'text-halo-width': 1,
},
- 'text-field': ['coalesce', ...nameExpression],
- visibility: 'visible',
- 'text-anchor': 'center',
- 'text-offset': [0.8, 0.8],
- 'symbol-placement': 'line',
+ filter: [
+ 'all',
+ ['>', 'ref_length', 0],
+ ['==', '$type', 'Point'],
+ ['==', 'subclass', 'junction'],
+ ],
},
- paint: {
- 'text-color': 'hsl(0,0%,40%)',
- 'text-halo-blur': 1,
- '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': dark ? 'hsl(0,0%,80%)' : 'hsl(0,0%,18%)' },
+ filter: [
+ 'all',
+ ['<=', 'ref_length', 6],
+ ['==', '$type', 'LineString'],
+ ['!in', 'network', 'us-interstate', 'us-highway', 'us-state'],
+ ['!in', 'class', 'path'],
+ ],
},
- 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: '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',
},
- '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.6],
- [19, 0.9],
+ paint: {
+ 'text-color': [
+ 'match',
+ ['get', 'network'],
+ 'us-interstate',
+ 'hsl(0,0%,100%)',
+ dark ? 'hsl(0,0%,80%)' : 'hsl(0,0%,14%)',
],
},
- 'text-font': ['RobotoRegular-NotoSansRegular'],
- 'icon-image': 'cartesapp-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-opacity': 0.5,
- },
- filter: [
- 'all',
- ['has', 'oneway'],
- [
- 'in',
- 'class',
- 'motorway',
- 'trunk',
- 'primary',
- 'secondary',
- 'tertiary',
- 'minor',
- 'service',
+ filter: [
+ 'all',
+ ['<=', 'ref_length', 6],
+ ['==', '$type', 'LineString'],
+ ['in', 'network', 'us-interstate', 'us-highway', 'us-state'],
],
- ],
- },
- {
- 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'],
- ],
- },
- {
- 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',
- },
- 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'],
- ],
- },
- {
- 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']],
+ {
+ id: 'Parking',
+ type: 'symbol',
+ source: 'openmaptiles',
+ 'source-layer': 'poi',
+ minzoom: 17,
+ layout: {
+ 'icon-size': 0.4,
+ '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': dark ? 'hsl(55, 50%, 30%)' : 'hsl(55, 84%, 44%)',
+ 'text-color': dark ? 'hsl(17,17%,70%)' : 'hsl(17,17%,38%)',
+ 'icon-opacity': 1,
+ 'text-opacity': 1,
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : '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': 0.6,
+ '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': dark ? 'hsl(82,50%,40%)' : 'hsl(82,83%,25%)',
+ 'text-color': dark ? 'hsl(82,30%,60%)' : 'hsl(82,43%,25%)',
+ 'icon-opacity': 1,
+ 'text-opacity': 1,
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : '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': dark ? 'hsl(6,50%,50%)' : 'hsl(6,94%,35%)',
+ 'text-color': dark ? 'hsl(6,50%,70%)' : 'hsl(6,94%,35%)',
+ 'icon-opacity': 1,
+ 'text-opacity': 1,
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : 'hsl(0,0%,100%)',
+ 'text-halo-width': 1,
+ },
+ metadata: {},
+ filter: [
+ 'all',
+ ['==', 'class', 'hospital'],
+ ['==', 'subclass', 'hospital'],
],
- '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: 'Other POI',
+ type: 'symbol',
+ source: 'openmaptiles',
+ 'source-layer': 'poi',
+ minzoom: 13,
+ layout: {
+ 'icon-size': [
+ 'match',
+ ['get', 'subclass'],
+ ['bicycle_parking'],
+ 0.2,
+ 0.6,
+ ],
+ 'text-font': ['RobotoRegular-NotoSansRegular'],
+ 'text-size': {
+ stops: [
+ [12, 10],
+ [16, 12],
+ [22, 14],
+ ],
+ },
+ 'icon-image': [
+ 'coalesce',
+ // on essaye les icones de cartes.app chargées dans la carte
+ ['image', ['concat', 'cartesapp-', ['get', 'subclass']]],
+ ['image', ['concat', 'cartesapp-', ['get', 'class']]],
+ // sinon on essaye les sprites standards du style d'origine
+ /*
+ ['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,
},
- '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'],
- ],
- },
- {
- 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'],
+ paint: {
+ 'text-color': [
+ 'match',
+ ['get', 'class'],
+ ['aerialway', 'bus', 'bicycle_rental', 'entrance'],
+ categoryGroupColors['Déplacements'],
+ ['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',
+ ],
+ 1,
+ 0,
+ ],
+ 17,
+ ['match', ['get', 'subclass'], ['bicycle_parking'], 0, 1],
+ 19,
+ 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,
+ ['match', ['get', 'subclass'], ['townhall'], 1, 0], // I don't know why lots of class=town_hall that are in reality city offices
+ ],
+ 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': dark ? 'hsl(0,0%,20%)' : 'hsl(0,0%,100%)',
+ 'text-halo-width': 1,
},
- '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%)',
+ metadata: {},
+ filter: [
+ 'all',
+ ['!in', 'class', 'hospital', 'parking', 'railway', 'park'],
],
},
- 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.4,
- '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': dark ? 'hsl(120, 20%, 60%)' : 'hsl(120, 11%, 5%)',
+ 'text-color': dark ? 'hsl(120, 20%, 60%)' : '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': dark ? 'hsla(0, 0%, 20%, 0.6)' : 'hsla(0, 0%, 100%, 0.6)',
+ 'text-halo-width': 2,
},
- '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,
+ 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',
+ 'национальный_парк',
+ ],
},
- metadata: {},
- filter: ['==', 'class', 'parking'],
- },
- {
- id: 'Park',
- type: 'symbol',
- source: 'openmaptiles',
- 'source-layer': 'poi',
- minzoom: 13,
- layout: {
- 'icon-size': 0.6,
- 'text-font': ['RobotoRegular-NotoSansRegular'],
- 'text-size': {
- stops: [
- [12, 10],
- [16, 12],
- [22, 14],
+ {
+ id: 'Place labels',
+ type: 'symbol',
+ source: 'openmaptiles',
+ 'source-layer': 'place',
+ minzoom: 4,
+ layout: {
+ 'icon-size': {
+ stops: [
+ [6, 0.3],
+ [8.9, 0.6],
+ [9, 0],
+ ],
+ },
+ 'text-font': ['RobotoRegular-NotoSansRegular'],
+ 'text-size': [
+ 'interpolate',
+ ['linear', 1],
+ ['zoom'],
+ 3,
+ 11,
+ 8,
+ 13,
+ 11,
+ [
+ 'match',
+ ['get', 'class'],
+ 'village',
+ 12,
+ [
+ 'suburb',
+ 'neighbourhood',
+ 'quarter',
+ 'hamlet',
+ 'isolated_dwelling',
+ ],
+ 9,
+ 'island',
+ 8,
+ 12,
+ ],
+ 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,
],
},
- '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],
+ paint: {
+ 'text-color': dark ? 'hsl(0,0%,80%)' : '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': dark ? 'hsl(0,0%,20%)' : 'hsl(0,0%,100%)',
+ 'text-halo-width': 1.2,
},
- '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'],
- ],
- },
- {
- id: 'Other POI',
- type: 'symbol',
- source: 'openmaptiles',
- 'source-layer': 'poi',
- minzoom: 13,
- layout: {
- 'icon-size': [
- 'match',
- ['get', 'subclass'],
- ['bicycle_parking'],
- 0.2,
- 0.6,
- ],
- 'text-font': ['RobotoRegular-NotoSansRegular'],
- 'text-size': {
- stops: [
- [12, 10],
- [16, 12],
- [22, 14],
- ],
- },
- 'icon-image': [
- 'coalesce',
- // on essaye les icones de cartes.app chargées dans la carte
- ['image', ['concat', 'cartesapp-', ['get', 'subclass']]],
- ['image', ['concat', 'cartesapp-', ['get', 'class']]],
- // sinon on essaye les sprites standards du style d'origine
- /*
- ['image', ['get', 'subclass']],
- ['image', ['get', 'class']],
- ['image', 'dot'],
- */
+ metadata: {},
+ filter: [
+ 'all',
+ [
+ '!in',
+ 'class',
+ 'continent',
+ 'country',
+ 'state',
+ 'region',
+ 'province',
+ 'city',
+ 'town',
+ ],
],
- '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'],
- categoryGroupColors['Déplacements'],
- ['ferry_terminal', 'harbor'],
- '#06066f',
- ['hospital'],
- 'hsl(6,94%,35%)',
- 'hsl(17,17%,38%)',
- ],
- 'icon-opacity': [
- 'step',
- ['zoom'],
- 0,
- 15,
- [
+ {
+ 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'],
+ 'cartesapp-subway',
+ ['tram_stop'],
+ 'cartesapp-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': dark ? 'hsl(215,50%,70%)' : categoryGroupColors['Déplacements'],
+ 'icon-opacity': [
+ 'step',
+ ['zoom'],
+ 0,
+ 10,
+ ['match', ['get', 'subclass'], ['station'], 1, 0],
+ 14,
+ ['match', ['get', 'subclass'], ['station', 'subway'], 1, 0],
+ 15,
[
- 'aerialway',
- 'castle',
- 'cemetery',
- 'diplomatic',
- 'ferry_terminal',
- 'harbor',
- 'hospital',
- 'stadium',
- 'place_of_worship',
- 'zoo',
+ 'match',
+ ['get', 'subclass'],
+ ['station', 'halt', 'subway', 'tram_stop'],
+ 1,
+ 0,
],
+ 17,
+ 1,
+ 22,
1,
- 0,
],
- 16,
- [
- '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',
- 'cemetery',
- 'town_hall',
- 'diplomatic',
- 'ferry_terminal',
- 'hospital',
- 'stadium',
- 'college',
- 'university',
- 'place_of_worship',
- 'zoo',
- 'museum',
- 'school',
- 'parking',
+ 'match',
+ ['get', 'subclass'],
+ ['station', 'subway', 'halt', 'tram_stop'],
+ 1,
+ 0,
],
+ 17,
+ 1,
+ 22,
1,
- 0,
],
- 17,
- ['match', ['get', 'subclass'], ['bicycle_parking'], 0, 1],
- 19,
- 1,
- 22,
- 1,
- ],
- 'text-opacity': [
- 'step',
- ['zoom'],
- 0,
- 15,
- [
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : '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'],
- [
- 'castle',
- 'courthouse',
- 'diplomatic',
- 'ferry_terminal',
- 'aerialway',
- 'harbor',
- 'stadium',
- 'university',
- 'hospital',
- 'place_of_worship',
- 'zoo',
+ '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
],
- 1,
- ['match', ['get', 'subclass'], ['townhall'], 1, 0], // I don't know why lots of class=town_hall that are in reality city offices
- ],
- 16,
+ },
+ 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': dark ? 'hsl(215,60%,70%)' : 'hsl(215,83%,53%)',
+ 'icon-opacity': 1,
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : 'hsl(0,0%,100%)',
+ 'text-halo-width': 1,
+ },
+ filter: [
+ 'all',
+ ['has', 'iata'],
[
- 'match',
- ['get', 'class'],
+ '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': dark ? 'hsl(0,0%,70%)' : 'hsl(0,0%,40%)',
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : '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': dark ? 'hsl(48,10%,70%)' : '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': dark ? 'hsla(0,0%,20%,0.75)' : '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.3],
+ [14, 0.6],
+ ],
+ },
+ '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.3],
- [8.9, 0.6],
- [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,
+ dark ? 'hsl(0,0%,80%)' : 'hsl(0,0%,20%)',
12,
- ['suburb', 'neighbourhood', 'quarter', 'hamlet', 'isolated_dwelling'],
- 9,
- 'island',
+ dark ? 'hsl(0,0%,90%)' : 'hsl(0,0%,0%)',
+ ],
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : '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'],
- 'cartesapp-subway',
- ['tram_stop'],
- 'cartesapp-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': categoryGroupColors['Déplacements'],
- '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': dark ? 'hsl(0,0%,80%)' : 'hsl(0,0%,15%)',
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : '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.3],
- [14, 0.6],
- ],
- },
- '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': dark ? 'hsl(0,0%,90%)' : 'hsl(0,0%,5%)',
+ 'text-halo-blur': 0.5,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : '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': dark ? 'hsl(0, 0%, 80%)' : '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': dark ? 'hsl(0,0%,20%)' : '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': dark ? 'hsl(0,0%,80%)' : 'hsl(0,0%,19%)',
+ 'text-halo-blur': 1,
+ 'text-halo-color': dark ? 'hsl(0,0%,20%)' : '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']],
- },
-]
+ ]
+}
diff --git a/app/styles/styles.ts b/app/styles/styles.ts
index 9974b79d7..1eb22da2f 100644
--- a/app/styles/styles.ts
+++ b/app/styles/styles.ts
@@ -23,6 +23,14 @@ export const styles = {
attribution:
'© OpenStreetMap contributors',
},
+ 'france-dark': {
+ url: franceStyle(false, false, true),
+ name: 'France (Nuit)',
+ description: `Notre style maison en mode nuit, 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:
+ '© OpenStreetMap contributors',
+ emoji: '🌙',
+ },
transports: {
url: franceStyle(true),
name: 'Transports',
@@ -30,6 +38,14 @@ export const styles = {
attribution:
'© OpenStreetMap contributors',
},
+ 'transports-dark': {
+ url: franceStyle(true, false, true),
+ name: 'Transports (Nuit)',
+ description: `Un style de carte dédié au transport en mode nuit pour afficher les plans urbains des réseaux de bus/tram/métro, mais aussi des cars et des trains nationaux.`,
+ attribution:
+ '© OpenStreetMap contributors',
+ emoji: '🌙',
+ },
/* The historical maptiler streets that we tuned for cartes.app */
base: {
url: voyageStyle(key),
@@ -115,4 +131,4 @@ export const styles = {
}
export const getStyle = (styleKey) => ({ ...styles[styleKey], key: styleKey })
-export const homeMadeTerrainStyles = ['france', 'satellite']
+export const homeMadeTerrainStyles = ['france', 'france-dark', 'satellite']