Center label if no icon is present, add login button to index page

This commit is contained in:
pietervdvn 2021-11-22 00:50:29 +01:00
parent 7a45477ae2
commit 4366366586
10 changed files with 283 additions and 387 deletions

View file

@ -210,7 +210,11 @@ export default class FeaturePipeline {
handleTile: tile => {
new RegisteringAllFromFeatureSourceActor(tile)
if (tile.layer.layerDef.maxAgeOfCache > 0) {
self.localStorageSavers.get(tile.layer.layerDef.id).addTile(tile)
const saver = self.localStorageSavers.get(tile.layer.layerDef.id)
if(saver === undefined){
console.error("No localStorageSaver found for layer ",tile.layer.layerDef.id)
}
saver?.addTile(tile)
}
perLayerHierarchy.get(tile.layer.layerDef.id).registerTile(tile)
tile.features.addCallbackAndRunD(_ => self.newDataLoadedSignal.setData(tile))

View file

@ -47,7 +47,7 @@ export default class PointRenderingConfig extends WithContextLoader {
if (this.location.size == 0) {
throw "A pointRendering should have at least one 'location' to defined where it should be rendered. (At " + context + ".location)"
}
this.icon = this.tr("icon", "");
this.icon = this.tr("icon", undefined);
this.iconBadges = (json.iconBadges ?? []).map((overlay, i) => {
let tr: TagRenderingConfig;
if (typeof overlay.then === "string" &&
@ -65,8 +65,8 @@ export default class PointRenderingConfig extends WithContextLoader {
};
});
const iconPath = this.icon.GetRenderValue({id: "node/-1"}).txt;
if (iconPath.startsWith(Utils.assets_path)) {
const iconPath = this.icon?.GetRenderValue({id: "node/-1"})?.txt;
if (iconPath !== undefined && iconPath.startsWith(Utils.assets_path)) {
const iconKey = iconPath.substr(Utils.assets_path.length);
if (Svg.All[iconKey] === undefined) {
throw "Builtin SVG asset not found: " + iconPath;
@ -200,7 +200,8 @@ export default class PointRenderingConfig extends WithContextLoader {
}
const iconAndBadges = new Combine([this.GetSimpleIcon(tags), this.GetBadges(tags)])
const icon = this.GetSimpleIcon(tags)
const iconAndBadges = new Combine([, this.GetBadges(tags)])
.SetClass("block relative")
if (!options?.noSize) {
@ -208,9 +209,21 @@ export default class PointRenderingConfig extends WithContextLoader {
} else {
iconAndBadges.SetClass("w-full h-full")
}
let label = this.GetLabel(tags)
let htmlEl : BaseUIElement;
if(icon === undefined && label === undefined){
htmlEl = undefined
}else if(icon === undefined){
htmlEl = label
}else if(label === undefined){
htmlEl = iconAndBadges
}else {
htmlEl = new Combine([iconAndBadges, label]).SetStyle("flex flex-col")
}
return {
html: new Combine([iconAndBadges, this.GetLabel(tags)]).SetStyle("flex flex-col"),
html: htmlEl,
iconSize: [iconW, iconH],
iconAnchor: [anchorW, anchorH],
popupAnchor: [0, 3 - anchorH],

View file

@ -8,6 +8,8 @@ import {Utils} from "../Utils";
import LanguagePicker from "./LanguagePicker";
import IndexText from "./BigComponents/IndexText";
import FeaturedMessage from "./BigComponents/FeaturedMessage";
import Toggle from "./Input/Toggle";
import {SubtleButton} from "./Base/SubtleButton";
export default class AllThemesGui {
constructor() {
@ -15,16 +17,22 @@ export default class AllThemesGui {
try {
new FixedUiElement("").AttachTo("centermessage")
const state = new UserRelatedState(undefined, undefined);
const state = new UserRelatedState(undefined);
const intro = new Combine([
LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages())
.SetClass("absolute top-2 right-3"),
.SetClass("flex absolute top-2 right-3"),
new IndexText()
]);
new Combine([
intro,
new FeaturedMessage(),
new MoreScreen(state, true),
new Toggle(
undefined,
new SubtleButton(undefined, Translations.t.index.logIn).SetStyle("height:min-content").onClick(() => state.osmConnection.AttemptLogin()),
state.osmConnection.isLoggedIn),
Translations.t.general.aboutMapcomplete
.Subs({"osmcha_link": Utils.OsmChaLinkFor(7)})
.SetClass("link-underline"),

View file

@ -33,16 +33,11 @@ export default class FeaturedMessage extends Combine {
public static WelcomeMessages(): { start_date: Date, end_date: Date, message: string, featured_theme?: string }[] {
const all_messages: { start_date: Date, end_date: Date, message: string, featured_theme?: string }[] = []
console.log("Constructing the list...", welcome_messages)
for (const i in welcome_messages) {
console.log(i)
if (isNaN(Number(i))) {
continue
}
console.log("> ", i)
const wm = welcome_messages[i]
console.log(wm)
if (wm === null) {
continue
}

View file

@ -3,7 +3,8 @@
"description": "This is a priviliged meta_layer which exports _every_ point in OSM. This only works if zoomed below the point that the full tile is loaded (and not loaded via Overpass). Note that this point will also contain a property `parent_ways` which contains all the ways this node is part of as a list. This is mainly used for extremely specialized themes, which do advanced conflations. Expert use only.",
"minzoom": 18,
"source": {
"osmTags": "id~node/.*"
"osmTags": "id~node/.*",
"maxCacheAge": 0
},
"mapRendering": null,
"name": "All OSM Nodes",

View file

@ -28,9 +28,194 @@
"overrideAll": {
"minzoom": 18
},
"trackAllNodes": true,
"enableGeolocation": false,
"layers": [
{
"id": "osm-fixmes",
"name": {
"nl": "Fixmes op gebouwen"
},
"passAllFeatures": true,
"source": {
"maxCacheAge": 0,
"osmTags": {
"and": [
"fixme~*",
"building~*"
]
}
},
"calculatedTags": [
"_grbNumber=(feat.properties.fixme?.match(/GRB thinks that this has number ([^;]+)/ ) ?? ['','none']) [1]"
],
"title": {
"render": {
"nl": "{addr:street} {addr:housenumber}"
},
"mappings": [
{
"if": {
"and": [
"fixme~*"
]
},
"then": {
"nl": "{fixme}"
}
}
]
},
"description": {
"nl": "Dit gebouw heeft een foutmelding"
},
"tagRenderings": [
{
"id": "grb-housenumber",
"render": {
"nl": "Het huisnummer is <b>{addr:housenumber}</b>"
},
"question": {
"nl": "Wat is het huisnummer?"
},
"freeform": {
"key": "addr:housenumber"
},
"mappings": [
{
"if": {
"and": [
"not:addr:housenumber=yes",
"addr:housenumber="
]
},
"then": {
"nl": "Geen huisnummer"
}
},
{
"if": {
"and": [
"addr:housenumber:={_grbNumber}",
"fixme="
]
},
"then": "Het huisnummer is <b>{_grbNumber}</b>, wat overeenkomt met het GRB",
"hideInAnswer": {
"or": [
"_grbNumber=",
"_grbNumber=none",
"_grbNumber=no number"
]
}
},
{
"if": {
"and": [
"addr:housenumber=",
"not:addr:housenumber=yes",
"fixme="
]
},
"then": "Dit gebouw heeft geen nummer, net zoals in het GRB",
"hideInAnswer": "_grbNumber!=no number"
}
]
},
{
"id": "grb-unit",
"question": "Wat is de wooneenheid-aanduiding?",
"render": {
"nl": "De wooneenheid-aanduiding is <b>{addr:unit}</b> "
},
"freeform": {
"key": "addr:unit"
},
"mappings": [
{
"if": "addr:unit=",
"then": "Geen wooneenheid-nummer"
}
]
},
{
"id": "grb-street",
"render": {
"nl": "De straat is <b>{addr:street}</b>"
},
"freeform": {
"key": "addr:street"
},
"question": {
"nl": "Wat is de straat?"
}
},
{
"id": "grb-fixme",
"render": {
"nl": "De fixme is <b>{fixme}</b>"
},
"question": {
"nl": "Wat zegt de fixme?"
},
"freeform": {
"key": "fixme"
},
"mappings": [
{
"if": {
"and": [
"fixme="
]
},
"then": {
"nl": "Geen fixme"
}
}
]
},
{
"id": "grb-min-level",
"render": {
"nl": "Dit gebouw begint maar op de {building:min_level} verdieping"
},
"question": {
"nl": "Hoeveel verdiepingen ontbreken?"
},
"freeform": {
"key": "building:min_level",
"type": "pnat"
}
}
],
"mapRendering": [
{
"location": [
"point",
"centroid"
],
"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"
}
},
{
"dashArray": "2 2",
"color": {
"render": "#00f"
},
"width": {
"render": "2"
}
}
]
},
{
"builtin": "type_node",
"isShown": {
@ -197,191 +382,6 @@
"all_tags"
]
},
{
"id": "osm-fixmes",
"name": {
"nl": "Fixmes op gebouwen"
},
"source": {
"maxCacheAge": 0,
"osmTags": {
"and": [
"fixme~*",
"building~*"
]
}
},
"calculatedTags": [
"_grbNumber=(feat.properties.fixme?.match(/GRB thinks that this has number ([^;]+)/ ) ?? ['','none']) [1]"
],
"title": {
"render": {
"nl": "{addr:street} {addr:housenumber}"
},
"mappings": [
{
"if": {
"and": [
"fixme~*"
]
},
"then": {
"nl": "{fixme}"
}
}
]
},
"description": {
"nl": "Dit gebouw heeft een foutmelding"
},
"tagRenderings": [
{
"id": "grb-housenumber",
"render": {
"nl": "Het huisnummer is <b>{addr:housenumber}</b>"
},
"question": {
"nl": "Wat is het huisnummer?"
},
"freeform": {
"key": "addr:housenumber"
},
"mappings": [
{
"if": {
"and": [
"not:addr:housenumber=yes",
"addr:housenumber="
]
},
"then": {
"nl": "Geen huisnummer"
}
},
{
"if": {
"and": [
"addr:housenumber:={_grbNumber}",
"fixme="
]
},
"then": "Het huisnummer is <b>{_grbNumber}</b>, wat overeenkomt met het GRB",
"hideInAnswer": {
"or": [
"_grbNumber=",
"_grbNumber=none",
"_grbNumber=no number"
]
}
},
{
"if": {
"and": [
"addr:housenumber=",
"not:addr:housenumber=yes",
"fixme="
]
},
"then": "Dit gebouw heeft geen nummer, net zoals in het GRB",
"hideInAnswer": "_grbNumber!=no number"
}
]
},
{
"id": "grb-unit",
"question": "Wat is de wooneenheid-aanduiding?",
"render": {
"nl": "De wooneenheid-aanduiding is <b>{addr:unit}</b> "
},
"freeform": {
"key": "addr:unit"
},
"mappings": [
{
"if": "addr:unit=",
"then": "Geen wooneenheid-nummer"
}
]
},
{
"id": "grb-street",
"render": {
"nl": "De straat is <b>{addr:street}</b>"
},
"freeform": {
"key": "addr:street"
},
"question": {
"nl": "Wat is de straat?"
}
},
{
"id": "grb-fixme",
"render": {
"nl": "De fixme is <b>{fixme}</b>"
},
"question": {
"nl": "Wat zegt de fixme?"
},
"freeform": {
"key": "fixme"
},
"mappings": [
{
"if": {
"and": [
"fixme="
]
},
"then": {
"nl": "Geen fixme"
}
}
]
},
{
"id": "grb-min-level",
"render": {
"nl": "Dit gebouw begint maar op de {building:min_level} verdieping"
},
"question": {
"nl": "Hoeveel verdiepingen ontbreken?"
},
"freeform": {
"key": "building:min_level",
"type": "pnat"
}
}
],
"mapRendering": [
{
"location": [
"point",
"centroid"
],
"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"
}
},
{
"dashes": "2 2",
"color": {
"render": "#00f"
},
"width": {
"render": "2"
}
}
]
},
{
"id": "crab-addresses 2021-10-26",
"source": {
@ -450,190 +450,6 @@
}
]
},
{
"id": "grb-fixmes",
"name": {
"nl": "Fixmes op gebouwen"
},
"source": {
"maxCacheAge": 0,
"osmTags": {
"and": [
"fixme~*",
"building~*"
]
}
},
"calculatedTags": [
"_grbNumber=(feat.properties.fixme?.match(/GRB thinks that this has number ([^;]+)/ ) ?? ['','none']) [1]"
],
"title": {
"render": {
"nl": "{addr:street} {addr:housenumber}"
},
"mappings": [
{
"if": {
"and": [
"fixme~*"
]
},
"then": {
"nl": "{fixme}"
}
}
]
},
"description": {
"nl": "Dit gebouw heeft een foutmelding"
},
"tagRenderings": [
{
"id": "grb-housenumber",
"render": {
"nl": "Het huisnummer is <b>{addr:housenumber}</b>"
},
"question": {
"nl": "Wat is het huisnummer?"
},
"freeform": {
"key": "addr:housenumber"
},
"mappings": [
{
"if": {
"and": [
"not:addr:housenumber=yes",
"addr:housenumber="
]
},
"then": {
"nl": "Geen huisnummer"
}
},
{
"if": {
"and": [
"addr:housenumber:={_grbNumber}",
"fixme="
]
},
"then": "Het huisnummer is <b>{_grbNumber}</b>, wat overeenkomt met het GRB",
"hideInAnswer": {
"or": [
"_grbNumber=",
"_grbNumber=none",
"_grbNumber=no number"
]
}
},
{
"if": {
"and": [
"addr:housenumber=",
"not:addr:housenumber=yes",
"fixme="
]
},
"then": "Dit gebouw heeft geen nummer, net zoals in het GRB",
"hideInAnswer": "_grbNumber!=no number"
}
]
},
{
"id": "grb-unit",
"question": "Wat is de wooneenheid-aanduiding?",
"render": {
"nl": "De wooneenheid-aanduiding is <b>{addr:unit}</b> "
},
"freeform": {
"key": "addr:unit"
},
"mappings": [
{
"if": "addr:unit=",
"then": "Geen wooneenheid-nummer"
}
]
},
{
"id": "grb-street",
"render": {
"nl": "De straat is <b>{addr:street}</b>"
},
"freeform": {
"key": "addr:street"
},
"question": {
"nl": "Wat is de straat?"
}
},
{
"id": "grb-fixme",
"render": {
"nl": "De fixme is <b>{fixme}</b>"
},
"question": {
"nl": "Wat zegt de fixme?"
},
"freeform": {
"key": "fixme"
},
"mappings": [
{
"if": {
"and": [
"fixme="
]
},
"then": {
"nl": "Geen fixme"
}
}
]
},
{
"id": "grb-min-level",
"render": {
"nl": "Dit gebouw begint maar op de {building:min_level} verdieping"
},
"question": {
"nl": "Hoeveel verdiepingen ontbreken?"
},
"freeform": {
"key": "building:min_level",
"type": "pnat"
}
}
],
"mapRendering": [
{
"location": [
"point",
"centroid"
],
"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": {
"render": "2"
},
"color": {
"render": "#00f"
}
}
]
},
{
"id": "GRB",
"source": {

View file

@ -28,7 +28,8 @@
"title": "Welcome to MapComplete",
"featuredThemeTitle": "Featured this week",
"intro": "MapComplete is an OpenStreetMap-viewer and editor, which shows you information about features of a specific theme and allows to update it.",
"pickTheme": "Pick a theme below to get started."
"pickTheme": "Pick a theme below to get started.",
"logIn": "Log in to see other themes you previously visited"
},
"split": {
"split": "Split",

View file

@ -581,6 +581,25 @@
"shortDescription": "Eine Karte zum Ansehen und Bearbeiten verschiedener Elementen der Fahrradinfrastruktur.",
"title": "Fahrradinfrastruktur"
},
"cyclenodes": {
"description": "Diese Karte zeigt Knotenpunktnetzwerke für Radfahrer und erlaubt auch neue Knoten zu mappen",
"layers": {
"1": {
"presets": {
"0": {
"title": "Knotenpunkt"
},
"1": {
"title": "Knotenpunkt im Netzwerk Spree-Neiße"
}
},
"title": {
"render": "Knotenpunkt"
}
}
},
"title": "Fahrrad-Knotenpunktnetzwerke"
},
"cyclestreets": {
"description": "Eine Fahrradstraße ist eine Straße, auf der <b>motorisierter Verkehr Radfahrer nicht überholen darf</b>. Sie sind durch ein spezielles Verkehrsschild gekennzeichnet. Fahrradstraßen gibt es in den Niederlanden und Belgien, aber auch in Deutschland und Frankreich. ",
"layers": {

View file

@ -609,6 +609,45 @@
"shortDescription": "A map where you can view and edit things related to the bicycle infrastructure.",
"title": "Bicycle infrastructure"
},
"cyclenodes": {
"description": "This map shows cycle node networks and allows you to add new nodes easily",
"layers": {
"0": {
"name": "node to node links",
"tagRenderings": {
"node2node-survey:date": {
"question": "When was this node to node link last surveyed?",
"render": "This node to node link was last surveyed on {survey:date}"
}
},
"title": {
"mappings": {
"0": {
"then": "node to node link <strong>{ref}</strong>"
}
},
"render": "node to node link"
}
},
"1": {
"name": "nodes",
"tagRenderings": {
"node-expected_rcn_route_relations": {
"question": "How many other cycle nodes does this node link to?",
"render": "This node links to {expected_rcn_route_relations} other cycle nodes."
},
"node-survey:date": {
"question": "When was this cycle node last surveyed?",
"render": "This cycle node was last surveyed on {survey:date}"
}
},
"title": {
"render": "cycle node <strong>{rcn_ref}</strong>"
}
}
},
"title": "Cycle Node Networks"
},
"cyclestreets": {
"description": "A cyclestreet is is a street where <b>motorized traffic is not allowed to overtake cyclists</b>. They are signposted by a special traffic sign. Cyclestreets can be found in the Netherlands and Belgium, but also in Germany and France. ",
"layers": {
@ -795,7 +834,7 @@
"grb": {
"description": "This theme is an attempt to help automating the GRB import.<br/>Note that this is very hacky and 'steals' the GRB data from an external site; in order to do this, you need to install and activate <a href='https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/'>this firefox extension</a> for it to work.",
"layers": {
"1": {
"2": {
"tagRenderings": {
"building type": {
"question": "What kind of building is this?"

View file

@ -753,7 +753,7 @@
"grb": {
"description": "GRB Fixup",
"layers": {
"3": {
"0": {
"description": "Dit gebouw heeft een foutmelding",
"name": "Fixmes op gebouwen",
"tagRenderings": {