Skip to content

Commit

Permalink
make icon colors work
Browse files Browse the repository at this point in the history
  • Loading branch information
@hiddewie
hiddewie committed Dec 7, 2024
1 parent 4f91e3c commit 1921e8f
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 48 deletions.
89 changes: 61 additions & 28 deletions proxy/css/ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,6 @@ body {
height: 1400px;
}

.maplibregl-ctrl-edit .maplibregl-ctrl-icon {
background-size: 24px;
background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z' fill='%23000000'/%3E%3C/svg%3E");
}
.maplibregl-ctrl-configuration .maplibregl-ctrl-icon {
background-size: 24px;
background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 200 200' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 75C41 89.5 54 100 70 100s29-10.5 33.5-25H170a10 10 0 0 0 0-20h-66.5C99 40.5 86 30 70 30S41 40.5 36.5 55H25a10 10 0 0 0 0 20ZM70 50a15 15 0 1 1-15 15 14.73 14.73 0 0 1 15-15Zm105 75h-11.5c-4.5-14.5-17.5-25-33.5-25s-29 10.5-33.5 25H30a10 10 0 0 0 0 20h66.5c4.5 14.5 17.5 25 33.5 25s29-10.5 33.5-25H175a10 10 0 0 0 0-20Zm-45 25a15 15 0 1 1 15-15 14.73 14.73 0 0 1-15 15Z'/%3E%3C/svg%3E");
}

/** Patch Maplibre GL to respect the page theme */
#map-container .maplibregl-ctrl-group,
.maplibregl-ctrl-attrib.maplibregl-compact,
Expand All @@ -78,32 +69,74 @@ body {
background-color: var(--bs-light);
}

