{% 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 %}
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
    <script type="text/javascript">
        if (typeof L === "undefined") {
            document.write(unescape("%3Cscript src='/media/js/leaflet-0.5/leaflet.js' type='text/javascript'%3E%3C/script%3E"));
}
    </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>
    <section>
        <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 route in route_list %}
                <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 %}
            </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 country in country_list %}
                <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 %}
            </ul>
        </div>    
    </section>
    {% endblock %}
{% block js %}
<script type="text/javascript" src="/media/js/leaflet-providers.js"></script>   
<!--<script type="text/javascript" src="/media/js/mainmap.js"></script>-->
<script type="text/javascript" src="/media/js/mainmap.min.js"></script>
{% endblock%}