More refactoring, stabilizing rotation and direction_gradient

assets/layers/direction/direction.json

@@ -5,7 +5,10 @@
   },
   "minzoom": 16,
   "overpassTags": {
-    "or": ["camera:direction~*","direction~*"]
+    "or": [
+      "camera:direction~*",
+      "direction~*"
+    ]
   },
   "doNotDownload": true,
   "passAllFeatures": true,
@@ -14,7 +17,16 @@
     "en": "This layer visualizes directions"
   },
   "tagRenderings": [],
-  "icon":  "./assets/svg/direction_gradient.svg",
+  "icon": {
+    "render": "direction_gradient:var(--catch-detail-color)",
+    "#": "For some weird reason, showing the icon in the layer control panel breaks the svg-gradient (because the svg gradient has a global color or smthng) - so we use a different icon without gradient",
+    "mappings": [
+      {
+        "if": "id=node/-1",
+        "then": "direction:var(--catch-detail-color)"
+      }
+    ]
+  },
   "rotation": {
     "render": "{camera:direction}deg",
     "mappings": [
@@ -24,7 +36,7 @@
       }
     ]
   },
-  "iconSize":  "200,200,center",
+  "iconSize": "200,200,center",
   "color": "--catch-detail-color",
   "stroke": "0",
   "presets": [],

assets/layers/surveillance_cameras/surveillance_cameras.json

@@ -335,6 +335,7 @@
     ]
   },
   "rotation": {
+    "#": "Note: {camera:direction} is substituted by a number, giving the string 'calc(123deg + 90deg)'  ; it is this string that is used as css property, which interprets the calc",
     "render": "calc({camera:direction}deg + 90deg)",
     "mappings": [
       {

assets/svg/direction.svg

@@ -5,11 +5,11 @@
    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="svg8"
-   version="1.1"
-   viewBox="0 0 100 100"
+   width="100"
    height="100"
-   width="100">
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg8">
   <metadata
      id="metadata8">
     <rdf:RDF>
@@ -25,7 +25,7 @@
   <defs
      id="defs6" />
   <path
-     id="path821"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
      d="M 49.787737,49.857275 20.830626,9.2566092 C 35.979158,-2.144159 60.514289,-3.8195259 78.598237,9.0063685 Z"
-     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+     id="path821" />
 </svg>

assets/svg/direction_gradient.svg

@@ -6,48 +6,11 @@
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="100"
-   height="100"
-   viewBox="0 0 100 100"
-   version="1.1"
    id="svg8"
-   sodipodi:docname="direction_gradient.svg"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
-  <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="1001"
-     id="namedview10"
-     showgrid="false"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:zoom="9.44"
-     inkscape:cx="69.372244"
-     inkscape:cy="85.073455"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg8">
-    <sodipodi:guide
-       position="50,117.79661"
-       orientation="1,0"
-       id="guide819"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="57.627119,50"
-       orientation="0,1"
-       id="guide821"
-       inkscape:locked="false" />
-  </sodipodi:namedview>
+   version="1.1"
+   viewBox="0 0 100 100"
+   height="100"
+   width="100">
   <metadata
      id="metadata8">
     <rdf:RDF>
@@ -56,7 +19,6 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -65,28 +27,27 @@
     <linearGradient
        id="linearGradient820">
       <stop
-         id="innercolor"
+         style="stop-color:#000000;stop-opacity:1;"
          offset="0"
-         style="stop-color:#000000;stop-opacity:1;" />
+         id="innercolor" />
       <stop
-         id="outercolor"
+         style="stop-color:#000000;stop-opacity:0"
          offset="1"
-         style="stop-color:#000000;stop-opacity:0" />
+         id="outercolor" />
     </linearGradient>
     <radialGradient
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.5439431,-0.01852438,0.02075364,1.7297431,-27.986574,-42.187244)"
-       r="28.883806"
-       fy="53.828533"
-       fx="49.787739"
-       cy="53.828533"
-       cx="49.787739"
+       xlink:href="#linearGradient820"
        id="radialGradient828"
-       xlink:href="#linearGradient820" />
+       cx="49.787739"
+       cy="53.828533"
+       fx="49.787739"
+       fy="53.828533"
+       r="28.883806"
+       gradientTransform="matrix(1.5439431,-0.01852438,0.02075364,1.7297431,-27.986574,-42.187244)"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <path
-     style="fill:url(#radialGradient828);fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="M 50,50 21.042889,9.3993342 C 36.191421,-2.001434 60.726552,-3.6768009 78.8105,9.1490935 Z"
      id="path821"
-     inkscape:connector-curvature="0" />
+     d="M 50,50 21.042889,9.3993342 C 36.191421,-2.001434 60.726552,-3.6768009 78.8105,9.1490935 Z"
+     style="fill:url(#radialGradient828);fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 </svg>