From 3c43b48f1d949be0647a73d8e65115fa8c88afad Mon Sep 17 00:00:00 2001
From: Rory McCann <rory@geofabrik.de>
Date: Wed, 27 Feb 2019 11:06:45 +0100
Subject: [PATCH 1/3] Add serveral LGBTQ+ venue presets

---
 data/presets/presets/amenity/bar/lgbtq.json   | 19 ++++++++++++++++++
 .../amenity/community_centre/lgbtq.json       | 20 +++++++++++++++++++
 .../presets/amenity/nightclub/lgbtq.json      | 19 ++++++++++++++++++
 data/presets/presets/amenity/pub/lgbtq.json   | 19 ++++++++++++++++++
 data/presets/presets/shop/erotic/lgbtq.json   | 16 +++++++++++++++
 5 files changed, 93 insertions(+)
 create mode 100644 data/presets/presets/amenity/bar/lgbtq.json
 create mode 100644 data/presets/presets/amenity/community_centre/lgbtq.json
 create mode 100644 data/presets/presets/amenity/nightclub/lgbtq.json
 create mode 100644 data/presets/presets/amenity/pub/lgbtq.json
 create mode 100644 data/presets/presets/shop/erotic/lgbtq.json

diff --git a/data/presets/presets/amenity/bar/lgbtq.json b/data/presets/presets/amenity/bar/lgbtq.json
new file mode 100644
index 000000000..2944b7440
--- /dev/null
+++ b/data/presets/presets/amenity/bar/lgbtq.json
@@ -0,0 +1,19 @@
+{
+    "icon": "maki-bar",
+    "geometry": [
+        "point",
+        "area"
+    ],
+    "terms": [
+        "gay bar",
+        "lesbian bar",
+        "lgbtq bar",
+        "lgbt bar",
+        "lgb bar"
+    ],
+    "tags": {
+        "amenity": "bar",
+        "lgbtq": "primary"
+    },
+    "name": "LGBTQ+ Bar"
+}
diff --git a/data/presets/presets/amenity/community_centre/lgbtq.json b/data/presets/presets/amenity/community_centre/lgbtq.json
new file mode 100644
index 000000000..f6fbef8d0
--- /dev/null
+++ b/data/presets/presets/amenity/community_centre/lgbtq.json
@@ -0,0 +1,20 @@
+{
+    "icon": "maki-town-hall",
+    "geometry": [
+        "point",
+        "area"
+    ],
+    "terms": [
+        "lgbtq event",
+        "lgbtq hall",
+        "lgbt event",
+        "lgbt hall",
+        "lgb event",
+        "lgb hall"
+    ],
+    "tags": {
+        "amenity": "community_centre",
+        "lgbtq": "primary"
+    },
+    "name": "LGBTQ+ Community Center"
+}
diff --git a/data/presets/presets/amenity/nightclub/lgbtq.json b/data/presets/presets/amenity/nightclub/lgbtq.json
new file mode 100644
index 000000000..5d12f78d8
--- /dev/null
+++ b/data/presets/presets/amenity/nightclub/lgbtq.json
@@ -0,0 +1,19 @@
+{
+    "icon": "maki-bar",
+    "geometry": [
+        "point",
+        "area"
+    ],
+    "tags": {
+        "amenity": "nightclub",
+        "lgbtq": "primary"
+    },
+    "terms": [
+        "gay nightclub",
+        "lesbian nightclub",
+        "lgbtq nightclub",
+        "lgbt nightclub",
+        "lgb nightclub"
+    ],
+    "name": "LGBTQ+ Nightclub"
+}
diff --git a/data/presets/presets/amenity/pub/lgbtq.json b/data/presets/presets/amenity/pub/lgbtq.json
new file mode 100644
index 000000000..f8c3b9f82
--- /dev/null
+++ b/data/presets/presets/amenity/pub/lgbtq.json
@@ -0,0 +1,19 @@
+{
+    "icon": "maki-beer",
+    "geometry": [
+        "point",
+        "area"
+    ],
+    "tags": {
+        "amenity": "pub",
+        "lgbtq": "primary"
+    },
+    "terms": [
+        "gay pub",
+        "lesbian pub",
+        "lgbtq pub",
+        "lgbt pub",
+        "lgb pub"
+    ],
+    "name": "LGBTQ+ Pub"
+}
diff --git a/data/presets/presets/shop/erotic/lgbtq.json b/data/presets/presets/shop/erotic/lgbtq.json
new file mode 100644
index 000000000..4cb57ca3b
--- /dev/null
+++ b/data/presets/presets/shop/erotic/lgbtq.json
@@ -0,0 +1,16 @@
+{
+    "icon": "maki-shop",
+    "geometry": [
+        "point",
+        "area"
+    ],
+    "terms": [
+        "sex",
+        "porn"
+    ],
+    "tags": {
+        "shop": "erotic",
+        "lgbtq": "primary"
+    },
+    "name": "LGBTQ+ Erotic Store"
+}

From 4530dfae6510cef1d5c00ce607e0dcd28ac41cd6 Mon Sep 17 00:00:00 2001
From: Rory McCann <rory@geofabrik.de>
Date: Wed, 27 Feb 2019 11:07:57 +0100
Subject: [PATCH 2/3] Automatically generated files

