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

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

{% block content %}
{% set trip_page = page.parent() %}
{% set tracker_page = grav.pages.find(page.parent().route ~ '/dailies') %}
{% set all_entries = tracker_page ? tracker_page.children.published() : [] %}

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

{% set map_entries = [] %}
{% for entry in all_entries %}
    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
        {% set hero_url = null %}
        {% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
            {% set hero_url = entry.media[entry.header.hero_image].cropResize(240, 135).url %}
        {% elseif entry.media.images|length > 0 %}
            {% set hero_url = entry.media.images|first.cropResize(240, 135).url %}
        {% endif %}
        {% set map_entries = map_entries|merge([{
            'lat': entry.header.lat|number_format(6, '.', ''),
            'lng': entry.header.lng|number_format(6, '.', ''),
            'title': entry.title,
            'date': entry.date|date('d M Y'),
            'url': entry.url,
            'hero': hero_url,
            'force_connect': entry.header.force_connect ? true : false,
            'transport_mode': entry.header.transport_mode ? entry.header.transport_mode : null
        }]) %}
    {% endif %}
{% endfor %}

<div class="map-container" id="trip-map"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>

<script>
var ENTRIES  = {{ map_entries|json_encode|raw }};
var GPX_URLS = {{ gpx_urls|json_encode|raw }};

var map = new maplibregl.Map({
    container: 'trip-map',
    style: MapUtils.MAP_STYLE,
    center: [20, 20],
    zoom: 2
});

map.addControl(new maplibregl.NavigationControl(), 'top-right');

if (ENTRIES.length === 0) {
    var empty = document.createElement('div');
    empty.className = 'map-empty';
    empty.textContent = 'No locations yet — entries with GPS will appear here.';
    document.getElementById('trip-map').appendChild(empty);
}

map.on('load', function () {
    if (ENTRIES.length === 0) return;

    /* ── Markers + bounds ──────────────────────────────────────── */
    var bounds = new maplibregl.LngLatBounds();

    ENTRIES.forEach(function (entry, i) {
        var isLatest = (i === ENTRIES.length - 1);
        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
        bounds.extend(lngLat);

        var el = MapUtils.createDotMarker(isLatest);
        el.dataset.url = entry.url;
        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
            .setLngLat(lngLat)
            .setHTML('<span class="map-tip">' + entry.title + '</span>');
        el.addEventListener('mouseenter', function () { popup.addTo(map); });
        el.addEventListener('mouseleave', function () { popup.remove(); });
        el.addEventListener('click', function () { window.location.href = entry.url; });

        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(map);
    });

    /* ── Fit bounds ─────────────────────────────────────────────── */
    if (ENTRIES.length === 1) {
        map.jumpTo({ center: [parseFloat(ENTRIES[0].lng), parseFloat(ENTRIES[0].lat)], zoom: 10 });
    } else {
        map.fitBounds(bounds, { padding: 100, maxZoom: 11 });
    }

    /* ── GPX tracks + journey segments ─────────────────────────── */
    MapUtils.renderGpxJourney(map, GPX_URLS, ENTRIES, 'gpx', 'journey');
});
</script>
{% endblock %}