Interface: Configuration

Main configuration interface for MapVX SDK. Contains all configuration options for customizing the behavior and appearance of the MapVX map and navigation system.

Example


const config: Configuration = {
  defaultLanguage: "en",
  enabledLanguages: ["en", "es", "fr"],
  initialZoom: 15,
  initialCenter: { lat: 40.7128, lng: -74.006 },
  splashScreen: true,
  enableGPS: true,
}

Properties

additionalAnalytics?


optional additionalAnalytics: string[];

List of strings that identify additional analytics used.

Currently supported:

rut-modal: to show the rut modal on totems project.

Used only on totems project.

Example


additionalAnalytics: ["rut-modal"]

baseUrl?


optional baseUrl: string;

The base URL to use for creating URLs shown as QR codes on the route screen.

Used only on totems project.

Example


baseUrl: "https://myapp.com"

cityOptions?


optional cityOptions: CityFilterOption[];

List of city options to be used in the city filter on the website component project.

Example


cityOptions: [
  { institutionId: "123", name: "City 1", type: "institution" },
  { parentPlaceId: "456", name: "City 2", type: "parent-place", institutionId: "123" },
]

contactInfo?


optional contactInfo: object;

Contact info displayed with the parking feature.

email


email: string

Email to display with the phone

phone


phone: string

Phone text to display


whatsapp: string

Whatsapp to display with the phone

Example


contactInfo: {
  phone: "600 585 7000",
  email: "contactcenter@mapvx.com",
  whatsapp: "+56 9 5985 7000"
}

customMarkers?


optional customMarkers: object;

Configuration for custom marker icons on the place map. When active, the marker URL is used as the default icon for places.

active


active: boolean

When true, the custom marker icon is used for places on the map

marker


marker: string

URL of the SVG or image to use as the default place marker icon

Example


customMarkers: {
  active: true,
  marker: "https://public-api.mapvx.com/internal/maps/vector-style/markers/marker_duocuc.svg"
}

defaultLanguage


defaultLanguage: string

The two character valid code of the language to use as default. Must be one of the languages included in enabledLanguages.

Example


defaultLanguage: "en" // English
defaultLanguage: "es" // Spanish

directionBtnText?


optional directionBtnText: string;

Parameter to control the text of the direction button

Example


directionBtnText: "Direction"

enabledFloors


enabledFloors: string[];

List of enabled floor identifiers. Only these floors will be available for navigation.

Example


enabledFloors: ["ground-floor", "first-floor", "second-floor"]

enabledLanguages


enabledLanguages: string[];

A list of valid languages in their two character code form. The defaultLanguage must be included in this array.

Example


enabledLanguages: ["en", "es", "fr", "de"]

enableGPS?


optional enableGPS: boolean;

Parameter that controls if the GPS floor selector should be shown.

When true, this also activates the rest of GPS functionalities.

Example


enableGPS: true // Enable GPS and floor detection

enableHover?


optional enableHover: boolean;

Parameter that controls if hover effects should be enabled. Enables interactive hover states for map elements.

Example


enableHover: true // Enable hover interactions

fitToRoute?


optional fitToRoute: boolean;

Parameter to control if the map should be fit to the route when the route is added.

Example


fitToRoute: true // Fit the map to the route

healthPingId?


optional healthPingId: string;

ID for the health ping functionality. Used for monitoring and analytics purposes.

Example


healthPingId: "my-app-health-check"

initialBearing?


optional initialBearing: number;

The initial bearing (rotation) of the map in degrees. 0 degrees points north, 90 degrees points east.

Used only on directory project.

Example


initialBearing: 45 // Northeast orientation

initialCenter?


optional initialCenter: object;

The initial center coordinates to use on the map.

lat


lat: number

lng


lng: number

See

LatLng for coordinate structure

Example


initialCenter: { lat: 40.7128, lng: -74.0060 } // New York

initialPitch?


optional initialPitch: number;

The initial pitch (tilt) of the map in degrees. 0 degrees is flat, higher values create a 3D perspective.

Example


initialPitch: 30 // Slight 3D tilt

initialZoom?


optional initialZoom: number;

The initial zoom level to use on the map. Higher values indicate more zoomed in view.

Example


initialZoom: 15 // City level
initialZoom: 10 // Country level

instructionDurationMs?


optional instructionDurationMs: number;

Parameter to control how long take the instruction to appear in screen

keepBearing?


optional keepBearing: boolean;

Parameter to control if the bearing on route is the same for all the route, or changes by the step

limitZoomIn?


optional limitZoomIn: number;

Maximum zoom level allowed on the map. Prevents users from zooming in too close.

Example


limitZoomIn: 20 // Cannot zoom in beyond street level

limitZoomOut?


optional limitZoomOut: number;

Minimum zoom level allowed on the map. Prevents users from zooming out too far.

Example


limitZoomOut: 5 // Cannot zoom out beyond country level

locationMarkerText?


optional locationMarkerText: string;

Parameter to control the text of the location marker

Example


locationMarkerText: "You are here"