---
 data/presets.yaml         | 25 +++++++++++++++++++++++++
 data/presets/presets.json |  5 +++++
 data/taginfo.json         |  1 +
 dist/locales/en.json      | 20 ++++++++++++++++++++
 4 files changed, 51 insertions(+)

diff --git a/data/presets.yaml b/data/presets.yaml
index a54301baa..283371dca 100644
--- a/data/presets.yaml
+++ b/data/presets.yaml
@@ -2303,6 +2303,11 @@ en:
         name: Bar
         # 'terms: dive,beer,bier,booze'
         terms: '<translate with synonyms or related terms for ''Bar'', separated by commas>'
+      amenity/bar/lgbtq:
+        # 'amenity=bar, lgbtq=primary'
+        name: LGBTQ+ Bar
+        # 'terms: gay bar,lesbian bar,lgbtq bar,lgbt bar,lgb bar'
+        terms: '<translate with synonyms or related terms for ''LGBTQ+ Bar'', separated by commas>'
       amenity/bbq:
         # amenity=bbq
         name: Barbecue/Grill
@@ -2419,6 +2424,11 @@ en:
         name: Community Center
         # 'terms: event,hall'
         terms: '<translate with synonyms or related terms for ''Community Center'', separated by commas>'
+      amenity/community_centre/lgbtq:
+        # 'amenity=community_centre, lgbtq=primary'
+        name: LGBTQ+ Community Center
+        # 'terms: lgbtq event,lgbtq hall,lgbt event,lgbt hall,lgb event,lgb hall'
+        terms: '<translate with synonyms or related terms for ''LGBTQ+ Community Center'', separated by commas>'
       amenity/compressed_air:
         # amenity=compressed_air
         name: Compressed Air
@@ -2605,6 +2615,11 @@ en:
         name: Nightclub
         # 'terms: disco*,night club,dancing,dance club'
         terms: '<translate with synonyms or related terms for ''Nightclub'', separated by commas>'
+      amenity/nightclub/lgbtq:
+        # 'amenity=nightclub, lgbtq=primary'
+        name: LGBTQ+ Nightclub
+        # 'terms: gay nightclub,lesbian nightclub,lgbtq nightclub,lgbt nightclub,lgb nightclub'
+        terms: '<translate with synonyms or related terms for ''LGBTQ+ Nightclub'', separated by commas>'
       amenity/nursing_home:
         # amenity=nursing_home
         name: Nursing Home
@@ -2721,6 +2736,11 @@ en:
         name: Pub
         # 'terms: alcohol,drink,dive,beer,bier,booze'
         terms: '<translate with synonyms or related terms for ''Pub'', separated by commas>'
+      amenity/pub/lgbtq:
+        # 'amenity=pub, lgbtq=primary'
+        name: LGBTQ+ Pub
+        # 'terms: gay pub,lesbian pub,lgbtq pub,lgbt pub,lgb pub'
+        terms: '<translate with synonyms or related terms for ''LGBTQ+ Pub'', separated by commas>'
       amenity/public_bath:
         # amenity=public_bath
         name: Public Bath
@@ -6180,6 +6200,11 @@ en:
         name: Erotic Store
         # 'terms: sex,porn'
         terms: '<translate with synonyms or related terms for ''Erotic Store'', separated by commas>'
+      shop/erotic/lgbtq:
+        # 'shop=erotic, lgbtq=primary'
+        name: LGBTQ+ Erotic Store
+        # 'terms: sex,porn'
+        terms: '<translate with synonyms or related terms for ''LGBTQ+ Erotic Store'', separated by commas>'
       shop/fabric:
         # shop=fabric
         name: Fabric Store