.maplibregl-ctrl-group button.maplibregl-ctrl-search {
.maplibregl-ctrl-group button.maplibregl-ctrl-search,
.maplibregl-ctrl-group button.maplibregl-ctrl-legend {
padding: 4px;
width: auto;
font-size: 1rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon {
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%23000000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position-x: left;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon span {
margin-left: 1.5rem;
font-size: 16px;

.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.maplibregl-ctrl-legend .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.maplibregl-ctrl-compass .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.maplibregl-ctrl-edit .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.maplibregl-ctrl-configuration .maplibregl-ctrl-icon {
background-image: none;
background-color: var(--bs-body-color);
mask-size: contain;
mask-position: center;
display: inline-block;
vertical-align: top;
}

.maplibregl-ctrl-group button.maplibregl-ctrl-legend {
padding: 4px;
width: auto;
.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon {
mask-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%23000000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
width: 1.5rem;
height: 1.4rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-legend .maplibregl-ctrl-icon {
background-size: contain;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' enable-background='new 0 0 52 52' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M26.7,42.8c0.8,0,1.5,0.7,1.5,1.5v3.2c0,0.8-0.7,1.5-1.5,1.5h-3.2c-0.8,0-1.5-0.7-1.5-1.5v-3.2 c0-0.8,0.7-1.5,1.5-1.5H26.7z'/%3E%3Cpath d='M28.2,35.1c0-2.1,1.3-4,3.1-4.8h0.1c5.2-2.1,8.8-7.2,8.8-13.2c0-7.8-6.4-14.2-14.2-14.2 c-7.2,0-13.2,5.3-14.2,12.2v0.1c-0.1,0.9,0.6,1.6,1.5,1.6h3.2c0.8,0,1.4-0.5,1.5-1.1v-0.2c0.7-3.7,4-6.5,7.9-6.5 c4.5,0,8.1,3.6,8.1,8.1c0,2.1-0.8,4-2.1,5.5l-0.1,0.1c-0.9,1-2.1,1.6-3.3,2c-4,1.4-6.7,5.2-6.7,9.4v1.5c0,0.8,0.6,1.4,1.4,1.4h3.2 c0.8,0,1.6-0.6,1.6-1.5L28.2,35.1z'/%3E%3C/g%3E%3C/svg%3E");
background-position-x: left;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-legend .maplibregl-ctrl-icon span {
margin-left: 1.5rem;
font-size: 16px;
mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' enable-background='new 0 0 52 52' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M26.7,42.8c0.8,0,1.5,0.7,1.5,1.5v3.2c0,0.8-0.7,1.5-1.5,1.5h-3.2c-0.8,0-1.5-0.7-1.5-1.5v-3.2 c0-0.8,0.7-1.5,1.5-1.5H26.7z'/%3E%3Cpath d='M28.2,35.1c0-2.1,1.3-4,3.1-4.8h0.1c5.2-2.1,8.8-7.2,8.8-13.2c0-7.8-6.4-14.2-14.2-14.2 c-7.2,0-13.2,5.3-14.2,12.2v0.1c-0.1,0.9,0.6,1.6,1.5,1.6h3.2c0.8,0,1.4-0.5,1.5-1.1v-0.2c0.7-3.7,4-6.5,7.9-6.5 c4.5,0,8.1,3.6,8.1,8.1c0,2.1-0.8,4-2.1,5.5l-0.1,0.1c-0.9,1-2.1,1.6-3.3,2c-4,1.4-6.7,5.2-6.7,9.4v1.5c0,0.8,0.6,1.4,1.4,1.4h3.2 c0.8,0,1.6-0.6,1.6-1.5L28.2,35.1z'/%3E%3C/g%3E%3C/svg%3E");
width: 1.5rem;
height: 1.4rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");
width: 1.8rem;
height: 1.8rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");
width: 1.8rem;
height: 1.8rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E");
width: 1.8rem;
height: 1.8rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E");
width: 1.8rem;
height: 1.8rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
width: 1.8rem;
height: 1.8rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-edit .maplibregl-ctrl-icon {
mask-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z' fill='%23000000'/%3E%3C/svg%3E");
width: 1.5rem;
height: 1.4rem;
}
.maplibregl-ctrl-group button.maplibregl-ctrl-configuration .maplibregl-ctrl-icon {
mask-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 200 200' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 75C41 89.5 54 100 70 100s29-10.5 33.5-25H170a10 10 0 0 0 0-20h-66.5C99 40.5 86 30 70 30S41 40.5 36.5 55H25a10 10 0 0 0 0 20ZM70 50a15 15 0 1 1-15 15 14.73 14.73 0 0 1 15-15Zm105 75h-11.5c-4.5-14.5-17.5-25-33.5-25s-29 10.5-33.5 25H30a10 10 0 0 0 0 20h66.5c4.5 14.5 17.5 25 33.5 25s29-10.5 33.5-25H175a10 10 0 0 0 0-20Zm-45 25a15 15 0 1 1 15-15 14.73 14.73 0 0 1-15 15Z'/%3E%3C/svg%3E");
width: 1.5rem;
height: 1.4rem;
}

.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact {
Expand Down
34 changes: 18 additions & 16 deletions proxy/js/styles.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ const colors = {
casing: '#808080',
},
trackHalo: 'blue',
stationsText: 'blue',
},
},
km: {
Expand All @@ -82,8 +83,8 @@ const colors = {
main: 'white',
halo: 'black',
},
halo: 'black',
casing: '#333',
halo: '#333',
casing: '#666',
hover: {
main: '#ff0000',
// High speed lines and 25kV are the hover color by default
Expand Down Expand Up @@ -116,7 +117,8 @@ const colors = {
fill: '#ababab',
casing: '#808080',
},
trackHalo: 'blue',
trackHalo: '#afc6ff',
stationsText: '#afc6ff',
},
},
km: {
Expand Down Expand Up @@ -1260,7 +1262,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'line-cap': 'round',
},
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_casing_add,
}
Expand All @@ -1285,7 +1287,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
source: 'standard_railway_text_stations_low',
'source-layer': 'standard_railway_text_stations_low',
paint: {
'text-color': 'blue',
'text-color': colors[theme].styles.standard.stationsText,
'text-halo-color': colors[theme].halo,
'text-halo-width': 1.5,
},
Expand All @@ -1310,7 +1312,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'line-cap': 'round',
},
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_casing_add,
}
Expand All @@ -1336,7 +1338,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
source: 'standard_railway_text_stations_med',
'source-layer': 'standard_railway_text_stations_med',
paint: {
'text-color': 'blue',
'text-color': colors[theme].styles.standard.stationsText,
'text-halo-color': colors[theme].halo,
'text-halo-width': 1.5,
},
Expand Down Expand Up @@ -1367,7 +1369,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'line-cap': 'round',
},
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_tunnel_casing_add,
}
Expand All @@ -1391,7 +1393,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'line-cap': 'round',
},
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_casing_add,
}
Expand All @@ -1408,7 +1410,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'line-cap': 'round',
},
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_casing_add,
'line-dasharray': construction_dasharray,
Expand All @@ -1426,7 +1428,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'line-cap': 'round',
},
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_casing_add,
'line-dasharray': proposed_dasharray,
Expand All @@ -1444,7 +1446,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'line-cap': 'round',
},
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_casing_add,
'line-dasharray': abandoned_dasharray,
Expand All @@ -1462,7 +1464,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'line-cap': 'round',
},
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_casing_add,
'line-dasharray': razed_dasharray,
Expand Down Expand Up @@ -1649,7 +1651,7 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
['!=', ['get', 'railway'], 'razed'],
],
paint: {
'line-color': colors[theme].styles.standard.casing.railway,
'line-color': colors[theme].casing,
'line-width': railwayLineWidth,
'line-gap-width': railway_casing_add,
}
Expand Down Expand Up @@ -2149,8 +2151,8 @@ const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
'text-color': ['case',
['==', ['get', 'railway'], 'yard'], '#87491D',
['==', ['get', 'railway'], 'tram_stop'], '#D877B8',
['==', ['get', 'railway'], 'station'], 'blue',
['==', ['get', 'railway'], 'halt'], 'blue',
['==', ['get', 'railway'], 'station'], colors[theme].styles.standard.stationsText,
['==', ['get', 'railway'], 'halt'], colors[theme].styles.standard.stationsText,
'#616161',
],
'text-halo-color': ['case',
Expand Down
8 changes: 4 additions & 4 deletions proxy/js/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -549,8 +549,8 @@ class SearchControl {
button.type = 'button';
button.title = 'Search for places'
button.onclick = _ => showSearch();
const icon = createDomElement('span', 'maplibregl-ctrl-icon', button);
const text = createDomElement('span', '', icon);
createDomElement('span', 'maplibregl-ctrl-icon', button);
const text = createDomElement('span', '', button);
text.innerText = 'Search'

return this._container;
Expand Down Expand Up @@ -611,8 +611,8 @@ class LegendControl {
const button = createDomElement('button', 'maplibregl-ctrl-legend', this._container);
button.type = 'button';
button.title = 'Show/hide map legend';
const icon = createDomElement('span', 'maplibregl-ctrl-icon', button);
const text = createDomElement('span', '', icon);
createDomElement('span', 'maplibregl-ctrl-icon', button);
const text = createDomElement('span', '', button);
text.innerText = 'Legend'

button.onclick = () => this.options.onLegendToggle()
Expand Down

0 comments on commit 1921e8f

Please sign in to comment.