{# mapData array #}

<div class="hidden-lg hidden-md">
    <div class="map" id="map-poland-sidebar">
        <ul class="poland">
            {% for key, row in mapData %}
                <li class="pl{{ key }}">
                    <a href="{{ row.path }}">
                        {{- row.name -}}<br />
                        <strong class="poland-amount">[{{ row.amount }}]</strong>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
    <script type="text/javascript">
        $(function() {
            $("#map-poland-sidebar").CSSMap({
                size: 540,
                responsive: 'auto',
                tapOnce: true,
                tooltips: 'visible'
            });
        });
    </script>
</div>
<div class="hidden-sm hidden-xs hidden-print">
    <div class="map" id="map-poland-sidebar2">
        <ul class="poland">
            {% for key, row in mapData %}
                <li class="pl{{ key }}">
                    <a href="{{ row.path }}">
                        {{- row.name -}}<br />
                        <strong class="poland-amount">[{{ row.amount }}]</strong>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
    <script type="text/javascript">
        $(function() {
            $("#map-poland-sidebar2").CSSMap({
                size: 540,
                responsive: 'auto',
                tapOnce: true,
                tooltips: 'floating-top-center'
            });
        });
    </script>
</div>