Route Painter

Draw Routes and Markers on the Map

MapxusMap.RoutePainter is a class for drawing routes on the map, it provides optional constructor parameters and setStyle()method to customize the route style. All the methods you can check here.

// style options parameter type
{
	indoorLineColor?: string | ExpressionSpecification;
	outdoorLineColor?: string | ExpressionSpecification;
	dashedLineColor?: string | ExpressionSpecification;
	shuttleBusLineColor?: string | ExpressionSpecification;
	lineWidth?: number | ExpressionSpecification;
	dashedLineWidth?: number | ExpressionSpecification;
	disableDashedLine?: boolean;
	/**
     * @description Opacity is as number in range [0, 1].
	 */
	inactiveRouteOpacity?: number | ExpressionSpecification;
	markers?: {
		/**
		 * @description Icon url or sprite name.
		 */
		from?: string | null;
		to?: string | null;
		stops?: Array<string | null> | null;
	} | Array<string | null>;
	markerIconSize?: number | ExpressionSpecification;
	lineSymbol?: {
		/**
		 * @description Icon url or sprite name.
		 */
		image?: string | null;
		size?: number | ExpressionSpecification;
		spacing?: number | ExpressionSpecification;
	};
}

// init route painter with optional styles
const routePainter = new MapxusMap.RoutePainter(maplibreMap, {
  indoorLineColor: "green",
  disableDashedLine: true,
  inactiveRouteOpacity: 0,
  markers: {
    from: "https://map-service.mapxus.com/bssww/assets/origin-marker.png",
    to: "https://map-service.mapxus.com/bssww/assets/destination-marker.png",
  },
});

// or call setStyle() to customize the route style in real time
/*
routePainter.setStyle(
	{
        indoorLineColor: 'green',
        disableDashedLine: true,
        inactiveRouteOpacity: 0,
        markers: {
            from: 'https://map-service.mapxus.com/bssww/assets/origin-marker.png',
            to: 'https://map-service.mapxus.com/bssww/assets/destination-marker.png'
        }
    }
);
*/

MapxusAuth.registerWithApiKey("your_appId", "your_secret");
// init maplibre-gl map
const maplibreMap = new maplibregl.Map({
  container: "map",
});

// init mapxus map
const map = new MapxusMap.Map({
  map: maplibreMap,
  floorId: "2cdd6174730d4431b1aa730eda596ed4",
});

map.rendercomplete(async () => {
  const res = await routeService.search({
    points: [
      {
        lon: 114.1111332,
        lat: 22.3711432,
        floorId: "2cdd6174730d4431b1aa730eda596ed4",
      },
      {
        lon: 114.1117146,
        lat: 22.3705763,
        floorId: "d256037c80a8400b875da75a9ba181a1",
      },
    ],
    vehicle: MapxusMap.VehicleType.WHEELCHAIR,
  });
  const path = res.data.result.paths[0];
  routePainter.render(path, [fromCoordinate, toCoordinate]);
});

Sample web page:

#Route Painter

#Draw Routes and Markers on the Map

Route Painter

Draw Routes and Markers on the Map