GPX Route

_|

Import and display GPX route files on the map.

Live Demo

Code Implementation

index.ts

async function importGPX() {
  let landmarkList: Landmark[] = [];

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

  const gemPath = Path.create({ data: pathData, format: PathFileFormat.gpx });
  landmarkList = gemPath.toLandmarkList();

  const routePreferences = new RoutePreferences({
    transportMode: RouteTransportMode.bicycle
  });

  RoutingService.calculateRoute(
    landmarkList,
    routePreferences,
    (err: GemError, routes: Route[]) => {
      if (err === GemError.success && routes.length > 0) {
        const routesMap = map!.preferences.routes;
        routes.forEach((route, idx) => {
          routesMap.add(route, idx === 0, { label: getRouteMapLabel(route) });
        });
        map!.centerOnRoutes({ routes });
        areRoutesBuilt = true;
        isGpxDataLoaded = true;
        updateUI();
        showMessage('Route loaded successfully.');
      } else {
        showMessage('Route calculation failed.');
      }
    }
  );
}