        <g id="{{ content.ref_id }}" class="datapoint">
            <!-- {{ content.bbox }} -->
            <a href="#{{ content.ref_id }}">
                {{ content.render_geojson(bbox=content.bbox) }}
            </a>

            <g class="description">

                <rect class="description-background" x="0" y="{{ content.map_height }}px" width="100%" height="{{ content.description_height }}px" />

                <switch> <!-- switch uses first item with supported (or no) requiredExtensions -->
                    <foreignObject class="html" requiredExtensions="http://www.w3.org/1999/xhtml" x="0" y="{{ content.map_height }}px" width="100%" height="{{ content.description_height }}px"> {# either render HTML #}
                        <body xmlns="http://www.w3.org/1999/xhtml">
                            <h1>{{ content.title }}</h1>
                            {{ content.description.render() }}
                        </body>
                    </foreignObject>
                    
                    <svg class="fallback" x="0" y="{{ content.map_height }}px" width="100%" height="{{ content.description_height }}"> {# or fall back to an SVG representation that shows the markdown plainly #}

                        <text x="0" y="20" class="heading" width="100%">{{ content.title }}</text>

                        {% set lines = content.description.split("\n") %}

                        <g class="description-fallback">
                        {% for linenum in range(1, lines|length + 1) %}
                            {% set line = lines[linenum - 1] %}
                            <text x="10" y="{{ 25 + 5 + (20 * linenum) }}">{{ line }}</text>
                        {% endfor %}
                        </g>

                    </svg>

                </switch>
            </g>

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