cycleway_width: improve popup body

cycle_directions-pattern.json

@@ -1,81 +0,0 @@
-{
-    "type": "overpass",
-    "name": {
-        "de": "Radwegrichtungen (patterns)",
-        "en": "Cycleway Directions (patterns)"
-    },
-    "query": {
-        "14": [
-            "(",
-            "way[highway=cycleway];",
-            "way[cycleway];",
-            "way[\"cycleway:left\"];",
-            "way[\"cycleway:right\"];",
-            "way[highway][oneway];",
-            "way['oneway:bicycle'];",
-            ")"
-        ]
-    },
-    "feature": {
-        "pre": [
-            "{% set oneway = 0 %}",
-            "{% if tags.oneway in [ 'yes', '1' ] %}{% set oneway = 1 %}",
-            "{% elseif tags.oneway in [ '-1' ] %}{% set oneway = -1 %}",
-            "{% endif %}",
-            "",
-            "{% set driving_side = 'right' %}"
-        ],
-        "markerSymbol": null,
-        "listMarkerSymbol": "line",
-        "styles": "{% if oneway != 0 %}default,{% endif %}left,right",
-        "style": {
-            "width": "0",
-            "pattern": "arrowHead",
-            "pattern-offset": "17",
-            "pattern-repeat": "25",
-            "pattern-polygon": "true",
-            "pattern-pixelSize": "{% if tags.highway == 'cycleway' %}7{% else %}9{% endif %}",
-            "pattern-path-color": "{% if tags.highway == 'cycleway' %}#007f00{% else %}#000000{% endif %}",
-            "pattern-path-width": "1",
-            "pattern-path-fillOpacity": "1",
-            "pattern-angleCorrection": "{% if oneway == -1 %}180{% else %}0{% endif %}"
-        },
-        "style:highlight": null,
-        "style:left": {
-            "width": "0",
-            "pattern": "{% if tags.cycleway in [ 'opposite', 'opposite_lane', 'opposite_track' ] or attribute(tags, 'cycleway:left') in [ 'opposite', 'opposite_lane', 'opposite_track' ] or attribute(tags, 'cycleway:right') in [ 'opposite', 'opposite_lane', 'opposite_track' ] or attribute(tags, 'oneway:bicycle') == 'no' %}arrowHead{% endif %}",
-            "pattern-offset": "0",
-            "pattern-repeat": "25",
-            "pattern-polygon": "true",
-            "pattern-pixelSize": "7",
-            "pattern-path-width": "1",
-            "pattern-path-color": [
-                "{% if tags.oneway in [ 'yes', '1' ] and (tags.cycleway in [ 'opposite_track' ] or attribute(tags, 'cycleway:left') in [ 'opposite_track' ] or attribute(tags, 'cycleway:right') in [ 'opposite_track' ]) %}",
-                "#00af00",
-                "{% elseif tags.oneway in [ 'yes', '1' ] and (tags.cycleway in [ 'opposite_lane', 'opposite' ] or attribute(tags, 'cycleway:left') in [ 'opposite', 'opposite_lane' ] or attribute(tags, 'cycleway:right') in [ 'opposite', 'opposite_lane' ] or attribute(tags, 'oneway:bicycle') == 'no') %}",
-                "#00ff00",
-                "{% endif %}"
-            ],
-            "pattern-path-fillOpacity": "1",
-            "pattern-angleCorrection": [
-                "{% if oneway == -1 %}0{% else %}180{% endif %}"
-            ]
-        }
-    },
-    "info": [
-        "<table>",
-        "  <tr>",
-        "    <td>{{ markerLine(evaluate({ \"oneway\": \"yes\", \"highway\": \"cycleway\" }))|raw }}</td>",
-        "    <td>{{ tagTrans('highway', 'cycleway') }}</td>",
-        "  </tr>",
-        "  <tr>",
-        "    <td>{{ markerLine(evaluate({ \"oneway\": \"yes\", \"cycleway\": \"track\" }))|raw }}</td>",
-        "    <td>{{ tagTrans('cycleway', 'track') }}</td>",
-        "  </tr>",
-        "  <tr>",
-        "    <td>{{ markerLine(evaluate({ \"oneway\": \"yes\", \"cycleway\": \"lane\" }))|raw }}</td>",
-        "    <td>{{ tagTrans('cycleway', 'lane') }}</td>",
-        "  </tr>",
-        "</table>"
-    ]
-}

