query: |
  (
  way[highway=cycleway];
  way["cycleway:width"];
  )
feature:
  style:
    pre: |
      {% set width = attribute(tags, 'cycleway:width') %}
      {% if width matches "/'$/" %}
        {% set width = (width|slice(0, -1)) * 0.3048 %}
      {% endif %}
    width: 4
    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.oneway in ['yes', 1, -1] %}arrowHead{% 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
  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') %}
        {{ trans('unknown') }}
      {% elseif attribute(tags, 'cycleway:width') matches "/(m|')$/" %}
        {{ attribute(tags, 'cycleway:width') }}
      {% else %}
        {{ attribute(tags, 'cycleway:width') }}m
      {% 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', '#7f7fff', '#0000ff']