Skip to main content

GPX Routing Thumbnail Image

|

This example demonstrates how to import a GPX file, calculate a route from the path data, and capture a thumbnail image of the route displayed on the map.

Overview​

The example demonstrates the following features:

  • Loading and processing GPX file data
  • Creating a Path object from GPX data
  • Calculating a route from path waypoints
  • Rendering the route on the map with waypoints
  • Capturing a screenshot of the displayed route
  • Displaying the captured thumbnail image

Code Implementation​

Importing SDK Components​

index.ts
import {
  GemKit,
  GemMap,
  PositionService,
  RoutingService,
  RoutePreferences,
  GemError,
  Route,
  Landmark,
  Path,
  PathFileFormat,
  RouteRenderSettings,
  RouteRenderOptions,
  RouteTransportMode

Loading GPX Data and Creating Path​

index.ts
async function importGPX() {
  showMessage('Importing GPX...', 3000);

  // Load GPX file from public/assets/recorded_route.gpx
  try {
    const response = await fetch('./recorded_route.gpx');
    if (!response.ok) {
      showMessage('GPX file does not exist.');
      return;
    }
    const pathData = new Uint8Array(await response.arrayBuffer());

    // Process GPX data using SDK
    const gemPath = Path.create({ data: pathData, format: PathFileFormat.gpx });

    // Calculate route from path
    const route = await calculateRouteFromPath(gemPath);

    presentRouteOnMap(route);

    // Center on path's area with margins
    if (map && route.geographicArea) {
      map.centerOnArea(route.geographicArea, { zoomLevel: 70 });
    }

    // Wait for the map actions to complete
    await new Promise(res => setTimeout(res, 500));

    // Capture the thumbnail image
    if (map) {
      screenshotImage = await map.captureImage();
      if (!screenshotImage) {
        showMessage('Error while taking screenshot.');
        return;
      }
      updateUI();
      showMessage('Snapshot captured!');
    }
  } catch (e) {
      console.error(e);
      showMessage('Error processing GPX.');
  }
}

Calculating Route from Path​

index.ts
function calculateRouteFromPath(path: Path): Promise<Route> {
  return new Promise((resolve, reject) => {
    const waypoints = path.toLandmarkList();
    RoutingService.calculateRoute(
      waypoints,
      new RoutePreferences({ transportMode: RouteTransportMode.pedestrian }),
      (err: GemError, routes: Route[]) => {
        if (err !== GemError.success || !routes.length) {
          showMessage('Error while computing route.');
          reject(err);
          return;
        }
        resolve(routes[0]);
      }
    );
  });
}

Rendering Route on Map​

index.ts
function presentRouteOnMap(route: Route) {
  map?.preferences.routes.add(
    route,
    true,
    {
      routeRenderSettings: new RouteRenderSettings({
        options: new Set([RouteRenderOptions.main, RouteRenderOptions.showWaypoints])
      })
    }
  );
}

Live Demo​

Key Features​

  • GPX File Processing: Load and parse GPX files using the Path.create() method with PathFileFormat.gpx
  • Route Calculation: Convert path data to landmarks and calculate a pedestrian route using RoutingService
  • Route Rendering: Display routes with customizable render settings including waypoints visualization
  • Map Centering: Automatically center the map on the route's geographic area with specified zoom level
  • Screenshot Capture: Capture map snapshots using map.captureImage() for thumbnail generation

Explanation of Key Components​

  • Path.create(): Creates a Path object from GPX file data, extracting waypoints and route information
  • path.toLandmarkList(): Converts path waypoints into a list of landmarks for route calculation
  • RoutingService.calculateRoute(): Computes an optimal route between waypoints with specified preferences
  • RouteRenderSettings: Configures how routes are displayed on the map, including main route line and waypoint markers
  • map.centerOnArea(): Centers the map viewport on a geographic area with optional zoom level
  • map.captureImage(): Captures the current map view as a PNG image buffer for thumbnail creation

Next Steps​

Last updated on