cycle_directions-pattern.yaml

@@ -0,0 +1,72 @@
+name:
+  de: Radwegrichtungen (patterns)
+  en: Cycleway Directions (patterns)
+query:
+  14: |-
+    (
+    way[highway=cycleway];
+    way[cycleway];
+    way["cycleway:left"];
+    way["cycleway:right"];
+    way[highway][oneway];
+    way['oneway:bicycle'];
+    )
+feature:
+  pre: |-
+    {% set oneway = 0 %}
+    {% if tags.oneway in [ 'yes', '1' ] %}{% set oneway = 1 %}
+    {% elseif tags.oneway in [ '-1' ] %}{% set oneway = -1 %}
+    {% endif %}
+
+    {% set driving_side = 'right' %}
+  markerSymbol: null
+  listMarkerSymbol: line
+  styles: '{% if oneway != 0 %}default,{% endif %}left,right'
+  style:
+    width: 0
+    pattern: arrowHead
+    pattern-offset: 17
+    pattern-repeat: 25
+    pattern-polygon: true
+    pattern-pixelSize: |-
+      {% if tags.highway == "cycleway" %}7{% else %}9{% endif %}
+    pattern-path-color: |-
+      {% if tags.highway == "cycleway" %}#007f00{% else %}#000000{% endif %}
+    pattern-path-width: 1
+    pattern-path-fillOpacity: 1
+    pattern-angleCorrection: |-
+      {% if oneway == -1 %}180{% else %}0{% endif %}
+  style:highlight: null
+  style:left:
+    width: 0
+    pattern: |-
+      {% if tags.cycleway in [ "opposite", "opposite_lane", "opposite_track" ] or attribute(tags, "cycleway:left") in [ "opposite", "opposite_lane", "opposite_track" ] or attribute(tags, "cycleway:right") in [ "opposite", "opposite_lane", "opposite_track" ] or attribute(tags, "oneway:bicycle") == "no" %}arrowHead{% endif %}
+    pattern-offset: 0
+    pattern-repeat: 25
+    pattern-polygon: true
+    pattern-pixelSize: 7
+    pattern-path-width: 1
+    pattern-path-color: |-
+      {% if tags.oneway in [ 'yes', '1' ] and (tags.cycleway in [ 'opposite_track' ] or attribute(tags, 'cycleway:left') in [ 'opposite_track' ] or attribute(tags, 'cycleway:right') in [ 'opposite_track' ]) %}
+      #00af00
+      {% elseif tags.oneway in [ 'yes', '1' ] and (tags.cycleway in [ 'opposite_lane', 'opposite' ] or attribute(tags, 'cycleway:left') in [ 'opposite', 'opposite_lane' ] or attribute(tags, 'cycleway:right') in [ 'opposite', 'opposite_lane' ] or attribute(tags, 'oneway:bicycle') == 'no') %}
+      #00ff00
+      {% endif %}
+    pattern-path-fillOpacity: 1
+    pattern-angleCorrection: |-
+      {% if oneway == -1 %}0{% else %}180{% endif %}
+info: |-
+  <table>
+    <tr>
+      <td>{{ markerLine(evaluate({ "oneway": "yes", "highway": "cycleway" }))|raw }}</td>
+      <td>{{ tagTrans('highway', 'cycleway') }}</td>
+    </tr>
+    <tr>
+      <td>{{ markerLine(evaluate({ "oneway": "yes", "cycleway": "track" }))|raw }}</td>
+      <td>{{ tagTrans('cycleway', 'track') }}</td>
+    </tr>
+    <tr>
+      <td>{{ markerLine(evaluate({ "oneway": "yes", "cycleway": "lane" }))|raw }}</td>
+      <td>{{ tagTrans('cycleway', 'lane') }}</td>
+    </tr>
+  </table>

