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

More fancyness, less bugs

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-11-17 16:29:51 +01:00
parent 16612b10ef
commit 2177db376c
27 changed files with 821 additions and 607 deletions
Download patch file Download diff file Expand all files Collapse all files

21
Customizations/JSON/LayerConfig.ts
View file

@ -11,7 +11,7 @@ import Svg from "../../Svg";
import {SubstitutedTranslation} from "../../UI/SpecialVisualizations";
import {Utils} from "../../Utils";
import Combine from "../../UI/Base/Combine";
import {Browser} from "leaflet";
import {VariableUiElement} from "../../UI/Base/VariableUIElement";
export default class LayerConfig {
@ -56,7 +56,8 @@ 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;
@ -140,7 +141,7 @@ export default class LayerConfig {
}
public GenerateLeafletStyle(tags: any):
public GenerateLeafletStyle(tags: any, clickable: boolean):
{
color: string;
icon: {
@ -149,7 +150,8 @@ export default class LayerConfig {
iconAnchor: [number, number];
iconSize: [number, number];
html: string;
rotation: number;
rotation: string;
className?: string;
};
weight: number; dashArray: number[]
} {
@ -186,7 +188,7 @@ export default class LayerConfig {
}
const weight = rendernum(this.width, 5);
const rotation = rendernum(this.rotation, 0);
const rotation = render(this.rotation, "0deg");
const iconW = num(iconSize[0]);
@ -209,12 +211,14 @@ export default class LayerConfig {
anchorH = iconH;
}
let html = `<img src="${iconUrl}" style="width:100%;height:100%;rotate:${rotation}deg;display:block;" />`;
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}deg;display:block;`).Render();
]).SetStyle(`width:100%;height:100%;rotate:${rotation};display:block;`).Render();
}
return {
icon:
@ -224,7 +228,8 @@ export default class LayerConfig {
iconAnchor: [anchorW, anchorH],
popupAnchor: [0, 3 - anchorH],
rotation: rotation,
iconUrl: iconUrl
iconUrl: iconUrl,
className: clickable ? "leaflet-div-icon" : "leaflet-div-icon unclickable"
},
color: color,
weight: weight,

3
Customizations/JSON/LayerConfigJson.ts
View file

@ -66,7 +66,8 @@ export interface LayerConfigJson {
*/
iconSize?: string | TagRenderingConfigJson;
/**
* The rotation of an icon, useful for e.g. directions
* 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;

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;