@react-x11/components 0.4.0 → 0.6.0

package/dist/maps/styles.js

@@ -0,0 +1,898 @@
+/** The tags Shortbread puts a road's class in, grouped as a style wants
+ *  them rather than as the schema lists them. */
+const MOTORWAY = ['motorway'];
+const TRUNK = ['trunk'];
+const PRIMARY = ['primary'];
+const SECONDARY = ['secondary'];
+const TERTIARY = ['tertiary'];
+const MINOR = [
+    'unclassified',
+    'residential',
+    'living_street',
+    'pedestrian',
+    'busway',
+];
+const SERVICE = ['service', 'track', 'ford'];
+const PATH = ['path', 'footway', 'cycleway', 'steps', 'bridleway'];
+const RAIL = [
+    'rail',
+    'narrow_gauge',
+    'light_rail',
+    'subway',
+    'tram',
+    'monorail',
+    'funicular',
+];
+/** Landuse kinds that read as green space. */
+const GREEN = [
+    'park',
+    'garden',
+    'grass',
+    'meadow',
+    'forest',
+    'wood',
+    'scrub',
+    'heath',
+    'orchard',
+    'vineyard',
+    'village_green',
+    'recreation_ground',
+    'golf_course',
+    'cemetery',
+    'allotments',
+    'farmland',
+    'farmyard',
+];
+/** …and the ones that read as built-up. */
+const BUILT = [
+    'residential',
+    'commercial',
+    'retail',
+    'industrial',
+    'brownfield',
+    'greenfield',
+    'railway',
+    'garages',
+    'quarry',
+    'construction',
+    'landfill',
+];
+/** OSM Carto's hues, near enough that a user's eye reads the map as the one
+ *  they already know. */
+export const LIGHT_PALETTE = {
+    land: '#f2efe9',
+    ocean: '#aad3df',
+    water: '#aad3df',
+    green: '#cfe8b4',
+    built: '#e8e2dc',
+    site: '#f0e7db',
+    building: '#dfd7cd',
+    buildingEdge: '#cec4b8',
+    motorway: '#f9b29c',
+    motorwayCasing: '#d97f63',
+    trunk: '#fcd6a4',
+    primary: '#fcd6a4',
+    secondary: '#f7fabf',
+    minor: '#ffffff',
+    minorCasing: '#cfcdca',
+    path: '#d4b8a8',
+    rail: '#b0aeab',
+    boundary: '#a4a1ae',
+    pier: '#f2efe9',
+    text: '#33322e',
+    textMinor: '#6b6862',
+    halo: 'rgba(255,255,255,0.85)',
+};
+/** The dark counterpart. Desaturated rather than inverted: an inverted map
+ *  puts white water under dark land, which reads as a negative. */
+export const DARK_PALETTE = {
+    land: '#191b1f',
+    ocean: '#0f1c28',
+    water: '#12222f',
+    green: '#1a2620',
+    built: '#1f2126',
+    site: '#20232a',
+    building: '#23262c',
+    buildingEdge: '#2b2f36',
+    motorway: '#5d4b38',
+    motorwayCasing: '#7a6244',
+    trunk: '#4c4232',
+    primary: '#43403a',
+    secondary: '#3b3a35',
+    minor: '#33363c',
+    minorCasing: '#22242a',
+    path: '#3a352f',
+    rail: '#33363c',
+    boundary: '#4a4757',
+    pier: '#22252b',
+    text: '#d3d7de',
+    textMinor: '#9299a3',
+    halo: 'rgba(12,14,18,0.85)',
+};
+/** How wide a road class is, at each zoom. */
+function width(stops) {
+    return { stops };
+}
+/**
+ * The default style for Shortbread tiles.
+ *
+ * Twenty-six layers, in paint order. The order is the cartography: sea,
+ * then landuse, then water, then sites and buildings, then road *casings*
+ * as one pass and road *fills* as another — which is what makes a junction
+ * look like a junction rather than two roads crossing — then rail,
+ * boundaries, and labels last.
+ */
+export function shortbreadStyle(options = {}) {
+    const p = {
+        ...(options.dark ? DARK_PALETTE : LIGHT_PALETTE),
+        ...options.palette,
+    };
+    const name = options.nameField ?? 'name';
+    const layers = [
+        { id: 'ocean', type: 'fill', sourceLayer: 'ocean', color: p.ocean },
+        {
+            id: 'landuse-green',
+            type: 'fill',
+            sourceLayer: 'land',
+            filter: ['in', 'kind', ...GREEN],
+            color: p.green,
+        },
+        {
+            id: 'landuse-built',
+            type: 'fill',
+            sourceLayer: 'land',
+            filter: ['in', 'kind', ...BUILT],
+            color: p.built,
+        },
+        {
+            id: 'sites',
+            type: 'fill',
+            sourceLayer: 'sites',
+            color: p.site,
+            minZoom: 13,
+        },
+        {
+            id: 'water-polygons',
+            type: 'fill',
+            sourceLayer: 'water_polygons',
+            color: p.water,
+        },
+        {
+            id: 'water-lines',
+            type: 'line',
+            sourceLayer: 'water_lines',
+            color: p.water,
+            width: width([
+                [6, 0.5],
+                [10, 1.2],
+                [14, 3],
+                [18, 8],
+            ]),
+        },
+        {
+            id: 'dams',
+            type: 'fill',
+            sourceLayer: 'dam_polygons',
+            color: p.built,
+            minZoom: 13,
+        },
+        {
+            id: 'piers',
+            type: 'fill',
+            sourceLayer: 'pier_polygons',
+            color: p.pier,
+            minZoom: 13,
+        },
+    ];
+    if (options.buildings !== false) {
+        layers.push({
+            id: 'buildings',
+            type: 'fill',
+            sourceLayer: 'buildings',
+            minZoom: 14,
+            color: p.building,
+            // The edge only once a footprint is big enough for it to be an edge
+            // rather than a darkening of the whole polygon.
+            outlineColor: p.buildingEdge,
+        });
+    }
+    // Casings first, every class in one pass, so that the fills above them
+    // knit together at every junction. This is the one thing that separates a
+    // road network from a pile of coloured lines.
+    const roadClasses = [
+        {
+            id: 'motorway',
+            kinds: MOTORWAY,
+            fill: p.motorway,
+            casing: p.motorwayCasing,
+            fillWidth: width([
+                [5, 0.6],
+                [8, 1.4],
+                [10, 2.4],
+                [13, 5],
+                [16, 12],
+                [20, 40],
+            ]),
+        },
+        {
+            id: 'trunk',
+            kinds: TRUNK,
+            fill: p.trunk,
+            casing: p.motorwayCasing,
+            fillWidth: width([
+                [6, 0.5],
+                [9, 1.2],
+                [12, 2.6],
+                [16, 9],
+                [20, 30],
+            ]),
+        },
+        {
+            id: 'primary',
+            kinds: PRIMARY,
+            fill: p.primary,
+            casing: p.minorCasing,
+            fillWidth: width([
+                [7, 0.5],
+                [10, 1.3],
+                [13, 3],
+                [16, 8],
+                [20, 26],
+            ]),
+            minZoom: 7,
+        },
+        {
+            id: 'secondary',
+            kinds: SECONDARY,
+            fill: p.secondary,
+            casing: p.minorCasing,
+            fillWidth: width([
+                [9, 0.5],
+                [12, 1.6],
+                [15, 5],
+                [20, 20],
+            ]),
+            minZoom: 9,
+        },
+        {
+            id: 'tertiary',
+            kinds: TERTIARY,
+            fill: p.minor,
+            casing: p.minorCasing,
+            fillWidth: width([
+                [11, 0.6],
+                [14, 2.4],
+                [17, 7],
+                [20, 18],
+            ]),
+            minZoom: 11,
+        },
+        {
+            id: 'minor',
+            kinds: MINOR,
+            fill: p.minor,
+            casing: p.minorCasing,
+            fillWidth: width([
+                [12, 0.5],
+                [14, 1.8],
+                [17, 6],
+                [20, 16],
+            ]),
+            minZoom: 12,
+        },
+        {
+            id: 'service',
+            kinds: SERVICE,
+            fill: p.minor,
+            casing: p.minorCasing,
+            fillWidth: width([
+                [14, 0.8],
+                [17, 3],
+                [20, 9],
+            ]),
+            minZoom: 14,
+        },
+    ];
+    for (const road of roadClasses) {
+        layers.push({
+            id: `${road.id}-casing`,
+            type: 'line',
+            sourceLayer: 'streets',
+            minZoom: road.minZoom,
+            filter: ['all', ['in', 'kind', ...road.kinds], ['!=', 'rail', true]],
+            color: road.casing,
+            // A casing is the fill plus two logical pixels, which is what makes
+            // the outline a constant width at every zoom rather than a ratio that
+            // disappears when the road is thin.
+            width: scaleWidth(road.fillWidth, 2),
+            cap: 'round',
+            join: 'round',
+        });
+    }
+    for (const road of roadClasses) {
+        layers.push({
+            id: road.id,
+            type: 'line',
+            sourceLayer: 'streets',
+            minZoom: road.minZoom,
+            filter: ['all', ['in', 'kind', ...road.kinds], ['!=', 'rail', true]],
+            color: road.fill,
+            width: road.fillWidth,
+            cap: 'round',
+            join: 'round',
+        });
+    }
+    layers.push({
+        id: 'paths',
+        type: 'line',
+        sourceLayer: 'streets',
+        minZoom: 15,
+        filter: ['in', 'kind', ...PATH],
+        color: p.path,
+        width: width([
+            [15, 0.8],
+            [18, 1.6],
+            [20, 3],
+        ]),
+        dash: [3, 2],
+    }, {
+        id: 'rail',
+        type: 'line',
+        sourceLayer: 'streets',
+        minZoom: 9,
+        filter: ['in', 'kind', ...RAIL],
+        color: p.rail,
+        width: width([
+            [9, 0.5],
+            [13, 1],
+            [17, 2],
+            [20, 3],
+        ]),
+    }, {
+        id: 'ferries',
+        type: 'line',
+        sourceLayer: 'ferries',
+        minZoom: 9,
+        color: p.boundary,
+        width: 1,
+        dash: [4, 3],
+    }, {
+        id: 'boundaries-country',
+        type: 'line',
+        sourceLayer: 'boundaries',
+        color: p.boundary,
+        filter: ['<=', 'admin_level', 2],
+        width: width([
+            [2, 0.6],
+            [6, 1.1],
+            [12, 1.6],
+        ]),
+        dash: [5, 3],
+    }, {
+        // Regional borders only once there is room for them to mean
+        // something — at zoom 3 they are noise over the country outlines.
+        id: 'boundaries-region',
+        type: 'line',
+        sourceLayer: 'boundaries',
+        minZoom: 6,
+        color: p.boundary,
+        filter: ['>', 'admin_level', 2],
+        width: width([
+            [6, 0.5],
+            [12, 1],
+        ]),
+        dash: [3, 3],
+    });
+    if (options.labels !== false) {
+        layers.push(
+        // Places, split by kind rather than ranked by a field — see
+        // `SymbolLayer.rank` for why. The split is also what lets each class
+        // have its own size and its own zoom, which is most of what makes a
+        // label layer read as cartography.
+        {
+            id: 'place-labels-city',
+            type: 'symbol',
+            sourceLayer: 'place_labels',
+            filter: ['in', 'kind', 'capital', 'city'],
+            textField: name,
+            textColor: p.text,
+            textHaloColor: p.halo,
+            textHaloWidth: 1.5,
+            textSize: {
+                stops: [
+                    [3, 12],
+                    [8, 15],
+                    [12, 18],
+                    [16, 20],
+                ],
+            },
+            rank: 100,
+        }, {
+            id: 'place-labels-town',
+            type: 'symbol',
+            sourceLayer: 'place_labels',
+            minZoom: 7,
+            filter: ['in', 'kind', 'town', 'borough'],
+            textField: name,
+            textColor: p.text,
+            textHaloColor: p.halo,
+            textHaloWidth: 1.5,
+            textSize: {
+                stops: [
+                    [7, 11],
+                    [12, 14],
+                    [16, 16],
+                ],
+            },
+            rank: 80,
+        }, {
+            id: 'place-labels-suburb',
+            type: 'symbol',
+            sourceLayer: 'place_labels',
+            minZoom: 11,
+            filter: ['in', 'kind', 'suburb', 'quarter', 'neighbourhood', 'village'],
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1.2,
+            textSize: {
+                stops: [
+                    [11, 10],
+                    [15, 13],
+                ],
+            },
+            rank: 60,
+        }, {
+            id: 'place-labels-locality',
+            type: 'symbol',
+            sourceLayer: 'place_labels',
+            minZoom: 13,
+            filter: [
+                'in',
+                'kind',
+                'hamlet',
+                'locality',
+                'isolated_dwelling',
+                'farm',
+                'island',
+                'islet',
+            ],
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1.2,
+            textSize: 10,
+            rank: 40,
+        }, {
+            id: 'water-labels',
+            type: 'symbol',
+            sourceLayer: 'water_polygons_labels',
+            minZoom: 9,
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1,
+            textSize: 11,
+            rank: 30,
+        }, {
+            id: 'street-labels',
+            type: 'symbol',
+            sourceLayer: 'street_labels',
+            minZoom: 14,
+            filter: ['!in', 'kind', ...RAIL],
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1,
+            textSize: 11,
+            // Under every place name: a suburb's name is what orients someone,
+            // a street's name is what they read once they are oriented.
+            rank: 20,
+        }, {
+            id: 'transport-labels',
+            type: 'symbol',
+            sourceLayer: 'public_transport',
+            minZoom: 15,
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1,
+            textSize: 10,
+            rank: 10,
+        });
+    }
+    return { background: p.land, layers };
+}
+/** A width ramp plus a constant — how a casing is derived from its fill so
+ *  the two cannot drift apart when one of them is retuned. */
+function scaleWidth(base, add) {
+    if (typeof base === 'number')
+        return base + add;
+    return { stops: base.stops.map(([z, v]) => [z, v + add]) };
+}
+// --- OpenMapTiles -----------------------------------------------------------
+/**
+ * Road classes as **OpenMapTiles** names them.
+ *
+ * Not the same words as Shortbread's, which is the whole reason this second
+ * style exists: `transportation.class` is `minor` where Shortbread says
+ * `residential`, `unclassified` and `living_street`, and rail lives in the
+ * same layer under `class: 'rail'` rather than beside the roads. Point
+ * {@link shortbreadStyle} at an OpenMapTiles source and it matches nothing
+ * and draws an empty map.
+ */
+const OMT_RAIL = ['rail', 'transit'];
+/** Landcover classes that read as green space. */
+const OMT_GREEN = ['wood', 'grass', 'farmland', 'wetland'];
+/** Landuse classes that read as built-up. */
+const OMT_BUILT = [
+    'residential',
+    'commercial',
+    'industrial',
+    'retail',
+    'railway',
+    'cemetery',
+    'quarry',
+];
+/** Landuse classes for an institutional site. */
+const OMT_SITES = [
+    'hospital',
+    'school',
+    'university',
+    'college',
+    'kindergarten',
+    'stadium',
+    'pitch',
+    'playground',
+];
+/**
+ * The same cartography over the **OpenMapTiles** schema.
+ *
+ * OpenMapTiles is the other open schema, and between them the two cover
+ * nearly every provider worth pointing this at: Shortbread is what
+ * OpenStreetMap's own server and VersaTiles cut, OpenMapTiles is what
+ * MapTiler, Stadia, Geoapify, OpenFreeMap and most self-hosted planets cut.
+ *
+ * Deliberately the same palette, the same layer ids where they mean the
+ * same thing, and the same casing-then-fill ordering, so switching a source
+ * between the two schemas changes which style you pass and nothing else
+ * about how the map looks.
+ */
+export function openMapTilesStyle(options = {}) {
+    const p = {
+        ...(options.dark ? DARK_PALETTE : LIGHT_PALETTE),
+        ...options.palette,
+    };
+    const name = options.nameField ?? 'name';
+    const layers = [
+        // One `water` layer for everything wet, with `class` telling the sea
+        // from a lake — where Shortbread has `ocean` and `water_polygons`.
+        { id: 'ocean', type: 'fill', sourceLayer: 'water', color: p.water },
+        {
+            id: 'landuse-green',
+            type: 'fill',
+            sourceLayer: 'landcover',
+            filter: ['in', 'class', ...OMT_GREEN],
+            color: p.green,
+        },
+        { id: 'park', type: 'fill', sourceLayer: 'park', color: p.green },
+        {
+            id: 'landuse-built',
+            type: 'fill',
+            sourceLayer: 'landuse',
+            filter: ['in', 'class', ...OMT_BUILT],
+            color: p.built,
+        },
+        {
+            id: 'sites',
+            type: 'fill',
+            sourceLayer: 'landuse',
+            minZoom: 13,
+            filter: ['in', 'class', ...OMT_SITES],
+            color: p.site,
+        },
+        {
+            id: 'water-lines',
+            type: 'line',
+            sourceLayer: 'waterway',
+            color: p.water,
+            width: width([
+                [6, 0.5],
+                [10, 1.2],
+                [14, 3],
+                [18, 8],
+            ]),
+        },
+    ];
+    if (options.buildings !== false) {
+        layers.push({
+            id: 'buildings',
+            type: 'fill',
+            sourceLayer: 'building',
+            minZoom: 14,
+            color: p.building,
+            outlineColor: p.buildingEdge,
+        });
+    }
+    const roads = [
+        {
+            id: 'motorway',
+            classes: ['motorway'],
+            fill: p.motorway,
+            casing: p.motorwayCasing,
+            fillWidth: width([
+                [5, 0.6],
+                [8, 1.4],
+                [10, 2.4],
+                [13, 5],
+                [16, 12],
+                [20, 40],
+            ]),
+        },
+        {
+            id: 'trunk',
+            classes: ['trunk'],
+            fill: p.trunk,
+            casing: p.motorwayCasing,
+            fillWidth: width([
+                [6, 0.5],
+                [9, 1.2],
+                [12, 2.6],
+                [16, 9],
+                [20, 30],
+            ]),
+        },
+        {
+            id: 'primary',
+            classes: ['primary'],
+            fill: p.primary,
+            casing: p.minorCasing,
+            minZoom: 7,
+            fillWidth: width([
+                [7, 0.5],
+                [10, 1.3],
+                [13, 3],
+                [16, 8],
+                [20, 26],
+            ]),
+        },
+        {
+            id: 'secondary',
+            classes: ['secondary'],
+            fill: p.secondary,
+            casing: p.minorCasing,
+            minZoom: 9,
+            fillWidth: width([
+                [9, 0.5],
+                [12, 1.6],
+                [15, 5],
+                [20, 20],
+            ]),
+        },
+        {
+            id: 'tertiary',
+            classes: ['tertiary'],
+            fill: p.minor,
+            casing: p.minorCasing,
+            minZoom: 11,
+            fillWidth: width([
+                [11, 0.6],
+                [14, 2.4],
+                [17, 7],
+                [20, 18],
+            ]),
+        },
+        {
+            // `minor` is OpenMapTiles' one word for residential, unclassified and
+            // living_street, which Shortbread keeps apart.
+            id: 'minor',
+            classes: ['minor'],
+            fill: p.minor,
+            casing: p.minorCasing,
+            minZoom: 12,
+            fillWidth: width([
+                [12, 0.5],
+                [14, 1.8],
+                [17, 6],
+                [20, 16],
+            ]),
+        },
+        {
+            id: 'service',
+            classes: ['service', 'track'],
+            fill: p.minor,
+            casing: p.minorCasing,
+            minZoom: 14,
+            fillWidth: width([
+                [14, 0.8],
+                [17, 3],
+                [20, 9],
+            ]),
+        },
+    ];
+    for (const road of roads) {
+        layers.push({
+            id: `${road.id}-casing`,
+            type: 'line',
+            sourceLayer: 'transportation',
+            minZoom: road.minZoom,
+            filter: ['in', 'class', ...road.classes],
+            color: road.casing,
+            width: scaleWidth(road.fillWidth, 2),
+            cap: 'round',
+            join: 'round',
+        });
+    }
+    for (const road of roads) {
+        layers.push({
+            id: road.id,
+            type: 'line',
+            sourceLayer: 'transportation',
+            minZoom: road.minZoom,
+            filter: ['in', 'class', ...road.classes],
+            color: road.fill,
+            width: road.fillWidth,
+            cap: 'round',
+            join: 'round',
+        });
+    }
+    layers.push({
+        id: 'paths',
+        type: 'line',
+        sourceLayer: 'transportation',
+        minZoom: 15,
+        filter: ['in', 'class', 'path', 'pedestrian'],
+        color: p.path,
+        width: width([
+            [15, 0.8],
+            [18, 1.6],
+            [20, 3],
+        ]),
+        dash: [3, 2],
+    }, {
+        id: 'rail',
+        type: 'line',
+        sourceLayer: 'transportation',
+        minZoom: 9,
+        filter: ['in', 'class', ...OMT_RAIL],
+        color: p.rail,
+        width: width([
+            [9, 0.5],
+            [13, 1],
+            [17, 2],
+            [20, 3],
+        ]),
+    }, {
+        id: 'ferries',
+        type: 'line',
+        sourceLayer: 'transportation',
+        minZoom: 9,
+        filter: ['==', 'class', 'ferry'],
+        color: p.boundary,
+        width: 1,
+        dash: [4, 3],
+    }, {
+        id: 'boundaries-country',
+        type: 'line',
+        sourceLayer: 'boundary',
+        filter: ['<=', 'admin_level', 2],
+        color: p.boundary,
+        width: width([
+            [2, 0.6],
+            [6, 1.1],
+            [12, 1.6],
+        ]),
+        dash: [5, 3],
+    }, {
+        id: 'boundaries-region',
+        type: 'line',
+        sourceLayer: 'boundary',
+        minZoom: 6,
+        filter: ['>', 'admin_level', 2],
+        color: p.boundary,
+        width: width([
+            [6, 0.5],
+            [12, 1],
+        ]),
+        dash: [3, 3],
+    });
+    if (options.labels !== false) {
+        layers.push({
+            id: 'place-labels-city',
+            type: 'symbol',
+            sourceLayer: 'place',
+            filter: ['in', 'class', 'city'],
+            textField: name,
+            textColor: p.text,
+            textHaloColor: p.halo,
+            textHaloWidth: 1.5,
+            textSize: {
+                stops: [
+                    [3, 12],
+                    [8, 15],
+                    [12, 18],
+                    [16, 20],
+                ],
+            },
+            rank: 100,
+        }, {
+            id: 'place-labels-town',
+            type: 'symbol',
+            sourceLayer: 'place',
+            minZoom: 7,
+            filter: ['in', 'class', 'town'],
+            textField: name,
+            textColor: p.text,
+            textHaloColor: p.halo,
+            textHaloWidth: 1.5,
+            textSize: {
+                stops: [
+                    [7, 11],
+                    [12, 14],
+                    [16, 16],
+                ],
+            },
+            rank: 80,
+        }, {
+            id: 'place-labels-suburb',
+            type: 'symbol',
+            sourceLayer: 'place',
+            minZoom: 11,
+            filter: [
+                'in',
+                'class',
+                'suburb',
+                'quarter',
+                'neighbourhood',
+                'village',
+            ],
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1.2,
+            textSize: {
+                stops: [
+                    [11, 10],
+                    [15, 13],
+                ],
+            },
+            rank: 60,
+        }, {
+            id: 'place-labels-locality',
+            type: 'symbol',
+            sourceLayer: 'place',
+            minZoom: 13,
+            filter: ['in', 'class', 'hamlet', 'isolated_dwelling', 'island'],
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1.2,
+            textSize: 10,
+            rank: 40,
+        }, {
+            id: 'water-labels',
+            type: 'symbol',
+            sourceLayer: 'water_name',
+            minZoom: 9,
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1,
+            textSize: 11,
+            rank: 30,
+        }, {
+            id: 'street-labels',
+            type: 'symbol',
+            sourceLayer: 'transportation_name',
+            minZoom: 14,
+            textField: name,
+            textColor: p.textMinor,
+            textHaloColor: p.halo,
+            textHaloWidth: 1,
+            textSize: 11,
+            rank: 20,
+        });
+    }
+    return { background: p.land, layers };
+}
+//# sourceMappingURL=styles.js.map