Fixes to sidewalks theme

This commit is contained in:
pietervdvn 2021-10-28 01:26:35 +02:00
parent 070262a959
commit 10d9f18110
6 changed files with 136 additions and 91 deletions

View file

@ -29,7 +29,7 @@ public GenerateLeafletStyle( tags: {} ):
{ {
color: string, color: string,
weight: number, weight: number,
dashArray: number[], dashArray: string,
offset: number offset: number
} { } {
function rendernum(tr: TagRenderingConfig, deflt: number) { function rendernum(tr: TagRenderingConfig, deflt: number) {
@ -49,7 +49,7 @@ public GenerateLeafletStyle( tags: {} ):
return Utils.SubstituteKeys(str, tags)?.replace(/{.*}/g, ""); return Utils.SubstituteKeys(str, tags)?.replace(/{.*}/g, "");
} }
const dashArray = render(this.dashArray)?.split(" ")?.map(Number); const dashArray = render(this.dashArray);
let color = render(this.color, "#00f"); let color = render(this.color, "#00f");
if (color.startsWith("--")) { if (color.startsWith("--")) {
color = getComputedStyle(document.body).getPropertyValue( color = getComputedStyle(document.body).getPropertyValue(

View file

@ -78,15 +78,19 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
renderingsForGroup.push(questionBox) renderingsForGroup.push(questionBox)
} else { } else {
let classes = innerClasses let classes = innerClasses
if(renderingsForGroup.length === 0 && i > 0){ let isHeader = renderingsForGroup.length === 0 && i > 0
if(isHeader){
// This is the first element of a group! // This is the first element of a group!
// It should act as header and be sticky // It should act as header and be sticky
classes= "sticky top-0" classes= ""
} }
const etr = new EditableTagRendering(tags, tr, layerConfig.units,{ const etr = new EditableTagRendering(tags, tr, layerConfig.units,{
innerElementClasses: innerClasses innerElementClasses: innerClasses
}) })
if(isHeader){
etr.SetClass("sticky top-0")
}
renderingsForGroup.push(etr) renderingsForGroup.push(etr)
} }
} }

View file

@ -11,10 +11,21 @@
}, },
"mapRendering": [ "mapRendering": [
{ {
"location": [ "width": 15,
"point" "color": {
] "render": "#ff000088",
}, "mappings": [{
{} "if": "id=left",
"then": "#0000ff88"
}]
},
"offset": {
"render": "-15",
"mappings": [{
"if": "id=right",
"then": "15"
}]
}
}
] ]
} }

View file

@ -29,35 +29,39 @@
"maxCacheAge": 0 "maxCacheAge": 0
}, },
"minzoom": 18, "minzoom": 18,
"width": { "mapRendering": [
"render": "2" {
}, "width": {
"color": { "render": "2"
"render": "#00c",
"mappings": [
{
"if": "building=house",
"then": "#a00"
}, },
{ "color": {
"if": "building=shed", "render": "#00c",
"then": "#563e02" "mappings": [
}, {
{ "if": "building=house",
"if": { "then": "#a00"
"or": [ },
"building=garage", {
"building=garages" "if": "building=shed",
] "then": "#563e02"
}, },
"then": "#f9bfbb" {
}, "if": {
{ "or": [
"if": "building=yes", "building=garage",
"then": "#0774f2" "building=garages"
]
},
"then": "#f9bfbb"
},
{
"if": "building=yes",
"then": "#0774f2"
}
]
} }
] }
}, ],
"title": "OSM-gebouw", "title": "OSM-gebouw",
"tagRenderings": [ "tagRenderings": [
"all_tags" "all_tags"
@ -93,12 +97,16 @@
"maxCacheAge": 0 "maxCacheAge": 0
}, },
"minzoom": 18, "minzoom": 18,
"color": { "mapRendering": [
"render": "#00c" {
}, "color": {
"width": { "render": "#00c"
"render": "1" },
}, "width": {
"render": "1"
}
}
],
"title": { "title": {
"render": { "render": {
"*": "OSM-Object" "*": "OSM-Object"
@ -265,26 +273,34 @@
} }
} }
], ],
"label": { "mapRendering": [
"mappings": [ {
{ "location": [
"if": "addr:housenumber~*", "point",
"then": "<div style='background-color: white; font: large; width: 1.5em; height: 1.5em; border-radius: 100%'>{addr:housenumber}</div>" "center"
],
"label": {
"mappings": [
{
"if": "addr:housenumber~*",
"then": "<div style='background-color: white; font: large; width: 1.5em; height: 1.5em; border-radius: 100%'>{addr:housenumber}</div>"
}
]
},
"iconSize": {
"render": "40,40,center"
} }
] },
}, {
"width": { "dashes": "2 2",
"render": "2" "color": {
}, "render": "#00f"
"iconSize": { },
"render": "40,40,center" "width": {
}, "render": "2"
"dashes": "2 2", }
"color": { }
"render": "#00f" ]
},
"wayHandling": 2,
"presets": []
}, },
{ {
"id": "crab-addresses 2021-10-26", "id": "crab-addresses 2021-10-26",
@ -298,8 +314,13 @@
"minzoom": 19, "minzoom": 19,
"name": "CRAB-addressen", "name": "CRAB-addressen",
"title": "CRAB-adres", "title": "CRAB-adres",
"icon": "circle:#bb3322", "mapRendering": [
"iconSize": "15,15,center", {
"location": "point",
"icon": "circle:#bb3322",
"iconSize": "15,15,center"
}
],
"tagRenderings": [ "tagRenderings": [
"all_tags", "all_tags",
{ {
@ -465,25 +486,33 @@
} }
} }
], ],
"label": { "mapRendering": [
"mappings": [ {
{ "location": [
"if": "addr:housenumber~*", "point",
"then": "<div style='background-color: white; font: large; width: 1.5em; height: 1.5em; border-radius: 100%'>{addr:housenumber}</div>" "center"
],
"iconSize": {
"render": "40,40,center"
},
"label": {
"mappings": [
{
"if": "addr:housenumber~*",
"then": "<div style='background-color: white; font: large; width: 1.5em; height: 1.5em; border-radius: 100%'>{addr:housenumber}</div>"
}
]
} }
] },
}, {
"width": { "width": {
"render": "2" "render": "2"
}, },
"iconSize": { "color": {
"render": "40,40,center" "render": "#00f"
}, }
"dashes": "2 2", }
"color": { ],
"render": "#00f"
},
"wayHandling": 2,
"presets": [] "presets": []
} }
], ],