diff --git a/data/presets/presets.json b/data/presets/presets.json
index 74cc6f4a8..f6a498d9f 100644
--- a/data/presets/presets.json
+++ b/data/presets/presets.json
@@ -58,6 +58,7 @@
     "amenity/atm": {"icon": "maki-bank", "fields": ["operator", "network", "cash_in", "currency_multi", "drive_through"], "moreFields": ["name", "brand", "lit", "opening_hours", "wheelchair", "covered"], "geometry": ["point", "vertex"], "terms": ["money", "cash", "machine"], "tags": {"amenity": "atm"}, "name": "ATM"},
     "amenity/bank": {"icon": "maki-bank", "fields": ["name", "operator", "address", "building_area", "atm", "drive_through"], "moreFields": ["opening_hours", "currency_multi", "website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "terms": ["credit union", "check", "deposit", "fund", "investment", "repository", "reserve", "safe", "savings", "stock", "treasury", "trust", "vault"], "tags": {"amenity": "bank"}, "name": "Bank"},
     "amenity/bar": {"icon": "maki-bar", "fields": ["name", "address", "building_area", "outdoor_seating", "brewery"], "moreFields": ["smoking", "opening_hours", "payment_multi", "website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "terms": ["dive", "beer", "bier", "booze"], "tags": {"amenity": "bar"}, "name": "Bar"},
+    "amenity/bar/lgbtq": {"icon": "maki-bar", "geometry": ["point", "area"], "terms": ["gay bar", "lesbian bar", "lgbtq bar", "lgbt bar", "lgb bar"], "tags": {"amenity": "bar", "lgbtq": "primary"}, "name": "LGBTQ+ Bar"},
     "amenity/bbq": {"icon": "maki-bbq", "fields": ["covered", "fuel", "access_simple"], "moreFields": ["lit"], "geometry": ["point"], "terms": ["bbq", "grill"], "tags": {"amenity": "bbq"}, "name": "Barbecue/Grill"},
     "amenity/bench": {"icon": "temaki-bench", "fields": ["backrest", "material", "seats", "colour"], "moreFields": ["access_simple", "inscription", "lit"], "geometry": ["point", "vertex", "line"], "terms": ["seat"], "tags": {"amenity": "bench"}, "name": "Bench"},
     "amenity/bicycle_parking": {"icon": "maki-bicycle", "fields": ["bicycle_parking", "capacity", "operator", "covered", "access_simple", "fee"], "moreFields": ["payment_multi", "covered"], "geometry": ["point", "vertex", "area"], "terms": ["bike"], "tags": {"amenity": "bicycle_parking"}, "name": "Bicycle Parking"},
@@ -82,6 +83,7 @@
     "amenity/clock/sundial": {"icon": "temaki-clock", "fields": ["name", "support", "visibility", "inscription"], "moreFields": [], "geometry": ["point", "vertex"], "terms": ["gnomon", "shadow"], "tags": {"amenity": "clock", "display": "sundial"}, "reference": {"key": "display", "value": "sundial"}, "name": "Sundial"},
     "amenity/college": {"icon": "maki-college", "fields": ["name", "operator", "address", "website", "internet_access"], "moreFields": ["religion", "denomination", "internet_access/fee", "internet_access/ssid", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "terms": ["university", "undergraduate school"], "tags": {"amenity": "college"}, "name": "College Grounds"},
     "amenity/community_centre": {"icon": "maki-town-hall", "fields": ["name", "operator", "address", "building_area"], "moreFields": ["website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "terms": ["event", "hall"], "tags": {"amenity": "community_centre"}, "name": "Community Center"},
+    "amenity/community_centre/lgbtq": {"icon": "maki-town-hall", "geometry": ["point", "area"], "terms": ["lgbtq event", "lgbtq hall", "lgbt event", "lgbt hall", "lgb event", "lgb hall"], "tags": {"amenity": "community_centre", "lgbtq": "primary"}, "name": "LGBTQ+ Community Center"},
     "amenity/compressed_air": {"icon": "maki-car", "fields": ["operator", "fee", "payment_multi", "lit"], "geometry": ["point", "area"], "tags": {"amenity": "compressed_air"}, "name": "Compressed Air"},
     "amenity/courthouse": {"icon": "temaki-courthouse", "fields": ["name", "operator", "address", "building_area"], "moreFields": ["website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "tags": {"amenity": "courthouse"}, "name": "Courthouse"},
     "amenity/crematorium": {"icon": "maki-cemetery", "fields": ["name", "website", "phone", "opening_hours", "wheelchair"], "moreFields": ["address", "website", "phone", "email", "fax", "wheelchair"], "geometry": ["area", "point"], "tags": {"amenity": "crematorium"}, "terms": ["cemetery", "funeral"], "name": "Crematorium"},
@@ -120,6 +122,7 @@
     "amenity/motorcycle_parking": {"icon": "fas-motorcycle", "fields": ["capacity", "operator", "covered", "access_simple"], "geometry": ["point", "vertex", "area"], "tags": {"amenity": "motorcycle_parking"}, "name": "Motorcycle Parking"},
     "amenity/music_school": {"icon": "maki-school", "fields": ["name", "operator", "address", "building_area", "opening_hours"], "moreFields": ["payment_multi", "website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "terms": ["school of music"], "tags": {"amenity": "music_school"}, "name": "Music School"},
     "amenity/nightclub": {"icon": "maki-bar", "fields": ["name", "operator", "address", "building_area", "opening_hours", "smoking"], "moreFields": ["payment_multi", "website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "tags": {"amenity": "nightclub"}, "terms": ["disco*", "night club", "dancing", "dance club"], "name": "Nightclub"},
+    "amenity/nightclub/lgbtq": {"icon": "maki-bar", "geometry": ["point", "area"], "tags": {"amenity": "nightclub", "lgbtq": "primary"}, "terms": ["gay nightclub", "lesbian nightclub", "lgbtq nightclub", "lgbt nightclub", "lgb nightclub"], "name": "LGBTQ+ Nightclub"},
     "amenity/parking_entrance": {"icon": "maki-entrance-alt1", "fields": ["access_simple", "ref"], "geometry": ["vertex"], "tags": {"amenity": "parking_entrance"}, "name": "Parking Garage Entrance/Exit"},
     "amenity/parking_space": {"fields": ["capacity"], "geometry": ["point", "vertex", "area"], "terms": [], "tags": {"amenity": "parking_space"}, "matchScore": 0.95, "name": "Parking Space"},
     "amenity/parking": {"icon": "maki-car", "fields": ["operator", "parking", "capacity", "access_simple", "fee", "surface"], "moreFields": ["name", "supervised", "park_ride", "maxstay", "payment_multi", "address", "website", "phone", "email", "fax", "wheelchair", "covered"], "geometry": ["point", "vertex", "area"], "tags": {"amenity": "parking"}, "terms": ["automobile parking", "car lot", "car parking", "rv parking", "truck parking", "vehicle parking"], "name": "Parking Lot"},
@@ -143,6 +146,7 @@
     "amenity/post_office": {"icon": "maki-post", "fields": ["name", "operator", "address", "building_area", "opening_hours"], "moreFields": ["payment_multi", "website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "terms": ["letter", "mail"], "tags": {"amenity": "post_office"}, "name": "Post Office"},
     "amenity/prison": {"icon": "maki-prison", "fields": ["name", "operator", "address"], "moreFields": ["website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "terms": ["cell", "jail"], "tags": {"amenity": "prison"}, "name": "Prison Grounds"},
     "amenity/pub": {"icon": "maki-beer", "fields": ["name", "address", "building_area", "opening_hours", "smoking", "brewery"], "moreFields": ["outdoor_seating", "diet_multi", "payment_multi", "internet_access", "internet_access/fee", "internet_access/ssid", "website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "tags": {"amenity": "pub"}, "terms": ["alcohol", "drink", "dive", "beer", "bier", "booze"], "name": "Pub"},
+    "amenity/pub/lgbtq": {"icon": "maki-beer", "geometry": ["point", "area"], "tags": {"amenity": "pub", "lgbtq": "primary"}, "terms": ["gay pub", "lesbian pub", "lgbtq pub", "lgbt pub", "lgb pub"], "name": "LGBTQ+ Pub"},
     "amenity/public_bath": {"icon": "maki-water", "fields": ["name", "bath/type", "bath/open_air", "bath/sand_bath", "address", "building_area", "fee"], "moreFields": ["opening_hours", "payment_multi", "website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "tags": {"amenity": "public_bath"}, "terms": ["onsen", "foot bath", "hot springs"], "name": "Public Bath"},
     "amenity/public_bookcase": {"icon": "maki-library", "fields": ["name", "operator", "capacity", "website", "lit"], "moreFields": ["wheelchair"], "geometry": ["point", "area"], "terms": ["library", "bookcrossing"], "tags": {"amenity": "public_bookcase"}, "name": "Public Bookcase"},
     "amenity/ranger_station": {"icon": "maki-ranger-station", "fields": ["name", "operator", "address", "building_area", "opening_hours"], "moreFields": ["website", "phone", "email", "fax", "wheelchair"], "geometry": ["point", "area"], "terms": ["visitor center", "visitor centre", "permit center", "permit centre", "backcountry office", "warden office", "warden center"], "tags": {"amenity": "ranger_station"}, "name": "Ranger Station"},
@@ -892,6 +896,7 @@
     "shop/e-cigarette": {"icon": "maki-shop", "geometry": ["point", "area"], "tags": {"shop": "e-cigarette"}, "terms": ["electronic", "vape", "vaping", "vapor"], "name": "E-Cigarette Shop"},
     "shop/electronics": {"icon": "maki-shop", "geometry": ["point", "area"], "terms": ["appliance", "audio", "blueray", "camera", "computer", "dvd", "home theater", "radio", "speaker", "tv", "video"], "tags": {"shop": "electronics"}, "name": "Electronics Store"},
     "shop/erotic": {"icon": "maki-shop", "geometry": ["point", "area"], "terms": ["sex", "porn"], "tags": {"shop": "erotic"}, "name": "Erotic Store"},
+    "shop/erotic/lgbtq": {"icon": "maki-shop", "geometry": ["point", "area"], "terms": ["sex", "porn"], "tags": {"shop": "erotic", "lgbtq": "primary"}, "name": "LGBTQ+ Erotic Store"},
     "shop/fabric": {"icon": "maki-shop", "geometry": ["point", "area"], "terms": ["sew"], "tags": {"shop": "fabric"}, "name": "Fabric Store"},
     "shop/farm": {"icon": "maki-shop", "geometry": ["point", "area"], "terms": ["farm shop", "farm stand"], "tags": {"shop": "farm"}, "name": "Produce Stand"},
     "shop/fashion": {"icon": "maki-shop", "fields": ["name", "clothes", "{shop}"], "geometry": ["point", "area"], "tags": {"shop": "fashion"}, "name": "Fashion Store"},
diff --git a/data/taginfo.json b/data/taginfo.json
index fe6d87eb0..490350311 100644
--- a/data/taginfo.json
+++ b/data/taginfo.json
@@ -61,6 +61,7 @@
     {"key": "amenity", "value": "atm", "description": "🄿 ATM", "object_types": ["node"], "icon_url": "https://raw.githubusercontent.com/mapbox/maki/master/icons/bank-15.svg?sanitize=true"},
     {"key": "amenity", "value": "bank", "description": "🄿 Bank", "object_types": ["node", "area"], "icon_url": "https://raw.githubusercontent.com/mapbox/maki/master/icons/bank-15.svg?sanitize=true"},
     {"key": "amenity", "value": "bar", "description": "🄿 Bar", "object_types": ["node", "area"], "icon_url": "https://raw.githubusercontent.com/mapbox/maki/master/icons/bar-15.svg?sanitize=true"},
+    {"key": "lgbtq", "value": "primary", "description": "🄿 LGBTQ+ Bar, 🄿 LGBTQ+ Community Center, 🄿 LGBTQ+ Nightclub, 🄿 LGBTQ+ Pub, 🄿 LGBTQ+ Erotic Store", "object_types": ["node", "area"], "icon_url": "https://raw.githubusercontent.com/mapbox/maki/master/icons/bar-15.svg?sanitize=true"},
     {"key": "amenity", "value": "bbq", "description": "🄿 Barbecue/Grill", "object_types": ["node"], "icon_url": "https://raw.githubusercontent.com/mapbox/maki/master/icons/bbq-15.svg?sanitize=true"},
     {"key": "amenity", "value": "bench", "description": "🄿 Bench", "object_types": ["node", "way"], "icon_url": "https://raw.githubusercontent.com/bhousel/temaki/master/icons/bench.svg?sanitize=true"},
     {"key": "amenity", "value": "bicycle_parking", "description": "🄿 Bicycle Parking", "object_types": ["node", "area"], "icon_url": "https://raw.githubusercontent.com/mapbox/maki/master/icons/bicycle-15.svg?sanitize=true"},
diff --git a/dist/locales/en.json b/dist/locales/en.json
index ad85bdf37..77b832aef 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -4110,6 +4110,10 @@
                     "name": "Bar",
                     "terms": "dive,beer,bier,booze"
                 },
+                "amenity/bar/lgbtq": {
+                    "name": "LGBTQ+ Bar",
+                    "terms": "gay bar,lesbian bar,lgbtq bar,lgbt bar,lgb bar"
+                },
                 "amenity/bbq": {
                     "name": "Barbecue/Grill",
                     "terms": "bbq,grill"
@@ -4206,6 +4210,10 @@
                     "name": "Community Center",
                     "terms": "event,hall"
                 },
+                "amenity/community_centre/lgbtq": {
+                    "name": "LGBTQ+ Community Center",
+                    "terms": "lgbtq event,lgbtq hall,lgbt event,lgbt hall,lgb event,lgb hall"
+                },
                 "amenity/compressed_air": {
                     "name": "Compressed Air",
                     "terms": ""
@@ -4358,6 +4366,10 @@
                     "name": "Nightclub",
                     "terms": "disco*,night club,dancing,dance club"
                 },
+                "amenity/nightclub/lgbtq": {
+                    "name": "LGBTQ+ Nightclub",
+                    "terms": "gay nightclub,lesbian nightclub,lgbtq nightclub,lgbt nightclub,lgb nightclub"
+                },
                 "amenity/parking_entrance": {
                     "name": "Parking Garage Entrance/Exit",
                     "terms": ""
@@ -4450,6 +4462,10 @@
                     "name": "Pub",
                     "terms": "alcohol,drink,dive,beer,bier,booze"
                 },
+                "amenity/pub/lgbtq": {
+                    "name": "LGBTQ+ Pub",
+                    "terms": "gay pub,lesbian pub,lgbtq pub,lgbt pub,lgb pub"
+                },
                 "amenity/public_bath": {
                     "name": "Public Bath",
                     "terms": "onsen,foot bath,hot springs"
@@ -7446,6 +7462,10 @@
                     "name": "Erotic Store",
                     "terms": "sex,porn"
                 },
+                "shop/erotic/lgbtq": {
+                    "name": "LGBTQ+ Erotic Store",
+                    "terms": "sex,porn"
+                },
                 "shop/fabric": {
                     "name": "Fabric Store",
                     "terms": "sew"

From b409f260f717dd541ea43c5f605665fd9c6cfe96 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Wed, 27 Feb 2019 10:51:24 -0500
Subject: [PATCH 3/3] Render preset icons fills as SVG rather than HTML
 elements

---
 css/25_areas.css          | 118 ++++++++-----------------------
 css/80_app.css            |  22 +++---
 modules/ui/preset_icon.js | 145 ++++++++++++++++++++++++++------------
 3 files changed, 145 insertions(+), 140 deletions(-)

diff --git a/css/25_areas.css b/css/25_areas.css
index 9944a2bf4..7ffdfc369 100644
--- a/css/25_areas.css
+++ b/css/25_areas.css
@@ -10,9 +10,9 @@ path.area.fill {
     fill: rgba(255, 255, 255, 0.3);
     fill-rule: evenodd;
 }
-.preset-icon-fill-area {
-    border: 1px solid rgb(170, 170, 170);
-    background-color: rgba(170, 170, 170, 0.3);
+.preset-icon-fill path.fill {
+    stroke: rgb(170, 170, 170);
+    fill: rgba(170, 170, 170, 0.3);
 }
 
 path.shadow.old-multipolygon,
@@ -52,20 +52,6 @@ path.fill.tag-barrier-hedge {
     stroke: rgba(140, 208, 95, 0.3);
     fill: rgba(140, 208, 95, 0.3);
 }
-.preset-icon-fill-area.tag-landuse,
-.preset-icon-fill-area.tag-natural,
-.preset-icon-fill-area.tag-leisure-nature_reserve,
-.preset-icon-fill-area.tag-leisure-pitch,
-.preset-icon-fill-area.tag-leisure-track,
-.preset-icon-fill-area.tag-leisure-golf_course,
-.preset-icon-fill-area.tag-leisure-garden,
-.preset-icon-fill-area.tag-leisure-park,
-.preset-icon-fill-area.tag-landuse-forest,
-.preset-icon-fill-area.tag-natural-wood,
-.preset-icon-fill-area.tag-landuse-grass {
-    border-color: rgb(140, 208, 95);
-    background-color: rgba(140, 208, 95, 0.3);
-}
 .pattern-color-forest,
 .pattern-color-forest_broadleaved,
 .pattern-color-forest_needleleaved,
@@ -98,17 +84,6 @@ path.fill.tag-natural-water {
     stroke: rgba(119, 211, 222, 0.3);
     fill: rgba(119, 211, 222, 0.3);
 }
-.preset-icon-fill-area.tag-amenity-fountain,
-.preset-icon-fill-area.tag-amenity-swimming_pool,
-.preset-icon-fill-area.tag-leisure-swimming_pool,
-.preset-icon-fill-area.tag-landuse-aquaculture,
-.preset-icon-fill-area.tag-landuse-basin,
-.preset-icon-fill-area.tag-landuse-harbour,
-.preset-icon-fill-area.tag-landuse-reservoir,
-.preset-icon-fill-area.tag-natural-water {
-    border-color: rgb(119, 211, 222);
-    background-color: rgba(119, 211, 222, 0.3);
-}
 .pattern-color-waves,
 .pattern-color-water_standing,
 .pattern-color-pond {
@@ -146,20 +121,19 @@ path.fill.tag-amenity-university {
     stroke: rgba(255, 255, 148, 0.25);
     fill: rgba(255, 255, 148, 0.25);
 }
-.preset-icon-fill-area.tag-leisure-pitch.tag-sport-beachvolleyball,
-.preset-icon-fill-area.tag-leisure-pitch.tag-sport-baseball,
-.preset-icon-fill-area.tag-leisure-pitch.tag-sport-softball,
-.preset-icon-fill-area.tag-leisure-track,
-.preset-icon-fill-area.tag-natural-beach,
-.preset-icon-fill-area.tag-natural-sand,
-.preset-icon-fill-area.tag-natural-scrub,
-.preset-icon-fill-area.tag-amenity-childcare,
-.preset-icon-fill-area.tag-amenity-kindergarten,
-.preset-icon-fill-area.tag-amenity-school,
-.preset-icon-fill-area.tag-amenity-college,
-.preset-icon-fill-area.tag-amenity-university {
-    border-color: rgb(232, 232, 0);
-    background-color: rgba(255, 255, 148, 0.25);
+.preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
+.preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-baseball,
+.preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-softball,
+.preset-icon-fill path.area.stroke.tag-leisure-track,
+.preset-icon-fill path.area.stroke.tag-natural-beach,
+.preset-icon-fill path.area.stroke.tag-natural-sand,
+.preset-icon-fill path.area.stroke.tag-natural-scrub,
+.preset-icon-fill path.area.stroke.tag-amenity-childcare,
+.preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
+.preset-icon-fill path.area.stroke.tag-amenity-school,
+.preset-icon-fill path.area.stroke.tag-amenity-college,
+.preset-icon-fill path.area.stroke.tag-amenity-university {
+    stroke: rgb(232, 232, 0);
 }
 .pattern-color-beach,
 .pattern-color-sand,
@@ -177,11 +151,6 @@ path.fill.tag-landuse-residential {
     stroke: rgba(196, 189, 25, 0.3);
     fill: rgba(196, 189, 25, 0.3);
 }
-.preset-icon-fill-area.tag-landuse-residential,
-.preset-icon-fill-area.tag-status-construction {
-    border-color: rgb(196, 189, 25);
-    background: rgba(196, 189, 25, 0.3);
-}
 .pattern-color-construction {
     fill: rgba(196, 189, 25, 0.3);
 }
@@ -203,14 +172,6 @@ path.fill.tag-landuse-military {
     stroke: rgba(214, 136, 26, 0.3);
     fill: rgba(214, 136, 26, 0.3);
 }
-.preset-icon-fill-area.tag-landuse-retail,
-.preset-icon-fill-area.tag-landuse-commercial,
-.preset-icon-fill-area.tag-landuse-landfill,
-.preset-icon-fill-area.tag-military,
-.preset-icon-fill-area.tag-landuse-military {
-    border-color: rgb(214, 136, 26);
-    background-color: rgba(214, 136, 26, 0.3);
-}
 .pattern-color-landfill {
     fill: rgba(214, 136, 26, 0.3);
 }
@@ -226,20 +187,14 @@ path.fill.tag-power-plant {
     stroke: rgba(228, 164, 245, 0.3);
     fill: rgba(228, 164, 245, 0.3);
 }
-.preset-icon-fill-area.tag-landuse-industrial,
-.preset-icon-fill-area.tag-power-plant {
-    border-color: rgb(228, 164, 245);
-    background-color: rgba(228, 164, 245, 0.3);
-}
 
 
 /* Teal things */
 path.stroke.tag-natural-wetland {
     stroke: rgb(153, 225, 170);
 }
-.preset-icon-fill-area.tag-natural-wetland {
-    border-color: rgb(153, 225, 170);
-    background-color: rgba(153, 225, 170, 0.2);
+.preset-icon-fill path.area.fill.tag-natural-wetland {
+    fill: rgba(153, 225, 170, 0.2);
 }
 .pattern-color-wetland,
 .pattern-color-wetland_marsh,
@@ -258,12 +213,12 @@ path.stroke.tag-landuse-meadow,
 path.stroke.tag-landuse-farmland {
     stroke: rgb(191, 232, 63);
 }
-.preset-icon-fill-area.tag-landuse-cemetery,
-.preset-icon-fill-area.tag-landuse-orchard,
-.preset-icon-fill-area.tag-landuse-vineyard,
-.preset-icon-fill-area.tag-landuse-meadow,
-.preset-icon-fill-area.tag-landuse-farmland {
-    background-color: rgba(191, 232, 63, 0.2);
+.preset-icon-fill path.area.fill.tag-landuse-cemetery,
+.preset-icon-fill path.area.fill.tag-landuse-orchard,
+.preset-icon-fill path.area.fill.tag-landuse-vineyard,
+.preset-icon-fill path.area.fill.tag-landuse-meadow,
+.preset-icon-fill path.area.fill.tag-landuse-farmland {
+    fill: rgba(191, 232, 63, 0.2);
 }
 .pattern-color-cemetery,
 .pattern-color-cemetery_christian,
@@ -286,9 +241,8 @@ path.fill.tag-landuse-farmyard {
     stroke: rgba(245, 220, 186, 0.3);
     fill: rgba(245, 220, 186, 0.3);
 }
-.preset-icon-fill-area.tag-landuse-farmyard {
-    border-color: rgb(226, 177, 111);
-    background: rgba(245, 220, 186, 0.3);
+.preset-icon-fill path.area.stroke.tag-landuse-farmyard {
+    stroke: rgb(226, 177, 111);
 }
 .pattern-color-farmyard {
     fill: rgba(245, 220, 186, 0.3);
@@ -323,18 +277,6 @@ path.fill.tag-waterway-weir {
     stroke: rgba(140, 140, 140, 0.5);
     fill: rgba(140, 140, 140, 0.5);
 }
-.preset-icon-fill-area.tag-amenity-parking,
-.preset-icon-fill-area.tag-landuse-railway,
-.preset-icon-fill-area.tag-landuse-quarry,
-.preset-icon-fill-area.tag-leisure-pitch.tag-sport-basketball,
-.preset-icon-fill-area.tag-leisure-pitch.tag-sport-skateboard,
-.preset-icon-fill-area.tag-natural-bare_rock,
-.preset-icon-fill-area.tag-natural-scree,
-.preset-icon-fill-area.tag-waterway-dam,
-.preset-icon-fill-area.tag-waterway-weir {
-    border-color: rgb(170, 170, 170);
-    background-color: rgba(140, 140, 140, 0.5);
-}
 .pattern-color-quarry {
     fill: rgba(140, 140, 140, 0.5);
 }
@@ -350,8 +292,8 @@ path.fill.tag-natural-glacier {
     stroke: rgba(255, 255, 255, 0.3);
     fill: rgba(255, 255, 255, 0.3);
 }
-.preset-icon-fill-area.tag-natural-cave_entrance,
-.preset-icon-fill-area.tag-natural-glacier {
-    border-color: rgb(170, 170, 170);
-    background: rgba(170, 170, 170, 0.3);
+.preset-icon-fill path.fill.tag-natural-cave_entrance,
+.preset-icon-fill path.fill.tag-natural-glacier {
+    stroke: rgb(170, 170, 170);
+    fill: rgba(170, 170, 170, 0.3);
 }
diff --git a/css/80_app.css b/css/80_app.css
index 8f9994981..9371b5350 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1001,23 +1001,27 @@ a.hide-toggle {
 
 .preset-icon-fill {
     cursor: inherit;
-    height: 66%;
-    width: 66%;
     margin: auto;
     position: absolute;
-    left: 17%;
-    top: 17%;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+.preset-icon-fill path.area.stroke {
+    fill: transparent;
 }
 
-.preset-icon-fill-vertex {
-    border: 1.5px solid #333;
-    border-radius: 100%;
-    background-color: #efefef;
+.preset-icon-fill-vertex circle {
+    stroke-width: 1.5px;
+    stroke: #333;
+    fill: #efefef;
     backface-visibility: hidden;
 }
 .preset-icon-frame {
     width: 100%;
     height:100%;
+    position: absolute;
 }
 .preset-icon-frame .icon{
     position: absolute;
@@ -1031,6 +1035,8 @@ a.hide-toggle {
 .preset-icon {
     width: 100%;
     height:100%;
+    position: absolute;
+    z-index: 1;
 }
 .preset-icon .icon {
     position: absolute;
diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js
index 571b164f9..daaa2110b 100644
--- a/modules/ui/preset_icon.js
+++ b/modules/ui/preset_icon.js
@@ -23,60 +23,47 @@ export function uiPresetIcon() {
             return 'maki-marker-stroked';
     }
 
+    function renderCircleFill(fillEnter) {
+        var w = 60, h = 60, d = 40;
+        fillEnter = fillEnter
+            .append('svg')
+            .attr('class', 'preset-icon-fill preset-icon-fill-vertex')
+            .attr('width', w)
+            .attr('height', h)
+            .attr('viewBox', '0 0 ' + w + ' ' + h);
 
-    function render() {
-        var selection = d3_select(this);
+        fillEnter.append('circle')
+            .attr('cx', w/2)
+            .attr('cy', h/2)
+            .attr('r', d/2);
+    }
 
-        var container = selection.selectAll('.preset-icon-container')
-            .data([0]);
+    function renderSquareFill(fillEnter) {
+        var w = 60, h = 60, l = 40, c1 = (w-l)/2, c2 = c1 + l;
+        fillEnter = fillEnter
+            .append('svg')
+            .attr('class', 'preset-icon-fill preset-icon-fill-area')
+            .attr('width', w)
+            .attr('height', h)
+            .attr('viewBox', '0 0 ' + w + ' ' + h);
 
-        container = container.enter()
-            .append('div')
-            .attr('class', 'preset-icon-container')
-            .merge(container);
+        var data = 'M' + c1 + ' ' + c1 + ' L' + c1 + ' ' + c2 + ' L' + c2 + ' ' + c2 + ' L' + c2 + ' ' + c1 + ' Z';
 
-        var p = preset.apply(this, arguments);
-        var geom = geometry.apply(this, arguments);
-        var picon = getIcon(p, geom);
-        var isMaki = /^maki-/.test(picon);
-        var isTemaki = /^temaki-/.test(picon);
-        var isFa = /^fa[srb]-/.test(picon);
-        var isiDIcon = !(isMaki || isTemaki || isFa);
-        var isCategory = !p.setTags;
-        var drawLine = geom === 'line' && !isCategory;
-        var isFramed = (geom === 'area' || drawLine || geom === 'vertex');
+        fillEnter.append('path')
+            .attr('d', data)
+            .attr('class', 'line area fill');
 
-        var tags = !isCategory ? p.setTags({}, geom) : {};
-        for (var k in tags) {
-            if (tags[k] === '*') {
-                tags[k] = 'yes';
-            }
-        }
-        var tagClasses = svgTagClasses().getClassesString(tags, '');
-
-        var fill = container.selectAll('.preset-icon-fill')
-            .data([0]);
-
-        fill = fill.enter()
-            .append('div')
-            .merge(fill);
-
-        fill
-            .attr('class', function() {
-                return 'preset-icon-fill preset-icon-fill-' + geom + ' ' + tagClasses;
-            });
-
-        var line = container.selectAll('.preset-icon-line')
-            .data(drawLine ? [0] : []);
-
-        line.exit()
-            .remove();
+        fillEnter.append('path')
+            .attr('d', data)
+            .attr('class', 'line area stroke');
+    }
 
+    function renderLine(lineEnter) {
         // draw the line parametrically
         var w = 60, h = 60, y = 43, l = 36, r = 2.5;
         var x1 = (w - l)/2, x2 = x1 + l;
 
-        var lineEnter = line.enter()
+        lineEnter = lineEnter
             .append('svg')
             .attr('class', 'preset-icon-line')
             .attr('width', w)
@@ -99,6 +86,76 @@ export function uiPresetIcon() {
             .attr('cx', x2 + 1)
             .attr('cy', y)
             .attr('r', r);
+    }
+
+
+    function render() {
+        var selection = d3_select(this);
+
+        var container = selection.selectAll('.preset-icon-container')
+            .data([0]);
+
+        container = container.enter()
+            .append('div')
+            .attr('class', 'preset-icon-container')
+            .merge(container);
+
+        var p = preset.apply(this, arguments);
+        var geom = geometry.apply(this, arguments);
+        var picon = getIcon(p, geom);
+        var isMaki = /^maki-/.test(picon);
+        var isTemaki = /^temaki-/.test(picon);
+        var isFa = /^fa[srb]-/.test(picon);
+        var isiDIcon = !(isMaki || isTemaki || isFa);
+        var isCategory = !p.setTags;
+        var drawLine = geom === 'line' && !isCategory;
+        var drawFill = geom === 'area' || geom === 'vertex';
+        var isFramed = (drawFill || drawLine);
+
+        var tags = !isCategory ? p.setTags({}, geom) : {};
+        for (var k in tags) {
+            if (tags[k] === '*') {
+                tags[k] = 'yes';
+            }
+        }
+        var tagClasses = svgTagClasses().getClassesString(tags, '');
+
+
+        var vertexFill = container.selectAll('.preset-icon-fill-vertex')
+            .data(geom === 'vertex' ? [0] : []);
+
+        vertexFill.exit()
+            .remove();
+
+        var vertexFillEnter = vertexFill.enter();
+        renderCircleFill(vertexFillEnter);
+        vertexFill = vertexFillEnter.merge(vertexFill);
+
+
+        var fill = container.selectAll('.preset-icon-fill-area')
+            .data(geom === 'area' ? [0] : []);
+
+        fill.exit()
+            .remove();
+
+        var fillEnter = fill.enter();
+        renderSquareFill(fillEnter);
+        fill = fillEnter.merge(fill);
+
+        fill.selectAll('path.stroke')
+            .attr('class', 'area stroke ' + tagClasses);
+        fill.selectAll('path.fill')
+            .attr('class', 'area fill ' + tagClasses);
+
+
+        var line = container.selectAll('.preset-icon-line')
+            .data(drawLine ? [0] : []);
+
+        line.exit()
+            .remove();
+
+        var lineEnter = line.enter();
+        renderLine(lineEnter);
 
         line = lineEnter.merge(line);