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

First usable sidewalks theme

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-22 18:53:07 +02:00
parent 02a1d9696f
commit ff0ee35ec1
19 changed files with 537 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

119
UI/SpecialVisualizations.ts
View file

@ -29,6 +29,8 @@ import AllImageProviders from "../Logic/ImageProviders/AllImageProviders";
import WikipediaBox from "./Wikipedia/WikipediaBox";
import SimpleMetaTagger from "../Logic/SimpleMetaTagger";
import MultiApply from "./Popup/MultiApply";
import AllKnownLayers from "../Customizations/AllKnownLayers";
import ShowDataLayer from "./ShowDataLayer/ShowDataLayer";
export interface SpecialVisualization {
funcName: string,
@ -49,7 +51,7 @@ export default class SpecialVisualizations {
constr: ((state: State, tags: UIEventSource<any>) => {
const calculatedTags = [].concat(
SimpleMetaTagger.lazyTags,
... state.layoutToUse.layers.map(l => l.calculatedTags?.map(c => c[0]) ?? []))
...state.layoutToUse.layers.map(l => l.calculatedTags?.map(c => c[0]) ?? []))
return new VariableUiElement(tags.map(tags => {
const parts = [];
for (const key in tags) {
@ -57,20 +59,20 @@ export default class SpecialVisualizations {
continue
}
let v = tags[key]
if(v === ""){
if (v === "") {
v = "<b>empty string</b>"
}
parts.push([key, v ?? "<b>undefined</b>"]);
}
for(const key of calculatedTags){
for (const key of calculatedTags) {
const value = tags[key]
if(value === undefined){
if (value === undefined) {
continue
}
parts.push([ "<i>"+key+"</i>", value ])
parts.push(["<i>" + key + "</i>", value])
}
return new Table(
["key", "value"],
parts
@ -88,7 +90,7 @@ export default class SpecialVisualizations {
}],
constr: (state: State, tags, args) => {
let imagePrefixes: string[] = undefined;
if(args.length > 0){
if (args.length > 0) {
imagePrefixes = [].concat(...args.map(a => a.split(",")));
}
return new ImageCarousel(AllImageProviders.LoadImagesFor(tags, imagePrefixes), tags, imagePrefixes);
@ -101,9 +103,9 @@ export default class SpecialVisualizations {
name: "image-key",
doc: "Image tag to add the URL to (or image-tag:0, image-tag:1 when multiple images are added)",
defaultValue: "image"
},{
name:"label",
doc:"The text to show on the button",
}, {
name: "label",
doc: "The text to show on the button",
defaultValue: "Add image"
}],
constr: (state: State, tags, args) => {
@ -125,17 +127,16 @@ export default class SpecialVisualizations {
new VariableUiElement(
tagsSource.map(tags => tags[args[0]])
.map(wikidata => {
const wikidatas : string[] =
const wikidatas: string[] =
Utils.NoEmpty(wikidata?.split(";")?.map(wd => wd.trim()) ?? [])
return new WikipediaBox(wikidatas)
})
)
},
{
funcName: "minimap",
docs: "A small map showing the selected feature. Note that no styling is applied, wrap this in a div",
docs: "A small map showing the selected feature.",
args: [
{
doc: "The (maximum) zoomlevel: the target zoomlevel after fitting the entire feature. The minimap will fit the entire feature, then zoom out to this zoom level. The higher, the more zoomed in with 1 being the entire world and 19 being really close",
@ -214,6 +215,54 @@ export default class SpecialVisualizations {
)
minimap.SetStyle("overflow: hidden; pointer-events: none;")
return minimap;
}
},
{
funcName: "sided_minimap",
docs: "A small map showing _only one side_ the selected feature. *This features requires to have linerenderings with offset* as only linerenderings with a postive or negative offset will be shown. Note: in most cases, this map will be automatically introduced",
args: [
{
doc: "The side to show, either `left` or `right`",
name: "side",
}
],
example: "`{sided_minimap(left)}`",
constr: (state, tagSource, args) => {
const properties = tagSource.data;
const locationSource = new UIEventSource<Loc>({
lat: Number(properties._lat),
lon: Number(properties._lon),
zoom: 18
})
const minimap = Minimap.createMiniMap(
{
background: state.backgroundLayer,
location: locationSource,
allowMoving: false
}
)
const side = args[0]
const feature = state.allElements.ContainingFeatures.get(tagSource.data.id)
const copy = {...feature}
copy.properties = {
id: side
}
new ShowDataLayer(
{
leafletMap: minimap["leafletMap"],
enablePopups: false,
zoomToFeatures: true,
layerToShow: AllKnownLayers.sharedLayers.get("left_right_style"),
features: new StaticFeatureSource([copy], false),
allElements: State.state.allElements
}
)
minimap.SetStyle("overflow: hidden; pointer-events: none;")
return minimap;
}
@ -432,9 +481,11 @@ export default class SpecialVisualizations {
doc: "A nice icon to show in the button",
defaultValue: "./assets/svg/addSmall.svg"
},
{name:"minzoom",
doc: "How far the contributor must zoom in before being able to import the point",
defaultValue: "18"}],
{
name: "minzoom",
doc: "How far the contributor must zoom in before being able to import the point",
defaultValue: "18"
}],
docs: `This button will copy the data from an external dataset into OpenStreetMap. It is only functional in official themes but can be tested in unofficial themes.
If you want to import a dataset, make sure that:
@ -487,14 +538,24 @@ There are also some technicalities in your theme to keep in mind:
)
}
},
{funcName: "multi_apply",
{
funcName: "multi_apply",
docs: "A button to apply the tagging of this object onto a list of other features. This is an advanced feature for which you'll need calculatedTags",
args:[
args: [
{name: "feature_ids", doc: "A JSOn-serialized list of IDs of features to apply the tagging on"},
{name: "keys", doc: "One key (or multiple keys, seperated by ';') of the attribute that should be copied onto the other features." },
{
name: "keys",
doc: "One key (or multiple keys, seperated by ';') of the attribute that should be copied onto the other features."
},
{name: "text", doc: "The text to show on the button"},
{name:"autoapply",doc:"A boolean indicating wether this tagging should be applied automatically if the relevant tags on this object are changed. A visual element indicating the multi_apply is still shown"},
{name:"overwrite",doc:"If set to 'true', the tags on the other objects will always be overwritten. The default behaviour will be to only change the tags on other objects if they are either undefined or had the same value before the change"}
{
name: "autoapply",
doc: "A boolean indicating wether this tagging should be applied automatically if the relevant tags on this object are changed. A visual element indicating the multi_apply is still shown"
},
{
name: "overwrite",
doc: "If set to 'true', the tags on the other objects will always be overwritten. The default behaviour will be to only change the tags on other objects if they are either undefined or had the same value before the change"
}
],
example: "{multi_apply(_features_with_the_same_name_within_100m, name:etymology:wikidata;name:etymology, Apply etymology information on all nearby objects with the same name)}",
constr: (state, tagsSource, args) => {
@ -503,14 +564,14 @@ There are also some technicalities in your theme to keep in mind:
const text = args[2]
const autoapply = args[3]?.toLowerCase() === "true"
const overwrite = args[4]?.toLowerCase() === "true"
const featureIds : UIEventSource<string[]> = tagsSource.map(tags => {
const ids = tags[featureIdsKey]
try{
if(ids === undefined){
const featureIds: UIEventSource<string[]> = tagsSource.map(tags => {
const ids = tags[featureIdsKey]
try {
if (ids === undefined) {
return []
}
return JSON.parse(ids);
}catch(e){
} catch (e) {
console.warn("Could not parse ", ids, "as JSON to extract IDS which should be shown on the map.")
return []
}
@ -526,7 +587,7 @@ There are also some technicalities in your theme to keep in mind:
state
}
);
}
}
]