From 06e978ff49595aba43a1f60a4bff7be1ceaa8fdd Mon Sep 17 00:00:00 2001
From: Robin van der Linde <robin.vanderlinde@gmail.com>
Date: Wed, 24 Apr 2024 02:44:31 +0200
Subject: [PATCH 1/6] Add some support for foldable devices

---
 public/css/index-tailwind-output.css   | 105 ++--
 src/UI/Base/ModalRight.svelte          |  10 +
 src/UI/BigComponents/ThemesList.svelte |   2 +-
 src/index.css                          | 731 +++++++++++++------------
 4 files changed, 444 insertions(+), 404 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index dbf2c11d7f..af946e3221 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -781,10 +781,6 @@ video {
   float: left;
 }
 
-.m-8 {
-  margin: 2rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -797,6 +793,10 @@ video {
   margin: 0px;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -900,10 +900,6 @@ video {
   margin-right: 4rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -936,6 +932,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -2351,7 +2351,7 @@ input {
   color: var(--foreground-color);
 }
 
-input[type=text] {
+input[type="text"] {
   width: 100%;
 }
 
@@ -2374,12 +2374,12 @@ input[type=text] {
 
 .low-interaction {
   background: var(--low-interaction-background);
-  color: var(--low-interaction-foreground)
+  color: var(--low-interaction-foreground);
 }
 
 .interactive {
   background: var(--interactive-background);
-  color: var(--interactive-foreground)
+  color: var(--interactive-foreground);
 }
 
 .border-interactive {
@@ -2398,7 +2398,8 @@ input[type=text] {
  * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
  */
 
-button.small, .button.small {
+button.small,
+.button.small {
   line-height: 1rem;
   margin: 0;
   margin-left: 0.5rem;
@@ -2419,7 +2420,8 @@ button.small, .button.small {
   color: var(--low-interaction-foreground);
 }
 
-button, .button {
+button,
+.button {
   align-items: center;
   display: inline-flex;
   line-height: 1.25rem;
@@ -2442,56 +2444,67 @@ button, .button {
   box-shadow: 0 5px 10px #88888888;
 }
 
-button.selected, .button.selected {
+button.selected,
+.button.selected {
   background-color: var(--catch-detail-color);
   border-color: var(--catch-detail-color);
   color: var(--catch-detail-foregroundcolor);
 }
 
-button.selected svg path, .button.selected svg path {
+button.selected svg path,
+.button.selected svg path {
   fill: var(--catch-detail-foregroundcolor) !important;
 }
 
-button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-background):not(.soft) svg path {
+button:not(.no-image-background):not(.soft) svg path,
+.button:not(.no-image-background):not(.soft) svg path {
   fill: var(--interactive-foreground) !important;
   transition: all 250ms;
 }
 
-.interactive button, .interactive .button {
+.interactive button,
+.interactive .button {
   background: var(--interactive-background);
   color: var(--interactive-foreground);
 }
 
-button:hover, .button:hover {
+button:hover,
+.button:hover {
   background-color: var(--catch-detail-color);
   color: var(--catch-detail-foregroundcolor);
   border: 2px solid var(--catch-detail-color-contrast);
 }
 
-button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
+button:hover:not(.no-image-background) img,
+.button:hover:not(.no-image-background) img {
   background: var(--low-interaction-background);
   border-radius: 100rem;
 }
 
-button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path {
+button:hover:not(.no-image-background) svg path,
+.button:hover:not(.no-image-background) svg path {
   fill: var(--catch-detail-foregroundcolor) !important;
 }
 
-button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path {
+button.disabled:hover:not(.no-image-background) svg path,
+.button.disabled:hover:not(.no-image-background) svg path {
   fill: var(--low-interaction-foreground) !important;
 }
 
-button.primary, .button.primary {
+button.primary,
+.button.primary {
   color: var(--button-foreground);
   background: var(--button-background);
 }
 
-button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path {
+button.primary:not(.no-image-background) svg path,
+.button.primary:not(.no-image-background) svg path {
   fill: var(--button-foreground) !important;
   transition: all 250ms;
 }
 
-button.disabled, .button.disabled {
+button.disabled,
+.button.disabled {
   cursor: default;
   border: 2px dashed var(--button-background);
   background: unset;
@@ -2499,7 +2512,8 @@ button.disabled, .button.disabled {
   box-shadow: none;
 }
 
-button.disabled:hover, .button.disabled:hover {
+button.disabled:hover,
+.button.disabled:hover {
   cursor: default;
   border: 2px dashed var(--button-background);
   background: unset;
@@ -2513,18 +2527,21 @@ button.link {
 }
 
 button.link:hover {
-  color:unset;
+  color: unset;
 }
 
-.interactive button.disabled svg path, .interactive .button.disabled svg path {
+.interactive button.disabled svg path,
+.interactive .button.disabled svg path {
   fill: var(--interactive-foreground) !important;
 }
 
-.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path {
+.low-interaction button.disabled svg path,
+.low-interaction .button.disabled svg path {
   fill: var(--low-interaction-foreground) !important;
 }
 
-.normal-background button.disabled svg path, .normal-background .button.disabled svg path {
+.normal-background button.disabled svg path,
+.normal-background .button.disabled svg path {
   fill: var(--foreground-color) !important;
 }
 
@@ -2537,12 +2554,14 @@ button.link:hover {
   width: 100%;
 }
 
-button.soft, .button.soft {
+button.soft,
+.button.soft {
   border: 2px solid var(--interactive-background);
   margin: 0;
 }
 
-button.soft:hover, .button.soft:hover {
+button.soft:hover,
+.button.soft:hover {
   background-color: var(--interactive-background);
   color: var(--interactive-foreground);
   border: 2px solid var(--catch-detail-color-contrast);
@@ -2580,7 +2599,7 @@ select:hover {
   border-color: var(--catch-detail-color-contrast);
 }
 
-.neutral-label{
+.neutral-label {
   /** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
      * Placed here for autocompletion
      */
@@ -2608,7 +2627,7 @@ label.button {
 label:hover:not(.neutral-label) {
   background-color: var(--catch-detail-color);
   color: var(--catch-detail-foregroundcolor);
-  border: 2px solid var(--interactive-contrast)
+  border: 2px solid var(--interactive-contrast);
 }
 
 label:not(.no-image-background):not(.neutral-label) img {
@@ -2839,18 +2858,18 @@ a.link-underline {
 }
 
 svg.apply-fill path {
-  fill: var(--svg-color)
+  fill: var(--svg-color);
 }
 
 .compass_arrow {
-  width: calc( 2.5rem - 1px ) ;
-  height: calc( 2.5rem - 1px )
+  width: calc(2.5rem - 1px);
+  height: calc(2.5rem - 1px);
 }
 
 @media (min-width: 640px) {
   .compass_arrow {
-    width: calc( 2.75rem - 1px ) ;
-    height: calc( 2.75rem - 1px )
+    width: calc(2.75rem - 1px);
+    height: calc(2.75rem - 1px);
   }
 }
 
@@ -2931,6 +2950,16 @@ svg.apply-fill path {
   max-width: 100%;
 }
 
+/************************* Experimental support for foldable devices ********************************/
+
+@media (horizontal-viewport-segments: 2) {
+  .theme-list {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 .hover\:bg-indigo-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(199 210 254 / var(--tw-bg-opacity));
diff --git a/src/UI/Base/ModalRight.svelte b/src/UI/Base/ModalRight.svelte
index d887487c2a..b0d9a6930d 100644
--- a/src/UI/Base/ModalRight.svelte
+++ b/src/UI/Base/ModalRight.svelte
@@ -16,6 +16,7 @@
   role="dialog"
   style="max-width: 100vw; max-height: 100vh"
   tabindex="-1"
+  id="modal-right"
   use:trapFocus
 >
   <slot name="close-button">
@@ -30,3 +31,12 @@
     <slot />
   </div>
 </div>
+
+<!-- Experimental support for foldable devices -->
+<style lang="scss">
+  @media (horizontal-viewport-segments: 2) {
+    #modal-right {
+      width: 50%;
+    }
+  }
+</style>
diff --git a/src/UI/BigComponents/ThemesList.svelte b/src/UI/BigComponents/ThemesList.svelte
index b8811ffc72..4a6f4ec966 100644
--- a/src/UI/BigComponents/ThemesList.svelte
+++ b/src/UI/BigComponents/ThemesList.svelte
@@ -24,7 +24,7 @@
 
 <section class="w-full">
   <slot name="title" />
-  <div class="gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
+  <div class="theme-list gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
     {#each filteredThemes as theme (theme.id)}
       {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
         <!-- TODO: doesn't work if first theme is hidden -->
diff --git a/src/index.css b/src/index.css
index a52826b1bd..59319e214d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,50 +12,48 @@
 @tailwind utilities;
 
 :root {
-    /* 
+  /* 
     * The main colour scheme of mapcomplete is configured here.
     * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these.
     */
 
-    /* Main color of the application: the background and text colours */
-    --background-color: white;
-    /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */
-    --foreground-color: black;
+  /* Main color of the application: the background and text colours */
+  --background-color: white;
+  /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */
+  --foreground-color: black;
 
-    /* A colour scheme to indicate an error or warning */
-    --alert-color: #fee4d1;
-    --alert-foreground-color: var(--foreground-color);
+  /* A colour scheme to indicate an error or warning */
+  --alert-color: #fee4d1;
+  --alert-foreground-color: var(--foreground-color);
 
-    --low-interaction-background: #eeeeee;
-    --low-interaction-foreground: black;
-    --low-interaction-contrast: #ff00ff;
+  --low-interaction-background: #eeeeee;
+  --low-interaction-foreground: black;
+  --low-interaction-contrast: #ff00ff;
 
-    --interactive-background: #dddddd;
-    --interactive-foreground: black;
-    --interactive-contrast: #ff00ff;
+  --interactive-background: #dddddd;
+  --interactive-foreground: black;
+  --interactive-contrast: #ff00ff;
 
-    --button-background: black;
-    --button-foreground: white;
+  --button-background: black;
+  --button-foreground: white;
 
-    /**
+  /**
      * Base colour of interactive elements, mainly the 'subtle button'
      * @deprecated
      */
-    --subtle-detail-color: #dbeafe;
-    --subtle-detail-color-contrast: black;
-    --subtle-detail-color-light-contrast: lightgrey;
+  --subtle-detail-color: #dbeafe;
+  --subtle-detail-color-contrast: black;
+  --subtle-detail-color-light-contrast: lightgrey;
 
+  --catch-detail-color: black; /*#3a3aeb;*/
+  --catch-detail-foregroundcolor: white;
+  --catch-detail-color-contrast: #fb3afb;
 
-    --catch-detail-color: black; /*#3a3aeb;*/
-    --catch-detail-foregroundcolor: white;
-    --catch-detail-color-contrast: #fb3afb;
+  --image-carousel-height: 350px;
 
-
-    --image-carousel-height: 350px;
-
-    /** Technical value, used by icon.svelte
+  /** Technical value, used by icon.svelte
      */
-    --svg-color: #000000;
+  --svg-color: #000000;
 }
 
 /***********************************************************************\
@@ -63,65 +61,64 @@
 \***********************************************************************/
 html,
 body {
-    height: 100%;
-    min-height: 100vh;
-    min-height: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background-color: var(--background-color);
-    color: var(--foreground-color);
-    font-family: "Helvetica Neue", Arial, sans-serif;
+  height: 100%;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+  margin: 0;
+  padding: 0;
+  background-color: var(--background-color);
+  color: var(--foreground-color);
+  font-family: "Helvetica Neue", Arial, sans-serif;
 }
 
 svg,
 img {
-    box-sizing: content-box;
-    width: 100%;
-    height: 100%;
+  box-sizing: content-box;
+  width: 100%;
+  height: 100%;
 }
 
 li {
-    margin-left: 0.5em;
-    padding-left: 0.2em;
-    margin-top: 0.1em;
+  margin-left: 0.5em;
+  padding-left: 0.2em;
+  margin-top: 0.1em;
 }
 
 li::marker {
-    content: "•";
+  content: "•";
 }
 
 h1 {
-    font-size: xx-large;
-    margin-top: 0.6em;
-    margin-bottom: 0.4em;
-    font-weight: bold;
+  font-size: xx-large;
+  margin-top: 0.6em;
+  margin-bottom: 0.4em;
+  font-weight: bold;
 }
 
-
 h2 {
-    font-size: x-large;
-    margin-top: 0.5em;
-    margin-bottom: 0.3em;
-    font-weight: bold;
+  font-size: x-large;
+  margin-top: 0.5em;
+  margin-bottom: 0.3em;
+  font-weight: bold;
 }
 
 h3 {
-    font-size: larger;
-    margin-top: 0.6em;
-    margin-bottom: 0;
-    font-weight: bold;
+  font-size: larger;
+  margin-top: 0.6em;
+  margin-bottom: 0;
+  font-weight: bold;
 }
 
 p {
-    padding-top: 0.1em;
+  padding-top: 0.1em;
 }
 
 input {
-    color: var(--foreground-color);
+  color: var(--foreground-color);
 }
 
-input[type=text] {
-    width: 100%;
+input[type="text"] {
+  width: 100%;
 }
 
 /************************* BIG CATEGORIES ********************************/
@@ -131,35 +128,34 @@ input[type=text] {
  * and some interactive elements
  */
 
-
 .subtle-background {
-    background: var(--subtle-detail-color);
-    color: var(--subtle-detail-color-contrast);
+  background: var(--subtle-detail-color);
+  color: var(--subtle-detail-color-contrast);
 }
 
 .normal-background {
-    background: var(--background-color);
-    color: var(--foreground-color);
+  background: var(--background-color);
+  color: var(--foreground-color);
 }
 
 .low-interaction {
-    background: var(--low-interaction-background);
-    color: var(--low-interaction-foreground)
+  background: var(--low-interaction-background);
+  color: var(--low-interaction-foreground);
 }
 
 .interactive {
-    background: var(--interactive-background);
-    color: var(--interactive-foreground)
+  background: var(--interactive-background);
+  color: var(--interactive-foreground);
 }
 
 .border-interactive {
-    border: 2px dashed var(--catch-detail-color-contrast);
-    border-radius: 0.5rem;
+  border: 2px dashed var(--catch-detail-color-contrast);
+  border-radius: 0.5rem;
 }
 
 .border-region {
-    border: 2px dashed var(--interactive-background);
-    border-radius: 0.5rem;
+  border: 2px dashed var(--interactive-background);
+  border-radius: 0.5rem;
 }
 
 /******************* Styling of input elements **********************/
@@ -168,246 +164,256 @@ input[type=text] {
  * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
  */
 
-button.small, .button.small {
-    line-height: 1rem;
-    margin: 0;
-    margin-left: 0.5rem;
-    padding: 0.25rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    height: fit-content;
-    font-size: unset;
-    border: 2px solid var(--button-background);
-    border-radius: 0.5rem;
-    font-weight: normal;
-    transition: all 250ms;
-    --tw-text-opacity: 1;
-    --tw-bg-opacity: 1;
-    background: var(--low-interaction-background);
-    color: var(--low-interaction-foreground);
+button.small,
+.button.small {
+  line-height: 1rem;
+  margin: 0;
+  margin-left: 0.5rem;
+  padding: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  height: fit-content;
+  font-size: unset;
+  border: 2px solid var(--button-background);
+  border-radius: 0.5rem;
+  font-weight: normal;
+  transition: all 250ms;
+  --tw-text-opacity: 1;
+  --tw-bg-opacity: 1;
+  background: var(--low-interaction-background);
+  color: var(--low-interaction-foreground);
 }
 
-button, .button {
-    align-items: center;
-    display: inline-flex;
-    line-height: 1.25rem;
-    margin: 0.2rem;
-    padding: 0.4rem;
-    padding-left: 0.6rem;
-    padding-right: 0.6rem;
-    font-size: large;
-    font-weight: bold;
-    border: 2px solid var(--button-background);
-    border-radius: 0.5rem;
-    transition: all 250ms;
-    --tw-text-opacity: 1;
-    --tw-bg-opacity: 1;
-    background: var(--low-interaction-background);
-    color: var(--low-interaction-foreground);
+button,
+.button {
+  align-items: center;
+  display: inline-flex;
+  line-height: 1.25rem;
+  margin: 0.2rem;
+  padding: 0.4rem;
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+  font-size: large;
+  font-weight: bold;
+  border: 2px solid var(--button-background);
+  border-radius: 0.5rem;
+  transition: all 250ms;
+  --tw-text-opacity: 1;
+  --tw-bg-opacity: 1;
+  background: var(--low-interaction-background);
+  color: var(--low-interaction-foreground);
 }
 
 .button-shadow {
-    box-shadow: 0 5px 10px #88888888;
+  box-shadow: 0 5px 10px #88888888;
 }
 
+button.selected,
+.button.selected {
+  background-color: var(--catch-detail-color);
+  border-color: var(--catch-detail-color);
 
-
-button.selected, .button.selected {
-    background-color: var(--catch-detail-color);
-    border-color: var(--catch-detail-color);
-
-    color: var(--catch-detail-foregroundcolor);
+  color: var(--catch-detail-foregroundcolor);
 }
 
-button.selected svg path, .button.selected svg path {
-    fill: var(--catch-detail-foregroundcolor) !important;
+button.selected svg path,
+.button.selected svg path {
+  fill: var(--catch-detail-foregroundcolor) !important;
 }
 
-button:not(.no-image-background):not(.soft) svg path, .button:not(.no-image-background):not(.soft) svg path {
-    fill: var(--interactive-foreground) !important;;
-    transition: all 250ms;
+button:not(.no-image-background):not(.soft) svg path,
+.button:not(.no-image-background):not(.soft) svg path {
+  fill: var(--interactive-foreground) !important;
+  transition: all 250ms;
 }
 
-.interactive button, .interactive .button {
-    background: var(--interactive-background);
-    color: var(--interactive-foreground);
+.interactive button,
+.interactive .button {
+  background: var(--interactive-background);
+  color: var(--interactive-foreground);
 }
 
-button:hover, .button:hover {
-    background-color: var(--catch-detail-color);
-    color: var(--catch-detail-foregroundcolor);
-    border: 2px solid var(--catch-detail-color-contrast);
+button:hover,
+.button:hover {
+  background-color: var(--catch-detail-color);
+  color: var(--catch-detail-foregroundcolor);
+  border: 2px solid var(--catch-detail-color-contrast);
 }
 
-button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
-    background: var(--low-interaction-background);
-    border-radius: 100rem;
+button:hover:not(.no-image-background) img,
+.button:hover:not(.no-image-background) img {
+  background: var(--low-interaction-background);
+  border-radius: 100rem;
 }
 
-
-button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path {
-    fill: var(--catch-detail-foregroundcolor) !important;;
+button:hover:not(.no-image-background) svg path,
+.button:hover:not(.no-image-background) svg path {
+  fill: var(--catch-detail-foregroundcolor) !important;
 }
 
-button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path {
-    fill: var(--low-interaction-foreground) !important;;
+button.disabled:hover:not(.no-image-background) svg path,
+.button.disabled:hover:not(.no-image-background) svg path {
+  fill: var(--low-interaction-foreground) !important;
 }
 
-
-button.primary, .button.primary {
-    color: var(--button-foreground);
-    background: var(--button-background);
+button.primary,
+.button.primary {
+  color: var(--button-foreground);
+  background: var(--button-background);
 }
 
-button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path {
-    fill: var(--button-foreground) !important;;
-    transition: all 250ms;
+button.primary:not(.no-image-background) svg path,
+.button.primary:not(.no-image-background) svg path {
+  fill: var(--button-foreground) !important;
+  transition: all 250ms;
 }
 
-
-button.disabled, .button.disabled {
-    cursor: default;
-    border: 2px dashed var(--button-background);
-    background: unset;
-    color: unset;
-    box-shadow: none;
+button.disabled,
+.button.disabled {
+  cursor: default;
+  border: 2px dashed var(--button-background);
+  background: unset;
+  color: unset;
+  box-shadow: none;
 }
 
-
-button.disabled:hover, .button.disabled:hover {
-    cursor: default;
-    border: 2px dashed var(--button-background);
-    background: unset;
-    color: unset;
+button.disabled:hover,
+.button.disabled:hover {
+  cursor: default;
+  border: 2px dashed var(--button-background);
+  background: unset;
+  color: unset;
 }
 
 button.link {
-    border: none;
-    text-decoration: underline;
-    background-color: unset;
+  border: none;
+  text-decoration: underline;
+  background-color: unset;
 }
 
 button.link:hover {
-    color:unset;
+  color: unset;
 }
 
-.interactive button.disabled svg path, .interactive .button.disabled svg path {
-    fill: var(--interactive-foreground) !important;;
+.interactive button.disabled svg path,
+.interactive .button.disabled svg path {
+  fill: var(--interactive-foreground) !important;
 }
 
-
-.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path {
-    fill: var(--low-interaction-foreground) !important;;
+.low-interaction button.disabled svg path,
+.low-interaction .button.disabled svg path {
+  fill: var(--low-interaction-foreground) !important;
 }
 
-.normal-background button.disabled svg path, .normal-background .button.disabled svg path {
-    fill: var(--foreground-color) !important;
+.normal-background button.disabled svg path,
+.normal-background .button.disabled svg path {
+  fill: var(--foreground-color) !important;
 }
 
-
 .links-w-full a:not(.weblate-link) {
-    display: flex;
-    column-gap: 0.25rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    width: 100%;
+  display: flex;
+  column-gap: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  width: 100%;
 }
 
-button.soft, .button.soft {
-    border: 2px solid var(--interactive-background);
-    margin: 0;
+button.soft,
+.button.soft {
+  border: 2px solid var(--interactive-background);
+  margin: 0;
 }
 
-button.soft:hover, .button.soft:hover {
-    background-color: var(--interactive-background);
-    color: var(--interactive-foreground);
-    border: 2px solid var(--catch-detail-color-contrast);
+button.soft:hover,
+.button.soft:hover {
+  background-color: var(--interactive-background);
+  color: var(--interactive-foreground);
+  border: 2px solid var(--catch-detail-color-contrast);
 }
 
 .links-as-button a {
-    /*
+  /*
     * Let a 'link' mimick a button, but not entirely
     */
-    padding: 3px;
-    margin: 0;
-    background: var(--low-interaction-background);
-    color: var(--low-interaction-foreground);
-    border: 2px solid var(--interactive-background);
-    border-radius: 0.5rem;
+  padding: 3px;
+  margin: 0;
+  background: var(--low-interaction-background);
+  color: var(--low-interaction-foreground);
+  border: 2px solid var(--interactive-background);
+  border-radius: 0.5rem;
 }
 
 .links-as-button a:hover {
-    background-color: var(--interactive-background);
-    color: var(--interactive-foregroundcolor);
-    border-color: var(--catch-detail-color-contrast);
+  background-color: var(--interactive-background);
+  color: var(--interactive-foregroundcolor);
+  border-color: var(--catch-detail-color-contrast);
 }
 
 .links-as-button a:hover svg path {
-    fill: var(--catch-detail-foregroundcolor) !important;
+  fill: var(--catch-detail-foregroundcolor) !important;
 }
 
 select {
-    border: 2px solid #00000000;
-    color: var(--foreground-color) !important;
-    background-color: var(--low-interaction-background) !important;
+  border: 2px solid #00000000;
+  color: var(--foreground-color) !important;
+  background-color: var(--low-interaction-background) !important;
 }
 
 select:hover {
-    border-color: var(--catch-detail-color-contrast);
+  border-color: var(--catch-detail-color-contrast);
 }
 
-
-.neutral-label{
-    /** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
+.neutral-label {
+  /** This label styles as normal text. It's power comes from the many :not(.neutral-label) entries.
      * Placed here for autocompletion
      */
 }
 
 label:not(.neutral-label):not(.button) {
-    /**
+  /**
      * Label should _contain_ the input element
      */
-    border: 2px solid var(--interactive-background);
-    padding: 0.25rem;
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-    border-radius: 0.5rem;
-    background-color: var(--low-interaction-background);
-    width: 100%;
-    box-sizing: border-box;
-    transition: all 250ms;
+  border: 2px solid var(--interactive-background);
+  padding: 0.25rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--low-interaction-background);
+  width: 100%;
+  box-sizing: border-box;
+  transition: all 250ms;
 }
 
 label.button {
-    width: 100%;
+  width: 100%;
 }
 
 label:hover:not(.neutral-label) {
-    background-color: var(--catch-detail-color);
-    color: var(--catch-detail-foregroundcolor);
-    border: 2px solid var(--interactive-contrast)
+  background-color: var(--catch-detail-color);
+  color: var(--catch-detail-foregroundcolor);
+  border: 2px solid var(--interactive-contrast);
 }
 
 label:not(.no-image-background):not(.neutral-label) img {
-    padding: 0.25rem;
-    border-radius: 0.25rem;
-    background: var(--low-interaction-background);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  background: var(--low-interaction-background);
 }
 
 label:not(.neutral-label) svg path {
-    transition: all 250ms;
+  transition: all 250ms;
 }
 
 label:hover:not(.no-image-background):not(.neutral-label) svg path {
-    fill: var(--catch-detail-foregroundcolor) !important;
+  fill: var(--catch-detail-foregroundcolor) !important;
 }
 
 label.checked:not(.neutral-label) {
-    border: 2px solid var(--foreground-color);
+  border: 2px solid var(--foreground-color);
 }
 
 textarea {
-    color: black;
+  color: black;
 }
 
 /************************* OTHER CATEGORIES ********************************/
@@ -418,97 +424,95 @@ textarea {
  */
 
 .thanks {
-    /* The class to indicate 'operation successful' or 'thank you for contributing' */
-    font-weight: bold;
-    border-radius: 1em;
-    margin: 0.25em;
-    text-align: center;
-    padding: 0.25rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    border: 3px dotted #58cd27;
-    background-color: #58cd2722;
+  /* The class to indicate 'operation successful' or 'thank you for contributing' */
+  font-weight: bold;
+  border-radius: 1em;
+  margin: 0.25em;
+  text-align: center;
+  padding: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border: 3px dotted #58cd27;
+  background-color: #58cd2722;
 }
 
 .alert {
-    /* The class to convey important information, e.g. 'invalid', 'something went wrong', 'warning: testmode', ... */
-    background-color: var(--alert-color);
-    color: var(--alert-foreground-color);
-    font-weight: bold;
-    border-radius: 1em;
-    margin: 0.25em;
-    text-align: center;
-    padding: 0.15em 0.3em;
-    border: 2px dotted #ff9143;
+  /* The class to convey important information, e.g. 'invalid', 'something went wrong', 'warning: testmode', ... */
+  background-color: var(--alert-color);
+  color: var(--alert-foreground-color);
+  font-weight: bold;
+  border-radius: 1em;
+  margin: 0.25em;
+  text-align: center;
+  padding: 0.15em 0.3em;
+  border: 2px dotted #ff9143;
 }
 
-
 .warning {
-    /* The class to convey important information, but not as grave as 'alert' */
-    background-color: var(--low-interaction-background);
-    color: var(--alert-foreground-color);
-    font-weight: bold;
-    border-radius: 1em;
-    margin: 0.25em;
-    text-align: center;
-    padding: 0.15em 0.3em;
-    border: 3px dotted #ff9143;
+  /* The class to convey important information, but not as grave as 'alert' */
+  background-color: var(--low-interaction-background);
+  color: var(--alert-foreground-color);
+  font-weight: bold;
+  border-radius: 1em;
+  margin: 0.25em;
+  text-align: center;
+  padding: 0.15em 0.3em;
+  border: 3px dotted #ff9143;
 }
 
 .low-interaction .warning {
-    background-color: var(--interactive-background);
+  background-color: var(--interactive-background);
 }
 
 .information {
-    /* The class to convey important information which does _not_ denote an error... */
-    background-color: var(--low-interaction-background);
-    color: var(--alert-foreground-color);
-    border-radius: 1em;
-    margin: 0.25em;
-    text-align: center;
-    padding: 0.15em 0.3em;
-    border: 3px dotted var(--catch-detail-color-contrast);
+  /* The class to convey important information which does _not_ denote an error... */
+  background-color: var(--low-interaction-background);
+  color: var(--alert-foreground-color);
+  border-radius: 1em;
+  margin: 0.25em;
+  text-align: center;
+  padding: 0.15em 0.3em;
+  border: 3px dotted var(--catch-detail-color-contrast);
 }
 
 .low-interaction .interactive {
-    background-color: var(--interactive-background);
+  background-color: var(--interactive-background);
 }
 
 .subtle {
-    /* For all information that is not important for 99% of the users */
-    color: #666;
-    font-weight: normal;
+  /* For all information that is not important for 99% of the users */
+  color: #666;
+  font-weight: normal;
 }
 
 .low-interaction .subtle {
-    color: #444;
+  color: #444;
 }
 
 .interactive .subtle {
-    color: #333;
+  color: #333;
 }
 
 .link-underline .subtle a {
-    text-decoration: underline 1px #7193bb88;
-    color: #7193bb;
+  text-decoration: underline 1px #7193bb88;
+  color: #7193bb;
 }
 
-
 .literal-code {
-    /* A codeblock */
-    display: inline-block;
-    background-color: lightgray;
-    padding: 0.1rem;
-    padding-left: 0.35rem;
-    padding-right: 0.35rem;
-    word-break: break-word;
-    color: black;
-    box-sizing: border-box;
-    font-family: monospace;
+  /* A codeblock */
+  display: inline-block;
+  background-color: lightgray;
+  padding: 0.1rem;
+  padding-left: 0.35rem;
+  padding-right: 0.35rem;
+  word-break: break-word;
+  color: black;
+  box-sizing: border-box;
+  font-family: monospace;
 }
 
 .interactive .literal-code {
-    background-color: #b3b3b3;
+  background-color: #b3b3b3;
 }
 
 /************************** UTILITY ************************/
@@ -517,184 +521,181 @@ textarea {
  * Utility classes are there for a specific function to pin down browser behaviour (and cannot be changed)
  */
 
-
 .text-white a {
-    /* Used solely in 'imageAttribution'  and in many themes*/
-    color: var(--background-color);
+  /* Used solely in 'imageAttribution'  and in many themes*/
+  color: var(--background-color);
 }
 
 .bg-black-transparent {
-    background-color: #00000088;
+  background-color: #00000088;
 }
 
 .block-ruby {
-    display: block ruby;
+  display: block ruby;
 }
 
-
 .rounded-left-full {
-    border-bottom-left-radius: 999rem;
-    border-top-left-radius: 999rem;
+  border-bottom-left-radius: 999rem;
+  border-top-left-radius: 999rem;
 }
 
 .rounded-right-full {
-    border-bottom-right-radius: 999rem;
-    border-top-right-radius: 999rem;
+  border-bottom-right-radius: 999rem;
+  border-top-right-radius: 999rem;
 }
 
-
 .no-images img {
-    /* Used solely in 'imageAttribution' and in many themes for the label*/
-    display: none;
+  /* Used solely in 'imageAttribution' and in many themes for the label*/
+  display: none;
 }
 
 .weblate-link {
-    display: inline-block;
-    flex-shrink: 0;
-    margin: 0;
-    padding: 0.25rem;
-    width: 1.2rem;
-    height: 1.2rem;
-    border: unset;
-    border-radius: 5rem;
-    backdrop-filter: var(--low-interaction-background);
+  display: inline-block;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0.25rem;
+  width: 1.2rem;
+  height: 1.2rem;
+  border: unset;
+  border-radius: 5rem;
+  backdrop-filter: var(--low-interaction-background);
 }
 
-
 .no-weblate .weblate-link {
-    display: none !important;
+  display: none !important;
 }
 
 .link-underline a {
-    text-decoration: underline 1px var(--foreground-color);
+  text-decoration: underline 1px var(--foreground-color);
 }
 
 a.link-underline {
-    text-decoration: underline 1px var(--foreground-color);
+  text-decoration: underline 1px var(--foreground-color);
 }
 
 .link-no-underline a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .disable-links a {
-    pointer-events: none;
-    text-decoration: none !important;
-    color: var(--subtle-detail-color-contrast) !important;
+  pointer-events: none;
+  text-decoration: none !important;
+  color: var(--subtle-detail-color-contrast) !important;
 }
 
 .enable-links a {
-    pointer-events: unset;
-    text-decoration: underline !important;
-    color: unset !important;
+  pointer-events: unset;
+  text-decoration: underline !important;
+  color: unset !important;
 }
 
 .disable-links a.must-link,
 .disable-links .must-link a {
-    /* Hide links if they are disabled */
-    display: none;
+  /* Hide links if they are disabled */
+  display: none;
 }
 
-
 .zebra-table tr:nth-child(even) {
-    background-color: #f2f2f2;
+  background-color: #f2f2f2;
 }
 
-
 /************************* MISC ELEMENTS *************************/
 
 .selected svg:not(.noselect *) path.selectable {
-    /* A marker on the map gets the 'selected' class when it's properties are displayed
+  /* A marker on the map gets the 'selected' class when it's properties are displayed
     */
-    stroke: white !important;
-    stroke-width: 20px !important;
-    overflow: visible !important;
-    -webkit-animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
-    -moz-animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
-    animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
+  stroke: white !important;
+  stroke-width: 20px !important;
+  overflow: visible !important;
+  -webkit-animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
+  -moz-animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
+  animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
 }
 
 .selected svg {
-    /* A marker on the map gets the 'selected' class when it's properties are displayed
+  /* A marker on the map gets the 'selected' class when it's properties are displayed
     */
-    overflow: visible !important;
+  overflow: visible !important;
 }
 
 svg.apply-fill path {
-    fill: var(--svg-color)
+  fill: var(--svg-color);
 }
 
 .compass_arrow {
-    width: calc( 2.5rem - 1px ) ; 
-    height: calc( 2.5rem - 1px )
+  width: calc(2.5rem - 1px);
+  height: calc(2.5rem - 1px);
 }
 
 @media (min-width: 640px) {
-    .compass_arrow {
-        width: calc( 2.75rem - 1px ) ;
-        height: calc( 2.75rem - 1px )
-    }
+  .compass_arrow {
+    width: calc(2.75rem - 1px);
+    height: calc(2.75rem - 1px);
+  }
 }
 
-
-
-
 @-webkit-keyframes glowing-drop-shadow {
-    from {
-        filter: drop-shadow(5px 5px 60px rgb(128 128 128 / 0.6));
-    }
-    to {
-        filter: drop-shadow(5px 5px 80px rgb(0.5 0.5 0.5 / 0.8));
-    }
+  from {
+    filter: drop-shadow(5px 5px 60px rgb(128 128 128 / 0.6));
+  }
+  to {
+    filter: drop-shadow(5px 5px 80px rgb(0.5 0.5 0.5 / 0.8));
+  }
 }
 
 @keyframes slide {
-    /* This is the animation on the marker to add a new point - it slides through all the possible presets */
-    from {
-        transform: translateX(0%);
-    }
+  /* This is the animation on the marker to add a new point - it slides through all the possible presets */
+  from {
+    transform: translateX(0%);
+  }
 
-    to {
-        transform: translateX(calc(-100% + 42px));
-    }
+  to {
+    transform: translateX(calc(-100% + 42px));
+  }
 }
 
 .glowing-shadow {
-    -webkit-animation: glowing 1s ease-in-out infinite alternate;
-    -moz-animation: glowing 1s ease-in-out infinite alternate;
-    animation: glowing 1s ease-in-out infinite alternate;
+  -webkit-animation: glowing 1s ease-in-out infinite alternate;
+  -moz-animation: glowing 1s ease-in-out infinite alternate;
+  animation: glowing 1s ease-in-out infinite alternate;
 }
 
 @-webkit-keyframes glowing {
-    from {
-        box-shadow: 0 0 20px 10px #eaaf2588, inset 0 0 0px 1px #eaaf25;
-    }
-    to {
-        box-shadow: 0 0 20px 20px #eaaf2588, inset 0 0 5px 1px #eaaf25;
-    }
+  from {
+    box-shadow: 0 0 20px 10px #eaaf2588, inset 0 0 0px 1px #eaaf25;
+  }
+  to {
+    box-shadow: 0 0 20px 20px #eaaf2588, inset 0 0 5px 1px #eaaf25;
+  }
 }
 
-
 /************************* LEGACY MARKER - CLEANUP BELOW ********************************/
 
-
 .slideshow-item img {
-    /* Legacy: should be replace when the image element is ported to Svelte*/
-    height: var(--image-carousel-height);
-    width: unset;
+  /* Legacy: should be replace when the image element is ported to Svelte*/
+  height: var(--image-carousel-height);
+  width: unset;
 }
 
 .animate-height {
-    /* Legacy: should be replaced by headlessui disclosure in time */
-    transition: max-height 0.5s ease-in-out;
-    overflow-y: hidden;
+  /* Legacy: should be replaced by headlessui disclosure in time */
+  transition: max-height 0.5s ease-in-out;
+  overflow-y: hidden;
 }
 
-
 .min-h-32 {
-    min-height: 8rem;
+  min-height: 8rem;
 }
 
 .max-w-full {
-    max-width: 100%;
+  max-width: 100%;
+}
+
+/************************* Experimental support for foldable devices ********************************/
+@media (horizontal-viewport-segments: 2) {
+  .theme-list {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }

From 4a19be48b2957172da70d484f6f4ed3d62f5bf82 Mon Sep 17 00:00:00 2001
From: Robin van der Linde <robin.vanderlinde@gmail.com>
Date: Wed, 24 Apr 2024 20:18:26 +0200
Subject: [PATCH 2/6] Remove margin from theme buttons for centering

---
 public/css/index-tailwind-output.css    | 4 ++++
 src/UI/BigComponents/ThemeButton.svelte | 2 +-
 src/index.css                           | 4 ++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index af946e3221..194f75757d 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -2440,6 +2440,10 @@ button,
   color: var(--low-interaction-foreground);
 }
 
+.theme-button {
+  margin: 0 !important;
+}
+
 .button-shadow {
   box-shadow: 0 5px 10px #88888888;
 }
diff --git a/src/UI/BigComponents/ThemeButton.svelte b/src/UI/BigComponents/ThemeButton.svelte
index 468c70e954..3f8809ba02 100644
--- a/src/UI/BigComponents/ThemeButton.svelte
+++ b/src/UI/BigComponents/ThemeButton.svelte
@@ -85,7 +85,7 @@
 </script>
 
 {#if theme.id !== personal.id || $unlockedPersonal}
-  <a class={"button w-full text-ellipsis"} href={$href}>
+  <a class={"button theme-button w-full text-ellipsis"} href={$href}>
     <img src={theme.icon} class="m-1 mr-2 block h-11 w-11 sm:m-2 sm:mr-4" alt="" />
     <span class="flex flex-col overflow-hidden text-ellipsis">
       <Tr t={title} />
diff --git a/src/index.css b/src/index.css
index 59319e214d..49247d260d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -204,6 +204,10 @@ button,
   color: var(--low-interaction-foreground);
 }
 
+.theme-button {
+  margin: 0 !important;
+}
+
 .button-shadow {
   box-shadow: 0 5px 10px #88888888;
 }

From 716f5fc9e0dbccf7d05d1bd27d4ef540f05172cd Mon Sep 17 00:00:00 2001
From: Robin van der Linde <robin.vanderlinde@gmail.com>
Date: Wed, 24 Apr 2024 21:02:00 +0200
Subject: [PATCH 3/6] Small CSS cleanup

---
 public/css/index-tailwind-output.css   | 26 ++++++++++++++++++++++----
 src/UI/AllThemesGui.svelte             |  2 +-
 src/UI/BigComponents/ThemesList.svelte |  2 +-
 src/index.css                          | 24 ++++++++++++++++++++----
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 194f75757d..3f4e496765 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -2420,6 +2420,28 @@ button.small,
   color: var(--low-interaction-foreground);
 }
 
+.button.theme-button {
+  margin: 0;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  /* Margin should be removed on larger screens */
+  @media (min-width: 768px) {
+    margin: 0;
+
+    margin-top: 0;
+
+    margin-bottom: 0;
+  }
+  /* Experimental support for foldable devices */
+  @media (horizontal-viewport-segments: 2) {
+    margin: 0;
+
+    margin-top: 0;
+
+    margin-bottom: 0;
+  }
+}
+
 button,
 .button {
   align-items: center;
@@ -2440,10 +2462,6 @@ button,
   color: var(--low-interaction-foreground);
 }
 
-.theme-button {
-  margin: 0 !important;
-}
-
 .button-shadow {
   box-shadow: 0 5px 10px #88888888;
 }
diff --git a/src/UI/AllThemesGui.svelte b/src/UI/AllThemesGui.svelte
index 5c1694fb4b..0809f08389 100644
--- a/src/UI/AllThemesGui.svelte
+++ b/src/UI/AllThemesGui.svelte
@@ -136,7 +136,7 @@
     <UnofficialThemeList search={themeSearchText} {state} />
 
     <div slot="not-logged-in">
-      <button class="w-full" on:click={() => osmConnection.AttemptLogin()}>
+      <button class="m-0 my-2 w-full" on:click={() => osmConnection.AttemptLogin()}>
         <Login class="mr-2 h-6 w-6 " />
         <Tr t={Translations.t.index.logIn} />
       </button>
diff --git a/src/UI/BigComponents/ThemesList.svelte b/src/UI/BigComponents/ThemesList.svelte
index 4a6f4ec966..29ba02ef63 100644
--- a/src/UI/BigComponents/ThemesList.svelte
+++ b/src/UI/BigComponents/ThemesList.svelte
@@ -24,7 +24,7 @@
 
 <section class="w-full">
   <slot name="title" />
-  <div class="theme-list gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
+  <div class="theme-list my-2 gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
     {#each filteredThemes as theme (theme.id)}
       {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
         <!-- TODO: doesn't work if first theme is hidden -->
diff --git a/src/index.css b/src/index.css
index 49247d260d..11c9f1e21b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -184,6 +184,26 @@ button.small,
   color: var(--low-interaction-foreground);
 }
 
+.button.theme-button {
+  margin: 0;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+
+  /* Margin should be removed on larger screens */
+  @media (min-width: 768px) {
+    margin: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  /* Experimental support for foldable devices */
+  @media (horizontal-viewport-segments: 2) {
+    margin: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
 button,
 .button {
   align-items: center;
@@ -204,10 +224,6 @@ button,
   color: var(--low-interaction-foreground);
 }
 
-.theme-button {
-  margin: 0 !important;
-}
-
 .button-shadow {
   box-shadow: 0 5px 10px #88888888;
 }

From dc24a04163453372b99ae8297b4dff828d360e1e Mon Sep 17 00:00:00 2001
From: Robin van der Linde <robin.vanderlinde@gmail.com>
Date: Tue, 30 Apr 2024 13:50:10 +0200
Subject: [PATCH 4/6] Add linerendering (#1903)

---
 .../charging_station/charging_station.json    | 244 +++++++++---------
 .../charging_station.proto.json               |  10 +-
 2 files changed, 133 insertions(+), 121 deletions(-)

diff --git a/assets/layers/charging_station/charging_station.json b/assets/layers/charging_station/charging_station.json
index 305b2f6bd0..38a777db74 100644
--- a/assets/layers/charging_station/charging_station.json
+++ b/assets/layers/charging_station/charging_station.json
@@ -5,12 +5,7 @@
     "nl": "Oplaadpunten",
     "de": "Ladestationen"
   },
-  "description": {
-    "en": "A charging station",
-    "nl": "Oplaadpunten",
-    "ca": "Una estació de càrrega",
-    "de": "Eine Ladestation"
-  },
+  "minzoom": 10,
   "source": {
     "osmTags": {
       "and": [
@@ -25,7 +20,6 @@
       ]
     }
   },
-  "minzoom": 10,
   "title": {
     "render": {
       "en": "Charging station",
@@ -71,103 +65,13 @@
       }
     ]
   },
-  "pointRendering": [
-    {
-      "location": [
-        "point",
-        "centroid"
-      ],
-      "marker": [
-        {
-          "icon": "pin",
-          "color": "#fff"
-        },
-        {
-          "icon": {
-            "render": "./assets/themes/charging_stations/plug.svg",
-            "mappings": [
-              {
-                "if": "bicycle=yes",
-                "then": "./assets/themes/charging_stations/bicycle.svg"
-              },
-              {
-                "if": {
-                  "or": [
-                    "car=yes",
-                    "motorcar=yes"
-                  ]
-                },
-                "then": "./assets/themes/charging_stations/car.svg"
-              }
-            ]
-          }
-        }
-      ],
-      "iconBadges": [
-        {
-          "if": {
-            "or": [
-              "disused:amenity=charging_station",
-              "operational_status=broken"
-            ]
-          },
-          "then": "close:#c22;"
-        },
-        {
-          "if": {
-            "or": [
-              "proposed:amenity=charging_station",
-              "planned:amenity=charging_station"
-            ]
-          },
-          "then": "./assets/layers/charging_station/under_construction.svg"
-        },
-        {
-          "if": {
-            "and": [
-              "bicycle=yes",
-              {
-                "or": [
-                  "motorcar=yes",
-                  "car=yes"
-                ]
-              }
-            ]
-          },
-          "then": "circle:#fff;./assets/themes/charging_stations/car.svg"
-        }
-      ],
-      "anchor": "bottom",
-      "iconSize": "50,50"
-    }
-  ],
-  "lineRendering": [],
-  "presets": [
-    {
-      "tags": [
-        "amenity=charging_station",
-        "motorcar=no",
-        "bicycle=yes"
-      ],
-      "title": {
-        "en": "charging station for electrical bikes",
-        "nl": "oplaadpunt voor elektrische fietsen",
-        "de": "Ladestation für Elektrofahrräder"
-      }
-    },
-    {
-      "tags": [
-        "amenity=charging_station",
-        "motorcar=yes",
-        "bicycle=no"
-      ],
-      "title": {
-        "en": "charging station for cars",
-        "nl": "oplaadstation voor elektrische auto's",
-        "de": "Ladestation für Autos"
-      }
-    }
-  ],
+  "description": {
+    "en": "A charging station",
+    "nl": "Oplaadpunten",
+    "ca": "Una estació de càrrega",
+    "de": "Eine Ladestation"
+  },
+  "#": "no-question-hint-check",
   "tagRenderings": [
     "images",
     {
@@ -2509,6 +2413,109 @@
       }
     }
   ],
+  "lineRendering": [
+    {
+      "color": "black",
+      "width": 2,
+      "fillColor": "#80808080"
+    }
+  ],
+  "pointRendering": [
+    {
+      "location": [
+        "point",
+        "centroid"
+      ],
+      "marker": [
+        {
+          "icon": "pin",
+          "color": "#fff"
+        },
+        {
+          "icon": {
+            "render": "./assets/themes/charging_stations/plug.svg",
+            "mappings": [
+              {
+                "if": "bicycle=yes",
+                "then": "./assets/themes/charging_stations/bicycle.svg"
+              },
+              {
+                "if": {
+                  "or": [
+                    "car=yes",
+                    "motorcar=yes"
+                  ]
+                },
+                "then": "./assets/themes/charging_stations/car.svg"
+              }
+            ]
+          }
+        }
+      ],
+      "iconBadges": [
+        {
+          "if": {
+            "or": [
+              "disused:amenity=charging_station",
+              "operational_status=broken"
+            ]
+          },
+          "then": "close:#c22;"
+        },
+        {
+          "if": {
+            "or": [
+              "proposed:amenity=charging_station",
+              "planned:amenity=charging_station"
+            ]
+          },
+          "then": "./assets/layers/charging_station/under_construction.svg"
+        },
+        {
+          "if": {
+            "and": [
+              "bicycle=yes",
+              {
+                "or": [
+                  "motorcar=yes",
+                  "car=yes"
+                ]
+              }
+            ]
+          },
+          "then": "circle:#fff;./assets/themes/charging_stations/car.svg"
+        }
+      ],
+      "anchor": "bottom",
+      "iconSize": "50,50"
+    }
+  ],
+  "presets": [
+    {
+      "tags": [
+        "amenity=charging_station",
+        "motorcar=no",
+        "bicycle=yes"
+      ],
+      "title": {
+        "en": "charging station for electrical bikes",
+        "nl": "oplaadpunt voor elektrische fietsen",
+        "de": "Ladestation für Elektrofahrräder"
+      }
+    },
+    {
+      "tags": [
+        "amenity=charging_station",
+        "motorcar=yes",
+        "bicycle=no"
+      ],
+      "title": {
+        "en": "charging station for cars",
+        "nl": "oplaadstation voor elektrische auto's",
+        "de": "Ladestation für Autos"
+      }
+    }
+  ],
   "filter": [
     {
       "id": "vehicle-type",
@@ -2714,19 +2721,6 @@
       ]
     }
   ],
-  "deletion": {
-    "softDeletionTags": {
-      "and": [
-        "amenity=",
-        "disused:amenity=charging_station"
-      ]
-    },
-    "neededChangesets": 10
-  },
-  "allowMove": {
-    "enableRelocation": false,
-    "enableImproveAccuracy": true
-  },
   "units": [
     {
       "maxstay": {
@@ -2885,5 +2879,17 @@
       }
     }
   ],
-  "#": "no-question-hint-check"
-}
+  "allowMove": {
+    "enableRelocation": false,
+    "enableImproveAccuracy": true
+  },
+  "deletion": {
+    "softDeletionTags": {
+      "and": [
+        "amenity=",
+        "disused:amenity=charging_station"
+      ]
+    },
+    "neededChangesets": 10
+  }
+}
\ No newline at end of file
diff --git a/assets/layers/charging_station/charging_station.proto.json b/assets/layers/charging_station/charging_station.proto.json
index 56995a9290..4bbdde3f31 100644
--- a/assets/layers/charging_station/charging_station.proto.json
+++ b/assets/layers/charging_station/charging_station.proto.json
@@ -874,7 +874,13 @@
       }
     }
   ],
-  "lineRendering": [],
+  "lineRendering": [
+    {
+      "color": "black",
+      "width": 2,
+      "fillColor": "#80808080"
+    }
+  ],
   "pointRendering": [
     {
       "location": [
@@ -1043,4 +1049,4 @@
     },
     "neededChangesets": 10
   }
-}
+}
\ No newline at end of file

From 1d0f25e75e8a5c42cc617b4c39be262d6fed5882 Mon Sep 17 00:00:00 2001
From: Robin van der Linde <robin.vanderlinde@gmail.com>
Date: Mon, 13 May 2024 23:13:12 +0200
Subject: [PATCH 5/6] Add PMD option to recycling and waste_basket (#1944)

---
 assets/layers/recycling/license_info.json    |  11 +
 assets/layers/recycling/pmd.svg              | 408 +++++++++++++++++++
 assets/layers/recycling/pmd.svg.license      |   2 +
 assets/layers/recycling/recycling.json       |  40 +-
 assets/layers/waste_basket/waste_basket.json |  38 +-
 5 files changed, 484 insertions(+), 15 deletions(-)
 create mode 100644 assets/layers/recycling/pmd.svg
 create mode 100644 assets/layers/recycling/pmd.svg.license

diff --git a/assets/layers/recycling/license_info.json b/assets/layers/recycling/license_info.json
index c4d0f589e2..1d9f7fd524 100644
--- a/assets/layers/recycling/license_info.json
+++ b/assets/layers/recycling/license_info.json
@@ -180,6 +180,17 @@
       "https://github.com/streetcomplete/StreetComplete/blob/master/res/graphics/recycling%20icons/plastic_packaging.svg"
     ]
   },
+  {
+    "path": "pmd.svg",
+    "license": "CC-BY-SA-4.0",
+    "authors": [
+      "Modified from Tobias Zwick"
+    ],
+    "sources": [
+      "https://github.com/streetcomplete/StreetComplete/blob/master/res/graphics/recycling%20icons/cans.svg",
+      "https://github.com/streetcomplete/StreetComplete/blob/master/res/graphics/recycling%20icons/plastic_packaging.svg"
+    ]
+  },
   {
     "path": "printer_cartridges.svg",
     "license": "CC-BY-4.0",
diff --git a/assets/layers/recycling/pmd.svg b/assets/layers/recycling/pmd.svg
new file mode 100644
index 0000000000..86df370db1
--- /dev/null
+++ b/assets/layers/recycling/pmd.svg
@@ -0,0 +1,408 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="0 0 96 96"
+   id="svg38"
+   sodipodi:docname="pmd.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs38" />
+  <sodipodi:namedview
+     id="namedview38"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="12.364583"
+     inkscape:cx="33.199663"
+     inkscape:cy="48"
+     inkscape:window-width="2256"
+     inkscape:window-height="1435"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg38" />
+  <g
+     transform="matrix(-.26716 -.86833 .86833 -.26716 -702.14 310.26)"
+     id="g16">
+    <path
+       d="m57.814 896.06c-5.7454-10.176-13.781-18.344-23.6-23.6"
+       fill="none"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-width="2.3839"
+       id="path1" />
+    <path
+       d="m62.871 891c-5.9561-10.261-13.848-18.547-23.6-23.6"
+       fill="none"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-width="2.3839"
+       id="path2" />
+    <path
+       d="m67.928 885.94c-5.5418-10.105-13.707-18.135-23.6-23.6"
+       fill="none"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-width="2.3839"
+       id="path3" />
+    <path
+       d="m72.985 880.89c-5.5418-10.105-13.707-18.135-23.6-23.6"
+       fill="none"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-width="2.3839"
+       id="path4" />
+    <path
+       d="m74.686 847.44c-7.4687 2.9602-17.238-1.3052-22.757 4.2143l-2.5286 2.5286c-1.6857 1.6857-0.95453 2.556-0.84285 4.2143-1.6583-0.11167-2.5286-0.84285-4.2143 0.84285s-0.95453 2.556-0.84285 4.2143c-1.6583-0.11168-2.5286-0.84285-4.2143 0.84285s-0.74134 2.4511-0.84285 4.2143c-1.6857 0-2.5286-0.84285-4.2143 0.84285-1.0691 0.97442-0.84285 2.5286-0.84285 4.2143-1.6857 0-12.409 9.0138-15.171 11.8-5.5239 5.5721-11.591 11.595-12.643 14.328-1.4913 7.6991 17.223 26.021 25.286 25.286 2.975-1.1891 8.9062-7.1954 14.328-12.643 2.7112-2.7237 11.8-13.486 11.8-15.171 1.6857 0 3.0607 0.31066 4.2143-0.84285 1.6857-1.6857 0.84285-2.5286 0.84285-4.2143 1.6857 0 2.5286 0.84285 4.2143-0.84285s0.95453-2.556 0.84285-4.2143c1.6583 0.11168 2.5286 0.84285 4.2143-0.84285s0.95453-2.556 0.84285-4.2143c1.6583 0.11168 2.5286 0.84285 4.2143-0.84285l2.5286-2.5286c5.3836-5.3836 1.6551-15.432 4.2143-22.757l3.3714-3.3714-8.4285-8.4285z"
+       fill="#9ad8f2"
+       fill-opacity=".71717"
+       stroke="#8ac6de"
+       stroke-opacity=".66667"
+       stroke-width="2.3839"
+       id="path5" />
+    <path
+       d="m48.558 858.4c5.7454 10.176 13.781 18.344 23.6 23.6"
+       fill="none"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-opacity=".66667"
+       stroke-width="2.3839"
+       id="path6" />
+    <path
+       d="m43.501 863.46c5.9561 10.261 13.848 18.547 23.6 23.6"
+       fill="none"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-opacity=".66667"
+       stroke-width="2.3839"
+       id="path7" />
+    <path
+       d="m38.444 868.51c5.5418 10.105 13.707 18.135 23.6 23.6"
+       fill="none"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-opacity=".66667"
+       stroke-width="2.3839"
+       id="path8" />
+    <path
+       d="m33.387 873.57c5.5418 10.105 13.707 18.135 23.6 23.6"
+       fill="none"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-opacity=".66667"
+       stroke-width="2.3839"
+       id="path9" />
+    <ellipse
+       transform="rotate(45)"
+       cx="658"
+       cy="542.25"
+       rx="9.5358"
+       ry="3.1576"
+       fill="#70b9d7"
+       style="paint-order:fill markers stroke"
+       id="ellipse9" />
+    <path
+       d="m7.785 900.16c5.8047-6.5666 9.7972-13.041 24.285-22.599 2.8498 4.7631 7.5822 10.619 12.537 15.803-13.334-11.836-27.547 1.3485-36.822 6.7955z"
+       fill="#eef7fb"
+       fill-opacity=".8"
+       id="path10" />
+    <path
+       d="m52.859 854.49c3.5192-5.4649 16.92-1.2746 23.842-4.8059-6.9841 7.1933-20.674 7.5327-20.418 10.257-2.0215-2.7206-3.1456-4.0854-3.4247-5.4508z"
+       fill="#eef7fb"
+       fill-opacity=".8"
+       id="path11" />
+    <path
+       d="m47.434 860.31c-0.75358-0.14879-2.9459 0.94658-3.1057 2.0303 0.80223-0.87911 14.944 13.42 16.577 14.958-4.9558-5.6986-10.258-11.424-13.471-16.988z"
+       fill="#eef7fb"
+       fill-opacity=".8"
+       id="path12" />
+    <path
+       d="m42.912 865.25c-0.75358-0.14878-2.9086 0.98383-3.0684 2.0676 0.80223-0.87911 14.907 13.383 16.54 14.921-4.9558-5.6986-10.258-11.424-13.471-16.988z"
+       fill="#eef7fb"
+       fill-opacity=".8"
+       id="path13" />
+    <path
+       d="m37.75 870.52c-0.75358-0.14879-2.7596 1.0583-2.9194 2.142 0.80223-0.87911 14.758 13.308 16.391 14.846-4.9558-5.6986-10.258-11.424-13.471-16.988z"
+       fill="#eef7fb"
+       fill-opacity=".8"
+       id="path14" />
+    <path
+       d="m88.46 842.07a7.1518 1.192 45 0 0-5.7123-4.2768l-0.06256-0.0625-5.0571 5.0571a7.1518 1.192 45 0 0 4.2143 5.9 7.1518 1.192 45 0 0 5.9 4.2143l5.0571-5.0571-0.06091-0.0609a7.1518 1.192 45 0 0-4.2785-5.7139z"
+       fill="#3e66a2"
+       style="paint-order:fill markers stroke"
+       id="path15" />
+    <ellipse
+       transform="rotate(45)"
+       cx="657.94"
+       cy="534.05"
+       rx="7.1891"
+       ry="1.341"
+       fill="#7d9dcd"
+       style="paint-order:fill markers stroke"
+       id="ellipse15" />
+    <path
+       d="m31.385 923.76c-5.5418-10.105-13.707-18.135-23.6-23.6 4.6475 10.013 12.959 17.583 23.6 23.6z"
+       fill="#8ac6de"
+       fill-opacity=".66667"
+       stroke="#8ac6de"
+       stroke-linecap="round"
+       stroke-linejoin="round"
+       stroke-opacity=".66667"
+       stroke-width="2.3849"
+       id="path16" />
+  </g>
+  <g
+     transform="matrix(1.1123 0 0 1.1123 -80.024 -797.23)"
+     id="g28">
+    <path
+       d="m77.219 763.36 26.408-0.91079-2.4743 8.144 1.0972 27.424-25.782-4.4246c-1.1581-6.5947 8.7192-17.809 8.7192-17.809 0.01276-0.0638-3.9046-7.1545-7.9678-12.424z"
+       fill="#c988ad"
+       style="paint-order:normal"
+       id="path17" />
+    <path
+       d="m102.25 798.02 18.191-9.0442c-0.80764-11.237-4.0408-21.11 0.029-35.091l-16.843 8.5669-2.4743 8.144z"
+       fill="#b06b92"
+       id="path18" />
+    <path
+       d="m101.85 788.06 17.474-7.9c-0.35142-5.6907-1.4488-11.754-0.6013-16.846l-17.565 7.2829"
+       fill="#c0c0c0"
+       id="path19" />
+    <path
+       d="m80.361 767.64 20.792 2.9536 0.69278 17.463-22.381-4.0918c1.6275-3.604 5.7219-8.1802 5.7219-8.1802z"
+       fill="#eee"
+       id="path20" />
+    <path
+       d="m83.935 747.62-1.0494-6.1002 23.25-2.5784 1.2264 6.7919z"
+       fill="#6f9adb"
+       id="path21" />
+    <path
+       d="m107.36 745.74 13.108 8.149-16.843 8.5669-19.692-14.829z"
+       fill="#944f76"
+       id="path22" />
+    <path
+       d="m103.63 762.45 16.843-8.5669-24.069-3.1814 7.2268 11.748"
+       fill="#a55883"
+       id="path23" />
+    <path
+       d="m77.219 763.36 6.7164-15.74 23.427-1.8868-3.735 16.716z"
+       fill="#d19aba"
+       id="path24" />
+    <g
+       transform="rotate(-10.439,120.47,753.88)"
+       id="g25">
+      <path
+         transform="translate(0,738.52)"
+         d="m94.477 6.7129-7.4102 4.7559 1.8418 2.3164c0.91641 0.91602 1.9091 1.5023 3.2793 1.5039 2.6726-3.4e-5 4.8393-1.9481 4.8398-4.3516-0.0021-0.78748-0.42923-1.341-0.88086-2.0156z"
+         fill="#3e66a2"
+         style="paint-order:normal"
+         id="path25" />
+      <ellipse
+         cx="90.887"
+         cy="747.78"
+         rx="4.4024"
+         ry="4.3525"
+         fill="#6f9adb"
+         style="paint-order:normal"
+         id="ellipse25" />
+    </g>
+    <path
+       d="m85.187 775.79 16.188-1.2665-21.014-6.8778z"
+       fill-opacity=".17172"
+       id="path26" />
+    <path
+       d="m101.15 770.6 19.317-16.711-16.843 8.5669z"
+       fill-opacity=".18182"
+       id="path27" />
+    <path
+       d="m85.648 777.54-4.4194 5.8336 17.766-6.7175z"
+       fill="#fff"
+       fill-opacity=".73232"
+       id="path28" />
+  </g>
+  <g
+     transform="matrix(.82351 0 0 .82351 21.061 23.612)"
+     id="g38">
+    <path
+       d="m15.95 56.074c7.5182-2.2076 24.999 0.02776 35.579-7.9388 0 0 2.3102-1.5418 10.652-10.917l1.3708-8.2421-4.752-3.1708 2.1503-2.5665c15.101 5.4037 20.445 14.983 27.687 20.463l-1.0835 4.9046c-10.825 5.8046-12.876 3.6394-24.167 11.251l-25.845 23.622z"
+       fill="#8dcdd1"
+       id="path29" />
+    <path
+       d="m46.357 50.999c0.26529 6.6833 13.8 4.6132 17.029 8.8587l-25.845 23.622-21.591-27.405s2.2076-2.9727 8.8628-3.7314c6.8399-0.85107 15.701 2.3438 21.544-1.3443z"
+       fill="#71c0c6"
+       id="path30" />
+    <path
+       d="m62.433 60.678-24.892 22.801-5.5855-7.8391c10.943 1.8616 21.53-9.951 30.478-14.962z"
+       fill="#55a6ac"
+       id="path31" />
+    <path
+       d="m37.79 83.174c-2.9785 2.767-11.212-0.86567-18.389-8.1137-7.1776-7.248-7.7082-15.889-4.7297-18.656 2.9785-2.767 8.3382 1.3881 15.516 8.6361 7.1776 7.248 10.582 15.367 7.6032 18.134z"
+       fill="#e7e7e7"
+       id="path32" />
+    <path
+       d="m22.633 55c4.9351-2.1761 10.197 1.2634 18.302 0.94601-6.5255 2.3199-5.4533 2.7434-10.072 6.4255-2.3078-3.3285-5.1894-5.5095-8.2305-7.3715z"
+       fill="#97e1e6"
+       id="path33" />
+    <path
+       d="m62.181 37.218c1.5905 8.4175 8.5034 11.232 14.563 14.946l3.5725-3.0639 7.2373-0.49403 1.0835-4.9046-25.085-14.725z"
+       fill="#6db7bd"
+       id="path34" />
+    <path
+       d="m56.984 27.167 3.9658-3.9281 23.8 20.097-3.5175 2.8367c-8.7898-5.0846-15.778-13.408-24.248-19.005z"
+       fill="#bae0e4"
+       id="path35" />
+    <path
+       d="m60.95 23.239c7.6394 2.7937 15.589 6.3747 27.687 20.463l-3.8869-0.36599z"
+       fill="#509fa5"
+       id="path36" />
+    <ellipse
+       transform="matrix(.83423 -.55141 .57775 .81621 0 0)"
+       cx="-22.969"
+       cy="73.621"
+       rx="4.8244"
+       ry="10.02"
+       fill="#a6a6a6"
+       id="ellipse36" />
+    <rect
+       transform="matrix(.83423 -.55141 .57775 .81621 0 0)"
+       x="-31.436"
+       y="64.611"
+       width="8.6014"
+       height="17.751"
+       fill="#a6a6a6"
+       id="rect36" />
+    <ellipse
+       transform="matrix(.83423 -.55141 .57775 .81621 0 0)"
+       cx="-31.491"
+       cy="73.592"
+       rx="3.744"
+       ry="8.9808"
+       fill="#e7e7e7"
+       id="ellipse37" />
+    <ellipse
+       transform="matrix(.83423 -.55141 .57775 .81621 0 0)"
+       cx="-31.527"
+       cy="73.573"
+       rx="2.6582"
+       ry="6.0968"
+       fill="#757575"
+       id="ellipse38" />
+    <path
+       d="m16.679 65.766-1.8666 1.8918c5.1859 1.9907 9.7764 7.5924 10.218 14.287l3.0072-0.55906c-0.34219-6.3881-4.7385-13.669-11.359-15.62z"
+       color="#000000"
+       color-rendering="auto"
+       dominant-baseline="auto"
+       fill="#d7d7d7"
+       image-rendering="auto"
+       shape-rendering="auto"
+       solid-color="#000000"
+       stop-color="#000000"
+       style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"
+       id="path38" />
+  </g>
+  <g
+     transform="matrix(0.83287549,0,0,0.83287549,42.83339,-760.15515)"
+     id="g15">
+    <path
+       d="m 32.406,1002.6 c -10.051,-3.4923 -19.236,-3.306 -20.516,0.4162 l -0.46436,1.338 c -1.2801,3.7222 5.0456,11.851 15.096,15.344 10.051,3.4923 20.02,1.0254 21.3,-2.6968 l 0.46436,-1.338 c 1.2801,-3.7223 -5.8299,-9.5708 -15.881,-13.063 z"
+       fill="#8d8c7f"
+       style="paint-order:fill markers stroke"
+       id="path1-3" />
+    <path
+       d="m 26.758,963.9 -2.8586,8.4361 -1.3932,14.6 -7.3426,10.678 -1.8622,5.4151 c -1.3813,4.3193 6.1294,10.605 14.298,13.451 8.1686,2.8469 17.995,2.9579 19.428,-1.211 l 2.0224,-5.8807 1.3683,-12.341 7.3393,-12.947 2.7091,-7.9096 z"
+       fill="#c2c2c0"
+       style="paint-order:fill markers stroke"
+       id="path2-6" />
+    <path
+       d="m 46.888,960.52 c -10.051,-3.4923 -19.236,-3.306 -20.516,0.4162 l -0.46436,1.338 c -1.2801,3.7222 5.2505,11.256 15.301,14.748 10.051,3.4923 19.815,1.6211 21.095,-2.1011 l 0.46436,-1.338 c 1.2801,-3.7222 -5.8299,-9.5707 -15.881,-13.063 z"
+       fill="#8d8c7f"
+       style="paint-order:fill markers stroke"
+       id="path3-7" />
+    <ellipse
+       transform="matrix(0.9446,0.32822,-0.3252,0.94564,0,0)"
+       cx="356.70999"
+       cy="899.98999"
+       rx="16.686001"
+       ry="6.4477"
+       fill="#5f553c"
+       style="paint-order:fill markers stroke"
+       id="ellipse3" />
+    <g
+       transform="matrix(0.62753,0.21805,-0.28972,0.84245,321.57,-114)"
+       id="g5">
+      <path
+         d="m 108.06,1267.5 0.96521,3.0021 c 10.298,8.8536 39.616,9.1927 52.122,0 l 0.86868,-3.0021 c -13.552,9.4413 -42.55,8.7559 -53.955,0 z"
+         fill="#8d8c7f"
+         id="path4-5" />
+      <path
+         d="m 108.06,1267.5 0.96521,-3.0021 c 11.373,8.003 40.267,8.5058 52.122,0 l 0.86868,3.0021 c -12.75,9.2549 -41.701,9.1372 -53.955,0 z"
+         fill="#e1e1df"
+         id="path5-3" />
+    </g>
+    <g
+       transform="matrix(0.62753,0.21805,-0.28972,0.84245,319.83,-108.94)"
+       id="g7">
+      <path
+         d="m 108.06,1267.5 0.96521,3.0021 c 10.298,8.8536 39.616,9.1927 52.122,0 l 0.86868,-3.0021 c -13.552,9.4413 -42.55,8.7559 -53.955,0 z"
+         fill="#8d8c7f"
+         id="path6-5" />
+      <path
+         d="m 108.06,1267.5 0.96521,-3.0021 c 11.373,8.003 40.267,8.5058 52.122,0 l 0.86868,3.0021 c -12.75,9.2549 -41.701,9.1372 -53.955,0 z"
+         fill="#e1e1df"
+         id="path7-6" />
+    </g>
+    <g
+       transform="matrix(0.62753,0.21805,-0.28972,0.84245,318.09,-103.88)"
+       id="g9">
+      <path
+         d="m 108.06,1267.5 0.96521,3.0021 c 10.298,8.8536 39.616,9.1927 52.122,0 l 0.86868,-3.0021 c -13.552,9.4413 -42.55,8.7559 -53.955,0 z"
+         fill="#8d8c7f"
+         id="path8-2" />
+      <path
+         d="m 108.06,1267.5 0.96521,-3.0021 c 11.373,8.003 40.267,8.5058 52.122,0 l 0.86868,3.0021 c -12.75,9.2549 -41.701,9.1372 -53.955,0 z"
+         fill="#e1e1df"
+         id="path9-9" />
+    </g>
+    <g
+       transform="matrix(0.62753,0.21805,-0.28972,0.84245,316.35,-98.822)"
+       id="g11">
+      <path
+         d="m 108.06,1267.5 0.96521,3.0021 c 10.298,8.8536 39.616,9.1927 52.122,0 l 0.86868,-3.0021 c -13.552,9.4413 -42.55,8.7559 -53.955,0 z"
+         fill="#8d8c7f"
+         id="path10-1" />
+      <path
+         d="m 108.06,1267.5 0.96521,-3.0021 c 11.373,8.003 40.267,8.5058 52.122,0 l 0.86868,3.0021 c -12.75,9.2549 -41.701,9.1372 -53.955,0 z"
+         fill="#e1e1df"
+         id="path11-2" />
+    </g>
+    <g
+       transform="matrix(0.62753,0.21805,-0.28972,0.84245,333.44,-74.093)"
+       id="g12">
+      <path
+         d="m 71.626,1223.6 0.96521,3.0021 c 10.298,8.8536 39.616,9.1927 52.122,0 l 0.86868,-3.0021 c -13.552,9.4413 -42.55,8.7559 -53.955,0 z"
+         fill="#8d8c7f"
+         id="path12-7" />
+    </g>
+    <path
+       d="m 15.202,997.63 1.4755,-2.3187 c 4.8181,9.222 22.804,15.946 32.708,11.365 l -0.32464,2.7185 c -10.682,5.0168 -28.816,-1.3953 -33.858,-11.765 z"
+       fill="#e1e1df"
+       id="path13-0" />
+    <path
+       d="m 26.174,965.16 c 1.0575,2.3034 3.9059,5.6444 5.2903,6.626 l -12.456,40.18 c -2.2438,-2.2859 -5.2521,-3.2052 -5.99,-8.1831 z"
+       fill="#ffffff"
+       fill-opacity="0.38384"
+       id="path14-9" />
+    <path
+       d="m 36.69,975.19 -13.222,39.374 c 8.0057,-13.978 13.836,-29.131 19.648,-36.808 z"
+       fill="#ffffff"
+       fill-opacity="0.38384"
+       id="path15-3" />
+  </g>
+</svg>
diff --git a/assets/layers/recycling/pmd.svg.license b/assets/layers/recycling/pmd.svg.license
new file mode 100644
index 0000000000..964ccb3a1f
--- /dev/null
+++ b/assets/layers/recycling/pmd.svg.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Modified from Tobias Zwick
+SPDX-License-Identifier: CC-BY-SA-4.0
\ No newline at end of file
diff --git a/assets/layers/recycling/recycling.json b/assets/layers/recycling/recycling.json
index 2d359d3a66..81e21b4636 100644
--- a/assets/layers/recycling/recycling.json
+++ b/assets/layers/recycling/recycling.json
@@ -238,6 +238,15 @@
           },
           "then": "./assets/layers/recycling/plastic.svg"
         },
+        {
+          "if": {
+            "and": [
+              "_waste_amount>1",
+              "recycling:pmd=yes"
+            ]
+          },
+          "then": "./assets/layers/recycling/pmd.svg"
+        },
         {
           "if": {
             "and": [
@@ -465,6 +474,15 @@
                 },
                 "then": "./assets/layers/recycling/plastic.svg"
               },
+              {
+                "if": {
+                  "and": [
+                    "_waste_amount=1",
+                    "recycling:pmd=yes"
+                  ]
+                },
+                "then": "./assets/layers/recycling/pmd.svg"
+              },
               {
                 "if": {
                   "and": [
@@ -640,6 +658,7 @@
             "recycling:plastic_bottles=",
             "recycling:plastic_packaging=",
             "recycling:plastic=",
+            "recycling:pmd=",
             "recycling:printer_cartridges=",
             "recycling:scrap_metal=",
             "recycling:shoes=",
@@ -1093,6 +1112,18 @@
             "class": "medium"
           }
         },
+        {
+          "if": "recycling:pmd=yes",
+          "ifnot": "recycling:pmd=",
+          "then": {
+            "en": "Plastic packaging, metal packaging and drink cartons (PMD) can be recycled here",
+            "nl": "Plastic verkpakkingen, metalen verkpakkingen en drankpakken kunnen hier gerecycled worden"
+          },
+          "icon": {
+            "path": "./assets/layers/recycling/pmd.svg",
+            "class": "medium"
+          }
+        },
         {
           "if": "recycling:printer_cartridges=yes",
           "ifnot": "recycling:printer_cartridges=",
@@ -1571,6 +1602,13 @@
           },
           "osmTags": "recycling:plastic=yes"
         },
+        {
+          "question": {
+            "en": "Recycling of plastic packaging, metal packaging and drink cartons (PMD)",
+            "nl": "Recycling van plastic verkpakkingen, metalen verkpakkingen en drankpakken (PMD)"
+          },
+          "osmTags": "recycling:pmd=yes"
+        },
         {
           "question": {
             "en": "Recycling of scrap metal",
@@ -1672,4 +1710,4 @@
     "enableRelocation": true,
     "enableImproveAccuracy": true
   }
-}
+}
\ No newline at end of file
diff --git a/assets/layers/waste_basket/waste_basket.json b/assets/layers/waste_basket/waste_basket.json
index 2c572b62ed..d5d3597978 100644
--- a/assets/layers/waste_basket/waste_basket.json
+++ b/assets/layers/waste_basket/waste_basket.json
@@ -206,6 +206,13 @@
             "cs": "Odpadkový koš na plasty"
           }
         },
+        {
+          "if": "waste=pmd",
+          "then": {
+            "en": "A waste basket for plastic packaging, metal packaging and drink cartons (PMD)",
+            "nl": "Een vuilnisbak voor plastic verpakkingen, metalen verpakkingen en drankpakken (PMD)"
+          }
+        },
         {
           "if": "waste=paper",
           "then": {
@@ -237,8 +244,8 @@
       },
       "condition": {
         "or": [
-          "waste=dog_excrement",
-          "waste=trash",
+          "waste~i~.*dog_excrement.*",
+          "waste~i~.*trash.*",
           "waste="
         ]
       },
@@ -397,6 +404,20 @@
             "cs": "Odpadkový koš na plast"
           },
           "osmTags": "waste~i~.*plastic.*"
+        },
+        {
+          "question": {
+            "en": "Waste basket for plastic packaging, metal packaging and drink cartons (PMD)",
+            "nl": "Vuilnisbak voor plastic verpakkingen, metalen verpakkingen en drankpakken (PMD)"
+          },
+          "osmTags": "waste~i~.*pmd.*"
+        },
+        {
+          "question": {
+            "en": "Waste basket for paper",
+            "nl": "Vuilnisbak voor papier"
+          },
+          "osmTags": "waste~i~.*paper.*"
         }
       ]
     },
@@ -432,16 +453,5 @@
   "allowMove": {
     "enableRelocation": false,
     "enableImproveAccuracy": true
-  },
-  "cs": {
-    "0": {
-      "iconSize": {
-        "mappings": {
-          "0": {
-            "then": "Odpadkový koš"
-          }
-        }
-      }
-    }
   }
-}
+}
\ No newline at end of file

From a406535e5c16a5f542cc0f6c3cc1f2b37c312048 Mon Sep 17 00:00:00 2001
From: Robin van der Linde <robin.vanderlinde@gmail.com>
Date: Tue, 14 May 2024 00:05:42 +0200
Subject: [PATCH 6/6] Add most domestic plug types above 50 uses (#1907)

---
 assets/layers/charging_station/as3112.svg     |   6 +
 .../charging_station/as3112.svg.license       |   2 +
 .../charging_station/charging_station.json    | 382 ++++++++++++++++++
 .../layers/charging_station/license_info.json |  40 ++
 assets/layers/charging_station/nema-5-15.svg  |   6 +
 .../charging_station/nema-5-15.svg.license    |   2 +
 assets/layers/charging_station/nema-5-20.svg  |   7 +
 .../charging_station/nema-5-20.svg.license    |   2 +
 assets/layers/charging_station/typej.svg      |   6 +
 .../layers/charging_station/typej.svg.license |   2 +
 assets/layers/charging_station/types.csv      |   4 +
 11 files changed, 459 insertions(+)
 create mode 100644 assets/layers/charging_station/as3112.svg
 create mode 100644 assets/layers/charging_station/as3112.svg.license
 create mode 100644 assets/layers/charging_station/nema-5-15.svg
 create mode 100644 assets/layers/charging_station/nema-5-15.svg.license
 create mode 100644 assets/layers/charging_station/nema-5-20.svg
 create mode 100644 assets/layers/charging_station/nema-5-20.svg.license
 create mode 100644 assets/layers/charging_station/typej.svg
 create mode 100644 assets/layers/charging_station/typej.svg.license

diff --git a/assets/layers/charging_station/as3112.svg b/assets/layers/charging_station/as3112.svg
new file mode 100644
index 0000000000..c42a47caf6
--- /dev/null
+++ b/assets/layers/charging_station/as3112.svg
@@ -0,0 +1,6 @@
+<svg width="127" height="127" viewBox="0 0 127 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3366 2H110.666C132.016 2 128.568 124.791 110.666 124.791H16.3366C-4.27329 124.791 -1.2237 2 16.3366 2Z" stroke="black" stroke-width="2.5" stroke-linejoin="round"/>
+<path d="M68.0922 78.6937H59.3214V105.468H68.0922V78.6937Z" fill="black"/>
+<path d="M45.1364 33.0528L37.5356 28.6761L24.1753 51.8784L31.7761 56.2551L45.1364 33.0528Z" fill="black"/>
+<path d="M82.2772 33.0528L89.878 28.6762L103.238 51.8785L95.6376 56.2552L82.2772 33.0528Z" fill="black"/>
+</svg>
diff --git a/assets/layers/charging_station/as3112.svg.license b/assets/layers/charging_station/as3112.svg.license
new file mode 100644
index 0000000000..b4ccbe777f
--- /dev/null
+++ b/assets/layers/charging_station/as3112.svg.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Yanpas
+SPDX-License-Identifier: CC-BY-SA-4.0
\ No newline at end of file
diff --git a/assets/layers/charging_station/charging_station.json b/assets/layers/charging_station/charging_station.json
index 38a777db74..669f6bc1da 100644
--- a/assets/layers/charging_station/charging_station.json
+++ b/assets/layers/charging_station/charging_station.json
@@ -1300,6 +1300,252 @@
             "path": "./assets/layers/charging_station/bs1363.svg",
             "class": "medium"
           }
+        },
+        {
+          "if": "socket:nema5_15=1",
+          "ifnot": "socket:nema5_15=",
+          "then": {
+            "en": "<b>NEMA 5-15</b> (Type B)",
+            "nl": "<b>NEMA 5-15</b> (VS 3-pin)"
+          },
+          "icon": {
+            "path": "./assets/layers/charging_station/nema-5-15.svg",
+            "class": "medium"
+          },
+          "hideInAnswer": {
+            "and": [
+              "_country!=as",
+              "_country!=ai",
+              "_country!=ag",
+              "_country!=aw",
+              "_country!=bb",
+              "_country!=bz",
+              "_country!=bm",
+              "_country!=bo",
+              "_country!=vg",
+              "_country!=ky",
+              "_country!=co",
+              "_country!=cr",
+              "_country!=cu",
+              "_country!=do",
+              "_country!=ec",
+              "_country!=sv",
+              "_country!=pf",
+              "_country!=gu",
+              "_country!=gt",
+              "_country!=gy",
+              "_country!=ht",
+              "_country!=hn",
+              "_country!=jm",
+              "_country!=jp",
+              "_country!=jo",
+              "_country!=la",
+              "_country!=lb",
+              "_country!=lr",
+              "_country!=mx",
+              "_country!=fm",
+              "_country!=ms",
+              "_country!=ni",
+              "_country!=ne",
+              "_country!=pw",
+              "_country!=pa",
+              "_country!=py",
+              "_country!=pe",
+              "_country!=ph",
+              "_country!=pr",
+              "_country!=sr",
+              "_country!=th",
+              "_country!=tt",
+              "_country!=tm",
+              "_country!=ve",
+              "_country!=vn"
+            ]
+          }
+        },
+        {
+          "if": {
+            "and": [
+              "socket:nema5_15~*",
+              "socket:nema5_15!=1"
+            ]
+          },
+          "then": {
+            "en": "<b>NEMA 5-15</b> (Type B)",
+            "nl": "<b>NEMA 5-15</b> (VS 3-pin)"
+          },
+          "hideInAnswer": true,
+          "icon": {
+            "path": "./assets/layers/charging_station/nema-5-15.svg",
+            "class": "medium"
+          }
+        },
+        {
+          "if": "socket:sev1011_t23=1",
+          "ifnot": "socket:sev1011_t23=",
+          "then": {
+            "en": "<b>SEV 1011 T23</b> (Type J)",
+            "nl": "<b>SEV 1011 T23</b> (Zwitserse 3-pin)"
+          },
+          "icon": {
+            "path": "./assets/layers/charging_station/typej.svg",
+            "class": "medium"
+          },
+          "hideInAnswer": {
+            "and": [
+              "_country!=jo",
+              "_country!=li",
+              "_country!=mg",
+              "_country!=mv",
+              "_country!=rw",
+              "_country!=ch"
+            ]
+          }
+        },
+        {
+          "if": {
+            "and": [
+              "socket:sev1011_t23~*",
+              "socket:sev1011_t23!=1"
+            ]
+          },
+          "then": {
+            "en": "<b>SEV 1011 T23</b> (Type J)",
+            "nl": "<b>SEV 1011 T23</b> (Zwitserse 3-pin)"
+          },
+          "hideInAnswer": true,
+          "icon": {
+            "path": "./assets/layers/charging_station/typej.svg",
+            "class": "medium"
+          }
+        },
+        {
+          "if": "socket:as3112=1",
+          "ifnot": "socket:as3112=",
+          "then": {
+            "en": "<b>AS3112</b> (Type I)",
+            "nl": "<b>AS3112</b> (Australische 3-pin)"
+          },
+          "icon": {
+            "path": "./assets/layers/charging_station/as3112.svg",
+            "class": "medium"
+          },
+          "hideInAnswer": {
+            "and": [
+              "_country!=as",
+              "_country!=ar",
+              "_country!=au",
+              "_country!=cn",
+              "_country!=ck",
+              "_country!=fj",
+              "_country!=ki",
+              "_country!=nr",
+              "_country!=nz",
+              "_country!=nu",
+              "_country!=pg",
+              "_country!=sb",
+              "_country!=tj",
+              "_country!=to",
+              "_country!=tv",
+              "_country!=uy",
+              "_country!=uz",
+              "_country!=vu"
+            ]
+          }
+        },
+        {
+          "if": {
+            "and": [
+              "socket:as3112~*",
+              "socket:as3112!=1"
+            ]
+          },
+          "then": {
+            "en": "<b>AS3112</b> (Type I)",
+            "nl": "<b>AS3112</b> (Australische 3-pin)"
+          },
+          "hideInAnswer": true,
+          "icon": {
+            "path": "./assets/layers/charging_station/as3112.svg",
+            "class": "medium"
+          }
+        },
+        {
+          "if": "socket:nema_5_20=1",
+          "ifnot": "socket:nema_5_20=",
+          "then": {
+            "en": "<b>NEMA 5-20</b> (Type B)",
+            "nl": "<b>NEMA 5-20</b> (VS 3-pin)"
+          },
+          "icon": {
+            "path": "./assets/layers/charging_station/nema-5-20.svg",
+            "class": "medium"
+          },
+          "hideInAnswer": {
+            "and": [
+              "_country!=as",
+              "_country!=ai",
+              "_country!=ag",
+              "_country!=aw",
+              "_country!=bb",
+              "_country!=bz",
+              "_country!=bm",
+              "_country!=bo",
+              "_country!=vg",
+              "_country!=ky",
+              "_country!=co",
+              "_country!=cr",
+              "_country!=cu",
+              "_country!=do",
+              "_country!=ec",
+              "_country!=sv",
+              "_country!=pf",
+              "_country!=gu",
+              "_country!=gt",
+              "_country!=gy",
+              "_country!=ht",
+              "_country!=hn",
+              "_country!=jm",
+              "_country!=jp",
+              "_country!=jo",
+              "_country!=la",
+              "_country!=lb",
+              "_country!=lr",
+              "_country!=mx",
+              "_country!=fm",
+              "_country!=ms",
+              "_country!=ni",
+              "_country!=ne",
+              "_country!=pw",
+              "_country!=pa",
+              "_country!=py",
+              "_country!=pe",
+              "_country!=ph",
+              "_country!=pr",
+              "_country!=sr",
+              "_country!=th",
+              "_country!=tt",
+              "_country!=tm",
+              "_country!=ve",
+              "_country!=vn"
+            ]
+          }
+        },
+        {
+          "if": {
+            "and": [
+              "socket:nema_5_20~*",
+              "socket:nema_5_20!=1"
+            ]
+          },
+          "then": {
+            "en": "<b>NEMA 5-20</b> (Type B)",
+            "nl": "<b>NEMA 5-20</b> (VS 3-pin)"
+          },
+          "hideInAnswer": true,
+          "icon": {
+            "path": "./assets/layers/charging_station/nema-5-20.svg",
+            "class": "medium"
+          }
         }
       ]
     },
@@ -1658,6 +1904,78 @@
             [
               "3kW"
             ]
+          ],
+          [
+            "socket:nema5_15",
+            "socket:nema5_15",
+            {
+              "en": "<b>NEMA 5-15</b> (Type B)",
+              "nl": "<b>NEMA 5-15</b> (VS 3-pin)"
+            },
+            "nema-5-15.svg",
+            [
+              "120"
+            ],
+            [
+              "15"
+            ],
+            [
+              "1.8 kW"
+            ]
+          ],
+          [
+            "socket:sev1011_t23",
+            "socket:sev1011_t23",
+            {
+              "en": "<b>SEV 1011 T23</b> (Type J)",
+              "nl": "<b>SEV 1011 T23</b> (Zwitserse 3-pin)"
+            },
+            "typej.svg",
+            [
+              "230"
+            ],
+            [
+              "16"
+            ],
+            [
+              "3.7 kW"
+            ]
+          ],
+          [
+            "socket:as3112",
+            "socket:as3112",
+            {
+              "en": "<b>AS3112</b> (Type I)",
+              "nl": "<b>AS3112</b> (Australische 3-pin)"
+            },
+            "as3112.svg",
+            [
+              "230"
+            ],
+            [
+              "10"
+            ],
+            [
+              "2.3 kW"
+            ]
+          ],
+          [
+            "socket:nema_5_20",
+            "socket:nema_5_20",
+            {
+              "en": "<b>NEMA 5-20</b> (Type B)",
+              "nl": "<b>NEMA 5-20</b> (VS 3-pin)"
+            },
+            "nema-5-20.svg",
+            [
+              "120"
+            ],
+            [
+              "20"
+            ],
+            [
+              "2.4 kW"
+            ]
           ]
         ]
       },
@@ -2717,6 +3035,34 @@
             "nl": "Heeft een <div style='display: inline-block'><b><b>BS1363</b> (VK 3-pin)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/bs1363.svg'/></div>"
           },
           "osmTags": "socket:bs1363~*"
+        },
+        {
+          "question": {
+            "en": "Has a <div style='display: inline-block'><b><b>NEMA 5-15</b> (Type B)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/nema-5-15.svg'/></div> connector",
+            "nl": "Heeft een <div style='display: inline-block'><b><b>NEMA 5-15</b> (VS 3-pin)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/nema-5-15.svg'/></div>"
+          },
+          "osmTags": "socket:nema5_15~*"
+        },
+        {
+          "question": {
+            "en": "Has a <div style='display: inline-block'><b><b>SEV 1011 T23</b> (Type J)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/typej.svg'/></div> connector",
+            "nl": "Heeft een <div style='display: inline-block'><b><b>SEV 1011 T23</b> (Zwitserse 3-pin)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/typej.svg'/></div>"
+          },
+          "osmTags": "socket:sev1011_t23~*"
+        },
+        {
+          "question": {
+            "en": "Has a <div style='display: inline-block'><b><b>AS3112</b> (Type I)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/as3112.svg'/></div> connector",
+            "nl": "Heeft een <div style='display: inline-block'><b><b>AS3112</b> (Australische 3-pin)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/as3112.svg'/></div>"
+          },
+          "osmTags": "socket:as3112~*"
+        },
+        {
+          "question": {
+            "en": "Has a <div style='display: inline-block'><b><b>NEMA 5-20</b> (Type B)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/nema-5-20.svg'/></div> connector",
+            "nl": "Heeft een <div style='display: inline-block'><b><b>NEMA 5-20</b> (VS 3-pin)</b> <img style='width:1rem; display: inline-block' src='./assets/layers/charging_station/nema-5-20.svg'/></div>"
+          },
+          "osmTags": "socket:nema_5_20~*"
         }
       ]
     }
@@ -2876,6 +3222,42 @@
           "mW",
           "kW"
         ]
+      },
+      "socket:nema5_15:voltage": "voltage",
+      "socket:nema5_15:current": "current",
+      "socket:nema5_15:output": {
+        "quantity": "power",
+        "denominations": [
+          "mW",
+          "kW"
+        ]
+      },
+      "socket:sev1011_t23:voltage": "voltage",
+      "socket:sev1011_t23:current": "current",
+      "socket:sev1011_t23:output": {
+        "quantity": "power",
+        "denominations": [
+          "mW",
+          "kW"
+        ]
+      },
+      "socket:as3112:voltage": "voltage",
+      "socket:as3112:current": "current",
+      "socket:as3112:output": {
+        "quantity": "power",
+        "denominations": [
+          "mW",
+          "kW"
+        ]
+      },
+      "socket:nema_5_20:voltage": "voltage",
+      "socket:nema_5_20:current": "current",
+      "socket:nema_5_20:output": {
+        "quantity": "power",
+        "denominations": [
+          "mW",
+          "kW"
+        ]
       }
     }
   ],
diff --git a/assets/layers/charging_station/license_info.json b/assets/layers/charging_station/license_info.json
index 8f25c84e1c..e4c481f44a 100644
--- a/assets/layers/charging_station/license_info.json
+++ b/assets/layers/charging_station/license_info.json
@@ -99,6 +99,16 @@
     ],
     "sources": []
   },
+  {
+    "path": "as3112.svg",
+    "license": "CC-BY-SA-4.0",
+    "authors": [
+      "Yanpas"
+    ],
+    "sources": [
+      "https://commons.wikimedia.org/wiki/File:Plug_types.svg"
+    ]
+  },
   {
     "path": "bosch-3pin.svg",
     "license": "CC0-1.0",
@@ -125,6 +135,36 @@
       "https://commons.wikimedia.org/wiki/File:Plug_types.svg"
     ]
   },
+  {
+    "path": "nema-5-15.svg",
+    "license": "CC-BY-SA-4.0",
+    "authors": [
+      "Yanpas"
+    ],
+    "sources": [
+      "https://commons.wikimedia.org/wiki/File:Plug_types.svg"
+    ]
+  },
+  {
+    "path": "nema-5-20.svg",
+    "license": "CC-BY-SA-4.0",
+    "authors": [
+      "Modified from Yanpas"
+    ],
+    "sources": [
+      "https://commons.wikimedia.org/wiki/File:Plug_types.svg"
+    ]
+  },
+  {
+    "path": "typej.svg",
+    "license": "CC-BY-SA-4.0",
+    "authors": [
+      "Modified from Yanpas"
+    ],
+    "sources": [
+      "https://commons.wikimedia.org/wiki/File:Plug_types.svg"
+    ]
+  },
   {
     "path": "under_construction.svg",
     "license": "CC0-1.0",
diff --git a/assets/layers/charging_station/nema-5-15.svg b/assets/layers/charging_station/nema-5-15.svg
new file mode 100644
index 0000000000..bba21647f1
--- /dev/null
+++ b/assets/layers/charging_station/nema-5-15.svg
@@ -0,0 +1,6 @@
+<svg width="132" height="108" viewBox="0 0 132 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.518 2L122.265 2.19696C126.862 2.20596 129.459 4.82052 129.576 8.99805L130.135 52.9633C128.09 58.3092 127.741 58.4746 122.697 59.2836L94.6426 59.4452L94.7838 82.0482C89.4216 113.801 43.866 113.885 37.5029 81.803L36.9436 59.4727L9.12459 59.2389C5.76322 59.1612 1.50424 53.8838 2.04712 49.9019L2.44736 9.19159C2.82493 5.73227 4.60697 3.17927 8.518 2Z" stroke="black" stroke-width="2.5"/>
+<path d="M33.9379 18.4982H25.1671V45.2722H33.9379V18.4982Z" fill="black"/>
+<path d="M106.476 18.4982H97.7049V45.2722H106.476V18.4982Z" fill="black"/>
+<path d="M65.9505 89.1316C70.0927 89.1316 73.4505 85.7737 73.4505 81.6316C73.4505 77.4895 70.0927 74.1316 65.9505 74.1316C61.8084 74.1316 58.4506 77.4895 58.4506 81.6316C58.4506 85.7737 61.8084 89.1316 65.9505 89.1316Z" fill="black"/>
+</svg>
diff --git a/assets/layers/charging_station/nema-5-15.svg.license b/assets/layers/charging_station/nema-5-15.svg.license
new file mode 100644
index 0000000000..b4ccbe777f
--- /dev/null
+++ b/assets/layers/charging_station/nema-5-15.svg.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Yanpas
+SPDX-License-Identifier: CC-BY-SA-4.0
\ No newline at end of file
diff --git a/assets/layers/charging_station/nema-5-20.svg b/assets/layers/charging_station/nema-5-20.svg
new file mode 100644
index 0000000000..ca20350758
--- /dev/null
+++ b/assets/layers/charging_station/nema-5-20.svg
@@ -0,0 +1,7 @@
+<svg width="132" height="108" viewBox="0 0 132 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.518 2L122.265 2.19696C126.862 2.20596 129.459 4.82052 129.576 8.99805L130.135 52.9633C128.09 58.3092 127.741 58.4746 122.697 59.2836L94.6426 59.4452L94.7838 82.0482C89.4216 113.801 43.866 113.885 37.5029 81.803L36.9436 59.4727L9.12459 59.2389C5.76322 59.1612 1.50424 53.8838 2.04712 49.9019L2.44736 9.19159C2.82493 5.73227 4.60697 3.17927 8.518 2Z" stroke="black" stroke-width="2.5"/>
+<path d="M33.9379 18.4982H25.1671V45.2722H33.9379V18.4982Z" fill="black"/>
+<path d="M106.476 18.4982H97.7049V45.2722H106.476V18.4982Z" fill="black"/>
+<path d="M124.77 28H98V36.77H124.77V28Z" fill="black"/>
+<path d="M65.9505 89.1316C70.0927 89.1316 73.4505 85.7737 73.4505 81.6316C73.4505 77.4895 70.0927 74.1316 65.9505 74.1316C61.8084 74.1316 58.4506 77.4895 58.4506 81.6316C58.4506 85.7737 61.8084 89.1316 65.9505 89.1316Z" fill="black"/>
+</svg>
diff --git a/assets/layers/charging_station/nema-5-20.svg.license b/assets/layers/charging_station/nema-5-20.svg.license
new file mode 100644
index 0000000000..9f0b3ad3c7
--- /dev/null
+++ b/assets/layers/charging_station/nema-5-20.svg.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Modified from Yanpas
+SPDX-License-Identifier: CC-BY-SA-4.0
\ No newline at end of file
diff --git a/assets/layers/charging_station/typej.svg b/assets/layers/charging_station/typej.svg
new file mode 100644
index 0000000000..3511cf05ee
--- /dev/null
+++ b/assets/layers/charging_station/typej.svg
@@ -0,0 +1,6 @@
+<svg width="143" height="65" viewBox="0 0 143 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.152 2.26385L106.901 2.10065L141.146 32.3409L107.176 62.8994H36.1008L1.85425 32.0145L36.152 2.26385Z" stroke="black" stroke-width="2.5" stroke-linejoin="round"/>
+<rect x="35" y="25" width="15" height="15" rx="3" fill="black"/>
+<rect x="96" y="25" width="15" height="15" rx="3" fill="black"/>
+<rect x="64" y="38" width="15" height="15" rx="3" fill="black"/>
+</svg>
diff --git a/assets/layers/charging_station/typej.svg.license b/assets/layers/charging_station/typej.svg.license
new file mode 100644
index 0000000000..9f0b3ad3c7
--- /dev/null
+++ b/assets/layers/charging_station/typej.svg.license
@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Modified from Yanpas
+SPDX-License-Identifier: CC-BY-SA-4.0
\ No newline at end of file
diff --git a/assets/layers/charging_station/types.csv b/assets/layers/charging_station/types.csv
index 4a9444e362..d73c648359 100644
--- a/assets/layers/charging_station/types.csv
+++ b/assets/layers/charging_station/types.csv
@@ -16,3 +16,7 @@ socket:USB-A,,usb_port.svg,<b>USB</b> to charge phones and small electronics,,,5
 socket:bosch_3pin,,bosch-3pin.svg,<b>Bosch Active Connect with 3 pins</b> and cable,,,,,,<b>Bosch Active Connect met 3 pinnen</b> aan een kabel,bicycle,car;motorcar;hgv;bus,
 socket:bosch_5pin,,bosch-5pin.svg,<b>Bosch Active Connect with 5 pins</b> and cable,,,,,,<b>Bosch Active Connect met 5 pinnen</b> aan een kabel,bicycle,car;motorcar;hgv;bus,
 socket:bs1363,,bs1363.svg,<b>BS1363</b> (Type G),bh;bd;bz;bt;bw;bn;kh;cy;dm;gh;gi;gd;gg;gy;id;iq;ie;im;je;jo;ke;kw;lb;mo;mw;mv;mt;mu;ng;om;pk;qa;rw;sa;sc;sl;sb;lk;sd;tz;ug;vu;vn;ye;zm;zw,,230,13,3kW,<b>BS1363</b> (VK 3-pin),*,,
+socket:nema5_15,,nema-5-15.svg,<b>NEMA 5-15</b> (Type B),as;ai;ag;aw;bb;bz;bm;bo;vg;ky;co;cr;cu;do;ec;sv;pf;gu;gt;gy;ht;hn;jm;jp;jo;la;lb;lr;mx;fm;ms;ni;ne;pw;pa;py;pe;ph;pr;sr;th;tt;tm;ve;vn,,120,15,1.8 kW,<b>NEMA 5-15</b> (VS 3-pin),*,,
+socket:sev1011_t23,,typej.svg,<b>SEV 1011 T23</b> (Type J),jo;li;mg;mv;rw;ch,,230,16,3.7 kW,<b>SEV 1011 T23</b> (Zwitserse 3-pin),*,,
+socket:as3112,,as3112.svg,<b>AS3112</b> (Type I),as;ar;au;cn;ck;fj;ki;nr;nz;nu;pg;sb;tj;to;tv;uy;uz;vu,,230,10,2.3 kW,<b>AS3112</b> (Australische 3-pin),*,,
+socket:nema_5_20,,nema-5-20.svg,<b>NEMA 5-20</b> (Type B),as;ai;ag;aw;bb;bz;bm;bo;vg;ky;co;cr;cu;do;ec;sv;pf;gu;gt;gy;ht;hn;jm;jp;jo;la;lb;lr;mx;fm;ms;ni;ne;pw;pa;py;pe;ph;pr;sr;th;tt;tm;ve;vn,,120,20,2.4 kW,<b>NEMA 5-20</b> (VS 3-pin),*,,