m038andClaude Opus 4.8
29535e39b8
Extract the duplicated MapLibre init orchestration (map construction, marker/popup loop, bounds fit, GPX journey, fullscreen toggle) into one config-driven MapUtils.initEntryMap(opts) in maplibre-utils.js, bundled into map.js. Convert trip.html.twig and both home.html.twig branches to call it; home active gains the flash-highlight + a fullscreen button to match trip, and home highlights' marker click now navigates to the article. Adds a markLatest opt (false for highlights) and exposes the map as window.tripMap/window.homeMap (used by existing Playwright specs). feed-map.html.twig and map.html.twig left on their inline init (deferred). Plan: docs/working/plans/2026-06-27-map-init-consolidation.md Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BftDn9vu9SonFAY4vxu4uk
105 lines
4.0 KiB
Twig
105 lines
4.0 KiB
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 %}
|