query: |
  (
  way[highway=cycleway];
  way["cycleway:width"];
  )
feature:
  style:
    width: 4
    color: |
      {% set width = attribute(tags, 'cycleway:width') %}
      {% if width matches "/'$/" %}
        {% set width = (width|slice(0, -1)) * 0.3048 %}
      {% endif %}

      {% set optWidth = tags.oneway in ['yes', 1, -1] ? 3 : 5 %}

      {% if width %}
      {{ colorInterpolate(['#ff0000', '#7f7f7ff'], width / optWidth) }}
      {% else %}black
      {% endif %}
  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>
    <li>
      {{ keyTrans('cycleway:width') }}:
      {% if not attribute(tags, 'cycleway:width') %}
      {% elseif attribute(tags, 'cycleway:width') matches "/(m|')$/" %}
        {{ attribute(tags, 'cycleway:width') }}
      {% else %}
        {{ attribute(tags, 'cycleway:width') }}m
      {% endif %}
    </ul>