<?xml version="1.0" encoding="UTF-8"?>

<svg
    xmlns='http://www.w3.org/2000/svg'
    xmlns:dc='http://purl.org/dc/elements/1.1/'
    version='1.1'
    width="{{ content.width }}"
    height="{{ content.height + content.description_height }}"
    viewBox='0 0 {{ content.width }} {{ content.height + content.description_height }}'
    preserveAspectRatio="xMinYMin meet"
    class="map"
    >
    
    <!-- bbox: {{ content.bbox }} -->

    <style>
        {{ content.style }}
    </style>

    {% include "svg/defs.jinja" %}

    <a href="#terrain"> <!-- / click to deselect datapoint[s] -->
        <svg id="terrain" class="terrain">
            <rect class="ocean" x="0" y="0" width="100%" height="100%" />
            {{ content.render_geojson(content.terrain.geojson) }}
        </svg> <!-- / .terrain -->
    </a>

    {{ content.grid() }}

    <g class="datapoints">
        {% for datapoint in content.root_datapoints %}
            {{ datapoint.render('raw', content.bbox) }}
        {% endfor %}
    </g> <!-- / .datapoints-->
</svg>
