diff --git a/components/src/maplibre/MapStyle/SpriteImage.jsx b/components/src/maplibre/MapStyle/SpriteImage.jsx index be66560b..499ac1d7 100644 --- a/components/src/maplibre/MapStyle/SpriteImage.jsx +++ b/components/src/maplibre/MapStyle/SpriteImage.jsx @@ -12,10 +12,10 @@ export default function SpriteImage({ x, y, width, height, data }) { return (
diff --git a/components/src/maplibre/MapStyle/components/Admin.ts b/components/src/maplibre/MapStyle/components/Admin.ts index d90ccc3c..7a6659cb 100644 --- a/components/src/maplibre/MapStyle/components/Admin.ts +++ b/components/src/maplibre/MapStyle/components/Admin.ts @@ -13,16 +13,16 @@ export default function makeAdmin(): any { ['!=', 'coastline', true] ], paint: { - 'line-color': tokens.background, + 'line-color': '#ffffff', 'line-blur': 1, 'line-width': { stops: [ [2, 0], - [3, 2], - [10, 8] + [3, 6], + [10, 7] ] }, - 'line-opacity': 0.75 + 'line-opacity': 0.95 } }, { @@ -56,13 +56,13 @@ export default function makeAdmin(): any { ['!=', 'coastline', true] ], paint: { - 'line-color': tokens.background, + 'line-color': 'white', 'line-blur': 1, 'line-width': { stops: [ [7, 0], - [8, 2], - [10, 4] + [8, 5], + [10, 6] ] }, 'line-opacity': 0.75 @@ -80,8 +80,8 @@ export default function makeAdmin(): any { paint: { 'line-color': { stops: [ - [7, '#dedede'], - [10, '#161616'] + [7, '#a5a5a5'], + [10, '#3f3b39'] ] }, @@ -89,7 +89,7 @@ export default function makeAdmin(): any { stops: [ [2, 0], [5, 1], - [8, 1], + [7, 1.5], [12, 3] ] } @@ -126,7 +126,7 @@ export default function makeAdmin(): any { ['!=', 'coastline', true] ], paint: { - 'line-color': 'hsl(37, 34%, 79%)', + 'line-color': 'hsl(37, 10%, 75%)', 'line-width': { stops: [ [7, 1], @@ -136,7 +136,7 @@ export default function makeAdmin(): any { 'line-opacity': { stops: [ [7, 0], - [8, 1] + [7.5, 1] ] } } diff --git a/components/src/maplibre/MapStyle/components/Buildings.ts b/components/src/maplibre/MapStyle/components/Buildings.ts index 557a2487..74e41443 100644 --- a/components/src/maplibre/MapStyle/components/Buildings.ts +++ b/components/src/maplibre/MapStyle/components/Buildings.ts @@ -23,8 +23,8 @@ export default function makeBuildings(): any { 'fill-color': tokens.building, 'fill-opacity': { stops: [ - [14, 0], - [15, 1] + [15, 0], + [16, 1] ] } } diff --git a/components/src/maplibre/MapStyle/components/Landuse.ts b/components/src/maplibre/MapStyle/components/Landuse.ts index 19be5ab0..f09e2747 100644 --- a/components/src/maplibre/MapStyle/components/Landuse.ts +++ b/components/src/maplibre/MapStyle/components/Landuse.ts @@ -7,7 +7,12 @@ export default function makeLanduse(): any { id: 'background', type: 'background', paint: { - 'background-color': tokens.background + 'background-color': { + stops: [ + [8, tokens.background], + [10, 'white'] + ] + } } }, { @@ -101,26 +106,14 @@ export default function makeLanduse(): any { } } }, - { - id: 'land-burial', - type: 'fill', - 'source-layer': 'land', - filter: ['all', ['in', 'kind', 'cemetery', 'grave_yard']], - paint: { - 'fill-color': tokens.grass, - 'fill-opacity': { - stops: [ - [12, 0], - [13, 1] - ] - } - } - }, { id: 'land-leisure', type: 'fill', 'source-layer': 'land', - filter: ['all', ['in', 'kind', 'miniature_golf', 'playground', 'golf_course']], + filter: [ + 'all', + ['in', 'kind', 'cemetery', 'grave_yard', 'miniature_golf', 'playground', 'golf_course'] + ], paint: { 'fill-color': tokens.grass_dark } @@ -153,22 +146,10 @@ export default function makeLanduse(): any { id: 'land-grass', type: 'fill', 'source-layer': 'land', - filter: ['all', ['in', 'kind', 'grass', 'grassland', 'meadow', 'wet_meadow']], - paint: { - 'fill-color': tokens.grass, - 'fill-opacity': { - stops: [ - [11, 0], - [12, 1] - ] - } - } - }, - { - id: 'land-vegetation', - type: 'fill', - 'source-layer': 'land', - filter: ['all', ['in', 'kind', 'heath', 'scrub']], + filter: [ + 'all', + ['in', 'kind', 'heath', 'scrub', 'grass', 'grassland', 'meadow', 'wet_meadow'] + ], paint: { 'fill-color': tokens.grass, 'fill-opacity': { @@ -179,6 +160,7 @@ export default function makeLanduse(): any { } } }, + { id: 'land-sand', type: 'fill', @@ -301,7 +283,7 @@ export default function makeLanduse(): any { 'source-layer': 'water_polygons', filter: ['==', 'kind', 'water'], paint: { - 'fill-color': tokens.water_ocean, + 'fill-color': tokens.water, 'fill-opacity': { stops: [ [3, 0], @@ -403,91 +385,11 @@ export default function makeLanduse(): any { } }, { - id: 'site-dangerarea', + id: 'site-any', type: 'fill', 'source-layer': 'sites', - filter: ['in', 'kind', 'danger_area'], paint: { - 'fill-color': 'hsl(0,0%,50%)', - 'fill-outline-color': 'hsl(0,0%,50%)', - 'fill-opacity': 0.3 - } - }, - { - id: 'site-university', - type: 'fill', - 'source-layer': 'sites', - filter: ['in', 'kind', 'university'], - paint: { - 'fill-color': 'hsl(60,0%,75%)', - 'fill-opacity': 0.1 - } - }, - { - id: 'site-college', - type: 'fill', - 'source-layer': 'sites', - filter: ['in', 'kind', 'college'], - paint: { - 'fill-color': 'hsl(60,0%,75%)', - 'fill-opacity': 0.1 - } - }, - { - id: 'site-school', - type: 'fill', - 'source-layer': 'sites', - filter: ['in', 'kind', 'school'], - paint: { - 'fill-color': 'hsl(60,0%,75%)', - 'fill-opacity': 0.1 - } - }, - { - id: 'site-hospital', - type: 'fill', - 'source-layer': 'sites', - filter: ['in', 'kind', 'hospital'], - paint: { - 'fill-color': 'hsl(0,0%,70%)', - 'fill-opacity': 0.1 - } - }, - { - id: 'site-prison', - type: 'fill', - 'source-layer': 'sites', - filter: ['in', 'kind', 'prison'], - paint: { - 'fill-color': 'hsl(305,0%,97%)', - 'fill-opacity': 0.1 - } - }, - { - id: 'site-parking', - type: 'fill', - 'source-layer': 'sites', - filter: ['in', 'kind', 'parking'], - paint: { - 'fill-color': 'hsl(24,0%,95%)' - } - }, - { - id: 'site-bicycleparking', - type: 'fill', - 'source-layer': 'sites', - filter: ['in', 'kind', 'bicycle_parking'], - paint: { - 'fill-color': 'hsl(24,0%,95%)' - } - }, - { - id: 'site-construction', - type: 'fill', - 'source-layer': 'sites', - filter: ['in', 'kind', 'construction'], - paint: { - 'fill-color': 'hsl(0,0%,66%)', + 'fill-color': tokens.street_tertiary, 'fill-opacity': 0.1 } } diff --git a/components/src/maplibre/MapStyle/components/PlaceLabels.ts b/components/src/maplibre/MapStyle/components/PlaceLabels.ts index 85e5d787..bdefeb2e 100644 --- a/components/src/maplibre/MapStyle/components/PlaceLabels.ts +++ b/components/src/maplibre/MapStyle/components/PlaceLabels.ts @@ -5,28 +5,7 @@ import type { SymbolLayerSpecification } from 'maplibre-gl'; // Ideally majorCities would include Frankfurt and Leipzig, but they're not // state capitals so they're not available in the versatiles data until z6 -const majorCities = [ - 'Berlin', - 'Stuttgart', - 'München', - 'Frankfurt', - 'Hamburg', - 'Mainz' -]; -const majorCountries = [ - 'Deutschland', - 'Dänemark', - 'Frankreich', - 'Niederlande', - 'Belgien', - 'Schweiz', - 'Polen', - 'Österreich', - 'Tschechien', - 'Slowakei', - 'Italien', - 'Ungarn' -]; +const majorCities = ['Berlin', 'Stuttgart', 'München', 'Frankfurt', 'Hamburg', 'Mainz']; // For smaller cities we use the population field to derive our hierarchy, // though that's limited by the fact that versatiles hard-codes population @@ -144,30 +123,30 @@ export default function makePlaceLabels() { layout: { 'text-size': { stops: [ - [7, 14], + [7, 16], [15, 20] ] } }, paint: { - 'text-color': tokens.label_primary + 'text-color': tokens.label_secondary } }, { id: 'label-place-major-city', filter: ['in', 'name_de', ...majorCities], - minzoom: 5, + minzoom: 5.5, maxzoom: 12, layout: { 'text-size': { stops: [ - [7, 13], - [15, 21] + [7, 14], + [15, 25] ] } }, paint: { - 'text-color': tokens.label_secondary + 'text-color': tokens.label_tertiary } } ].map((el) => { @@ -178,7 +157,7 @@ export default function makePlaceLabels() { 'source-layer': 'place_labels', layout: { 'text-font': tokens.sans_regular, - 'text-letter-spacing': 0.05, + 'text-letter-spacing': 0.01, 'text-field': '{name_de}', ...el.layout }, @@ -196,25 +175,28 @@ export default function makePlaceLabels() { const boundaryLabels = [ { id: 'label-boundary-country', - filter: ['all', ['==', 'admin_level', 2], ['in', 'name_de', ...majorCountries]], + filter: [ + 'all', + ['==', 'admin_level', 2], + ['!in', 'name_de', 'Jersey', 'Guernsey', 'Insel Man'] + ], minzoom: 4, maxzoom: 8, layout: { 'text-field': '{name_de}', - 'text-letter-spacing': 0.085, + 'text-letter-spacing': 0.02, 'text-font': tokens.sans_regular, - 'text-transform': 'uppercase', 'text-size': { stops: [ - [4, 11], + [4, 13], [7, 18] ] } }, paint: { 'text-color': tokens.label_tertiary, - 'text-halo-color': tokens.background, - 'text-halo-width': 2.5, + 'text-halo-color': 'white', + 'text-halo-width': 2, 'text-halo-blur': 0.5 } } diff --git a/components/src/maplibre/MapStyle/components/Roads.ts b/components/src/maplibre/MapStyle/components/Roads.ts index 3717ee30..d4cca83f 100644 --- a/components/src/maplibre/MapStyle/components/Roads.ts +++ b/components/src/maplibre/MapStyle/components/Roads.ts @@ -25,8 +25,8 @@ const motorway = { }, line_opacity: { stops: [ - [6, 0], - [7, 0.8], + [4, 0], + [5, 0.8], [11, 0.8], [12, 1] ] diff --git a/components/src/maplibre/MapStyle/icons/pin-14.svg b/components/src/maplibre/MapStyle/icons/pin-14.svg index 18aaeb86..19af5671 100644 --- a/components/src/maplibre/MapStyle/icons/pin-14.svg +++ b/components/src/maplibre/MapStyle/icons/pin-14.svg @@ -1,4 +1,10 @@ - - - \ No newline at end of file + + + + + + + + + diff --git a/components/src/maplibre/MapStyle/sprite/sprite.json b/components/src/maplibre/MapStyle/sprite/sprite.json index cc17a44d..551239fc 100644 --- a/components/src/maplibre/MapStyle/sprite/sprite.json +++ b/components/src/maplibre/MapStyle/sprite/sprite.json @@ -1,171 +1 @@ -{ - "airport-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 0 }, - "alcohol-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 28 }, - "alpine-hut-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 56 }, - "archaeological-site-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 84 }, - "atm-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 112 }, - "bakery-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 140 }, - "bank-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 168 }, - "bar-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 196 }, - "basic-hut-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 0, "y": 224 }, - "beauty-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 0 }, - "bench-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 28 }, - "beverages-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 56 }, - "bicycle-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 84 }, - "biergarten-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 112 }, - "bollard-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 420, "y": 196 }, - "bollard-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 140 }, - "books-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 168 }, - "buddhist-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 196 }, - "bus-station-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 28, "y": 224 }, - "bus-stop-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 420, "y": 216 }, - "bus-stop-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 0 }, - "butcher-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 28 }, - "cafe-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 56 }, - "camping-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 84 }, - "car-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 112 }, - "car-parts-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 140 }, - "caravan-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 168 }, - "castle-defensive-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 196 }, - "castle-fortress-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 56, "y": 224 }, - "castle-manor-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 0 }, - "castle-palace-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 28 }, - "castle-stately-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 56 }, - "cattle-grid-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 420, "y": 236 }, - "cattle-grid-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 84 }, - "cemetery-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 112 }, - "charging-station-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 140 }, - "chemist-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 168 }, - "christian-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 196 }, - "christian-orthodox-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 84, "y": 224 }, - "cinema-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 0 }, - "city-gate-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 28 }, - "clock-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 56 }, - "clothes-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 84 }, - "computer-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 112 }, - "confectionery-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 140 }, - "convenience-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 168 }, - "copyshop-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 196 }, - "courthouse-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 440, "y": 196 }, - "courthouse-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 112, "y": 224 }, - "dentist-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 0 }, - "doctor-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 28 }, - "doityourself-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 56 }, - "drinking-water-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 84 }, - "electronics-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 112 }, - "elevator-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 140 }, - "embassy-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 448, "y": 168 }, - "embassy-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 168 }, - "emergency-phone-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 196 }, - "entrance-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 440, "y": 216 }, - "entrance-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 140, "y": 224 }, - "exit-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 440, "y": 236 }, - "exit-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 0 }, - "fast-food-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 28 }, - "ferry-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 56 }, - "fire-station-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 84 }, - "florist-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 112 }, - "ford-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 140 }, - "fort-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 168 }, - "fountain-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 196 }, - "fuel-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 168, "y": 224 }, - "furniture-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 0 }, - "garden-centre-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 28 }, - "gate-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 460, "y": 188 }, - "gate-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 56 }, - "gift-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 84 }, - "government-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 112 }, - "greengrocer-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 140 }, - "guidepost-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 168 }, - "hairdresser-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 196 }, - "heliport-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 196, "y": 224 }, - "hifi-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 0 }, - "hinduist-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 28 }, - "hospital-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 56 }, - "hostel-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 84 }, - "hotel-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 112 }, - "hunting-stand-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 140 }, - "ice-cream-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 168 }, - "information-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 196 }, - "jewellery-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 224, "y": 224 }, - "jewish-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 0 }, - "kiosk-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 28 }, - "laundry-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 56 }, - "library-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 84 }, - "lift-gate-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 468, "y": 168 }, - "lift-gate-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 112 }, - "lighthouse-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 140 }, - "luggage-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 168 }, - "mast-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 196 }, - "mast-communications-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 252, "y": 224 }, - "memorial-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 488, "y": 168 }, - "memorial-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 0 }, - "metro-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 0 }, - "mobile-phone-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 0 }, - "monument-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 0 }, - "motel-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 0 }, - "museum-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 420, "y": 0 }, - "muslim-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 448, "y": 0 }, - "news-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 476, "y": 0 }, - "nightclub-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 28 }, - "optician-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 56 }, - "parking-bicycle-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 84 }, - "parking-car-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 112 }, - "parking-garage-car-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 140 }, - "peak-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 480, "y": 188 }, - "peak-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 168 }, - "pet-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 196 }, - "pharmacy-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 280, "y": 224 }, - "photo-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 28 }, - "pin-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 28 }, - "place-of-worship-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 28 }, - "playground-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 28 }, - "police-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 420, "y": 28 }, - "post-office-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 460, "y": 208 }, - "post-office-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 448, "y": 28 }, - "power-wind-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 476, "y": 28 }, - "prison-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 56 }, - "pub-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 84 }, - "railway-halt-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 112 }, - "railway-station-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 140 }, - "recycling-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 168 }, - "rental-bicycle-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 196 }, - "rental-car-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 308, "y": 224 }, - "repair-bicycle-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 56 }, - "repair-car-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 56 }, - "restaurant-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 56 }, - "saddle-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 460, "y": 228 }, - "saddle-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 420, "y": 56 }, - "shared-car-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 448, "y": 56 }, - "shelter-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 476, "y": 56 }, - "shintoist-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 84 }, - "shoes-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 112 }, - "sikhist-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 140 }, - "spring-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 168 }, - "stationery-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 196 }, - "steps-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 480, "y": 208 }, - "steps-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 336, "y": 224 }, - "supermarket-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 84 }, - "swimming-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 84 }, - "table-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 420, "y": 84 }, - "taoist-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 448, "y": 84 }, - "taxi-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 476, "y": 84 }, - "telephone-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 112 }, - "theatre-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 140 }, - "toilets-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 168 }, - "town-hall-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 196 }, - "toys-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 364, "y": 224 }, - "tram-stop-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 112 }, - "tree-coniferous-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 420, "y": 112 }, - "tree-deciduous-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 448, "y": 112 }, - "tree-unspecified-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 476, "y": 112 }, - "veterinary-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 140 }, - "viewpoint-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 168 }, - "waste-basket-10": { "height": 20, "pixelRatio": 2, "width": 20, "x": 480, "y": 228 }, - "waste-basket-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 196 }, - "watchtower-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 392, "y": 224 }, - "water-tower-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 420, "y": 140 }, - "waterfall-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 448, "y": 140 }, - "wilderness-hut-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 476, "y": 140 }, - "windmill-14": { "height": 28, "pixelRatio": 2, "width": 28, "x": 420, "y": 168 } -} +{"airport-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":0},"alcohol-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":28},"alpine-hut-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":56},"archaeological-site-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":84},"atm-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":112},"bakery-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":140},"bank-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":168},"bar-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":196},"basic-hut-14":{"height":28,"pixelRatio":2,"width":28,"x":0,"y":224},"beauty-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":0},"bench-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":28},"beverages-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":56},"bicycle-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":84},"biergarten-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":112},"bollard-10":{"height":20,"pixelRatio":2,"width":20,"x":420,"y":196},"bollard-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":140},"books-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":168},"buddhist-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":196},"bus-station-14":{"height":28,"pixelRatio":2,"width":28,"x":28,"y":224},"bus-stop-10":{"height":20,"pixelRatio":2,"width":20,"x":420,"y":216},"bus-stop-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":0},"butcher-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":28},"cafe-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":56},"camping-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":84},"car-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":112},"car-parts-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":140},"caravan-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":168},"castle-defensive-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":196},"castle-fortress-14":{"height":28,"pixelRatio":2,"width":28,"x":56,"y":224},"castle-manor-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":0},"castle-palace-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":28},"castle-stately-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":56},"cattle-grid-10":{"height":20,"pixelRatio":2,"width":20,"x":420,"y":236},"cattle-grid-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":84},"cemetery-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":112},"charging-station-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":140},"chemist-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":168},"christian-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":196},"christian-orthodox-14":{"height":28,"pixelRatio":2,"width":28,"x":84,"y":224},"cinema-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":0},"city-gate-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":28},"clock-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":56},"clothes-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":84},"computer-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":112},"confectionery-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":140},"convenience-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":168},"copyshop-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":196},"courthouse-10":{"height":20,"pixelRatio":2,"width":20,"x":440,"y":196},"courthouse-14":{"height":28,"pixelRatio":2,"width":28,"x":112,"y":224},"dentist-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":0},"doctor-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":28},"doityourself-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":56},"drinking-water-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":84},"electronics-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":112},"elevator-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":140},"embassy-10":{"height":20,"pixelRatio":2,"width":20,"x":448,"y":168},"embassy-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":168},"emergency-phone-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":196},"entrance-10":{"height":20,"pixelRatio":2,"width":20,"x":440,"y":216},"entrance-14":{"height":28,"pixelRatio":2,"width":28,"x":140,"y":224},"exit-10":{"height":20,"pixelRatio":2,"width":20,"x":440,"y":236},"exit-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":0},"fast-food-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":28},"ferry-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":56},"fire-station-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":84},"florist-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":112},"ford-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":140},"fort-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":168},"fountain-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":196},"fuel-14":{"height":28,"pixelRatio":2,"width":28,"x":168,"y":224},"furniture-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":0},"garden-centre-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":28},"gate-10":{"height":20,"pixelRatio":2,"width":20,"x":460,"y":188},"gate-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":56},"gift-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":84},"government-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":112},"greengrocer-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":140},"guidepost-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":168},"hairdresser-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":196},"heliport-14":{"height":28,"pixelRatio":2,"width":28,"x":196,"y":224},"hifi-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":0},"hinduist-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":28},"hospital-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":56},"hostel-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":84},"hotel-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":112},"hunting-stand-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":140},"ice-cream-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":168},"information-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":196},"jewellery-14":{"height":28,"pixelRatio":2,"width":28,"x":224,"y":224},"jewish-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":0},"kiosk-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":28},"laundry-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":56},"library-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":84},"lift-gate-10":{"height":20,"pixelRatio":2,"width":20,"x":468,"y":168},"lift-gate-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":112},"lighthouse-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":140},"luggage-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":168},"mast-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":196},"mast-communications-14":{"height":28,"pixelRatio":2,"width":28,"x":252,"y":224},"memorial-10":{"height":20,"pixelRatio":2,"width":20,"x":488,"y":168},"memorial-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":0},"metro-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":0},"mobile-phone-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":0},"monument-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":0},"motel-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":0},"museum-14":{"height":28,"pixelRatio":2,"width":28,"x":420,"y":0},"muslim-14":{"height":28,"pixelRatio":2,"width":28,"x":448,"y":0},"news-14":{"height":28,"pixelRatio":2,"width":28,"x":476,"y":0},"nightclub-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":28},"optician-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":56},"parking-bicycle-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":84},"parking-car-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":112},"parking-garage-car-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":140},"peak-10":{"height":20,"pixelRatio":2,"width":20,"x":480,"y":188},"peak-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":168},"pet-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":196},"pharmacy-14":{"height":28,"pixelRatio":2,"width":28,"x":280,"y":224},"photo-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":28},"pin-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":28},"place-of-worship-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":28},"playground-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":28},"police-14":{"height":28,"pixelRatio":2,"width":28,"x":420,"y":28},"post-office-10":{"height":20,"pixelRatio":2,"width":20,"x":460,"y":208},"post-office-14":{"height":28,"pixelRatio":2,"width":28,"x":448,"y":28},"power-wind-14":{"height":28,"pixelRatio":2,"width":28,"x":476,"y":28},"prison-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":56},"pub-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":84},"railway-halt-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":112},"railway-station-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":140},"recycling-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":168},"rental-bicycle-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":196},"rental-car-14":{"height":28,"pixelRatio":2,"width":28,"x":308,"y":224},"repair-bicycle-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":56},"repair-car-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":56},"restaurant-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":56},"saddle-10":{"height":20,"pixelRatio":2,"width":20,"x":460,"y":228},"saddle-14":{"height":28,"pixelRatio":2,"width":28,"x":420,"y":56},"shared-car-14":{"height":28,"pixelRatio":2,"width":28,"x":448,"y":56},"shelter-14":{"height":28,"pixelRatio":2,"width":28,"x":476,"y":56},"shintoist-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":84},"shoes-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":112},"sikhist-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":140},"spring-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":168},"stationery-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":196},"steps-10":{"height":20,"pixelRatio":2,"width":20,"x":480,"y":208},"steps-14":{"height":28,"pixelRatio":2,"width":28,"x":336,"y":224},"supermarket-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":84},"swimming-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":84},"table-14":{"height":28,"pixelRatio":2,"width":28,"x":420,"y":84},"taoist-14":{"height":28,"pixelRatio":2,"width":28,"x":448,"y":84},"taxi-14":{"height":28,"pixelRatio":2,"width":28,"x":476,"y":84},"telephone-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":112},"theatre-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":140},"toilets-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":168},"town-hall-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":196},"toys-14":{"height":28,"pixelRatio":2,"width":28,"x":364,"y":224},"tram-stop-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":112},"tree-coniferous-14":{"height":28,"pixelRatio":2,"width":28,"x":420,"y":112},"tree-deciduous-14":{"height":28,"pixelRatio":2,"width":28,"x":448,"y":112},"tree-unspecified-14":{"height":28,"pixelRatio":2,"width":28,"x":476,"y":112},"veterinary-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":140},"viewpoint-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":168},"waste-basket-10":{"height":20,"pixelRatio":2,"width":20,"x":480,"y":228},"waste-basket-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":196},"watchtower-14":{"height":28,"pixelRatio":2,"width":28,"x":392,"y":224},"water-tower-14":{"height":28,"pixelRatio":2,"width":28,"x":420,"y":140},"waterfall-14":{"height":28,"pixelRatio":2,"width":28,"x":448,"y":140},"wilderness-hut-14":{"height":28,"pixelRatio":2,"width":28,"x":476,"y":140},"windmill-14":{"height":28,"pixelRatio":2,"width":28,"x":420,"y":168}} \ No newline at end of file diff --git a/components/src/maplibre/MapStyle/sprite/sprite.png b/components/src/maplibre/MapStyle/sprite/sprite.png index cb33dfb0..c18c4705 100644 Binary files a/components/src/maplibre/MapStyle/sprite/sprite.png and b/components/src/maplibre/MapStyle/sprite/sprite.png differ diff --git a/components/src/maplibre/MapStyle/tokens.ts b/components/src/maplibre/MapStyle/tokens.ts index 8173ce6b..bdb4d06d 100644 --- a/components/src/maplibre/MapStyle/tokens.ts +++ b/components/src/maplibre/MapStyle/tokens.ts @@ -2,22 +2,22 @@ const tokens = { sans_regular: ['SWR Sans Regular'], sans_medium: ['SWR Sans Medium'], sans_bold: ['SWR Sans Bold'], - background: 'hsl(0, 0%, 100%)', - water: 'hsl(210, 41%, 89%)', + background: 'hsl(24, 29%, 98.5%)', + water: 'hsl(210, 71%, 83%)', water_light: 'hsl(210, 41%, 90%)', - water_ocean: 'hsl(210, 25%, 96%)', + water_ocean: 'hsl(209, 57%, 84%)', marsh: 'hsl(200, 14%, 97%)', - grass: 'hsl(140, 17%, 97%)', - grass_dark: 'hsl(148, 32%, 95%)', - street_primary: 'hsl(0, 0%, 96%)', - street_primary_case: 'hsl(240, 1%, 79%)', + grass: 'hsl(133, 36%, 95%)', + grass_dark: 'hsl(127, 49%, 93%)', + street_primary: 'hsl(0, 4%, 95%)', + street_primary_case: 'hsl(240, 1%, 84%)', street_secondary: 'hsl(0, 0%, 95%)', street_secondary_case: 'hsl(0, 0%, 75%)', street_tertiary: 'hsl(0, 0%, 95%)', street_tertiary_case: 'hsl(0, 0%, 70%)', label_primary: 'hsl(240, 10%, 2%)', - label_secondary: 'hsl(240, 2%, 15%)', - label_tertiary: 'hsl(240, 2%, 40%)', + label_secondary: 'hsl(0, 0%, 18%)', + label_tertiary: 'hsl(60, 1%, 50%)', building: '#f3f2f1' };