midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactoring: move anchor out of iconSize

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-20 02:02:45 +02:00
parent 3e49929f25
commit 140c813151
52 changed files with 168 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
Models/ThemeConfig/Conversion/LegacyJsonConvert.ts
View file

@ -3,6 +3,7 @@ import { Utils } from "../../../Utils"
import LineRenderingConfigJson from "../Json/LineRenderingConfigJson"
import { LayerConfigJson } from "../Json/LayerConfigJson"
import { DesugaringStep, Each, Fuse, On } from "./Conversion"
import PointRenderingConfigJson from "../Json/PointRenderingConfigJson"
export class UpdateLegacyLayer extends DesugaringStep<
LayerConfigJson | string | { builtin; override }
@ -139,6 +140,20 @@ export class UpdateLegacyLayer extends DesugaringStep<
}
}
for (const rendering of config.mapRendering ?? []) {
if (!rendering["iconSize"]) {
continue
}
const pr = <PointRenderingConfigJson>rendering
const iconSize = pr.iconSize
if (typeof iconSize === "string")
if (["bottom", "center", "top"].some((a) => (<string>iconSize).endsWith("," + a))) {
const parts = iconSize.split(",").map((parts) => parts.toLowerCase().trim())
pr.anchor = parts.pop()
pr.iconSize = parts.join(",")
}
}
return {
result: config,
errors: [],

10
Models/ThemeConfig/Json/PointRenderingConfigJson.ts
View file

@ -54,6 +54,16 @@ export default interface PointRenderingConfigJson {
* Default is '40,40,center'
*/
iconSize?: string | TagRenderingConfigJson
/**
* question: What is the anchorpoint of the icon?
*
* This matches the geographical point with a location on the icon.
* For example, a feature attached to the ground can use 'bottom' as zooming in will give the appearance of being anchored to a fixed location.
*
*/
anchor?: "center" | "top" | "bottom" | "left" | "right" | string
/**
* 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)``

11
Models/ThemeConfig/PointRenderingConfig.ts
View file

@ -27,6 +27,8 @@ export default class PointRenderingConfig extends WithContextLoader {
public readonly icon?: TagRenderingConfig
public readonly iconBadges: { if: TagsFilter; then: TagRenderingConfig }[]
public readonly iconSize: TagRenderingConfig
public readonly anchor: TagRenderingConfig
public readonly label: TagRenderingConfig
public readonly labelCss: TagRenderingConfig
public readonly labelCssClasses: TagRenderingConfig
@ -90,7 +92,8 @@ export default class PointRenderingConfig extends WithContextLoader {
throw context + ": builtin SVG asset not found: " + iconPath
}
}
this.iconSize = this.tr("iconSize", "40,40,center")
this.iconSize = this.tr("iconSize", "40,40")
this.anchor = this.tr("anchor", "center")
this.label = this.tr("label", undefined)
this.rotation = this.tr("rotation", "0")
this.pitchAlignment = this.tr("pitchAlignment", "canvas")
@ -229,11 +232,13 @@ export default class PointRenderingConfig extends WithContextLoader {
return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, "")
}
const iconSize = render(this.iconSize, "40,40,center").split(",")
const iconSize = render(this.iconSize, "40,40").split(",")
const iconW = num(iconSize[0])
let iconH = num(iconSize[1])
const mode = iconSize[2]?.trim()?.toLowerCase() ?? "center"
const anchor = render(this.anchor, "center")
const mode = anchor?.trim()?.toLowerCase() ?? "center"
// in MapLibre, the offset is relative to the _center_ of the object, with left = [-x, 0] and up = [0,-y]
let anchorW = 0

5
assets/layers/address/address.json
View file

@ -251,7 +251,7 @@
"render": "<div style='margin-top: -42px; color: white' class='rounded-full p-1 font-bold relative'>{addr:housenumber}</div>",
"condition": "addr:housenumber~*"
},
"iconSize": "50,50,center",
"iconSize": "50,50",
"icon": {
"render": "./assets/layers/address/housenumber_blank.svg",
"mappings": [
@ -274,7 +274,8 @@
"location": [
"point",
"centroid"
]
],
"anchor": "center"
},
{
"color": {

5
assets/layers/bicycle_tube_vending_machine/bicycle_tube_vending_machine.json
View file

@ -304,11 +304,12 @@
"then": "close:#c33"
}
],
"iconSize": "50,50,bottom",
"iconSize": "50,50",
"location": [
"point",
"centroid"
]
],
"anchor": "bottom"
},
{
"color": "#6bc4f7"

5
assets/layers/bike_cleaning/bike_cleaning.json
View file

@ -257,11 +257,12 @@
}
}
],
"iconSize": "50,50,bottom",
"iconSize": "50,50",
"location": [
"point",
"centroid"
]
],
"anchor": "bottom"
}
],
"description": {

5
assets/layers/bike_parking/bike_parking.json
View file

@ -699,11 +699,12 @@
"icon": {
"render": "pin:#5473de;./assets/layers/bike_parking/parking.svg"
},
"iconSize": "40,40,bottom",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "bottom"
},
{
"color": "#00f",

6
assets/layers/conflation/conflation.json
View file

@ -17,7 +17,8 @@
}
]
},
"iconSize": "10,10,center"
"iconSize": "10,10",
"anchor": "center"
},
{
"location": "end",
@ -34,7 +35,8 @@
}
]
},
"iconSize": "10,10,center"
"iconSize": "10,10",
"anchor": "center"
},
{
"location": "start",

5
assets/layers/crab_address/crab_address.json
View file

@ -15,11 +15,12 @@
"point",
"centroid"
],
"iconSize": "50,50,center",
"iconSize": "50,50",
"icon": "./assets/layers/crab_address/housenumber_blank.svg",
"label": {
"render": "<div style='margin-top: -42px; color: white' class='rounded-full p-1 font-bold relative'>{_HNRLABEL}</div>"
}
},
"anchor": "center"
}
],
"calculatedTags": [

5
assets/layers/dentist/dentist.json
View file

@ -70,11 +70,12 @@
"icon": {
"render": "circle:white;./assets/layers/dentist/dentist.svg"
},
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
}
],
"deletion": true,

5
assets/layers/direction/direction.json
View file

@ -35,14 +35,15 @@
"mapRendering": [
{
"icon": "direction_gradient:var(--catch-detail-color)",
"iconSize": "200,200,center",
"iconSize": "200,200",
"location": [
"point",
"centroid"
],
"rotation": {
"render": "{_direction:numerical}deg"
}
},
"anchor": "center"
},
{
"color": "--catch-detail-color"

5
assets/layers/doctors/doctors.json
View file

@ -129,11 +129,12 @@
"icon": {
"render": "circle:white;./assets/layers/doctors/doctors.svg"
},
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
}
],
"deletion": true,

5
assets/layers/dogpark/dogpark.json
View file

@ -68,7 +68,7 @@
"centroid"
],
"icon": "./assets/layers/dogpark/dog-park.svg",
"iconSize": "40,40,center",
"iconSize": "40,40",
"label": {
"mappings": [
{
@ -76,7 +76,8 @@
"then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
}
]
}
},
"anchor": "center"
},
{
"color": "#ff0",

5
assets/layers/drinking_water/drinking_water.json
View file

@ -258,11 +258,12 @@
"then": "close:#c33"
}
],
"iconSize": "40,40,bottom",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "bottom"
}
],
"description": {

5
assets/layers/elevator/elevator.json
View file

@ -194,7 +194,7 @@
"icon": {
"render": "circle:white;./assets/layers/elevator/elevator_wheelchair.svg"
},
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
@ -209,7 +209,8 @@
},
"then": "close:#c33"
}
]
],
"anchor": "center"
}
],
"presets": [

5
assets/layers/fitness_centre/fitness_centre.json
View file

@ -92,14 +92,15 @@
"centroid"
],
"icon": "circle:white;./assets/layers/fitness_centre/gym.svg",
"iconSize": "40,40,center",
"iconSize": "40,40",
"label": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>",
"iconBadges": [
{
"if": "opening_hours~*",
"then": "icons.isOpen"
}
]
],
"anchor": "center"
}
],
"filter": [

5
assets/layers/fitness_station/fitness_station.json
View file

@ -393,7 +393,7 @@
"centroid"
],
"icon": "circle:white;./assets/layers/fitness_station/fitness.svg",
"iconSize": "40,40,center",
"iconSize": "40,40",
"iconBadges": [
{
"if": {
@ -404,7 +404,8 @@
},
"then": "icons.isOpen"
}
]
],
"anchor": "center"
}
],
"filter": [

5
assets/layers/ghost_bike/ghost_bike.json
View file

@ -232,11 +232,12 @@
"mapRendering": [
{
"icon": "./assets/layers/ghost_bike/ghost_bike.svg",
"iconSize": "40,40,bottom",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "bottom"
}
],
"description": {

5
assets/layers/governments/governments.json
View file

@ -67,11 +67,12 @@
"icon": {
"render": "circle:white;./assets/layers/governments/government.svg"
},
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
}
]
}

5
assets/layers/gps_location/gps_location.json
View file

@ -14,7 +14,7 @@
}
]
},
"iconSize": "40,40,center",
"iconSize": "40,40",
"pitchAlignment": "map",
"rotation": {
"render": "0deg",
@ -33,7 +33,8 @@
"location": [
"point",
"centroid"
]
],
"anchor": "center"
}
]
}

3
assets/layers/gps_location_history/gps_location_history.json
View file

@ -12,7 +12,8 @@
"centroid"
],
"icon": "square:red",
"iconSize": "5,5,center"
"iconSize": "5,5",
"anchor": "center"
}
]
}

5
assets/layers/hospital/hospital.json
View file

@ -115,11 +115,12 @@
"icon": {
"render": "circle:white;./assets/layers/hospital/hospital.svg"
},
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
},
{
"color": "#fcd862",

3
assets/layers/hotel/hotel.json
View file

@ -55,7 +55,8 @@
"centroid"
],
"icon": "circle:white;./assets/layers/hotel/hotel.svg",
"iconSize": "40,40,center"
"iconSize": "40,40",
"anchor": "center"
}
],
"tagRenderings": [

3
assets/layers/import_candidate/import_candidate.json
View file

@ -9,7 +9,8 @@
"centroid"
],
"icon": "square:red;",
"iconSize": "15,15,center"
"iconSize": "15,15",
"anchor": "center"
}
],
"title": "Import candidate",

3
assets/layers/maproulette/maproulette.json
View file

@ -54,7 +54,8 @@
}
]
},
"iconSize": "40,40,bottom"
"iconSize": "40,40",
"anchor": "bottom"
}
],
"tagRenderings": [

3
assets/layers/maproulette_challenge/maproulette_challenge.json
View file

@ -67,7 +67,8 @@
}
]
},
"iconSize": "40,40,bottom"
"iconSize": "40,40",
"anchor": "bottom"
}
],
"tagRenderings": [

5
assets/layers/note/note.json
View file

@ -113,7 +113,7 @@
}
]
},
"iconSize": "40,40,bottom",
"iconSize": "40,40",
"iconBadges": [
{
"if": "_total_comments>1",
@ -123,7 +123,8 @@
"if": "_is_import_note~*",
"then": "addSmall"
}
]
],
"anchor": "bottom"
}
],
"filter": [

5
assets/layers/osm_community_index/osm_community_index.json
View file

@ -40,10 +40,11 @@
"icon": {
"render": "pin:#6BC4F7;./assets/layers/osm_community_index/osm.svg"
},
"iconSize": "40,40,bottom",
"iconSize": "40,40",
"location": [
"point"
]
],
"anchor": "bottom"
},
{
"color": "#444444",

5
assets/layers/parcel_lockers/parcel_lockers.json
View file

@ -270,11 +270,12 @@
"then": "icons.isOpen"
}
],
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
}
]
}

5
assets/layers/parking_spaces/parking_spaces.json
View file

@ -195,11 +195,12 @@
}
]
},
"iconSize": "20,20,center",
"iconSize": "20,20",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
},
{
"color": "#696969",

3
assets/layers/parking_ticket_machine/parking_ticket_machine.json
View file

@ -88,7 +88,8 @@
"centroid"
],
"icon": "square:white;./assets/layers/parking_ticket_machine/parking_tickets.svg",
"iconSize": "20,20,center"
"iconSize": "20,20",
"anchor": "center"
}
]
}

5
assets/layers/pharmacy/pharmacy.json
View file

@ -116,7 +116,7 @@
"icon": {
"render": "./assets/layers/pharmacy/pharmacy.svg"
},
"iconSize": "40,40,bottom",
"iconSize": "40,40",
"location": [
"point",
"centroid"
@ -134,7 +134,8 @@
"then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
}
]
}
},
"anchor": "bottom"
}
],
"filter": [

5
assets/layers/physiotherapist/physiotherapist.json
View file

@ -65,11 +65,12 @@
"icon": {
"render": "circle:white;./assets/layers/physiotherapist/doctors.svg"
},
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
}
],
"deletion": true,

5
assets/layers/postoffices/postoffices.json
View file

@ -446,11 +446,12 @@
"then": "./assets/themes/shops/shop.svg"
}
],
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
},
{
"color": "#DADADA",

5
assets/layers/rainbow_crossings/rainbow_crossings.json
View file

@ -119,11 +119,12 @@
}
]
},
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
},
{
"color": "red",

3
assets/layers/reception_desk/reception_desk.json
View file

@ -30,7 +30,8 @@
"centroid"
],
"icon": "circle:white;./assets/layers/reception_desk/reception_desk.svg",
"iconSize": "40,40,center"
"iconSize": "40,40",
"anchor": "center"
}
],
"tagRenderings": [

5
assets/layers/selected_element/selected_element.json
View file

@ -11,13 +11,14 @@
"mapRendering": [
{
"icon": "circle:red",
"iconSize": "1,1,center",
"iconSize": "1,1",
"location": [
"point",
"projected_centerpoint"
],
"css": "box-shadow: red 0 0 20px 20px; z-index: -1; height: 1px; width: 1px;",
"cssClasses": "block relative rounded-full"
"cssClasses": "block relative rounded-full",
"anchor": "center"
}
]
}

3
assets/layers/split_point/split_point.json
View file

@ -12,7 +12,8 @@
"centroid"
],
"icon": "circle:white;./assets/svg/scissors.svg",
"iconSize": "30,30,center"
"iconSize": "30,30",
"anchor": "center"
}
]
}

3
assets/layers/split_road/split_road.json
View file

@ -11,7 +11,8 @@
"point"
],
"icon": "bug",
"iconSize": "30,30,center"
"iconSize": "30,30",
"anchor": "center"
},
{
"width": "8",

3
assets/layers/street_lamps/street_lamps.json
View file

@ -43,7 +43,8 @@
"then": "circle:{light:colour}"
}
],
"iconSize": "40,40,bottom"
"iconSize": "40,40",
"anchor": "bottom"
}
],
"presets": [

5
assets/layers/ticket_machine/ticket_machine.json
View file

@ -86,11 +86,12 @@
"mapRendering": [
{
"icon": "square:lightblue;./assets/themes/stations/public_transport_tickets.svg",
"iconSize": "20,20,center",
"iconSize": "20,20",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
}
],
"allowMove": true,

5
assets/layers/ticket_validator/ticket_validator.json
View file

@ -114,11 +114,12 @@
"mapRendering": [
{
"icon": "square:green;./assets/themes/stations/public_transport_tickets.svg",
"iconSize": "20,20,center",
"iconSize": "20,20",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
}
],
"allowMove": true,

5
assets/layers/veterinary/veterinary.json
View file

@ -67,7 +67,7 @@
"centroid"
],
"icon": "./assets/layers/veterinary/vet.svg",
"iconSize": "30,40,center",
"iconSize": "30,40",
"label": {
"mappings": [
{
@ -81,7 +81,8 @@
"if": "opening_hours~*",
"then": "icons.isOpen"
}
]
],
"anchor": "center"
},
{
"color": "#ff0",

5
assets/layers/viewpoint/viewpoint.json
View file

@ -81,10 +81,11 @@
"mapRendering": [
{
"icon": "./assets/layers/viewpoint/viewpoint.svg",
"iconSize": "20,20,center",
"iconSize": "20,20",
"location": [
"point"
]
],
"anchor": "center"
},
{
"color": "#ffffff",

5
assets/layers/village_green/village_green.json
View file

@ -34,11 +34,12 @@
"mapRendering": [
{
"icon": "./assets/themes/playgrounds/playground.svg",
"iconSize": "40,40,center",
"iconSize": "40,40",
"location": [
"point",
"centroid"
]
],
"anchor": "center"
},
{
"color": "#937f20",

5
assets/themes/grb/grb.json
View file

@ -479,7 +479,7 @@
"render": "<div style='margin-top: -42px; color: black' class='rounded-full p-1 font-bold relative'>{addr:housenumber}</div>",
"condition": "addr:housenumber~*"
},
"iconSize": "50,50,center",
"iconSize": "50,50",
"icon": {
"mappings": [
{
@ -495,7 +495,8 @@
"location": [
"point",
"centroid"
]
],
"anchor": "center"
},
{
"width": {

3
assets/themes/mapcomplete-changes/mapcomplete-changes.json
View file

@ -416,7 +416,8 @@
}
]
},
"iconSize": "30,30,center"
"iconSize": "30,30",
"anchor": "center"
}
],
"filter": [

3
assets/themes/sidewalks/sidewalks.json
View file

@ -235,7 +235,8 @@
"end"
],
"icon": "circle:#ccc",
"iconSize": "3,3,center"
"iconSize": "3,3",
"anchor": "center"
},
{
"#": "The center line",

3
assets/themes/street_lighting_assen/street_lighting_assen.json
View file

@ -43,7 +43,8 @@
}
]
},
"iconSize": "20,20,center"
"iconSize": "20,20",
"anchor": "center"
}
],
"tagRenderings": [

5
assets/themes/uk_addresses/uk_addresses.json
View file

@ -638,7 +638,7 @@
"render": "<div style='margin-top: -42px; color: white' class='rounded-full p-1 font-bold relative'>{addr:housenumber}</div>",
"condition": "addr:housenumber~*"
},
"iconSize": "50,50,center",
"iconSize": "50,50",
"icon": {
"render": "./assets/layers/address/housenumber_blank.svg",
"mappings": [
@ -661,7 +661,8 @@
"location": [
"point",
"centroid"
]
],
"anchor": "center"
},
{
"color": {

6
assets/themes/waste_assen/waste_assen.json
View file

@ -47,7 +47,8 @@
}
]
},
"iconSize": "20,20,center"
"iconSize": "20,20",
"anchor": "center"
}
],
"tagRenderings": [
@ -92,7 +93,8 @@
}
]
},
"iconSize": "20,20,center"
"iconSize": "20,20",
"anchor": "center"
}
],
"tagRenderings": [

3
assets/themes/width/width.json
View file

@ -210,7 +210,8 @@
"point"
],
"icon": "./assets/themes/width/icon.svg",
"iconSize": "40,40,center"
"iconSize": "40,40",
"anchor": "center"
},
{
"width": "4",