Small fix to custom generator, add shopping map

Customizations/AllKnownLayouts.ts

@@ -11,6 +11,7 @@ import * as cyclofix from "../assets/themes/cyclofix/cyclofix.json"
 import * as buurtnatuur from "../assets/themes/buurtnatuur/buurtnatuur.json"
 import * as nature from "../assets/themes/nature/nature.json"
 import * as maps from "../assets/themes/maps/maps.json"
+import * as shops from "../assets/themes/shops/shops.json"
 import {PersonalLayout} from "../Logic/PersonalLayout";
 import {StreetWidth} from "./StreetWidth/StreetWidth";
 
@@ -46,6 +47,7 @@ export class AllKnownLayouts {
     public static layoutsList: Layout[] = [
         new PersonalLayout(),
         
+        FromJSON.LayoutFromJSON(shops),
         FromJSON.LayoutFromJSON(bookcases),
         FromJSON.LayoutFromJSON(aed),
         FromJSON.LayoutFromJSON(toilets),

State.ts

@@ -23,7 +23,7 @@ export default class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.1.0b";
+    public static vNumber = "0.1.0c";
     
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

UI/Input/ValidatedTextField.ts

@@ -166,7 +166,7 @@ export default class ValidatedTextField {
         const values: { value: string, shown: string }[] = [];
         const expl = ValidatedTextField.tpList;
         for (const key in expl) {
-            values.push({value: key, shown: `${expl[key].name} - ${expl[key].explanation}`})
+            values.push({value: expl[key].name, shown: `${expl[key].name} - ${expl[key].explanation}`})
         }
         return new DropDown<string>("", values)
     }

assets/themes/shops/shop.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+<g id="hbars">
+<rect x="1" y="6" width="11" height="0.5" style="fill:#ac39ac"/>
+<rect x="2" y="8" width="9.5" height="0.5" style="fill:#ac39ac"/>
+</g>
+<g id="vbars">
+<rect x="3" y="4.5" width="0.5" height="5.5" style="fill:#ac39ac"/>
+<rect x="5" y="4.5" width="0.5" height="5.5" style="fill:#ac39ac"/>
+<rect x="7.5" y="4.5" width="0.5" height="5.5" style="fill:#ac39ac"/>
+<rect x="9.5" y="4.5" width="0.5" height="5.5" style="fill:#ac39ac"/>
+</g>
+<path id="handle" d="M5.9,4 L7.9,1 A 0.5,0.5 0 0,1 8.83,1.4 L 7.1,4 Z" style="fill:#ac39ac;stroke:none"/>
+<path id="body" fill-rule="evenodd" d="M 0,4 L 13,4 11,11 2,11 Z
+M 1.25,5 L 11.75,5 10.25,10 2.75,10 Z" style="fill:#ac39ac;stroke:none"/>
+</svg>

assets/themes/shops/shops.json

@@ -0,0 +1,228 @@
+{
+  "id": "shops",
+  "title": {
+    "en": "Open Shop Map"
+  },
+  "shortDescription": {
+    "en": "An editable map with basic shop information"
+  },
+  "description": {
+    "en": "On this map, one can mark basic information about shops, add opening hours and phone numbers"
+  },
+  "language": [
+    "en"
+  ],
+  "maintainer": "MapComplete",
+  "icon": "./assets/themes/shops/shop.svg",
+  "version": "0",
+  "startLat": 0,
+  "startLon": 0,
+  "startZoom": 1,
+  "widenFactor": 0.05,
+  "socialImage": "",
+  "layers": [
+    {
+      "id": "shops",
+      "name": {
+        "en": "Shop"
+      },
+      "minzoom": 14,
+      "overpassTags": {
+        "and": [
+          "shop~*"
+        ]
+      },
+      "title": {
+        "render": {
+          "en": "Shop"
+        },
+        "mappings": [
+          {
+            "if": {
+              "and": [
+                "name~*"
+              ]
+            },
+            "then": {
+              "en": "{name}"
+            }
+          },
+          {
+            "if": {
+              "and": [
+                "shop!~yes"
+              ]
+            },
+            "then": {
+              "en": "{shop}"
+            }
+          }
+        ]
+      },
+      "description": {
+        "en": "A shop"
+      },
+      "tagRenderings": [
+        {
+          "render": {
+            "en": "This shop sellse {shop}"
+          },
+          "question": {
+            "en": "What does this shop sell?"
+          },
+          "freeform": {
+            "key": "shop"
+          },
+          "mappings": [
+            {
+              "if": {
+                "and": [
+                  "shop=convenience"
+                ]
+              },
+              "then": {
+                "en": "Convenience store"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "shop=supermarket"
+                ]
+              },
+              "then": {
+                "en": "Supermarket"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "shop=clothes"
+                ]
+              },
+              "then": {
+                "en": "Clothing store"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "shop=hairdresser"
+                ]
+              },
+              "then": {
+                "en": "Hairdresser"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "shop=bakery"
+                ]
+              },
+              "then": {
+                "en": "Bakery"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "shop=car_repair"
+                ]
+              },
+              "then": {
+                "en": "Car repair (garage)"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "shop=car"
+                ]
+              },
+              "then": {
+                "en": "Car dealer"
+              }
+            }
+          ]
+        },
+        {
+          "render": {
+            "en": "<a href='tel:{phone}'>{phone}</a>"
+          },
+          "question": {
+            "en": "What is the phone number?"
+          },
+          "freeform": {
+            "key": "phone",
+            "type": "phone"
+          }
+        },
+        {
+          "render": {
+            "en": "<a href='{website}'>{website}</a>"
+          },
+          "question": {
+            "en": "What is the website of this shop?"
+          },
+          "freeform": {
+            "key": "website",
+            "type": "url"
+          }
+        },
+        {
+          "render": {
+            "en": "<a href='mailto:{email}'>{email}</a>"
+          },
+          "question": {
+            "en": "What is the email address of this shop?"
+          },
+          "freeform": {
+            "key": "email",
+            "type": "email"
+          }
+        },
+        {
+          "render": {
+            "en": "{opening_hours_table(opening_hours)}"
+          },
+          "question": {
+            "en": "What are the opening hours of this shop?"
+          },
+          "freeform": {
+            "key": "opening_hours",
+            "type": "opening_hours"
+          }
+        }
+      ],
+      "hideUnderlayingFeaturesMinPercentage": 0,
+      "icon": {
+        "render": "./assets/themes/shops/shop.svg"
+      },
+      "width": {
+        "render": "8"
+      },
+      "iconSize": {
+        "render": "40,40,center"
+      },
+      "color": {
+        "render": "#00f"
+      },
+      "presets": [
+        {
+          "tags": [
+            "shop=yes"
+          ],
+          "title": {
+            "en": "Shop"
+          },
+          "description": {
+            "en": "Add a new shop"
+          }
+        }
+      ],
+      "wayHandling": 2
+    }
+  ],
+  "roamingRenderings": []
+}