From e98f96041a4a231639c1c641532660315b30d5d5 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@gmail.com>
Date: Wed, 2 Dec 2020 21:23:23 +0100
Subject: [PATCH] Fix composibility of badges; update of charging station theme

---
 Customizations/JSON/LayerConfig.ts            |  19 +++-
 Logic/Leaflet/GeoLocationHandler.ts           |   7 +-
 State.ts                                      |   2 +-
 Svg.ts                                        |  14 ++-
 UI/UserBadge.ts                               |   4 +-
 assets/svg/circle.svg                         | 100 ++----------------
 assets/tagRenderings/icons.json               |   9 +-
 .../charging_stations/charging_station.svg    |  60 -----------
 .../charging_stations/charging_stations.json  |  88 +++++++++++++--
 9 files changed, 126 insertions(+), 177 deletions(-)
 delete mode 100644 assets/themes/charging_stations/charging_station.svg

diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts
index 56221acb0..218d16d43 100644
--- a/Customizations/JSON/LayerConfig.ts
+++ b/Customizations/JSON/LayerConfig.ts
@@ -13,6 +13,7 @@ import {Utils} from "../../Utils";
 import Combine from "../../UI/Base/Combine";
 import {VariableUiElement} from "../../UI/Base/VariableUIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
+import {UIElement} from "../../UI/UIElement";
 
 export default class LayerConfig {
 
@@ -240,8 +241,8 @@ export default class LayerConfig {
             let htmlParts = [];
             let sourceParts = iconUrl.split(";");
 
-            function genHtmlFromString(sourcePart: string, style?: string): string {
-                style = style ?? `width:100%;height:100%;rotate:${rotation};display:block;position: absolute; top: 0, left: 0`;
+            function genHtmlFromString(sourcePart: string): string {
+                const style = `width:100%;height:100%;rotate:${rotation};display:block;position: absolute; top: 0, left: 0`;
                 let html = `<img src="${sourcePart}" style="${style}" />`;
                 const match = sourcePart.match(/([a-zA-Z0-9_]*):#([0-9a-fA-F]{3,6})/)
                 if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) {
@@ -273,7 +274,18 @@ export default class LayerConfig {
                     continue;
                 }
                 if (iconOverlay.badge) {
-                    badges.push(genHtmlFromString(iconOverlay.then, "display: block;height:100%"))
+                    const badgeParts: string[] = [];
+                    const partDefs = iconOverlay.then.split(";");
+
+                    for (const badgePartStr of partDefs) {
+                        badgeParts.push(genHtmlFromString(badgePartStr))
+                    }
+
+                    const badgeCompound = new Combine(badgeParts)
+                        .SetStyle("display:flex;position:relative;width:100%;height:100%;");
+
+                    badges.push(badgeCompound)
+
                 } else {
                     htmlParts.push(genHtmlFromString(iconOverlay.then));
                 }
@@ -281,7 +293,6 @@ export default class LayerConfig {
 
             if (badges.length > 0) {
                 const badgesComponent = new Combine(badges)
-
                     .SetStyle("display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;")
                     .Render()
 
diff --git a/Logic/Leaflet/GeoLocationHandler.ts b/Logic/Leaflet/GeoLocationHandler.ts
index d91b2bdcb..e83c3b513 100644
--- a/Logic/Leaflet/GeoLocationHandler.ts
+++ b/Logic/Leaflet/GeoLocationHandler.ts
@@ -110,11 +110,8 @@ export class GeoLocationHandler extends UIElement {
             return "";
         }
         if (State.state.currentGPSLocation.data !== undefined) {
-            State.state.bm.map.flyTo(
-                State.state.currentGPSLocation.data.latlng, 16,
-                {
-                    duration: 0.25,
-                }
+            State.state.bm.map.setView(
+                State.state.currentGPSLocation.data.latlng, 16
             );
         }
 
diff --git a/State.ts b/State.ts
index ed637e591..143d4da21 100644
--- a/State.ts
+++ b/State.ts
@@ -23,7 +23,7 @@ export default class State {
     // The singleton of the global state
     public static state: State;
 
-    public static vNumber = "0.2.3a";
+    public static vNumber = "0.2.3b";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {
diff --git a/Svg.ts b/Svg.ts
index 5010076ae..eeb11d098 100644
--- a/Svg.ts
+++ b/Svg.ts
@@ -44,7 +44,7 @@ export default class Svg {
     public static checkmark_svg() { return new FixedUiElement(Svg.checkmark);}
     public static checkmark_ui() { return new FixedUiElement(Svg.checkmark_img);}
 
-    public static circle = " <svg    xmlns:dc=\"http://purl.org/dc/elements/1.1/\"    xmlns:cc=\"http://creativecommons.org/ns#\"    xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"    xmlns:svg=\"http://www.w3.org/2000/svg\"    xmlns=\"http://www.w3.org/2000/svg\"    xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"    xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"    width=\"98\"    height=\"98\"    viewBox=\"0 0 98 98.000003\"    version=\"1.1\"    id=\"svg27\"    sodipodi:docname=\"circle.svg\"    style=\"fill:none\"    inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\">   <metadata      id=\"metadata31\">     <rdf:RDF>       <cc:Work          rdf:about=\"\">         <dc:format>image/svg+xml</dc:format>         <dc:type            rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />         <dc:title></dc:title>       </cc:Work>     </rdf:RDF>   </metadata>   <sodipodi:namedview      pagecolor=\"#ffffff\"      bordercolor=\"#666666\"      borderopacity=\"1\"      objecttolerance=\"10\"      gridtolerance=\"10\"      guidetolerance=\"10\"      inkscape:pageopacity=\"0\"      inkscape:pageshadow=\"2\"      inkscape:window-width=\"1920\"      inkscape:window-height=\"995\"      id=\"namedview29\"      showgrid=\"false\"      inkscape:zoom=\"5.3831355\"      inkscape:cx=\"61.971609\"      inkscape:cy=\"38.767424\"      inkscape:window-x=\"0\"      inkscape:window-y=\"0\"      inkscape:window-maximized=\"1\"      inkscape:current-layer=\"svg27\" />   <circle      cx=\"49\"      cy=\"49\"      r=\"49\"      id=\"circle4\"      style=\"fill:#000000;fill-opacity:1\" />   <defs      id=\"defs25\">     <filter        id=\"filter0_d\"        x=\"16\"        y=\"23\"        width=\"67\"        height=\"63\"        filterUnits=\"userSpaceOnUse\"        style=\"color-interpolation-filters:sRGB\">       <feFlood          flood-opacity=\"0\"          result=\"BackgroundImageFix\"          id=\"feFlood10\" />       <feColorMatrix          in=\"SourceAlpha\"          type=\"matrix\"          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"          id=\"feColorMatrix12\" />       <feOffset          dy=\"4\"          id=\"feOffset14\" />       <feGaussianBlur          stdDeviation=\"2\"          id=\"feGaussianBlur16\" />       <feColorMatrix          type=\"matrix\"          values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"          id=\"feColorMatrix18\" />       <feBlend          mode=\"normal\"          in2=\"BackgroundImageFix\"          result=\"effect1_dropShadow\"          id=\"feBlend20\" />       <feBlend          mode=\"normal\"          in=\"SourceGraphic\"          in2=\"effect1_dropShadow\"          result=\"shape\"          id=\"feBlend22\" />     </filter>   </defs> </svg> "
+    public static circle = " <svg    style=\"fill:none\"    version=\"1.1\"    viewBox=\"0 0 100 100\"    height=\"100\"    width=\"100\">   <circle      style=\"fill:#000000;fill-opacity:1\"      id=\"circle4\"      r=\"50\"      cy=\"50\"      cx=\"50\" /> </svg> "
     public static circle_img = Img.AsImageElement(Svg.circle)
     public static circle_svg() { return new FixedUiElement(Svg.circle);}
     public static circle_ui() { return new FixedUiElement(Svg.circle_img);}
@@ -219,6 +219,11 @@ export default class Svg {
     public static share_svg() { return new FixedUiElement(Svg.share);}
     public static share_ui() { return new FixedUiElement(Svg.share_img);}
 
+    public static square = " <svg    xmlns:dc=\"http://purl.org/dc/elements/1.1/\"    xmlns:cc=\"http://creativecommons.org/ns#\"    xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"    xmlns:svg=\"http://www.w3.org/2000/svg\"    xmlns=\"http://www.w3.org/2000/svg\"    id=\"svg3\"    width=\"100\"    height=\"100\"    viewBox=\"0 0 100 100\"    version=\"1.1\"    style=\"fill:none\">   <metadata      id=\"metadata9\">     <rdf:RDF>       <cc:Work          rdf:about=\"\">         <dc:format>image/svg+xml</dc:format>         <dc:type            rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />         <dc:title></dc:title>       </cc:Work>     </rdf:RDF>   </metadata>   <defs      id=\"defs7\" />   <rect      y=\"-1.4210855e-14\"      x=\"-0.42372882\"      height=\"100.42373\"      width=\"100.84746\"      id=\"rect819\"      style=\"fill:#000000;fill-opacity:1;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\" /> </svg> "
+    public static square_img = Img.AsImageElement(Svg.square)
+    public static square_svg() { return new FixedUiElement(Svg.square);}
+    public static square_ui() { return new FixedUiElement(Svg.square_img);}
+
     public static star = " <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 20010904//EN\" \"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\"> <svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\" width=\"1278.000000pt\" height=\"1280.000000pt\" viewBox=\"0 0 1278.000000 1280.000000\" preserveAspectRatio=\"xMidYMid meet\"> <metadata> Created by potrace 1.15, written by Peter Selinger 2001-2017 </metadata> <g transform=\"translate(0.000000,1280.000000) scale(0.100000,-0.100000)\" fill=\"#000000\" stroke=\"none\"> <path d=\"M6760 12443 c-137 -26 -302 -163 -453 -375 -207 -293 -384 -645 -802 -1598 -347 -790 -486 -1070 -667 -1337 -211 -311 -357 -373 -878 -374 -303 0 -573 22 -1315 106 -310 36 -666 73 -930 97 -191 17 -792 17 -905 0 -359 -56 -525 -174 -538 -382 -7 -128 43 -265 161 -442 197 -294 514 -612 1317 -1323 955 -845 1247 -1174 1290 -1452 37 -234 -95 -656 -453 -1458 -364 -816 -430 -963 -490 -1110 -252 -611 -352 -998 -318 -1236 31 -222 145 -333 357 -346 311 -21 768 169 1699 704 749 431 885 508 1051 596 451 240 718 338 924 341 121 1 161 -10 310 -84 265 -133 574 -380 1300 -1040 1006 -916 1405 -1206 1752 -1276 102 -21 173 -13 255 27 103 50 160 135 204 304 21 81 23 111 23 315 0 125 -5 267 -12 320 -51 379 -107 674 -253 1335 -229 1034 -279 1327 -279 1647 0 162 16 260 55 346 101 221 462 490 1275 952 661 375 831 473 1005 578 739 446 1065 761 1065 1027 0 155 -96 273 -306 378 -300 150 -748 236 -1764 342 -1052 108 -1334 148 -1637 225 -387 100 -514 201 -648 515 -117 276 -211 629 -391 1482 -135 644 -212 973 -289 1237 -115 398 -240 668 -380 824 -94 105 -221 156 -335 135z\"/> </g> </svg>"
     public static star_img = Img.AsImageElement(Svg.star)
     public static star_svg() { return new FixedUiElement(Svg.star);}
@@ -234,6 +239,11 @@ export default class Svg {
     public static up_svg() { return new FixedUiElement(Svg.up);}
     public static up_ui() { return new FixedUiElement(Svg.up_img);}
 
+    public static wikidata = " <svg xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.2\" width=\"1050\" height=\"590\">   <path d=\"m 120,545 h 30 V 45 H 120 V 545 z m 60,0 h 90 V 45 H 180 V 545 z M 300,45 V 545 h 90 V 45 h -90 z\" style=\"fill:#990000\" />   <path d=\"m 840,545 h 30 V 45 H 840 V 545 z M 900,45 V 545 h 30 V 45 H 900 z M 420,545 h 30 V 45 H 420 V 545 z M 480,45 V 545 h 30 V 45 h -30 z\" style=\"fill:#339966\" />   <path d=\"m 540,545 h 90 V 45 h -90 V 545 z m 120,0 h 30 V 45 H 660 V 545 z M 720,45 V 545 h 90 V 45 H 720 z\" style=\"fill:#006699\" /> </svg> "
+    public static wikidata_img = Img.AsImageElement(Svg.wikidata)
+    public static wikidata_svg() { return new FixedUiElement(Svg.wikidata);}
+    public static wikidata_ui() { return new FixedUiElement(Svg.wikidata_img);}
+
     public static wikimedia_commons_white = " <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"1024\" height=\"1376\" viewBox=\"-305 -516 610 820\"> <title>Wikimedia Commons Logo</title> <defs> 	<clipPath id=\"c\"><circle r=\"298\"/></clipPath> </defs> <circle r=\"100\" fill=\"#fff\"/> <g fill=\"#fff\"> 	<g id=\"arrow\" clip-path=\"url(#c)\"> 		<path d=\"m-11 180v118h22v-118\"/> 		<path d=\"m-43 185l43-75 43 75\"/> 	</g> 	<g id=\"arrows3\"> 		<use xlink:href=\"#arrow\" transform=\"rotate(45)\"/> 		<use xlink:href=\"#arrow\" transform=\"rotate(90)\"/> 		<use xlink:href=\"#arrow\" transform=\"rotate(135)\"/> 	</g> 	<use xlink:href=\"#arrows3\" transform=\"scale(-1 1)\"/> 	<path id=\"blue_path\" transform=\"rotate(-45)\" stroke=\"#fff\" stroke-width=\"84\" fill=\"none\" d=\"M 0,-256 A 256 256 0 1 0 256,0 C 256,-100 155,-150 250,-275\"/> 	<path id=\"arrow_top\" d=\"m-23-515s-36 135-80 185 116-62 170-5-90-180-90-180z\"/> </g> </svg> "
     public static wikimedia_commons_white_img = Img.AsImageElement(Svg.wikimedia_commons_white)
     public static wikimedia_commons_white_svg() { return new FixedUiElement(Svg.wikimedia_commons_white);}
@@ -244,4 +254,4 @@ export default class Svg {
     public static wikipedia_svg() { return new FixedUiElement(Svg.wikipedia);}
     public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);}
 
-public static All = {"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapillary.svg": Svg.mapillary,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"star.svg": Svg.star,"statistics.svg": Svg.statistics,"up.svg": Svg.up,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}
+public static All = {"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapillary.svg": Svg.mapillary,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"statistics.svg": Svg.statistics,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}
diff --git a/UI/UserBadge.ts b/UI/UserBadge.ts
index 614c5c541..ff1c15d2d 100644
--- a/UI/UserBadge.ts
+++ b/UI/UserBadge.ts
@@ -1,5 +1,4 @@
 import {UIElement} from "./UIElement";
-import * as L from "leaflet";
 import {FixedUiElement} from "./Base/FixedUiElement";
 import {VariableUiElement} from "./Base/VariableUIElement";
 import Translations from "./i18n/Translations";
@@ -9,7 +8,6 @@ import {UIEventSource} from "../Logic/UIEventSource";
 import Combine from "./Base/Combine";
 import Svg from "../Svg";
 import Link from "./Base/Link";
-import {Img} from "./Img";
 import LanguagePicker from "./LanguagePicker";
 
 /**
@@ -61,7 +59,7 @@ export class UserBadge extends UIElement {
             if (home === undefined) {
                 return;
             }
-            State.state.bm.map.flyTo([home.lat, home.lon], 18);
+            State.state.bm.map.setView([home.lat, home.lon], 16);
         });
 
     }
diff --git a/assets/svg/circle.svg b/assets/svg/circle.svg
index c4463d66d..8e4192ed9 100644
--- a/assets/svg/circle.svg
+++ b/assets/svg/circle.svg
@@ -1,98 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="98"
-   height="98"
-   viewBox="0 0 98 98.000003"
-   version="1.1"
-   id="svg27"
-   sodipodi:docname="circle.svg"
    style="fill:none"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
-  <metadata
-     id="metadata31">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="995"
-     id="namedview29"
-     showgrid="false"
-     inkscape:zoom="5.3831355"
-     inkscape:cx="61.971609"
-     inkscape:cy="38.767424"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg27" />
+   version="1.1"
+   viewBox="0 0 100 100"
+   height="100"
+   width="100">
   <circle
-     cx="49"
-     cy="49"
-     r="49"
+     style="fill:#000000;fill-opacity:1"
      id="circle4"
-     style="fill:#000000;fill-opacity:1" />
-  <defs
-     id="defs25">
-    <filter
-       id="filter0_d"
-       x="16"
-       y="23"
-       width="67"
-       height="63"
-       filterUnits="userSpaceOnUse"
-       style="color-interpolation-filters:sRGB">
-      <feFlood
-         flood-opacity="0"
-         result="BackgroundImageFix"
-         id="feFlood10" />
-      <feColorMatrix
-         in="SourceAlpha"
-         type="matrix"
-         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-         id="feColorMatrix12" />
-      <feOffset
-         dy="4"
-         id="feOffset14" />
-      <feGaussianBlur
-         stdDeviation="2"
-         id="feGaussianBlur16" />
-      <feColorMatrix
-         type="matrix"
-         values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-         id="feColorMatrix18" />
-      <feBlend
-         mode="normal"
-         in2="BackgroundImageFix"
-         result="effect1_dropShadow"
-         id="feBlend20" />
-      <feBlend
-         mode="normal"
-         in="SourceGraphic"
-         in2="effect1_dropShadow"
-         result="shape"
-         id="feBlend22" />
-    </filter>
-  </defs>
+     r="50"
+     cy="50"
+     cx="50" />
 </svg>
diff --git a/assets/tagRenderings/icons.json b/assets/tagRenderings/icons.json
index 8eb348064..350e2fc13 100644
--- a/assets/tagRenderings/icons.json
+++ b/assets/tagRenderings/icons.json
@@ -5,9 +5,12 @@
     "mappings": [
       {
         "if": {
-          "and": ["wikipedia=","wikidata~*"],
-          "then": "<a href='https://www.wikidata.org/wiki/{wikidata}' target='_blank'><img src='./assets/svg/wikidata.svg' alt='WD'/></a>"
-        }
+          "and": [
+            "wikipedia=",
+            "wikidata~*"
+          ]
+        },
+        "then": "<a href='https://www.wikidata.org/wiki/{wikidata}' target='_blank'><img src='./assets/svg/wikidata.svg' alt='WD'/></a>"
       }
     ]
   },
diff --git a/assets/themes/charging_stations/charging_station.svg b/assets/themes/charging_stations/charging_station.svg
deleted file mode 100644
index 31f96bae3..000000000
--- a/assets/themes/charging_stations/charging_station.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="2.533375in"
-   height="2.5232947in"
-   viewBox="0 0 228.00356 227.09669"
-   version="1.1"
-   id="svg4"
-   sodipodi:docname="Charging_station.svg"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1680"
-     inkscape:window-height="1013"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="0.43553183"
-     inkscape:cx="-194.63523"
-     inkscape:cy="121.06786"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4" />
-  <path
-     id="bg"
-     d="m 30.503636,0.59549459 c 0,0 36,0 36,0 0,0 112.000004,0 112.000004,0 0,0 32,0 32,0 5.2,0.03 8.87,0.24 12.78,4.21000001 4.27,4.34 4.21,9.1600004 4.22,14.7900004 0,0 0,158.999995 0,158.999995 0,0 0,31 0,31 -0.08,6.67 -1.61,12.02 -8.01,15.31 -3.62,1.86 -7.06,1.68 -10.99,1.69 0,0 -160.000004,0 -160.000004,0 0,0 -31,0 -31,0 -6.7,-0.08 -12.2400004,-1.49 -15.5500004,-8 -1.63999999,-3.24 -1.43999999,-6.49 -1.44999999,-10 0,0 0,-155.999995 0,-155.999995 0,0 0,-34 0,-34 0.01,-8.7100004 0.96999999,-13.8900004 10.00000039,-17.4300004 5.53,-1.00000001 14.12,-0.57000001 20,-0.57000001 z M 186.50364,60.595495 c 0,0 0,-31 0,-31 0,0 -1.02,-11.4 -1.02,-11.4 0,0 -7.98,-1.6 -7.98,-1.6 0,0 -69,0 -69,0 0,0 -15.000004,0 -15.000004,0 0,0 -5.98,1.6 -5.98,1.6 0,0 -1.02,7.4 -1.02,7.4 0,0 0,76.999995 0,76.999995 -11.8,0.54 -17.34,3.3 -28,7 0,0 0,-19.999995 0,-19.999995 2.73,-0.01 6.32,0.33 8.49,-1.6 2.08,-1.84 3.9,-8.56 4.84,-11.4 5.31,-15.91 5.67,-13.21 5.67,-30 0,0 -7,0 -7,0 0,0 0,-19 0,-19 -0.01,-3.03 0.45,-10.21 -4.87,-8.34 -3.65,1.28 -3.12,6.26 -3.13,9.34 0,0 0,18 0,18 0,0 -19,0 -19,0 0,0 0,-21 0,-21 -0.05,-2.48 0.13,-5.95 -3.11,-6.42 -4.5,-0.66 -4.83,4.3 -4.89,7.42 0,0 0,20 0,20 0,0 -7,0 -7,0 0,14.73 1.38,17.01 6,31 0.84,2.55 2.72,9.52 4.7,11.01 1.76,1.31 6.11,0.99 8.3,0.99 0,0 0,18.999995 0,18.999995 -0.03,13.87 -5.49,8.96 -17.64,27 -8.66,12.86 -12.45,26.73 -13.65,42 0.02,2.8 -0.4,4.03 0,7 1.25,21.17 19.36,30.73 32.25,20.47 8.21,-6.54 10.02,-16.6 10.04,-26.47 0,0 0,-48 0,-48 0.02,-2.26 -0.1,-4.87 1.02,-6.9 3.46,-6.23 20.19,-9.79 26.98,-10.1 0,0 0,71 0,71 0,4.15 -1.03,18.69 1.6,21.26 2.11,2.06 6.63,1.74 9.4,1.74 0,0 56.000004,0 56.000004,0 10.14,0 23.3,0.74 33,-1 0,0 0,-145.999995 0,-145.999995 z m -65,-19 c 0,0 43,0 43,0 8.64,0.02 8.98,0.36 9,9 0,0 0,34 0,34 0,2.77 0.5,11.48 -1.02,13.4 -1.57,1.98 -5.68,1.6 -7.98,1.6 0,0 -55,0 -55,0 -8.64,-0.02 -8.98,-0.36 -9,-9 0,0 0,-25 0,-25 0,-5.44 -1.280004,-18.97 1.6,-22.98 4.36,-1.85 14.28,-1.02 19.4,-1.02 z M 47.503636,147.59549 c 0,0 0,31 0,31 -0.01,6.38 -1.24,19.35 -10,19.56 -9.06,0.23 -11.25,-11.77 -10.96,-18.56 0.81,-19.23 8.06,-33.34 19.96,-48 1.69,4.25 1,11.29 1,16 z"
-     inkscape:connector-curvature="0"
-     style="fill:#0000ff;stroke:#000000;stroke-width:1" />
-  <path
-     id="itm"
-     d="m 86.503636,37.595495 c 0,-3.68 -0.95,-17.96 1.6,-19.98 1.59,-1.25 5.41,-1.02 7.4,-1.02 0,0 69.000004,0 69.000004,0 0,0 15,0 15,0 1.95,0.04 4.63,-0.1 5.98,1.6 1.25,1.59 1.02,5.41 1.02,7.4 0,0 0,180.999995 0,180.999995 0,0 -76,0 -76,0 0,0 -17.000004,0 -17.000004,0 0,0 -5.98,-1.6 -5.98,-1.6 0,0 -1.02,-7.4 -1.02,-7.4 0,0 0,-84 0,-84 -6.85,0.32 -22.23,3.61 -26.4,9.21 -1.59,2.13 -1.55,4.28 -1.6,6.79 0,0 0,51 0,51 -0.16,13.5 -6.97,29.52 -23,28.22 -13.37,-1.1 -20.26,-15.03 -19.49,-27.22 1.32,-20.83 5.19,-35.3 18.49,-52 10.46,-13.13 12.98,-8.75 13,-21 0,0 0,-18.999995 0,-18.999995 -2.19,0 -6.54,0.32 -8.3,-0.99 -1.96,-1.47 -3.89,-8.49 -4.68,-11.01 -4.66,-15.01 -6.02,-15.17 -6.02,-31 0,0 7,0 7,0 0,0 0,-19 0,-19 0.02,-3.22 -0.04,-9.15 4.89,-8.42 3.77,0.55 3.11,5.66 3.11,8.42 0,0 0,19 0,19 0,0 19,0 19,0 0,0 0,-20 0,-20 0.06,-3.11 0.86,-9.21 5.69,-7.34 2.82,1.08 2.31,5.89 2.31,8.34 0,0 0,19 0,19 0,0 7,0 7,0 0,16.42 -0.13,13.38 -5.33,29 -3.22,9.66 -2.28,13.74 -13.67,14 0,0 0,19.999995 0,19.999995 11.48,-3.25 14.31,-6.37 28,-7 0,0 0,-64.999995 0,-64.999995 z m 69.000004,62 c 3.39,0 15,0.899995 16.98,-1.6 1.25,-1.59 1.02,-5.41 1.02,-7.4 0,0 0,-34 0,-34 0,-2.77 0.5,-11.48 -1.02,-13.4 -1.57,-1.98 -5.68,-1.6 -7.98,-1.6 0,0 -55,0 -55,0 -8.64,0.02 -8.98,0.36 -9,9 0,0 0,49 0,49 0,0 55,0 55,0 z M 26.543636,179.59549 c -0.29,6.89 2.22,20.2 11.95,18.47 8.01,-1.43 9,-13.12 9.01,-19.47 0,0 0,-47 0,-47 -12.67,10.48 -20.28,31.82 -20.96,48 z"
-     inkscape:connector-curvature="0"
-     style="fill:#ffffff;stroke:#000000;stroke-width:1" />
-</svg>
diff --git a/assets/themes/charging_stations/charging_stations.json b/assets/themes/charging_stations/charging_stations.json
index 7ec1ee944..25015704b 100644
--- a/assets/themes/charging_stations/charging_stations.json
+++ b/assets/themes/charging_stations/charging_stations.json
@@ -13,7 +13,7 @@
     "en"
   ],
   "maintainer": "",
-  "icon": "./assets/themes/charging_stations/charging_station.svg",
+  "icon": "./assets/themes/charging_stations/logo.svg",
   "version": "0",
   "startLat": 0,
   "startLon": 0,
@@ -44,14 +44,56 @@
         "images",
         {
           "#": "Type",
+          "question": "Is this charging station meant for cars or bicycles?",
           "mappings": [
             {
-              "if": "bicycle=yes",
-              "then": "This is a charging station for <b>bicycles</b>"
+              "if": {
+                "and": [
+                  "motorcar=yes",
+                  "bicycle=yes"
+                ]
+              },
+              "then": "This is a charging station for <b>both bicycles and cars</b>"
             },
             {
-              "if": "motorcar=yes",
-              "then": "This is a charging station for <b>electric vehicles</b>"
+              "if": {
+                "and": [
+                  "motorcar=",
+                  "car=",
+                  "bicycle=yes"
+                ]
+              },
+              "then": "This is a charging station exclusively for <b>bicycles</b>"
+            },
+            {
+              "if": {
+                "and": [
+                  "motorcar=yes",
+                  "car=",
+                  "bicycle="
+                ]
+              },
+              "then": "This is a charging station exclusively for <b>electric cars and similar vehicles</b>"
+            },
+            {
+              "if": {
+                "and": [
+                  "car=yes",
+                  "bicycle="
+                ]
+              },
+              "then": "This is a charging station exclusively for <b>electric cars</b>",
+              "hideInAnswer": true
+            },
+            {
+              "if": {
+                "and": [
+                  "car=yes",
+                  "bicycle=yes"
+                ]
+              },
+              "then": "This is a charging station for <b>both electric cars and bicycles</b>",
+              "hideInAnswer": true
             }
           ]
         },
@@ -189,13 +231,45 @@
       ],
       "hideUnderlayingFeaturesMinPercentage": 0,
       "icon": {
-        "render": "./assets/themes/charging_stations/charging_station.svg"
+        "render": "pin:#fff;./assets/themes/charging_stations/plug.svg",
+        "mappings": [
+          {
+            "if": "bicycle=yes",
+            "then": "pin:#fff;./assets/themes/charging_stations/bicycle.svg"
+          },
+          {
+            "if": {
+              "or": [
+                "car=yes",
+                "motorcar=yes"
+              ]
+            },
+            "then": "pin:#fff;./assets/themes/charging_stations/car.svg"
+          }
+        ]
       },
+      "iconOverlays": [
+        {
+          "if": {
+            "and": [
+              "bicycle=yes",
+              {
+                "or": [
+                  "motorcar=yes",
+                  "car=yes"
+                ]
+              }
+            ]
+          },
+          "then": "circle:#fff;./assets/themes/charging_stations/car.svg",
+          "badge": true
+        }
+      ],
       "width": {
         "render": "8"
       },
       "iconSize": {
-        "render": "40,40,center"
+        "render": "50,50,bottom"
       },
       "color": {
         "render": "#00f"