whitewater_osm/buildings-height.json

{
    "type": "overpass",
    "name": {
        "de": "Gebäudehöhen",
        "en": "Building height"
    },
    "query": {
        "16": [
            "(",
            "  way[building];",
            "  relation[building];",
            ")"
        ]
    },
    "feature": {
        "pre": [
            "{% if tags.height %}",
            "{% set approxHeight = tags.height %}",
            "{% elseif attribute(tags, 'building:levels') %}",
            "{% set approxHeight = attribute(tags, 'building:levels') * 3.5 %}",
            "{% endif %}",
            "",
            "{% if approxHeight <= 50 %}",
            "{% set color = colorInterpolate(['green', 'red'], approxHeight / 50) %}",
            "{% elseif approxHeight %}",
            "{% set color = colorInterpolate(['red', 'yellow'], (approxHeight - 50) / 250) %} ",
            "{% else %}",
            "{% set color = '#7f7f7f' %}",
            "{% endif %}"
        ],
        "description": [
            "{% if tags.height %}",
            "{{ tags.height }}m",
            "{% endif %}",
            "",
            "{% if attribute(tags, 'building:levels') %}",
            "{{ attribute(tags, 'building:levels') }} {{ keyTrans('building:levels') }}",
            "{% endif %}"
        ],
        "markerSymbol": null,
        "listMarkerSymbol": "{{ markerCircle({fillColor: color})|raw }}",
        "priority": "{{ (approxHeight|default(0)) * -1 }}",
        "style": {
            "width": "1",
            "color": "#000000",
            "fillColor": "{{ color }}",
            "fillOpacity": "1"
        }
    },
    "info": [
        "<div style='display: inline-block'>",
        "{{ tagTrans('height') }}",
        "<table>",
        "  <tr>",
        "    <td>{{ markerCircle({ 'fillColor': '#7f7f7f' })|raw }}</td>",
        "    <td colspan>{{ trans('unknown') }}</td>",
        "  </tr>",
        "{% for i in range(0, 50, 10) %}",
        "  <tr>",
        "    <td>{{ markerCircle({ 'fillColor': colorInterpolate(['green', 'red'], i / 50) })|raw }}</td>",
        "    <td>{{ i }}m</td>",
        "  </tr>",
        "{% endfor %}",
        "{% for i in range(100, 250, 50) %}",
        "  <tr>",
        "    <td>{{ markerCircle({ 'fillColor': colorInterpolate(['red', 'yellow'], (i - 50) / 250) })|raw }}</td>",
        "    <td>{{ i }}m</td>",
        "  </tr>",
        "{% endfor %}",
        "  <tr>",
        "    <td>{{ markerCircle({ 'fillColor': 'yellow' })|raw }}</td>",
        "    <td>≥300m</td>",
        "  </tr>",
        "</table>",
        "</div>",
        "",
        "<div style='display: inline-block'>",
        "{{ tagTrans('building:levels') }}",
        "<table>",
        "  <tr>",
        "    <td>{{ markerCircle({ 'fillColor': '#7f7f7f' })|raw }}</td>",
        "    <td colspan>{{ trans('unknown') }}</td>",
        "  </tr>",
        "{% for i in range(0, 12, 3) %}",
        "  <tr>",
        "    <td>{{ markerCircle({ 'fillColor': colorInterpolate(['green', 'red'], (i * 3.5) / 50) })|raw }}</td>",
        "    <td>{{ i }}</td>",
        "  </tr>",
        "{% endfor %}",
        "{% for i in range(15, 84, 15) %}",
        "  <tr>",
        "    <td>{{ markerCircle({ 'fillColor': colorInterpolate(['red', 'yellow'], (i * 3.5 - 50) / 250) })|raw }}</td>",
        "    <td>{{ i }}</td>",
        "  </tr>",
        "{% endfor %}",
        "  <tr>",
        "    <td>{{ markerCircle({ 'fillColor': 'yellow' })|raw }}</td>",
        "    <td>≥85</td>",
        "  </tr>",
        "</table>",
        "",
        "</div>"
    ]
}