{% 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> →</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 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/mainmap.js"></script>--> <script type="text/javascript" src="/media/js/mainmap.min.js"></script> {% endblock%}