{% extends 'base.html' %}
{% load typogrify_tags %}
{% load truncateletters  %}
{% load slugify_under  %}
{% block pagetitle %}Luxagraf | Map and Trips{% endblock %}
{% block metadescription %}Browse luxagraf by map, see trip routes and discover essays and dispatches from around the world{% endblock %}

{#==============================================
Google Maps code
==============================================#}
{% block extrahead %}
    <script src="/media/js/leaflet-master/leaflet-mod.js"></script>
     <style>
         #map-canvas img{ border: none;}
     </style>
{% endblock %}
{%block bodyid%}id="map"{%endblock%}

{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <li><a href="/" itemprop="url" title="luxagraf homepage"><span itemprop="title">Home</span></a> &rarr;</li>
        <li>Map</li>
    </ul>
    <main role="main" class="map--wrapper">
        <h1 class="hide">Browse luxagraf by map</h1>
        <div id="map-canvas">
            <div id="map-inner-canvas" style="width: 100%; height: 100%; border: none !important;"></div>
        </div>

        <div class="map-legend">
            <h4>Trips</h4>
            <ul>
                {% for r in route_list %}{%for route in r %}
                <li><a onclick="showRoute('{{route.template_var_name}}', {{route.zoom}}, '{{route.geometry.centroid.y}}','{{route.geometry.centroid.x}}');" href="#" title="show {{route.name}} on map">{{route.name}}</a></li>
                {% endfor %}{% endfor %}
            </ul>
            <h4>Regions</h4>
            <ul>
            {%for region in region_list %}
                <li><a href="#{{region.slug}}" onclick="focusCountry({{region.lat}}, {{region.lon}}, {{region.zoom_level}});" title="See all writing from {{region.name|title}}">{{region.name}}</a></li>
            {% endfor %}
            </ul>
            <h4>Countries</h4>
            <ul>
                <li><a onclick="focusCountry(19.311143,2.460938,2);" href="#" title="view all countries">All</a></li>
                {%for c in country_list %}
                {% for country in c %}
                <li><a href="#{{country.slug}}" onclick="focusCountry({{country.lat}}, {{country.lon}}, {{country.zoom_level}});" title="See all writing from {{country.name|title}}">{{country.name}}</a></li>
            {% endfor %}
            {% endfor %}
            </ul>
        </div>    
    {% endblock %}
{% block js %}
<!--<script type="text/javascript" src="/media/js/mainmap.js"></script>-->
<script type="text/javascript" src="/media/js/mainmap.js"></script>
{% endblock%}