m038andClaude Opus 4.8
e2ba8f413a
trip.html.twig and home.html.twig hand-wrote near-identical map-column markup + a MapUtils.initEntryMap() invocation. Extract both into partials/entry-map.html.twig, parameterised (map id, global, entries, gpx config, story markers). Callers now pass resolved header values. The map engine (js/map.js initEntryMap) is unchanged; emitted config is byte-equivalent to the previous inline scripts. Verified: trip-map, home-map and window.tripMap/homeMap Playwright tests pass; both pages 200. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
50 lines
2.7 KiB
Twig
50 lines
2.7 KiB
Twig
{#
|
|
Entry-map partial — shared by trip.html.twig and home.html.twig (active-trip branch).
|
|
|
|
Renders the `.home-map-col` map column plus the thin MapUtils.initEntryMap()
|
|
invocation. The map engine itself lives in js/map.js (MapUtils.initEntryMap);
|
|
this partial only supplies markup + a parameterised call. Callers register the
|
|
map assets (map.css / map.js) themselves via their own {% block map_assets %}.
|
|
|
|
The map column always renders (home shows an empty map in pre-departure); the
|
|
init script only runs when there are entries to plot.
|
|
|
|
Required variables (via {% include ... with {...} only %}):
|
|
map_id — string: map div id + fullscreen-btn id prefix ('trip-map' | 'home-map')
|
|
map_global — string: window global the Map is assigned to ('tripMap' | 'homeMap')
|
|
entries — array: map entries [{lat, lng, slug, title, url, type?, force_connect, ...}]
|
|
card_prefix — string: scroll-to card id prefix ('entry-')
|
|
story_markers — bool: render story entries as diamond markers (trip: true, home: false)
|
|
gpx_urls — array: GPX file URLs
|
|
use_gpx — bool: whether to draw GPX tracks
|
|
autoconnect — string: journey connect mode ('on' | 'off' | 'manual' | ...)
|
|
gpx_source_prefix — string: MapLibre GPX source id prefix ('gpx' | 'home-gpx')
|
|
journey_id — string: journey layer id ('trip-journey' | 'home-journey')
|
|
#}
|
|
<div class="home-map-col">
|
|
<div class="home-map" id="{{ map_id }}">
|
|
<button class="feed-map-fullscreen-btn" id="{{ map_id }}-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>
|
|
|
|
{% if entries|length > 0 %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
window.{{ map_global }} = MapUtils.initEntryMap({
|
|
container: '{{ map_id }}',
|
|
entries: {{ entries|json_encode|raw }},
|
|
cardPrefix: '{{ card_prefix }}',
|
|
{% if story_markers %}storyMarkers: true,
|
|
{% endif %}fullscreen: { btnId: '{{ map_id }}-fullscreen', colSelector: '.home-map-col' },
|
|
gpx: { urls: {{ gpx_urls|json_encode|raw }}, use: {{ use_gpx ? 'true' : 'false' }}, autoconnect: "{{ autoconnect }}", sourcePrefix: '{{ gpx_source_prefix }}', journeyId: '{{ journey_id }}' },
|
|
fit: { padding: 60, maxZoom: 11, singleZoom: 10 }
|
|
});
|
|
}); // DOMContentLoaded
|
|
</script>
|
|
{% endif %}
|