intotheeast-com-content/themes/intotheeast/templates/trip.html.twig

{% extends 'partials/base.html.twig' %}

{% block content %}
{% import 'macros/stats.html.twig' as stats_m %}
{% import 'macros/cycling.html.twig' as cycling_m %}
{% block map_assets %}
{% do assets.addCss('theme://css-compiled/map.css') %}
{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
{% endblock %}
{% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
{% set stories_page = grav.pages.find(page.route ~ '/stories') %}
{% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
{% set story_entries = stories_page ? stories_page.children.published() : [] %}

{% set all_items = [] %}
{% for e in journal_entries %}
    {% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.header.date}]) %}
{% endfor %}
{% for s in story_entries %}
    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.header.date}]) %}
{% endfor %}
{% set all_items = all_items|sort_by_key('date', 4) %}

{% set journal_count = journal_entries|length %}
{% set story_count = story_entries|length %}

{% set gps_points = [] %}
{% for entry in journal_entries %}
    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
        {% set gps_points = gps_points|merge([[entry.header.lat, entry.header.lng]]) %}
    {% endif %}
{% endfor %}

{% set gpx_urls = [] %}
{% for name, media in page.media.all %}
    {% if name|split('.')|last == 'gpx' %}
        {% set gpx_urls = gpx_urls|merge([page.url ~ '/' ~ name]) %}
    {% endif %}
{% endfor %}
{% set has_gpx = gpx_urls|length > 0 %}

{% set map_entries = [] %}
{% for item in all_items %}
    {% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
        {% set map_entries = map_entries|merge([{
            'type': item.type,
            'lat': item.page.header.lat|number_format(6, '.', ''),
            'lng': item.page.header.lng|number_format(6, '.', ''),
            'slug': item.page.slug,
            'title': item.page.title,
            'url': item.page.url,
            'force_connect': item.page.header.force_connect ? true : false,
            'transport_mode': item.page.header.transport_mode ? item.page.header.transport_mode : null
        }]) %}
    {% endif %}
{% endfor %}

<div class="home-layout">
    <div class="home-map-col">
        <div class="home-map" id="trip-map">
            <button class="feed-map-fullscreen-btn" id="trip-map-fullscreen" aria-label="Expand map">
                <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                    <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
                </svg>
                <span class="feed-map-fs-close" aria-hidden="true">✕</span>
            </button>
        </div>
    </div>

    {% include 'partials/trip-feed-col.html.twig' with {
        trip_page: page,
        all_items: all_items,
        journal_entries: journal_entries,
        journal_count: journal_count,
        story_count: story_count,
        has_gpx: has_gpx,
        gpx_urls: gpx_urls,
        gps_points: gps_points,
        show_sort: true
    } only %}
</div>

<script>
var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
var GPX_URLS     = {{ gpx_urls|json_encode|raw }};
var USE_GPX      = {{ page.header.use_gpx ?? true ? 'true' : 'false' }};
var AUTOCONNECT  = "{{ page.header.autoconnect ?? 'on' }}";

document.addEventListener('DOMContentLoaded', function() {
    window.tripMap = MapUtils.initEntryMap({
        container:    'trip-map',
        entries:      TRIP_ENTRIES,
        cardPrefix:   'entry-',
        storyMarkers: true,
        fullscreen:   { btnId: 'trip-map-fullscreen', colSelector: '.home-map-col' },
        gpx:          { urls: GPX_URLS, use: USE_GPX, autoconnect: AUTOCONNECT, sourcePrefix: 'gpx', journeyId: 'trip-journey' },
        fit:          { padding: 60, maxZoom: 11, singleZoom: 10 }
    });
}); // DOMContentLoaded
</script>

<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>

{% endblock %}