From 2dc386fd9ad7dc1e7d5736e8d8b36169af65998b Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 23 Aug 2024 03:47:04 +0200 Subject: [PATCH] UX: fix #2089, improve background selection hotkeys and add emoji to indicate categories of background layers --- .../layers/cycle_highways/cycle_highways.json | 6 +- assets/layers/usersettings/usersettings.json | 9 + assets/svg/osm-logo.svg | 862 +++++++++--------- .../themes/cycle_highways/cycle_highways.json | 1 - public/css/tagrendering.css | 4 +- src/Logic/Actors/BackgroundLayerResetter.ts | 3 +- .../Actors/PreferredRasterLayerSelector.ts | 7 +- src/Models/RasterLayers.ts | 30 +- src/Models/ThemeViewState.ts | 134 +-- src/UI/Map/Icon.svelte | 4 +- src/UI/Map/Marker.svelte | 3 +- src/UI/Map/RasterLayerPicker.svelte | 17 +- .../TagRendering/TagRenderingMapping.svelte | 9 + src/Utils.ts | 5 +- src/assets/global-raster-layers.json | 31 +- 15 files changed, 600 insertions(+), 525 deletions(-) diff --git a/assets/layers/cycle_highways/cycle_highways.json b/assets/layers/cycle_highways/cycle_highways.json index 1a6f908d1..dec199887 100644 --- a/assets/layers/cycle_highways/cycle_highways.json +++ b/assets/layers/cycle_highways/cycle_highways.json @@ -90,11 +90,11 @@ "minzoom": 6, "title": { "render": { - "en": "Cycle highway", + "en": "cycle highway", "de": "Radschnellweg", - "ca": "Via ciclista", + "ca": "via ciclista", "fr": "Aménagement cyclable", - "nl": "Fietssnelweg", + "nl": "fietssnelweg", "es": "autovía ciclista", "nb_NO": "sykkelmotorvei", "da": "cykelmotorvej", diff --git a/assets/layers/usersettings/usersettings.json b/assets/layers/usersettings/usersettings.json index 6d53b55c7..8b7ee07c6 100644 --- a/assets/layers/usersettings/usersettings.json +++ b/assets/layers/usersettings/usersettings.json @@ -374,11 +374,15 @@ "fr": "Quel fond souhaitez-vous utiliser par défaut ?", "da": "Hvilket baggrundslag skal vises som standard?" }, + "questionHint":{ + "en": "To set a specific background as default, select it in the background menu first after which it will appear here." + }, "condition": "_theme:backgroundLayer=", "mappings": [ { "if": "mapcomplete-preferred-background-layer=default", "alsoShowIf": "mapcomplete-preferred-background-layer=", + "icon": "./assets/svg/generic_map.svg", "then": { "en": "Use the default background layer", "ca": "Utilitzeu la capa de fons predeterminada", @@ -391,6 +395,9 @@ }, { "if": "mapcomplete-preferred-background-layer=osm", + "icon": { + "path":"./assets/svg/osm-logo.svg" + }, "then": { "en": "Use OpenStreetMap-carto as default layer", "ca": "Utilitzeu OpenStreetMap-carto com a capa predeterminada", @@ -403,6 +410,7 @@ }, { "if": "mapcomplete-preferred-background-layer=photo", + "icon": "\uD83D\uDEF0\uFE0F", "then": { "en": "Use aerial imagery as default background", "ca": "Utilitzeu imatges aèries com a fons predeterminat", @@ -415,6 +423,7 @@ }, { "if": "mapcomplete-preferred-background-layer=map", + "icon": "./assets/svg/generic_map.svg", "then": { "en": "Use a non-openstreetmap based map as default background", "ca": "Utilitzeu un mapa que no sigui openstreetmap com a fons predeterminat", diff --git a/assets/svg/osm-logo.svg b/assets/svg/osm-logo.svg index feb458d19..1f0bdfc66 100644 --- a/assets/svg/osm-logo.svg +++ b/assets/svg/osm-logo.svg @@ -5,12 +5,34 @@ viewBox="0 0 256 256" id="svg3038" version="1.1" + sodipodi:docname="osm-logo.svg" + inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> + OpenStreetMap logo 2011 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + id="g1" + transform="matrix(1.0171457,0,0,1.0171457,-4.9571131,-2.8319934)"> - + transform="matrix(1.0746975,0,0,1.0746975,-6.273364,2.1695856)"> + id="g8737" + transform="translate(0,-10)"> - - - - - + clip-path="none" + transform="matrix(1,0.06864071,0,0.848698,-6.6011175e-8,36.913089)" + id="path5604-26-0-3" + d="m 174.28125,35.875 c -17.59875,0 -35.19216,6.639475 -48.71875,19.90625 -0.16722,0.163278 -0.33437,0.303117 -0.5,0.46875 -22.05595,22.055948 -26.208705,55.25122 -12.46875,81.5 l -2.28125,1.625 c 2.24879,4.23988 4.94165,8.3068 8.09375,12.125 l -13.3125,13.34375 c -1.34137,-0.58575 -2.78858,-1.03331 -4.5625,-1.375 l -2.84375,2.84375 c -1.109469,-0.48387 -2.138019,-0.81588 -3.0625,-0.875 L 30.5,229.5625 c -0.03687,1.10087 0.22615,2.18738 0.65625,3.28125 l -0.53125,0.53125 -1.09375,1.09375 c 0.715438,3.7378 2.010432,6.82294 5.46875,10.28125 3.458318,3.45832 6.420414,4.63027 10.28125,5.46875 l 1.09375,-1.09375 0.71875,-0.71875 c 1.088203,0.46225 2.129899,0.78617 3.09375,0.84375 l 64.125,-64.125 c -0.24286,-0.97475 -0.62043,-1.93546 -1.03125,-2.90625 l 3,-3 c -0.24983,-1.73198 -0.67671,-3.19803 -1.3125,-4.59375 L 128.25,161.34375 c 3.8182,3.1521 7.88512,5.84497 12.125,8.09375 L 142,167.15625 c 26.24878,13.73995 59.44405,9.58719 81.5,-12.46875 0.16563,-0.16564 0.30547,-0.33278 0.46875,-0.5 C 250.66292,126.97054 250.51736,83.267352 223.5,56.25 209.91004,42.660041 192.09307,35.875 174.28125,35.875 Z m -0.5,3.28125 c 0.10467,0.0015 0.20783,-0.002 0.3125,0 0.94919,0.0184 1.89538,0.06527 2.84375,0.125 0.95844,0.06036 1.9188,0.147513 2.875,0.25 0.0937,0.01005 0.18754,0.0208 0.28125,0.03125 0.094,0.01048 0.1873,0.02037 0.28125,0.03125 0.1457,0.01688 0.29187,0.04464 0.4375,0.0625 0.8962,0.109902 1.79491,0.228119 2.6875,0.375 0.61909,0.101874 1.22687,0.224117 1.84375,0.34375 0.34295,0.06644 0.68907,0.11558 1.03125,0.1875 0.7237,0.152111 1.43647,0.323392 2.15625,0.5 0.31305,0.07681 0.62528,0.137311 0.9375,0.21875 0.0731,0.01906 0.1457,0.04319 0.21875,0.0625 0.9559,0.252837 1.89673,0.516294 2.84375,0.8125 0.0724,0.02261 0.14641,0.03963 0.21875,0.0625 0.94741,0.299842 1.90684,0.625541 2.84375,0.96875 0.0531,0.01945 0.10323,0.04291 0.15625,0.0625 0.95458,0.352395 1.90174,0.727633 2.84375,1.125 0.0515,0.02172 0.10478,0.04064 0.15625,0.0625 0.94184,0.400051 1.88491,0.836281 2.8125,1.28125 0.042,0.02016 0.083,0.04225 0.125,0.0625 0.93538,0.451087 1.86208,0.909529 2.78125,1.40625 0.0331,0.01788 0.0607,0.04456 0.0937,0.0625 0.92681,0.502833 1.84142,1.013321 2.75,1.5625 0.0321,0.01939 0.0617,0.04305 0.0937,0.0625 0.9081,0.550934 1.79937,1.121562 2.6875,1.71875 0.54895,0.369074 1.0842,0.76954 1.625,1.15625 0.3647,0.260827 0.73291,0.512412 1.09375,0.78125 0.0185,0.01381 0.044,0.01742 0.0625,0.03125 0.87764,0.655206 1.74021,1.359931 2.59375,2.0625 1.74268,1.434371 3.43142,2.962673 5.0625,4.59375 1.62048,1.62048 3.13618,3.300564 4.5625,5.03125 0.009,0.01124 0.022,0.02 0.0312,0.03125 0.70321,0.854357 1.40674,1.715235 2.0625,2.59375 0.28277,0.378769 0.53857,0.773223 0.8125,1.15625 0.36973,0.517057 0.74014,1.037986 1.09375,1.5625 0.0162,0.02399 0.0464,0.03849 0.0625,0.0625 0.59812,0.889626 1.16704,1.777833 1.71875,2.6875 0.0195,0.03207 0.0431,0.06166 0.0625,0.09375 0.54559,0.902919 1.06267,1.829073 1.5625,2.75 0.0179,0.03294 0.0447,0.06079 0.0625,0.09375 0.498,0.921212 0.95408,1.843744 1.40625,2.78125 0.0202,0.04194 0.0424,0.08302 0.0625,0.125 0.44611,0.929867 0.88027,1.868304 1.28125,2.8125 0.0218,0.05123 0.0409,0.104977 0.0625,0.15625 0.3948,0.936122 0.77461,1.895211 1.125,2.84375 0.0194,0.05253 0.0432,0.103686 0.0625,0.15625 0.34761,0.94836 0.66558,1.884632 0.96875,2.84375 0.0227,0.07167 0.0401,0.147026 0.0625,0.21875 0.29398,0.941172 0.56134,1.893822 0.8125,2.84375 0.0195,0.07353 0.0433,0.145172 0.0625,0.21875 0.0807,0.309554 0.14258,0.627132 0.21875,0.9375 0.17661,0.719779 0.34789,1.432546 0.5,2.15625 0.0719,0.342177 0.12106,0.688299 0.1875,1.03125 0.11963,0.616882 0.24188,1.224661 0.34375,1.84375 0.14688,0.892594 0.2651,1.791302 0.375,2.6875 0.0179,0.145959 0.0456,0.291463 0.0625,0.4375 0.0108,0.09329 0.0208,0.187929 0.0312,0.28125 0.0105,0.09398 0.0212,0.187243 0.0312,0.28125 0.10249,0.9562 0.18964,1.91656 0.25,2.875 0.0592,0.94244 0.10661,1.90049 0.125,2.84375 0.002,0.10413 -0.002,0.20837 0,0.3125 0.0154,1.05333 0.004,2.10385 -0.0312,3.15625 -0.0316,0.93056 -0.0847,1.85279 -0.15625,2.78125 -0.01,0.12493 -0.0209,0.25012 -0.0312,0.375 -0.0761,0.91807 -0.16591,1.8354 -0.28125,2.75 -0.1206,0.95626 -0.27395,1.92393 -0.4375,2.875 -0.0142,0.0824 -0.0168,0.16767 -0.0312,0.25 -0.022,0.12485 -0.0397,0.25026 -0.0625,0.375 -0.16526,0.90778 -0.3579,1.81727 -0.5625,2.71875 -0.0306,0.13463 -0.0623,0.27178 -0.0937,0.40625 -0.20775,0.88866 -0.44134,1.7751 -0.6875,2.65625 -0.16391,0.58672 -0.35028,1.16705 -0.53125,1.75 -0.17541,0.56412 -0.33984,1.12724 -0.53125,1.6875 -0.29467,0.86381 -0.60475,1.70882 -0.9375,2.5625 -0.0606,0.15549 -0.12566,0.31362 -0.1875,0.46875 -0.0449,0.11246 -0.0795,0.23148 -0.125,0.34375 -0.3561,0.87862 -0.72813,1.7276 -1.125,2.59375 -0.37698,0.82347 -0.7736,1.62644 -1.1875,2.4375 -0.0805,0.15778 -0.16807,0.31147 -0.25,0.46875 -0.41528,0.7974 -0.82998,1.59095 -1.28125,2.375 -0.0952,0.16556 -0.1844,0.33506 -0.28125,0.5 -0.19907,0.33885 -0.41915,0.66384 -0.625,1 -0.36165,0.59093 -0.74237,1.16777 -1.125,1.75 -0.005,0.007 0.005,0.0238 0,0.0312 -0.49081,0.74574 -1.00593,1.48819 -1.53125,2.21875 -0.45727,0.63592 -0.95404,1.25128 -1.4375,1.875 -0.19696,0.25409 -0.36119,0.52926 -0.5625,0.78125 -0.13402,0.16779 -0.2703,0.33315 -0.40625,0.5 -0.16351,0.20064 -0.3337,0.39451 -0.5,0.59375 -0.55662,0.66705 -1.13079,1.31785 -1.71875,1.96875 -0.60631,0.67104 -1.23531,1.34705 -1.875,2 -0.16096,0.16426 -0.30567,0.33692 -0.46875,0.5 -21.13035,21.13035 -52.25869,24.49488 -77.1875,11.15625 l 0.125,-0.1875 c -3.70417,-1.89661 -7.26167,-4.14046 -10.625,-6.78125 -0.53892,-0.42315 -1.06537,-0.86982 -1.59375,-1.3125 -0.51441,-0.43097 -1.0273,-0.8629 -1.53125,-1.3125 -0.0929,-0.0836 -0.18872,-0.1658 -0.28125,-0.25 -0.82173,-0.74776 -1.61189,-1.51814 -2.40625,-2.3125 -0.79436,-0.79436 -1.56473,-1.58452 -2.3125,-2.40625 -0.0842,-0.0925 -0.16639,-0.18838 -0.25,-0.28125 -0.4496,-0.50395 -0.88153,-1.01684 -1.3125,-1.53125 -0.44268,-0.52838 -0.88935,-1.05483 -1.3125,-1.59375 -2.64079,-3.36333 -4.88464,-6.92084 -6.78125,-10.625 l -0.1875,0.125 c -13.33863,-24.92881 -9.9741,-56.057154 11.15625,-77.1875 0.16308,-0.16308 0.33574,-0.307785 0.5,-0.46875 0.65295,-0.639685 1.32896,-1.268689 2,-1.875 0.6509,-0.587956 1.3017,-1.162134 1.96875,-1.71875 0.27214,-0.227086 0.53777,-0.465624 0.8125,-0.6875 0.34347,-0.277429 0.71509,-0.511958 1.0625,-0.78125 0.62372,-0.483463 1.23908,-0.980231 1.875,-1.4375 0.73753,-0.530331 1.497,-1.03609 2.25,-1.53125 0.58223,-0.382634 1.15907,-0.763354 1.75,-1.125 0.44667,-0.27336 0.89235,-0.551116 1.34375,-0.8125 0.68145,-0.394786 1.37084,-0.757473 2.0625,-1.125 0.17606,-0.09355 0.35456,-0.18946 0.53125,-0.28125 0.94525,-0.490975 1.88143,-0.9657 2.84375,-1.40625 0.86615,-0.396875 1.71513,-0.7689 2.59375,-1.125 0.15281,-0.06193 0.31559,-0.09555 0.46875,-0.15625 0.96839,-0.384022 1.92468,-0.758909 2.90625,-1.09375 0.56026,-0.191407 1.12338,-0.355843 1.6875,-0.53125 0.58295,-0.180968 1.16328,-0.367339 1.75,-0.53125 0.88115,-0.246163 1.76759,-0.479746 2.65625,-0.6875 0.0711,-0.01664 0.14757,-0.01486 0.21875,-0.03125 0.41593,-0.09574 0.83264,-0.193899 1.25,-0.28125 0.67213,-0.140825 1.35582,-0.287161 2.03125,-0.40625 0.0823,-0.01449 0.16763,-0.01709 0.25,-0.03125 0.95107,-0.163551 1.91874,-0.316902 2.875,-0.4375 1.96365,-0.247645 3.92987,-0.401636 5.90625,-0.46875 1.0524,-0.03564 2.10292,-0.04663 3.15625,-0.03125 z" + style="opacity:0.7;fill:#2d3335;fill-opacity:1;stroke:none;filter:url(#filter8661)" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + transform="matrix(1,0,0,0.846566,0,37.660073)" + id="path3834-49-7" + d="m 9,17.25 c 0,0 7.5,11 11.75,25.75 C 25,57.75 27,68.5 27,68.5 c 0,0 -5.5,12.75 -8.25,24.75 -2.75,12 -5.75,25 -5.75,25 0,0 5.75,16 9.25,30 3.5,14 3.75,22.25 3.75,22.25 0,0 -4,10.25 -7.5,24.25 -3.5,14 -5,30.75 -5,30.75 0,0 9.25,-2 28.5,1.25 19.25,3.25 32.25,6 32.25,6 0,0 12.75,-2.75 24,-6.25 11.25,-3.5 16.25,-6.5 16.25,-6.5 0,0 5.5,0.5 22.5,6.25 17,5.75 29.25,8.5 29.25,8.5 0,0 13,-2.75 26,-5.75 13,-3 26.5,-8 26.5,-8 0,0 -0.75,-5 4.25,-24.5 5,-19.5 8.75,-28 8.75,-28 0,0 -0.5,-2.5 -3.75,-17.75 C 224.75,135.5 218,121 218,121 c 0,0 1.75,-12.5 6.75,-25.75 C 229.75,82 235,68.5 235,68.5 c 0,0 -4.75,-15.25 -7.5,-29.75 C 224.75,24.25 219.25,15 219.25,15 c 0,0 -24.25,9 -31.75,10.5 -7.5,1.5 -21,5.25 -21,5.25 0,0 -9.75,-4.25 -22,-8.5 -12.25,-4.25 -29.75,-5.5 -29.75,-5.5 0,0 -3.25,3.5 -22,8 -18.75,4.5 -27.5,5.75 -27.5,5.75 0,0 -18.5,-9 -31.5,-11.5 -13,-2.5 -24,-2 -24.75,-1.75 z" + style="opacity:0.5;fill:url(#linearGradient8735);fill-opacity:1;stroke:none;filter:url(#filter8725)" /> - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 10010011   - + 10010011   - + id="tspan6419" + style="fill:url(#radialGradient6427)" /> + + diff --git a/assets/themes/cycle_highways/cycle_highways.json b/assets/themes/cycle_highways/cycle_highways.json index 6a0a73699..3d58409f2 100644 --- a/assets/themes/cycle_highways/cycle_highways.json +++ b/assets/themes/cycle_highways/cycle_highways.json @@ -74,7 +74,6 @@ ] } }, - "cycle_highways" ], "overpassTimeout": 60, diff --git a/public/css/tagrendering.css b/public/css/tagrendering.css index b557bf1c6..92c9715c7 100644 --- a/public/css/tagrendering.css +++ b/public/css/tagrendering.css @@ -39,10 +39,10 @@ .mapping-icon-small { /* A mapping icon type */ - width: 1.5rem; + width: 2rem; height: fit-content; - max-height: 1.5rem; + max-height: 2rem; margin-right: 0.5rem; } diff --git a/src/Logic/Actors/BackgroundLayerResetter.ts b/src/Logic/Actors/BackgroundLayerResetter.ts index 2a6efb0b7..66343533a 100644 --- a/src/Logic/Actors/BackgroundLayerResetter.ts +++ b/src/Logic/Actors/BackgroundLayerResetter.ts @@ -19,13 +19,14 @@ export default class BackgroundLayerResetter { return } - currentBackgroundLayer.addCallbackAndRunD((l) => { + currentBackgroundLayer.addCallbackAndRunD(async (l) => { if ( l.geometry !== undefined && AvailableRasterLayers.globalLayers.find( (global) => global.properties.id !== l.properties.id ) ) { + await AvailableRasterLayers.editorLayerIndex() BackgroundLayerResetter.installHandler( currentBackgroundLayer, availableLayers.store diff --git a/src/Logic/Actors/PreferredRasterLayerSelector.ts b/src/Logic/Actors/PreferredRasterLayerSelector.ts index 2a1ef51ff..70af9c26c 100644 --- a/src/Logic/Actors/PreferredRasterLayerSelector.ts +++ b/src/Logic/Actors/PreferredRasterLayerSelector.ts @@ -61,9 +61,9 @@ export class PreferredRasterLayerSelector { * Returns 'true' if the target layer is set or is the current layer * @private */ - private updateLayer() { + private async updateLayer() { // What is the ID of the layer we have to (try to) load? - const targetLayerId = this._queryParameter.data ?? this._preferredBackgroundLayer.data + const targetLayerId = (this._queryParameter.data ?? this._preferredBackgroundLayer.data)?.toLowerCase() if (targetLayerId === undefined || targetLayerId === "default") { return } @@ -74,12 +74,13 @@ export class PreferredRasterLayerSelector { this._rasterLayerSetting.setData(global) return } + await AvailableRasterLayers.editorLayerIndex() const isCategory = targetLayerId === "photo" || targetLayerId === "osmbasedmap" || targetLayerId === "map" const available = this._availableLayers.store.data const foundLayer = isCategory ? available.find((l) => l.properties.category === targetLayerId) - : available.find((l) => l.properties.id === targetLayerId) + : available.find((l) => l.properties.id.toLowerCase() === targetLayerId) console.debug("Updating background layer to", foundLayer?.id, { targetLayerId, queryParam: this._queryParameter?.data, diff --git a/src/Models/RasterLayers.ts b/src/Models/RasterLayers.ts index d7d488c1d..017e3c4e7 100644 --- a/src/Models/RasterLayers.ts +++ b/src/Models/RasterLayers.ts @@ -28,7 +28,7 @@ export class AvailableRasterLayers { return this._editorLayerIndex } - public static globalLayers: RasterLayerPolygon[] = globallayers.layers + public static globalLayers: ReadonlyArray = globallayers.layers .filter( (properties) => properties.id !== "osm.carto" && properties.id !== "Bing" /*Added separately*/ @@ -140,28 +140,24 @@ export class RasterLayerUtils { * @param available * @param preferredCategory * @param ignoreLayer + * @param skipLayers Skip the first N layers */ public static SelectBestLayerAccordingTo( available: RasterLayerPolygon[], preferredCategory: string, - ignoreLayer?: RasterLayerPolygon + ignoreLayer?: RasterLayerPolygon, + skipLayers: number = 0 ): RasterLayerPolygon { - let secondBest: RasterLayerPolygon = undefined - for (const rasterLayer of available) { - if (rasterLayer === ignoreLayer) { - continue - } - const p = rasterLayer.properties - if (p.category === preferredCategory) { - if (p.best) { - return rasterLayer - } - if (!secondBest) { - secondBest = rasterLayer - } - } + const inCategory = available.filter(l => l.properties.category === preferredCategory) + const best : RasterLayerPolygon[] = inCategory.filter(l => l.properties.best) + const others : RasterLayerPolygon[] = inCategory.filter(l => !l.properties.best) + let all = best.concat(others) + console.log("Selected layers are:", all.map(l => l.properties.id)) + if(others.length > skipLayers){ + all = all.slice(skipLayers) } - return secondBest + + return all.find(l => l !== ignoreLayer) } } diff --git a/src/Models/ThemeViewState.ts b/src/Models/ThemeViewState.ts index 2fb45b381..1bfcd52df 100644 --- a/src/Models/ThemeViewState.ts +++ b/src/Models/ThemeViewState.ts @@ -161,7 +161,7 @@ export default class ThemeViewState implements SpecialVisualizationState { this.featureSwitches = new FeatureSwitchState(layout) this.guistate = new MenuState( this.featureSwitches.featureSwitchWelcomeMessage.data, - layout.id + layout.id, ) this.map = new UIEventSource(undefined) const geolocationState = new GeoLocationState() @@ -177,14 +177,14 @@ export default class ThemeViewState implements SpecialVisualizationState { oauth_token: QueryParameters.GetQueryParameter( "oauth_token", undefined, - "Used to complete the login" + "Used to complete the login", ), }) this.userRelatedState = new UserRelatedState( this.osmConnection, layout, this.featureSwitches, - this.mapProperties + this.mapProperties, ) this.userRelatedState.fixateNorth.addCallbackAndRunD((fixated) => { this.mapProperties.allowRotating.setData(fixated !== "yes") @@ -195,20 +195,20 @@ export default class ThemeViewState implements SpecialVisualizationState { geolocationState, this.selectedElement, this.mapProperties, - this.userRelatedState.gpsLocationHistoryRetentionTime + this.userRelatedState.gpsLocationHistoryRetentionTime, ) this.geolocationControl = new GeolocationControlState(this.geolocation, this.mapProperties) this.availableLayers = AvailableRasterLayers.layersAvailableAt( this.mapProperties.location, - this.osmConnection.isLoggedIn + this.osmConnection.isLoggedIn, ) this.layerState = new LayerState( this.osmConnection, layout.layers, layout.id, - this.featureSwitches.featureSwitchLayerDefault + this.featureSwitches.featureSwitchLayerDefault, ) { @@ -217,7 +217,7 @@ export default class ThemeViewState implements SpecialVisualizationState { const isDisplayed = QueryParameters.GetBooleanQueryParameter( "overlay-" + rasterInfo.id, rasterInfo.defaultState ?? true, - "Whether or not overlay layer " + rasterInfo.id + " is shown" + "Whether or not overlay layer " + rasterInfo.id + " is shown", ) const state = { isDisplayed } overlayLayerStates.set(rasterInfo.id, state) @@ -242,7 +242,7 @@ export default class ThemeViewState implements SpecialVisualizationState { this.osmConnection.Backend(), (id) => this.layerState.filteredLayers.get(id).isDisplayed, mvtAvailableLayers, - this.fullNodeDatabase + this.fullNodeDatabase, ) let currentViewIndex = 0 @@ -260,7 +260,7 @@ export default class ThemeViewState implements SpecialVisualizationState { id: "current_view_" + currentViewIndex, }), ] - }) + }), ) this.featuresInView = new BBoxFeatureSource(layoutSource, this.mapProperties.bounds) @@ -278,19 +278,19 @@ export default class ThemeViewState implements SpecialVisualizationState { featureSwitches: this.featureSwitches, }, layout?.isLeftRightSensitive() ?? false, - (e) => this.reportError(e) + (e) => this.reportError(e), ) this.historicalUserLocations = this.geolocation.historicalUserLocations this.newFeatures = new NewGeometryFromChangesFeatureSource( this.changes, layoutSource, - this.featureProperties + this.featureProperties, ) layoutSource.addSource(this.newFeatures) const perLayer = new PerLayerFeatureSourceSplitter( Array.from(this.layerState.filteredLayers.values()).filter( - (l) => l.layerDef?.source !== null + (l) => l.layerDef?.source !== null, ), new ChangeGeometryApplicator(this.indexedFeatures, this.changes), { @@ -301,10 +301,10 @@ export default class ThemeViewState implements SpecialVisualizationState { "Got ", features.length, "leftover features, such as", - features[0].properties + features[0].properties, ) }, - } + }, ) this.perLayer = perLayer.perLayer } @@ -344,12 +344,12 @@ export default class ThemeViewState implements SpecialVisualizationState { this.lastClickObject = new LastClickFeatureSource( this.layout, this.mapProperties.lastClickLocation, - this.userRelatedState.addNewFeatureMode + this.userRelatedState.addNewFeatureMode, ) this.osmObjectDownloader = new OsmObjectDownloader( this.osmConnection.Backend(), - this.changes + this.changes, ) this.perLayerFiltered = this.showNormalDataOn(this.map) @@ -360,7 +360,7 @@ export default class ThemeViewState implements SpecialVisualizationState { currentZoom: this.mapProperties.zoom, layerState: this.layerState, bounds: this.visualFeedbackViewportBounds, - } + }, ) this.hasDataInView = new NoElementsInViewDetector(this).hasFeatureInView this.imageUploadManager = new ImageUploadManager( @@ -368,7 +368,7 @@ export default class ThemeViewState implements SpecialVisualizationState { Imgur.singleton, this.featureProperties, this.osmConnection, - this.changes + this.changes, ) this.favourites = new FavouritesFeatureSource(this) const longAgo = new Date() @@ -414,7 +414,7 @@ export default class ThemeViewState implements SpecialVisualizationState { LayoutSource.fromCacheZoomLevel, fs, this.featureProperties, - fs.layer.layerDef.maxAgeOfCache + fs.layer.layerDef.maxAgeOfCache, ) toLocalStorage.set(layerId, storage) }) @@ -427,7 +427,7 @@ export default class ThemeViewState implements SpecialVisualizationState { const doShowLayer = this.mapProperties.zoom.map( (z) => (fs.layer.isDisplayed?.data ?? true) && z >= (fs.layer.layerDef?.minzoom ?? 0), - [fs.layer.isDisplayed] + [fs.layer.isDisplayed], ) if (!doShowLayer.data && this.featureSwitches.featureSwitchFilter.data === false) { @@ -444,7 +444,7 @@ export default class ThemeViewState implements SpecialVisualizationState { fs.layer, fs, (id) => this.featureProperties.getStore(id), - this.layerState.globalFilters + this.layerState.globalFilters, ) filteringFeatureSource.set(layerName, filtered) @@ -588,7 +588,7 @@ export default class ThemeViewState implements SpecialVisualizationState { return } this.selectClosestAtCenter(0) - } + }, ) for (let i = 1; i < 9; i++) { @@ -606,7 +606,7 @@ export default class ThemeViewState implements SpecialVisualizationState { onUp: true, }, doc, - () => this.selectClosestAtCenter(i - 1) + () => this.selectClosestAtCenter(i - 1), ) } @@ -623,7 +623,7 @@ export default class ThemeViewState implements SpecialVisualizationState { if (this.featureSwitches.featureSwitchBackgroundSelection.data) { this.guistate.backgroundLayerSelectionIsOpened.setData(true) } - } + }, ) Hotkeys.RegisterHotkey( { @@ -635,18 +635,11 @@ export default class ThemeViewState implements SpecialVisualizationState { if (this.featureSwitches.featureSwitchFilter.data) { this.guistate.openFilterView() } - } + }, ) - Hotkeys.RegisterHotkey( - { shift: "O" }, - Translations.t.hotkeyDocumentation.selectMapnik, - () => { - this.mapProperties.rasterLayer.setData(AvailableRasterLayers.osmCarto) - } - ) - const setLayerCategory = (category: EliCategory) => { + const setLayerCategory = (category: EliCategory, skipLayers: number = 0) => { const timeOfCall = new Date() - const available = this.availableLayers.store.addCallbackAndRunD((available) => { + this.availableLayers.store.addCallbackAndRunD((available) => { const now = new Date() const timeDiff = (now.getTime() - timeOfCall.getTime()) / 1000 if (timeDiff > 3) { @@ -656,9 +649,13 @@ export default class ThemeViewState implements SpecialVisualizationState { const best = RasterLayerUtils.SelectBestLayerAccordingTo( available, category, - current.data + current.data, + skipLayers ) - console.log("Best layer for category", category, "is", best.properties.id) + if(!best){ + return + } + console.log("Best layer for category", category, "is", best?.properties?.id) current.setData(best) }) } @@ -666,26 +663,43 @@ export default class ThemeViewState implements SpecialVisualizationState { Hotkeys.RegisterHotkey( { nomod: "O" }, Translations.t.hotkeyDocumentation.selectOsmbasedmap, - () => setLayerCategory("osmbasedmap") + () => setLayerCategory("osmbasedmap"), ) Hotkeys.RegisterHotkey( { nomod: "M" }, Translations.t.hotkeyDocumentation.selectMap, - () => setLayerCategory("map") + () => setLayerCategory("map"), ) Hotkeys.RegisterHotkey( { nomod: "P" }, Translations.t.hotkeyDocumentation.selectAerial, - () => setLayerCategory("photo") + () => setLayerCategory("photo"), + ) + Hotkeys.RegisterHotkey( + { shift: "O" }, + Translations.t.hotkeyDocumentation.selectOsmbasedmap, + () => setLayerCategory("osmbasedmap",2), + ) + + Hotkeys.RegisterHotkey( + { shift: "M" }, + Translations.t.hotkeyDocumentation.selectMap, + () => setLayerCategory("map",2), + ) + + Hotkeys.RegisterHotkey( + { shift: "P" }, + Translations.t.hotkeyDocumentation.selectAerial, + () => setLayerCategory("photo",2), ) Hotkeys.RegisterHotkey( { nomod: "L" }, Translations.t.hotkeyDocumentation.geolocate, () => { this.geolocationControl.handleClick() - } + }, ) return true }) @@ -697,7 +711,7 @@ export default class ThemeViewState implements SpecialVisualizationState { Translations.t.hotkeyDocumentation.translationMode, () => { Locale.showLinkToWeblate.setData(!Locale.showLinkToWeblate.data) - } + }, ) } @@ -708,7 +722,7 @@ export default class ThemeViewState implements SpecialVisualizationState { const normalLayers = this.layout.layers.filter( (l) => Constants.priviliged_layers.indexOf(l.id) < 0 && - !l.id.startsWith("note_import") + !l.id.startsWith("note_import"), ) const maxzoom = Math.min(...normalLayers.map((l) => l.minzoom)) @@ -716,7 +730,7 @@ export default class ThemeViewState implements SpecialVisualizationState { (l) => Constants.priviliged_layers.indexOf(l.id) < 0 && l.source.geojsonSource === undefined && - l.doCount + l.doCount, ) const summaryTileSource = new SummaryTileSource( Constants.SummaryServer, @@ -725,7 +739,7 @@ export default class ThemeViewState implements SpecialVisualizationState { this.mapProperties, { isActive: this.mapProperties.zoom.map((z) => z < maxzoom), - } + }, ) return new SummaryTileSourceRewriter(summaryTileSource, this.layerState.filteredLayers) @@ -746,12 +760,12 @@ export default class ThemeViewState implements SpecialVisualizationState { gps_location_history: this.geolocation.historicalUserLocations, gps_track: this.geolocation.historicalUserLocationsTrack, selected_element: new StaticFeatureSource( - this.selectedElement.map((f) => (f === undefined ? empty : [f])) + this.selectedElement.map((f) => (f === undefined ? empty : [f])), ), range: new StaticFeatureSource( this.mapProperties.maxbounds.map((bbox) => - bbox === undefined ? empty : [bbox.asGeoJson({ id: "range" })] - ) + bbox === undefined ? empty : [bbox.asGeoJson({ id: "range" })], + ), ), current_view: this.currentView, favourite: this.favourites, @@ -766,7 +780,7 @@ export default class ThemeViewState implements SpecialVisualizationState { ShowDataLayer.showRange( this.map, new StaticFeatureSource([bbox.asGeoJson({ id: "range" })]), - this.featureSwitches.featureSwitchIsTesting + this.featureSwitches.featureSwitchIsTesting, ) } const currentViewLayer = this.layout.layers.find((l) => l.id === "current_view") @@ -780,7 +794,7 @@ export default class ThemeViewState implements SpecialVisualizationState { currentViewLayer, this.layout, this.osmObjectDownloader, - this.featureProperties + this.featureProperties, ) }) } @@ -824,20 +838,20 @@ export default class ThemeViewState implements SpecialVisualizationState { const lastClickLayerConfig = new LayerConfig( last_click_layerconfig, - "last_click" + "last_click", ) const lastClickFiltered = lastClickLayerConfig.isShown === undefined ? specialLayers.last_click : specialLayers.last_click.features.mapD((fs) => - fs.filter((f) => { - const matches = lastClickLayerConfig.isShown.matchesProperties( - f.properties - ) - console.debug("LastClick ", f, "matches", matches) - return matches - }) - ) + fs.filter((f) => { + const matches = lastClickLayerConfig.isShown.matchesProperties( + f.properties, + ) + console.debug("LastClick ", f, "matches", matches) + return matches + }), + ) new ShowDataLayer(this.map, { features: new StaticFeatureSource(lastClickFiltered), layer: lastClickLayerConfig, @@ -884,7 +898,7 @@ export default class ThemeViewState implements SpecialVisualizationState { this.mapProperties.rasterLayer, this.availableLayers, this.featureSwitches.backgroundLayerId, - this.userRelatedState.preferredBackgroundLayer + this.userRelatedState.preferredBackgroundLayer, ) } @@ -900,7 +914,7 @@ export default class ThemeViewState implements SpecialVisualizationState { ? ">>> _Not_ reporting error to report server as testmode is on" : ">>> Reporting error to", Constants.ErrorReportServer, - message + message, ) if (isTesting) { return diff --git a/src/UI/Map/Icon.svelte b/src/UI/Map/Icon.svelte index 12f4eb58f..850c9eb3d 100644 --- a/src/UI/Map/Icon.svelte +++ b/src/UI/Map/Icon.svelte @@ -50,7 +50,7 @@ export let color: string | undefined = undefined export let clss: string | undefined = "" clss ??= "" - export let emojiHeight = 40 + export let emojiHeight = "40px" {#if icon} @@ -147,7 +147,7 @@ {:else if icon === "user_circle"} {:else if Utils.isEmoji(icon)} - + {icon} {:else} diff --git a/src/UI/Map/Marker.svelte b/src/UI/Map/Marker.svelte index a5f5f7d1f..47a35c0c0 100644 --- a/src/UI/Map/Marker.svelte +++ b/src/UI/Map/Marker.svelte @@ -30,6 +30,7 @@ * Class which is applied onto the individual icons */ export let clss = "" + export let emojiHeight : string = "40px" /** * Class applied onto the entire element @@ -41,7 +42,7 @@
{#each iconsParsed as icon}
- +
{/each}
diff --git a/src/UI/Map/RasterLayerPicker.svelte b/src/UI/Map/RasterLayerPicker.svelte index ad4bee8ff..37c61073e 100644 --- a/src/UI/Map/RasterLayerPicker.svelte +++ b/src/UI/Map/RasterLayerPicker.svelte @@ -23,7 +23,7 @@ let rasterLayerId = rasterLayer.sync( (l) => l?.properties?.id, [], - (id) => availableLayers.find((l) => l.properties.id === id) + (id) => availableLayers.find((l) => l.properties.id === id), ) rasterLayer.setData(availableLayers[0]) $: rasterLayer.setData(availableLayers[0]) @@ -36,13 +36,13 @@ return } rasterLayer.setData(fav) - }) + }), ) onDestroy( rasterLayer.addCallbackAndRunD((selected) => { favourite?.setData(selected.properties.id) - }) + }), ) } @@ -56,7 +56,7 @@ } else { rasterLayerOnMap.setData(undefined) } - }) + }), ) } @@ -93,6 +93,15 @@ {#each availableLayers as availableLayer} {/each} diff --git a/src/UI/Popup/TagRendering/TagRenderingMapping.svelte b/src/UI/Popup/TagRendering/TagRenderingMapping.svelte index 9677f7c1c..0dceb43f0 100644 --- a/src/UI/Popup/TagRendering/TagRenderingMapping.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingMapping.svelte @@ -30,6 +30,12 @@ | "large-height" | string } + + const emojiHeights = { + "small":"2rem", + "medium":"3rem", + "large":"5rem" + } {#if mapping.icon !== undefined} @@ -42,6 +48,9 @@ }-width`, "shrink-0" )} + + emojiHeight={ emojiHeights[mapping.iconClass] ?? "2rem"} + clss={`mapping-icon-${mapping.iconClass ?? "small"}`} /> diff --git a/src/Utils.ts b/src/Utils.ts index dfc8d0d92..874b327b4 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1727,11 +1727,12 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be } } - private static emojiRegex = /^\p{Extended_Pictographic}+$/u + private static emojiRegex = /[\p{Extended_Pictographic}🛰️]$/u /** * Returns 'true' if the given string contains at least one and only emoji characters - * @param string + * + * Utils.isEmoji("⛰\uFE0F") // => true */ public static isEmoji(string: string) { return Utils.emojiRegex.test(string) diff --git a/src/assets/global-raster-layers.json b/src/assets/global-raster-layers.json index 6b52a3eaa..2c2ad8488 100644 --- a/src/assets/global-raster-layers.json +++ b/src/assets/global-raster-layers.json @@ -1,5 +1,21 @@ { "layers": [ + { + "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692", + "style": "assets/sunny.json", + "connect-src": [ + "https://protomaps.github.io" + ], + "best": true, + "id": "protomaps.sunny", + "name": "Protomaps Sunny", + "type": "vector", + "category": "osmbasedmap", + "attribution": { + "text": "Protomaps", + "url": "https://protomaps.com/" + } + }, { "name": "OpenStreetMap Carto", "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png", @@ -87,21 +103,6 @@ "url": "https://protomaps.com/" } }, - { - "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692", - "style": "assets/sunny.json", - "connect-src": [ - "https://protomaps.github.io" - ], - "id": "protomaps.sunny", - "name": "Protomaps Sunny", - "type": "vector", - "category": "osmbasedmap", - "attribution": { - "text": "Protomaps", - "url": "https://protomaps.com/" - } - }, { "url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692", "style": "assets/sunny-unlabeled.json",