maintainAllPins?


optional maintainAllPins: boolean;

Parameter to control if all pins should be maintained on the map when a pin is clicked.

Used only on directory project.

Example


maintainAllPins: true // Keep all markers visible

mapRotations?


optional mapRotations: Record<string, {
  angle: number;
}>;

The rotation to use on the map. This dictionary is indexed by the id of the totem.

Used only on totems project.

Example


mapRotations: {
  "totem-1": { angle: 45 },
  "totem-2": { angle: 90 }
}

multiBuilding?


optional multiBuilding: boolean;

Parameter that controls if the mixed routing interface should be used. Enables routing between different buildings or areas.

Example


multiBuilding: true // Enable cross-building navigation

paddingToFit?


optional paddingToFit: object;

Parameter to control the padding when the map is fit to the route.

bottom


bottom: number

left


left: number

right


right: number

top


top: number

Example


paddingToFit: { top: 100, right: 100, bottom: 100, left: 100 }

parkingFeature?


optional parkingFeature: boolean;

Parameter to control if the parking feature would be visible by place Boolean parameter

Example


parkingFeature: true // show parking features
parkingFeature: false // do not show parking features

pitch?


optional pitch: number;

Map pitch angle in degrees. Controls the 3D tilt of the map view.

Example


pitch: 45 // 45-degree tilt

pointsOfInterest?


optional pointsOfInterest: LatLng[];

Points of interest for bounding box calculations. Used to define the area of interest for the map.

See

LatLng for coordinate structure

Example


pointsOfInterest: [
  { lat: 40.7128, lng: -74.006 },
  { lat: 40.7589, lng: -73.9851 },
]

potentialParentPlaces?


optional potentialParentPlaces: string[];

List of place IDs where mixed routing is allowed.

This permits creating routes between different parent places when their IDs are declared in this array.

Example


potentialParentPlaces: ["building-a", "building-b", "building-c"]

routeDrawing?


optional routeDrawing: object;

Object that contains custom configuration for drawing routes. Allows customization of route appearance and colors.

aheadColor?


optional aheadColor: string;

Color for the ahead path (future route segments). Can be a HEX, rgb, or rgba string.

Example


aheadColor: "#0076B6" // Blue
aheadColor: "rgb(0, 118, 182)" // Blue

behindColor?


optional behindColor: string;

Color for the behind path (completed route segments). Can be a HEX, rgb, or rgba string.

Example


behindColor: "#757575" // Gray
behindColor: "rgba(117, 117, 117, 0.8)" // Semi-transparent gray

Example


routeDrawing: {
  aheadColor: "#0076B6",
  behindColor: "#757575"
}

routingUnitSystem?


optional routingUnitSystem: string;

showAccessibleModeButton?


optional showAccessibleModeButton: boolean;

Parameter that controls if the accessible mode button should be shown on the sidebar.

Used only on totems project.

Example


showAccessibleModeButton: true // Enable accessibility features

showCarousel?


optional showCarousel: boolean;

Parameter that controls if the place carousel should be shown at the bottom of the screen in horizontal view.

Used on directory project.

Example


showCarousel: true // Display place carousel

showFloorAdvice?


optional showFloorAdvice: boolean;

Parameter to control if an advice is showed along with the floor selector

Example


showFloorAdvice: true // show the advide on floor selector

showSearchBar?


optional showSearchBar: boolean;

Parameter that controls if the search bar should be shown on the home page.

Used only on totems project.

Example


showSearchBar: true // Display search functionality

splashScreen


splashScreen: boolean

Parameter that controls if the splash screen should be used. When true, displays a loading screen before the main interface.

Example


splashScreen: true // Show splash screen

splashScreenUrls?


optional splashScreenUrls: object;

The URLs of images to use as the splash screen.

This object allows you to assign a custom image to each totem, identifying it by its id as a key, or always having the default key to use otherwise.

Used only on totems project.

Index Signature


[totemId: string]: string

Custom splash screen images indexed by totem ID

default


default: string;

Default splash screen image URL

Example


splashScreenUrls: {
  default: "https://example.com/default-splash.png",
  "totem-1": "https://example.com/totem1-splash.png",
  "totem-2": "https://example.com/totem2-splash.png"
}

timeForHome?


optional timeForHome: number;

The time in seconds to wait after showing the “still here” screen to make an automatic redirection.

The destination of the redirection is based on the splashScreen and splashScreenUrls parameters.

Used only on totems project.

Example


timeForHome: 60 // 1 minute before redirect

timeForStillHere?


optional timeForStillHere: number;

The time in seconds to wait after the last interaction to show the “still here” screen.

Used only on totems project.

Example


timeForStillHere: 300 // 5 minutes

welcomeMessage?


optional welcomeMessage: object;

Welcome message configuration for the application.

logo?


optional logo: string;

Optional logo URL to display with the welcome message

text


text: string

Welcome message text to display

Example


welcomeMessage: {
  text: "Welcome to our building!",
  logo: "https://example.com/logo.png"
}