GTFS Realtime Display Map

A live vehicle layer for GTFS Display maps, and an embeddable map you can drop into another site with an iframe. Vehicles come from your own GTFS Realtime ingest, not from a third-party prediction service.

Features

• A map display variant at /gtfs/display/{route|stop}/{id}/map/embed.
• Vehicle markers with heading arrows and route labels, refreshed on every poll tick. Icons default to Maki glyphs chosen by GTFS route_type; agency modules can supply per-vehicle liveries through a hook, which is how fleet-specific artwork stays out of this module.
• Stop dots that open arrival predictions on click, and the route shape drawn in the route's own colour.
• Iframe embedding that actually works: frame-ancestors set from configuration, and a postMessage handshake so the host page can reveal or collapse the embed depending on whether there is anything to show.
• URL parameters for host-page integration — open a particular stop's popup on load, hide vehicle labels, or link stop names back to pages on the embedding site.

Requirements

GTFS Display 3.x, GTFS Display Map 2.x and GTFS Realtime 2.x.

Installation

composer require drupal/gtfs_display_map_rt

Configuration

Administration › GTFS › Displays › Live map (/admin/gtfs/display/map-rt): basemap style
URL, allowed frame ancestors, and the poll interval, which is 10 seconds by default.

Embedding

Point an iframe at the embed URL and listen for the status message. The map always returns a
page, so the host decides whether to show it:

<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Live map"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://example.org/gtfs/display/route/5R/map/embed"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'message'</span>, (e) =&gt; {
    <span class="hljs-keyword">if</span> (e.origin !== <span class="hljs-string">'https://example.org'</span>) <span class="hljs-keyword">return</span>;
    <span class="hljs-keyword">const</span> m = e.data &amp;&amp; e.data.gtfsLiveMap;
    <span class="hljs-keyword">if</span> (m &amp;&amp; m.status === <span class="hljs-string">'ready'</span>) { <span class="hljs-comment">/* reveal the container */</span> }
    <span class="hljs-keyword">if</span> (m &amp;&amp; m.status === <span class="hljs-string">'empty'</span>) { <span class="hljs-comment">/* hide the container */</span> }
  });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

Basemap coverage

The default basemap style is hosted at styles.gtfs.media and currently covers California
only. Planet-wide tiles are in progress. Until then, if you are mapping anywhere else, set
your own style URL in the module settings — any MapLibre GL style will work, provided the
host sends CORS headers.

Related modules

• GTFS Core — the entities, the importer and the API everything else reads
• GTFS Realtime — trip updates, vehicle positions and service alerts
• GTFS Display — stop, route and system displays for public screens
• GTFS Display Map — route and stop geometry on a map
• GTFS Schedule — readable timetables
• GTFS 511 — feed provisioning from the 511 SF Bay API
• GTFS+ — the GTFS+ extension files

Maintainers

Maintained by tbcs and jpsalter,
supported by FivePaths. These modules run public transit information
systems in daily service. Issues and merge requests are welcome, and so are co-maintainers.