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

Merge branch 'master' into feature/climbing-layer

Browse source
This commit is contained in:
Christian Neumann 2020-11-18 09:28:58 +01:00
commit b68eed207e
77 changed files with 2556 additions and 794 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Customizations/AllKnownLayouts.ts
View file

@ -16,10 +16,11 @@ import * as charging_stations from "../assets/themes/charging_stations/charging_
import * as widths from "../assets/themes/widths/width.json"
import * as drinking_water from "../assets/themes/drinking_water/drinking_water.json"
import * as climbing from "../assets/themes/climbing/climbing.json"
import LayerConfig from "./JSON/LayerConfig";
import SharedLayers from "./SharedLayers";
import * as surveillance_cameras from "../assets/themes/surveillance_cameras/surveillance_cameras.json"
import * as personal from "../assets/themes/personalLayout/personalLayout.json"
import LayerConfig from "./JSON/LayerConfig";
import LayoutConfig from "./JSON/LayoutConfig";
import SharedLayers from "./SharedLayers";
export class AllKnownLayouts {
@ -62,6 +63,7 @@ export class AllKnownLayouts {
new LayoutConfig(buurtnatuur),
new LayoutConfig(bike_monitoring_stations),
new LayoutConfig(climbing),
new LayoutConfig(surveillance_cameras)
];

134
Customizations/JSON/LayerConfig.ts
View file

@ -8,23 +8,33 @@ import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
import {Translation} from "../../UI/i18n/Translation";
import {Img} from "../../UI/Img";
import Svg from "../../Svg";
import {SubstitutedTranslation} from "../../UI/SpecialVisualizations";
import {Utils} from "../../Utils";
import Combine from "../../UI/Base/Combine";
import {VariableUiElement} from "../../UI/Base/VariableUIElement";
export default class LayerConfig {
id: string;
name: Translation
description: Translation;
overpassTags: TagsFilter;
doNotDownload: boolean;
passAllFeatures: boolean;
minzoom: number;
title: TagRenderingConfig;
title?: TagRenderingConfig;
titleIcons: TagRenderingConfig[];
icon: TagRenderingConfig;
iconSize: TagRenderingConfig;
rotation: TagRenderingConfig;
color: TagRenderingConfig;
width: TagRenderingConfig;
dashArray: TagRenderingConfig;
@ -46,17 +56,19 @@ export default class LayerConfig {
tagRenderings: TagRenderingConfig [];
constructor(json: LayerConfigJson, context?: string) {
constructor(json: LayerConfigJson, roamingRenderings: TagRenderingConfig[],
context?: string) {
context = context + "." + json.id;
this.id = json.id;
this.name = Translations.T(json.name);
this.description = Translations.T(json.name);
this.overpassTags = FromJSON.Tag(json.overpassTags, context + ".overpasstags");
this.doNotDownload = json.doNotDownload ?? false,
this.passAllFeatures = json.passAllFeatures ?? false;
this.minzoom = json.minzoom;
this.wayHandling = json.wayHandling ?? 0;
this.hideUnderlayingFeaturesMinPercentage = json.hideUnderlayingFeaturesMinPercentage ?? 0;
this.title = new TagRenderingConfig(json.title);
this.presets = (json.presets ?? []).map(pr =>
({
title: Translations.T(pr.title),
@ -87,13 +99,16 @@ export default class LayerConfig {
});
}
this.tagRenderings = trs(json.tagRenderings);
this.tagRenderings = trs(json.tagRenderings).concat(roamingRenderings);
this.titleIcons = trs(json.titleIcons ?? ["wikipedialink","osmlink"]);
function tr(key, deflt) {
const v = json[key];
if (v === undefined) {
if (v === undefined || v === null) {
if (deflt === undefined) {
return undefined;
}
return new TagRenderingConfig(deflt);
}
if (typeof v === "string") {
@ -107,13 +122,120 @@ export default class LayerConfig {
}
this.title = tr("title", "");
this.title = tr("title", undefined);
this.icon = tr("icon", Img.AsData(Svg.bug));
const iconPath = this.icon.GetRenderValue({id: "node/-1"}).txt;
if (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
}
}
this.iconSize = tr("iconSize", "40,40,center");
this.color = tr("color", "#0000ff");
this.width = tr("width", "7");
this.rotation = tr("rotation", "0");
this.dashArray = tr("dashArray", "");
}
public GenerateLeafletStyle(tags: any, clickable: boolean):
{
color: string;
icon: {
iconUrl: string,
popupAnchor: [number, number];
iconAnchor: [number, number];
iconSize: [number, number];
html: string;
rotation: string;
className?: string;
};
weight: number; dashArray: number[]
} {
function num(str, deflt = 40) {
const n = Number(str);
if (isNaN(n)) {
return deflt;
}
return n;
}
function rendernum(tr: TagRenderingConfig, deflt: number) {
const str = Number(render(tr, "" + deflt));
const n = Number(str);
if (isNaN(n)) {
return deflt;
}
return n;
}
function render(tr: TagRenderingConfig, deflt?: string) {
const str = (tr?.GetRenderValue(tags)?.txt ?? deflt);
return SubstitutedTranslation.SubstituteKeys(str, tags);
}
const iconUrl = render(this.icon);
const iconSize = render(this.iconSize, "40,40,center").split(",");
const dashArray = render(this.dashArray).split(" ").map(Number);
let color = render(this.color, "#00f");
if (color.startsWith("--")) {
color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
}
const weight = rendernum(this.width, 5);
const rotation = render(this.rotation, "0deg");
const iconW = num(iconSize[0]);
const iconH = num(iconSize[1]);
const mode = iconSize[2] ?? "center"
let anchorW = iconW / 2;
let anchorH = iconH / 2;
if (mode === "left") {
anchorW = 0;
}
if (mode === "right") {
anchorW = iconW;
}
if (mode === "top") {
anchorH = 0;
}
if (mode === "bottom") {
anchorH = iconH;
}
let html = `<img src="${iconUrl}" style="width:100%;height:100%;rotate:${rotation};display:block;" />`;
if (iconUrl.startsWith(Utils.assets_path)) {
const key = iconUrl.substr(Utils.assets_path.length);
html = new Combine([
(Svg.All[key] as string).replace(/stop-color:#000000/g, 'stop-color:' + color)
]).SetStyle(`width:100%;height:100%;rotate:${rotation};display:block;`).Render();
}
return {
icon:
{
html: html,
iconSize: [iconW, iconH],
iconAnchor: [anchorW, anchorH],
popupAnchor: [0, 3 - anchorH],
rotation: rotation,
iconUrl: iconUrl,
className: clickable ? "leaflet-div-icon" : "leaflet-div-icon unclickable"
},
color: color,
weight: weight,
dashArray: dashArray
};
}
}

31
Customizations/JSON/LayerConfigJson.ts
View file

@ -29,6 +29,12 @@ export interface LayerConfigJson {
*/
overpassTags: AndOrTagConfigJson | string;
/**
* If set, this layer will not query overpass; but it'll still match the tags above which are by chance returned by other layers.
* Works well together with 'passAllFeatures', to add decoration
*/
doNotDownload?: boolean;
/**
* The zoomlevel at which point the data is shown and loaded.
*/
@ -39,8 +45,13 @@ export interface LayerConfigJson {
/**
* The title shown in a popup for elements of this layer.
*/
title: string | TagRenderingConfigJson;
title?: string | TagRenderingConfigJson;
/**
* Small icons shown next to the title.
* If not specified, the OsmLink and wikipedia links will be used by default.
* Use an empty array to hide them
*/
titleIcons?: (string | TagRenderingConfigJson)[];
/**
@ -54,9 +65,15 @@ export interface LayerConfigJson {
* Default is '40,40,center'
*/
iconSize?: string | TagRenderingConfigJson;
/**
* The color for way-elements
* The rotation of an icon, useful for e.g. directions.
* Usage: as if it were a css property for 'rotate', thus has to end with 'deg', e.g. `90deg`, `{direction}deg`, `calc(90deg - {camera:direction}deg)``
*/
rotation?: string | TagRenderingConfigJson;
/**
* The color for way-elements and SVG-elements.
* If the value starts with "--", the style of the body element will be queried for the corresponding variable instead
*/
color?: string | TagRenderingConfigJson;
/**
@ -87,6 +104,11 @@ export interface LayerConfigJson {
*/
hideUnderlayingFeaturesMinPercentage?:number;
/**
* If set, this layer will pass all the features it receives onto the next layer
*/
passAllFeatures?:boolean
/**
* Presets for this layer
*/
@ -98,6 +120,7 @@ export interface LayerConfigJson {
/**
* All the tag renderings.
* A tag rendering is a block that either shows the known value or asks a question.
*/
tagRenderings?: (string | TagRenderingConfigJson) []
}

2
Customizations/JSON/LayoutConfig.ts
View file

@ -80,7 +80,7 @@ export default class LayoutConfig {
} else {
throw "Unkown fixed layer " + layer;
}
return new LayerConfig(layer, `${this.id}.layers[${i}]`);
return new LayerConfig(layer, this.roamingRenderings,`${this.id}.layers[${i}]`);
});
this.hideFromOverview = json.hideFromOverview ?? false;

14
Customizations/JSON/LayoutConfigJson.ts
View file

@ -102,7 +102,19 @@ export interface LayoutConfigJson {
/**
* The layers to display
* The layers to display.
*
* Every layer contains a description of which feature to display - the overpassTags which are queried.
* Instead of running one query for every layer, the query is fused.
*
* Afterwards, every layer is given the list of features.
* Every layer takes away the features that match with them*, and give the leftovers to the next layers.
*
* This implies that the _order_ of the layers is important in the case of features with the same tags;
* as the later layers might never receive their feature.
*
* *layers can also remove 'leftover'-features if the leftovers overlap with a feature in the layer itself
*
*/
layers: (LayerConfigJson | string)[],

32
Customizations/SharedLayers.ts
View file

@ -13,6 +13,8 @@ import * as bike_shops from "../assets/layers/bike_shop/bike_shop.json"
import * as bike_cleaning from "../assets/layers/bike_cleaning/bike_cleaning.json"
import * as maps from "../assets/layers/maps/maps.json"
import * as information_boards from "../assets/layers/information_board/information_board.json"
import * as direction from "../assets/layers/direction/direction.json"
import * as surveillance_camera from "../assets/layers/surveillance_cameras/surveillance_cameras.json"
import LayerConfig from "./JSON/LayerConfig";
export default class SharedLayers {
@ -24,20 +26,22 @@ export default class SharedLayers {
private static getSharedLayers(){
const sharedLayersList = [
new LayerConfig(drinkingWater, "shared_layers"),
new LayerConfig(ghostbikes, "shared_layers"),
new LayerConfig(viewpoint, "shared_layers"),
new LayerConfig(bike_parking, "shared_layers"),
new LayerConfig(bike_repair_station, "shared_layers"),
new LayerConfig(bike_monitoring_station, "shared_layers"),
new LayerConfig(birdhides, "shared_layers"),
new LayerConfig(nature_reserve, "shared_layers"),
new LayerConfig(bike_cafes, "shared_layers"),
new LayerConfig(cycling_themed_objects, "shared_layers"),
new LayerConfig(bike_shops, "shared_layers"),
new LayerConfig(bike_cleaning, "shared_layers"),
new LayerConfig(maps, "shared_layers"),
new LayerConfig(information_boards, "shared_layers")
new LayerConfig(drinkingWater,[], "shared_layers"),
new LayerConfig(ghostbikes,[], "shared_layers"),
new LayerConfig(viewpoint,[], "shared_layers"),
new LayerConfig(bike_parking,[], "shared_layers"),
new LayerConfig(bike_repair_station,[], "shared_layers"),
new LayerConfig(bike_monitoring_station,[], "shared_layers"),
new LayerConfig(birdhides,[], "shared_layers"),
new LayerConfig(nature_reserve,[], "shared_layers"),
new LayerConfig(bike_cafes,[], "shared_layers"),
new LayerConfig(cycling_themed_objects,[], "shared_layers"),
new LayerConfig(bike_shops,[], "shared_layers"),
new LayerConfig(bike_cleaning,[], "shared_layers"),
new LayerConfig(maps,[], "shared_layers"),
new LayerConfig(direction,[], "shared_layers"),
new LayerConfig(information_boards,[], "shared_layers"),
new LayerConfig(surveillance_camera,[], "shared_layers")
];
const sharedLayers = new Map<string, LayerConfig>();