Public Transport

_|

This example demonstrates how to calculate and display public transit routes including walking segments, bus segments, and fare information.

Overview

The example demonstrates the following features:

• Public transit route calculation
• Walking and bus segments in a route
• Route fare and time/distance display
• Route selection and alternative routes

Process and Display Public Transit Segments

index.ts

function updateSegmentPanel() {
	if (!ptSegments || ptSegments.length === 0) return;

	ptSegments.forEach((segment, index) => {
		if (segment.transitType === TransitType.walk) {
			// Walking segment: access time/distance
			const walkDuration = segment.timeDistance.totalDistanceM;
		} else {
			// Bus segment: access shortName and wheelchair support
			const busName = segment.shortName || 'Bus';
			const hasWheelchair = segment.hasWheelchairSupport;
		}
		// ...process segment for display or further logic...
	});
}

SDK Initialization and Map Creation

index.ts

import {
	GemKit,
	GemMap,
	PositionService,
	Landmark,
	RoutePreferences,
	RoutingService,
	GemError,
	Route,
	PTRoute,
	PTRouteSegment,
	TransitType,
	RouteTransportMode,
} from '@magiclane/maps-sdk';

let map: GemMap | null = null;

window.addEventListener('DOMContentLoaded', async () => {
	const gemKit = await GemKit.initialize(/* GEMKIT_TOKEN */);
	await PositionService.instance;
	const viewId = 0;
	gemKit.createView(viewId, (gemMap: GemMap) => {
		map = gemMap;
		// Register route tap callback for selecting alternative routes
		map.registerTouchCallback(async (pos: any) => {
			await map.setCursorScreenPosition(pos);
			const selectedRoutes = map.cursorSelectionRoutes();
			if (selectedRoutes.length > 0) {
				map.preferences.routes.mainRoute = selectedRoutes[0];
			}
		});
	});
});

Calculate and Display Public Transit Route

index.ts

function onBuildRouteButtonPressed() {
	const departureLandmark = Landmark.withLatLng({ latitude: 51.505929, longitude: -0.097579 });
	const destinationLandmark = Landmark.withLatLng({ latitude: 51.507616, longitude: -0.105036 });
	const routePreferences = new RoutePreferences({ transportMode: RouteTransportMode.public });

	RoutingService.calculateRoute(
		[departureLandmark, destinationLandmark],
		routePreferences,
		(err: GemError, routes: Route[]) => {
			if (err === GemError.success && routes.length > 0) {
				const ptRoute: PTRoute | null = routes[0].toPTRoute ? routes[0].toPTRoute() : null;
				if (ptRoute) {
					const segments: PTRouteSegment[] = ptRoute.segments
						.map((seg: any) => seg.toPTRouteSegment && seg.toPTRouteSegment())
						.filter((seg: any) => !!seg);
					// Use segments for UI or further processing
				}
			}
		}
	);
}

Live Demo

Key Features

• Public Transit Routing: Calculates routes using public transport, including walking and bus segments.
• Segment Extraction: Converts routes to public transit segments for detailed display.
• Route Selection: Allows users to select alternative routes by tapping on the map.
• Fare and Time Display: Shows fare, time, and distance for each route.

Explanation of Key Components

• GemKit.initialize: Initializes the SDK and prepares the map for routing.
• RoutingService.calculateRoute: Calculates routes between landmarks using public transport mode.
• PTRoute & PTRouteSegment: Represent public transit routes and their individual segments (walking, bus, etc.).
• registerTouchCallback: Enables route selection by tapping on the map.

Next Steps

• Route Profile - Customize route preferences and profiles