+ {loading && (
+
+ );
+}
+
+function buildCountries(geo, globeGroup, radius, meshesRef) {
+ const meshes = [];
+ for (const feat of geo.features) {
+ const numId = String(feat.id).padStart(3, '0');
+ const iso2 = NUM_TO_ISO2[numId];
+ const name =
+ (feat.properties && feat.properties.name) ||
+ ISO2_TO_NAME_FALLBACK[iso2] ||
+ iso2 ||
+ 'Unknown';
+ const feeds = iso2 && FEED_DATA[iso2] ? FEED_DATA[iso2] : 0;
+ const baseColor = feedsToColor(feeds);
+
+ const polys =
+ feat.geometry.type === 'Polygon'
+ ? [feat.geometry.coordinates]
+ : feat.geometry.coordinates;
+
+ const outerRings = polys.map((rings) => rings[0]).filter(Boolean);
+ const [clon, clat] = polygonCentroid(outerRings);
+ const centroid3D = lonLatToVec3(clon, clat, radius * 1.02);
+
+ const geoms = [];
+ for (const rings of polys) {
+ const g = polygonToSphereGeometry(rings, radius, 2);
+ if (g) geoms.push(g);
+ }
+ if (!geoms.length) continue;
+
+ const merged = mergeGeometries(geoms);
+ const mat = new THREE.MeshPhongMaterial({
+ color: baseColor.clone(),
+ emissive: 0x000000,
+ shininess: 6,
+ specular: 0x111122,
+ side: THREE.DoubleSide,
+ transparent: feeds === 0,
+ opacity: feeds === 0 ? 0.3 : 1,
+ });
+ const mesh = new THREE.Mesh(merged, mat);
+ mesh.userData = {
+ iso2: iso2 || '??',
+ name,
+ feeds,
+ baseColor: baseColor.clone(),
+ centroid3D,
+ };
+ globeGroup.add(mesh);
+ if (feeds > 0) meshes.push(mesh);
+
+ // Border outlines (thin white lines between countries).
+ for (const rings of polys) {
+ const outer = rings[0];
+ if (!outer || outer.length < 2) continue;
+ const pts = outer.map(([lon, lat]) =>
+ lonLatToVec3(lon, lat, radius * 1.001),
+ );
+ const lineGeom = new THREE.BufferGeometry().setFromPoints(pts);
+ const lineMat = new THREE.LineBasicMaterial({
+ color: 0xffffff,
+ transparent: true,
+ opacity: 0.55,
+ });
+ globeGroup.add(new THREE.Line(lineGeom, lineMat));
+ }
+ }
+ meshesRef.current = meshes;
+}
+
+function mergeGeometries(geoms) {
+ let total = 0;
+ for (const g of geoms) total += g.attributes.position.count;
+ const positions = new Float32Array(total * 3);
+ let offset = 0;
+ for (const g of geoms) {
+ const arr = g.attributes.position.array;
+ positions.set(arr, offset);
+ offset += arr.length;
+ }
+ const merged = new THREE.BufferGeometry();
+ merged.setAttribute(
+ 'position',
+ new THREE.Float32BufferAttribute(positions, 3),
+ );
+ merged.computeVertexNormals();
+ return merged;
+}
diff --git a/src/app/components/WorldGlobeSummit.tsx b/src/app/components/WorldGlobeSummit.tsx
new file mode 100644
index 00000000..cf55f1aa
--- /dev/null
+++ b/src/app/components/WorldGlobeSummit.tsx
@@ -0,0 +1,2592 @@
+// @ts-nocheck
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import earcut from 'earcut';
+import {
+ ATTENDEES_BY_COUNTRY,
+ SUMMIT_ATTENDEES,
+ SUMMIT_CITIES,
+ SUMMIT_COUNTRIES,
+} from './summit-attendees';
+import starSprite from './star.png';
+
+type FullscreenElement = HTMLElement & {
+ webkitRequestFullscreen?: () => Promise
+ Loading globe…
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+ {selected && (
+
+
+ )}
+ {allowFullscreen && !isFullscreen && (
+
+ )}
+
+ {selected.iso2}
+
+
+ {selected.name}
+
+
+
+ {selected.feeds.toLocaleString()}
+ {' '}
+ {selected.feeds === 1 ? 'feed' : 'feeds'}
+
+
+
+ {/* Popup entrance animation */}
+
+
+ {loading && (
+
+ );
+}
+
+// Draws one glowing arc from each attendee city back to Montreal — the
+// summit's host city — so the globe reads as "the world converging on
+// Montreal" rather than just a set of shaded countries.
+function buildAttendeeArcs(globeGroup, radius, cities) {
+ const arcRadius = radius * CITY_MARKER_RADIUS_SCALE;
+ const montrealDir = lonLatToVec3(MONTREAL_LON, MONTREAL_LAT, 1);
+ const arcs = [];
+ for (const city of cities) {
+ const fromDir = lonLatToVec3(city.lon, city.lat, 1);
+ const arc = createAttendeeArc(
+ fromDir,
+ montrealDir,
+ arcRadius,
+ MD_PERIWINKLE,
+ );
+ arc.userData.municipality = city.municipality;
+ arc.userData.iso2 = city.iso2;
+ globeGroup.add(arc);
+ arcs.push(arc);
+ }
+ return arcs;
+}
+
+function buildCountries(geo, globeGroup, radius, meshesRef) {
+ const meshes = [];
+ for (const feat of geo.features) {
+ const numId = String(feat.id).padStart(3, '0');
+ const iso2 = NUM_TO_ISO2[numId];
+ const name =
+ (feat.properties && feat.properties.name) ||
+ ISO2_TO_NAME_FALLBACK[iso2] ||
+ iso2 ||
+ 'Unknown';
+ const feeds = iso2 && FEED_DATA[iso2] ? FEED_DATA[iso2] : 0;
+ const feedsByType = splitFeedCounts(feeds);
+ const hasAttendees = iso2 && SUMMIT_COUNTRIES.has(iso2);
+
+ // Equal flat shade for every summit country; faded otherwise.
+ const baseColor = new THREE.Color(
+ hasAttendees ? SUMMIT_COLOR : SUMMIT_INACTIVE,
+ );
+
+ const polys =
+ feat.geometry.type === 'Polygon'
+ ? [feat.geometry.coordinates]
+ : feat.geometry.coordinates;
+
+ const outerRings = polys.map((rings) => rings[0]).filter(Boolean);
+
+ // Skip pole-encircling features (Antarctica). Its ring winds a full ±360°
+ // around the south pole; triangulating it produces a polar-cap fill whose
+ // boundary renders as a smooth ring that looks like a false equator. It has
+ // no transit relevance, so we omit it entirely (fill and border).
+ if (outerRings.some(ringEncirclesPole)) continue;
+ const [clon, clat] = polygonCentroid(outerRings);
+ const centroid3D = lonLatToVec3(clon, clat, radius * 1.02);
+
+ const geoms = [];
+ for (const rings of polys) {
+ const g = polygonToSphereGeometry(rings, radius, 2);
+ if (g) geoms.push(g);
+ }
+ if (!geoms.length) continue;
+
+ const merged = mergeGeometries(geoms);
+ const mat = new THREE.MeshPhongMaterial({
+ color: baseColor.clone(),
+ // A white emissive + low opacity here used to wash every non-attendee
+ // country toward white regardless of baseColor — which is why
+ // changing SUMMIT_INACTIVE's hex appeared to do nothing. Both are
+ // gone now so the actual fill color (SUMMIT_COLOR / SUMMIT_INACTIVE)
+ // reads at full strength.
+ emissive: 0x000000,
+ shininess: hasAttendees ? 6 : 2,
+ specular: hasAttendees ? 0x111122 : 0xeeeeee,
+ side: THREE.DoubleSide,
+ // Opaque: transparent fills sort per-object and blink at the limb as
+ // the globe rotates.
+ transparent: false,
+ opacity: 1,
+ });
+ const mesh = new THREE.Mesh(merged, mat);
+ mesh.userData = {
+ iso2: iso2 || '??',
+ name,
+ feedsByType,
+ baseColor: baseColor.clone(),
+ centroid3D,
+ featured: null,
+ };
+ globeGroup.add(mesh);
+ // Only summit countries are clickable.
+ if (hasAttendees) meshes.push(mesh);
+
+ // Border outlines — 2px periwinkle line-work (the brand's core motif).
+ for (const rings of polys) {
+ const outer = rings[0];
+ if (!outer || outer.length <
+ Loading summit globe…
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Summit legend */}
+
+
+
+ {/* Permanent Montreal marker — MobilityData's HQ and the summit's
+ host city. Always mounted; updateMontrealMarker() (in animate())
+ moves it every frame and fades/hides it via opacity + visibility
+ once Montreal has rotated to the globe's far side, the same way
+ the click raycast decides a hit is front-facing. */}
+
+ Summit attendees
+
+
+
+
+ {SUMMIT_ATTENDEES.length} attendees · {SUMMIT_COUNTRIES.size}{' '}
+ countries
+
+
+
+
+
+ {selected && (
+ // Split in two: this outer div carries only the tracked screen
+ // position, written every frame as a `transform` (compositor-only,
+ // no layout/paint) via popupElRef — see updatePopupPosition. The
+ // inner div carries the centering offset and entrance animation,
+ // both also `transform`-based; nesting them keeps the two
+ // transforms from stepping on each other (the CSS animation's
+ // keyframes fully own `transform` on whatever element they're
+ // applied to for their duration).
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+
+
+ )}
+ {allowFullscreen && !isFullscreen && (
+
+ )}
+
+ {selected.attendee?.isMember && (
+
+
+ MobilityData Member
+
+ )}
+
+ {iso2ToFlagEmoji(selected.iso2)} {selected.name}
+
+
+ {selected.attendee ? (
+
+
+ ) : (
+
+ {selected.attendee.agency}
+
+
+ {selected.attendee.municipality}
+
+
+ No summit attendees
+
+ )}
+
+
+
+
+
+
+ Country Feeds
+
+ {[
+ { label: 'GTFS', count: selected.feedsByType.gtfs },
+ { label: 'GTFS-RT', count: selected.feedsByType.gtfsRt },
+ { label: 'GBFS', count: selected.feedsByType.gbfs },
+ ].map(({ label, count }) => (
+
+
+ ))}
+
+ {count.toLocaleString()}
+
+
+ {label}
+
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ {/* Fullscreen auto-starts the tour (see handleFullscreenChange) as
+ an immersive, hands-off presentation — the toggle button (which
+ would read "Stop tour" the whole time) is hidden rather than
+ shown as a way to interrupt that. */}
+ {!isFullscreen && (
+
+ )}
+
+
+
+
+ 2026
+
+
+ International Mobility Data Summit
+
+