View file

@ -20,6 +20,7 @@
"startZoom": 1, "startZoom": 1,
"widenFactor": 0.05, "widenFactor": 0.05,
"socialImage": "", "socialImage": "",
"hideFromOverview": true,
"layers": [ "layers": [
{ {
"id": "sidewalks", "id": "sidewalks",
@ -68,11 +69,11 @@
"renderings": [ "renderings": [
{ {
"id": "sidewalk_minimap", "id": "sidewalk_minimap",
"render": "{sided_minimap(left|right):height:3rem;border-radius:0.5rem;overflow:hidden}" "render": "{sided_minimap(left|right):height:8rem;border-radius:0.5rem;overflow:hidden}"
}, },
{ {
"id": "has_sidewalk", "id": "has_sidewalk",
"question": "Is there a sidewalk on the left|right side of the road?", "question": "Is there a sidewalk on this side of the road?",
"mappings": [ "mappings": [
{ {
"if": "sidewalk:left|right=yes", "if": "sidewalk:left|right=yes",
@ -111,19 +112,21 @@
"iconSize": "20,20,center" "iconSize": "20,20,center"
}, },
{ {
"#": "The center line",
"color": "#ffffff55", "color": "#ffffff55",
"width": 8 "width": 8
}, },
{ {
"#": "left",
"color": { "color": {
"render": "#888" "render": "#888"
}, },
"dasharray": { "dashArray": {
"render": "", "render": "",
"mappings": [ "mappings": [
{ {
"if": "sidewalk:right=", "if": "sidewalk:left=",
"then": "6,6" "then": "1,12"
} }
] ]
}, },
@ -133,7 +136,6 @@
{ {
"if": { "if": {
"or": [ "or": [
"sidewalk:left=",
"sidewalk:left=no", "sidewalk:left=no",
"sidewalk:left=separate" "sidewalk:left=separate"
] ]
@ -146,12 +148,12 @@
}, },
{ {
"color": "#888", "color": "#888",
"dasharray": { "dashArray": {
"render": "", "render": "",
"mappings": [ "mappings": [
{ {
"if": "sidewalk:right=", "if": "sidewalk:right=",
"then": "6,6" "then": "1,12"
} }
] ]
}, },
@ -161,7 +163,6 @@
{ {
"if": { "if": {
"or": [ "or": [
"sidewalk:right=",
"sidewalk:right=no", "sidewalk:right=no",
"sidewalk:right=separate" "sidewalk:right=separate"
] ]

View file

@ -32,7 +32,7 @@ function fixLayerConfig(config: LayerConfigJson): void {
} }
} }
if (config.mapRendering === undefined || config.id !== "sidewalks") { if (config.mapRendering === undefined && config.id !== "sidewalks") {
// This is a legacy format, lets create a pointRendering // This is a legacy format, lets create a pointRendering
let location: ("point" | "centroid")[] = ["point"] let location: ("point" | "centroid")[] = ["point"]
let wayHandling: number = config["wayHandling"] ?? 0 let wayHandling: number = config["wayHandling"] ?? 0