cycleway_width.yaml

@@ -0,0 +1,247 @@
+query: |
+  (
+  way[highway=cycleway];
+  way["cycleway:width"];
+  way["cycleway:left"]["cycleway:left"!~"(no|separate)"];
+  way["cycleway:right"]["cycleway:right"!~"(no|separate)"];
+  way["cycleway:both"]["cycleway:both"!~"(no|separate)"];
+  )
+feature:
+  pre: |
+    {% set driving_side = 'right' %}
+
+    {% set width = attribute(tags, 'cycleway:width') %}
+    {% if width matches "/'$/" %}
+      {% set width = (width|slice(0, -1)) * 0.3048 %}
+    {% endif %}
+
+    {% set leftCycle = attribute(tags, 'cycleway:left')|default(attribute(tags, 'cycleway:both')) %}
+    {% if leftCycle in ['no', 'separate'] %}
+      {% set leftCycle = '' %}
+    {% endif %}
+    {% set leftOneway = attribute(tags, 'cycleway:left:oneway')|default(attribute(tags, 'cycleway:both:oneway')) %}
+    {% if not leftOneway or leftOneway in ['yes'] %}
+      {% set leftOneway = driving_side ? -1 : 1 %}
+    {% elseif leftOneway in ['no'] %}
+      {% set leftOneway = 0 %}
+    {% endif %}
+    {% set leftWidth = attribute(tags, 'cycleway:left:width')|default(attribute(tags, 'cycleway:both:width')) %}
+    {% if leftWidth matches "/'$/" %}
+      {% set leftWidth = (leftWidth|slice(0, -1)) * 0.3048 %}
+    {% endif %}
+
+    {% set rightCycle = attribute(tags, 'cycleway:right')|default(attribute(tags, 'cycleway:both')) %}
+    {% if rightCycle in ['no', 'separate'] %}
+      {% set rightCycle = '' %}
+    {% endif %}
+    {% set rightOneway = attribute(tags, 'cycleway:right:oneway')|default(attribute(tags, 'cycleway:both:oneway')) %}
+    {% if not rightOneway or rightOneway in ['yes'] %}
+      {% set rightOneway = driving_side ? 1 : -1 %}
+    {% elseif rightOneway in ['no'] %}
+      {% set rightOneway = 0 %}
+    {% endif %}
+    {% set rightWidth = attribute(tags, 'cycleway:right:width')|default(attribute(tags, 'cycleway:both:width')) %}
+    {% if rightWidth matches "/'$/" %}
+      {% set rightWidth = (rightWidth|slice(0, -1)) * 0.3048 %}
+    {% endif %}
+
+  styles: default{% if leftCycle %},left{% endif %}{% if rightCycle %},right{% endif %}
+  style:
+    width: 4
+    opacity: |
+      {{ tags.highway == 'cycleway' or attribute(tags, 'cycleway:width') ? 1 : 0 }}
+    color: |
+      {% set minWidth = tags.oneway in ['yes', 1, -1] ? const.minWidthOneway : const.minWidthBoth %}
+      {% set optWidth = tags.oneway in ['yes', 1, -1] ? const.optWidthOneway : const.optWidthBoth %}
+
+      {% if width %}
+      {{ colorInterpolate(const.colorScheme, (width - minWidth) / (optWidth - minWidth)) }}
+      {% else %}black
+      {% endif %}
+    lineCap: |
+      {{ tags.oneway in ['yes', 1, -1] ? 'butt' : 'round' }}
+    dashArray: |
+      {{ tags.oneway in ['yes', 1, -1] ? '27,8' : '' }}
+    dashOffset: |
+      {{ tags.oneway in [-1] ? 28 : 0 }}
+    noClip: |
+      {{ tags.oneway in ['yes', 1, -1] }}
+    pattern: |
+      {% if tags.highway == 'cycleway' or attribute(tags, 'cycleway:width') %}
+      {% if tags.oneway in ['yes', 1, -1] %}arrowHead{% endif %}
+      {% endif %}
+    pattern-offset: |
+      {{ tags.oneway in [-1] ? 4 : 30.5 }}
+    pattern-repeat: 35
+    pattern-polygon: true
+    pattern-pixelSize: 9
+    pattern-angleCorrection: |
+      {{ tags.oneway in [-1] ? 180 : 0 }}
+    pattern-path-width: 0
+    pattern-path-color: |
+      {% if width %}
+      {{ colorInterpolate(const.colorScheme, (width - minWidth) / (optWidth - minWidth)) }}
+      {% else %}black
+      {% endif %}
+    pattern-path-fillOpacity: 1
+  style:left:
+    offset: -5
+    width: |
+      {{ leftCycle in ['no', 'separate'] ? 0 : 3 }}
+    color: |
+      {% set minWidth = const.minWidthOneway %}
+      {% set optWidth = const.optWidthOneway %}
+
+      {% if leftWidth %}
+      {{ colorInterpolate(const.colorScheme, (leftWidth - minWidth) / (optWidth - minWidth)) }}
+      {% else %}black
+      {% endif %}
+    lineCap: |
+      {{ leftOneway ? 'butt' : 'round' }}
+    dashArray: |
+      {{ leftOneway ? '27,8' : '' }}
+    dashOffset: |
+      {{ leftOneway in [-1] ? 28 : 0 }}
+    noClip: |
+      {{ leftOneway }}
+    pattern: |
+      {% if leftOneway %}arrowHead{% endif %}
+    pattern-offset: |
+      {{ leftOneway == -1 ? 4 : 30.5 }}
+    pattern-lineOffset: -5
+    pattern-repeat: 35
+    pattern-polygon: true
+    pattern-pixelSize: 9
+    pattern-angleCorrection: |
+      {{ leftOneway == -1 ? 180 : 0 }}
+    pattern-path-width: 0
+    pattern-path-color: |
+      {% if leftWidth %}
+      {{ colorInterpolate(const.colorScheme, (leftWidth - minWidth) / (optWidth - minWidth)) }}
+      {% else %}black
+      {% endif %}
+    pattern-path-fillOpacity: 1
+  style:right:
+    offset: 5
+    width: |
+      {{ rightCycle in ['no', 'separate'] ? 0 : 3 }}
+    color: |
+      {% set minWidth = const.minWidthOneway %}
+      {% set optWidth = const.optWidthOneway %}
+
+      {% if rightWidth %}
+      {{ colorInterpolate(const.colorScheme, (rightWidth - minWidth) / (optWidth - minWidth)) }}
+      {% else %}black
+      {% endif %}
+    lineCap: |
+      {{ rightOneway ? 'butt' : 'round' }}
+    dashArray: |
+      {{ rightOneway ? '27,8' : '' }}
+    dashOffset: |
+      {{ rightOneway in [-1] ? 28 : 0 }}
+    noClip: |
+      {{ rightOneway }}
+    pattern: |
+      {% if rightOneway %}arrowHead{% endif %}
+    pattern-offset: |
+      {{ rightOneway == -1 ? 4 : 30.5 }}
+    pattern-lineOffset: 5
+    pattern-repeat: 35
+    pattern-polygon: true
+    pattern-pixelSize: 9
+    pattern-angleCorrection: |
+      {{ rightOneway == -1 ? 180 : 0 }}
+    pattern-path-width: 0
+    pattern-path-color: |
+      {% if rightWidth %}
+      {{ colorInterpolate(const.colorScheme, (rightWidth - minWidth) / (optWidth - minWidth)) }}
+      {% else %}black
+      {% endif %}
+    pattern-path-fillOpacity: 1
+  markerSymbol: false
+  listMarkerSymbol: line
+  description: |
+    {{ tagTrans('highway', tags.highway) }}
+  details: |
+    {% if not attribute(tags, 'cycleway:width') %}
+    {% elseif attribute(tags, 'cycleway:width') matches "/'$/" %}
+      {{ attribute(tags, 'cycleway:width') }}
+    {% else %}
+      {{ attribute(tags, 'cycleway:width') }}m
+    {% endif %}
+  body: |
+    <ul>
+    {% if tags.highway in ['cycleway'] or attribute(tags, 'cycleway:width') %}
+    <li>
+      {{ keyTrans('cycleway:width') }}:
+      {% if not attribute(tags, 'cycleway:width') %}
+        {{ trans('unknown') }}
+      {% elseif attribute(tags, 'cycleway:width') matches "/(m|')$/" %}
+        {{ attribute(tags, 'cycleway:width') }}
+      {% else %}
+        {{ attribute(tags, 'cycleway:width') }}m
+      {% endif %}
+    </li>
+    {% endif %}
+
+    {% if leftCycle %}
+    <li>{{ keyTrans('cycleway:left') }}:<ul>
+      <li>{{ keyTrans('cycleway') }}: {{ tagTrans('cycleway', attribute(tags, 'cycleway:left')|default(attribute(tags, 'cycleway:both'))) }}</li>
+      <li>
+        {{ keyTrans('cycleway:width') }}:
+        {% if not leftWidth %}
+          {{ trans('unknown') }}
+        {% elseif attribute(tags, 'cycleway:left:width')|default(attribute(tags, 'cycleway:both:width')) matches "/(m|')$/" %}
+          {{ attribute(tags, 'cycleway:left:width')|default(attribute(tags, 'cycleway:both:width')) }}
+        {% else %}
+          {{ leftWidth }}m
+        {% endif %}
+      </li>
+    </ul></li>
+    {% endif %}
+
+    {% if rightCycle %}
+    <li>{{ keyTrans('cycleway:right') }}:<ul>
+      <li>{{ keyTrans('cycleway') }}: {{ tagTrans('cycleway', attribute(tags, 'cycleway:right')|default(attribute(tags, 'cycleway:both'))) }}</li>
+      <li>
+      {{ keyTrans('cycleway:width') }}:
+      {% if not rightWidth %}
+        {{ trans('unknown') }}
+      {% elseif attribute(tags, 'cycleway:right:width')|default(attribute(tags, 'cycleway:both:width')) matches "/(m|')$/" %}
+        {{ attribute(tags, 'cycleway:right:width')|default(attribute(tags, 'cycleway:both:width')) }}
+      {% else %}
+        {{ rightWidth }}m
+      {% endif %}
+      </li>
+    </ul></li>
+    {% endif %}
+    </ul>
+info: |
+  <table>
+    <tr>
+      <th>Symbol</th>
+      <th>{{ keyTrans('oneway') }}={{ tagTrans('oneway', 'yes') }}</th>
+      <th>{{ keyTrans('oneway') }}={{ tagTrans('oneway', 'no') }}</th>
+    </tr>
+    {% for v in range(0, 1, 0.25) %}
+    <tr>
+      <td>
+        {{ markerLine({ width: 4, color: colorInterpolate(const.colorScheme, v) }) }}
+      </td>
+      <td>
+        {% if v == 0 %}<={% elseif v == 1 %}>={% endif %}
+        {{ (const.minWidthOneway + (v * (const.optWidthOneway - const.minWidthOneway)))|number_format(2) }}m
+      </td>
+      <td>
+        {% if v == 0 %}<={% elseif v == 1 %}>={% endif %}
+        {{ (const.minWidthBoth + (v * (const.optWidthBoth - const.minWidthBoth)))|number_format(2) }}m
+      </td>
+    </tr>
+    {% endfor %}
+  </table>
+const:
+  minWidthBoth: 1.5
+  optWidthBoth: 5
+  minWidthOneway: 0.75
+  optWidthOneway: 3
+  colorScheme: ['#ff0000', '#ff00ff', '#0000ff']