contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Automatically place the label below the icon

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-04-11 00:09:19 +02:00
parent a50913a094
commit b6b22526dd
3 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Customizations/JSON/LayerConfig.ts
View file

@ -325,7 +325,7 @@ export default class LayerConfig {
const weight = rendernum(this.width, 5); const weight = rendernum(this.width, 5);
const iconW = num(iconSize[0]); const iconW = num(iconSize[0]);
const iconH = num(iconSize[1]); let iconH = num(iconSize[1]);
const mode = iconSize[2] ?? "center" const mode = iconSize[2] ?? "center"
let anchorW = iconW / 2; let anchorW = iconW / 2;
@ -375,7 +375,7 @@ export default class LayerConfig {
const rotation = render(self.rotation, "0deg"); const rotation = render(self.rotation, "0deg");
let htmlParts: UIElement[] = []; let htmlParts: UIElement[] = [];
let sourceParts = iconUrl.split(";").filter(prt => prt != ""); let sourceParts = Utils.NoNull(iconUrl.split(";").filter(prt => prt != ""));
for (const sourcePart of sourceParts) { for (const sourcePart of sourceParts) {
htmlParts.push(genHtmlFromString(sourcePart)) htmlParts.push(genHtmlFromString(sourcePart))
} }
@ -410,8 +410,11 @@ export default class LayerConfig {
htmlParts.push(badgesComponent) htmlParts.push(badgesComponent)
} }
if(sourceParts.length ==0){iconH = 0}
const label = self.label.GetRenderValue(tgs)?.Subs(tgs).SetClass("block w-min text-center") const label = self.label.GetRenderValue(tgs)?.Subs(tgs)
.SetClass("block w-min text-center")
.SetStyle("margin-top: "+(iconH + 2) +"px")
console.log("Generating label gave ", label, " source: ", self.label, "tags: ", tgs) console.log("Generating label gave ", label, " source: ", self.label, "tags: ", tgs)
if (label !== undefined) { if (label !== undefined) {
htmlParts.push(new Combine([label]).SetClass("flex flex-col items-center")) htmlParts.push(new Combine([label]).SetClass("flex flex-col items-center"))

2
Customizations/JSON/LayerConfigJson.ts
View file

@ -131,7 +131,7 @@ export interface LayerConfigJson {
rotation?: string | TagRenderingConfigJson; rotation?: string | TagRenderingConfigJson;
/** /**
* A HTML-fragment that is shown at the center of the icon, for example: * A HTML-fragment that is shown at the center of the icon, for example:
* <div style="margin-top: 50px; background: white; display: block">{name}</div> * <div style="background: white; display: block">{name}</div>
*/ */
label?: string | TagRenderingConfigJson ; label?: string | TagRenderingConfigJson ;

2
assets/layers/public_bookcases/public_bookcases.json
View file

@ -43,7 +43,7 @@
"mappings": [ "mappings": [
{ {
"if": "name~*", "if": "name~*",
"then": "<div style='margin-top: 42px; background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>" "then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
} }
] ]
}, },