Configuration
The Map Template can be configured through a wide range of properties which ensures that the final version of the map will fit your user's needs.
Supported properties on the MapsIndoors Map component
The MapsIndoors Map component supports a list of props (see the list below) that can be configured in the App.jsx file.
When loading the MapsIndoors Map component for the first time, the map will respect the default values set for the apiKey, venue, logo and primaryColor props, which can be found in the MapsIndoorsMap.jsx file under the defaultProps object.
Note that when using the React component, the properties should conform to JSX prop naming, eg. api-key becomes apiKey.
api-key
apiKey
string
The MapsIndoors Solution you want to load. Takes both API key as string and "App alias".
gm-api-key
gmApiKey
string
Your Google Maps API key.
mapbox-access-token
mapboxAccessToken
string
Your Mapbox Access Token. Setting it will load a Mapbox map. If you set both a Mapbox Access Token and Google Maps API key, the Mapbox Access Token takes precedence.
venue
venue
string
The Venue to load from your MapsIndoors Solution.
location-id
locationId
string
Set a MapsIndoors Location ID to show it on the map and its details in the sheet.
primary-color
primaryColor
string
The primary color to use throughout the app.
logo
logo
string
The logo to show during initial load.
app-user-roles
appUserRoles
array
A list of App User Roles to apply when loading data. Used like so: appUserRoles={["App User Role"]}
directions-from
directionsFrom
string
Set a MapsIndoors Location ID or the string USER_POSITION to be used as origin to instantly show directions.
directions-to
directionsTo
string
Set a MapsIndoors Location ID or the string
USER_POSITION to be used as destination to instantly show directions.
external-IDs
externalIDs
array
Array of external IDs which filters the map and shows a list of locations. Because of the way browsers work, you cannot use External IDs with the ,, & , # and + characters in them, as they are interpreted by the browser in a particular way.
tile-style
tileStyle
string
Name of Tile Style to display on the map
start-zoom-level
startZoomLevel
number
The initial zoom level of the map
supports-url-parameters
supportsUrlParameters
bool
Indicates if the Map Template supports URL parameters.
gm-map-id
gmMapId
string
The Google Maps Map ID associated with a specific map style or feature.
pitch
pitch
number
The pitch (Mapbox) or tilt (Google) value of the map. The value of the pitch can be between 0-85 degrees on a Mapbox map.
bearing
bearing
number
The bearing (Mapbox) or heading (Google) value of the map. It accepts any value, and will modify it to fit into the range [0, 360].
language
language
string
The language to show textual content in. Supported values are "en" for English, "da" for Danish, "de" for German , "fr" for French, "it" for Italian, "nl" for Dutch and "es" for Spanish. If the prop is not set, the language of the browser will be used (if it is one of the supported languages - otherwise it will default to English).
kiosk-origin-location-id
kioskOriginLocationId
string
If running the Map Template as a Kiosk, provide the Location ID that represents the location of the Kiosk.
timeout
timeout
number
If you want the Map Template to reset the map position and the UI elements to the initial state after some time of inactivity, use this to specify the number of seconds of inactivity before resetting. This property is not dependent on the kioskOriginLocationId.
use-keyboard
useKeyboard
bool
If running the Map Template as a Kiosk, set this prop to true and it will prompt a virtual keyboard. This property is dependent on the kioskOriginLocationId.
mi-transition-level
miTransitionLevel
number
The level on which to transition from Mapbox to MapsIndoors data. Default value it 17. This feature is only available for Mapbox.
category
category
string
If you want to indicate an active category on the map. The value should be the Key (Administrative ID).
search-all-venues
searchAllVenues
bool
If you want to perform search across all venues in the solution. The standard behaviour is searching in one venue.
use-map-provider-module
useMapProviderModule
bool
Set to true if the Map Template should take MapsIndoors solution modules into consideration when determining what map type to use.Determining the map type to show
hide-non-matches
hideNonMatches
bool
Determine whether the locations on the map should be filtered (only show the matched locations and hide the rest) or highlighted (show all locations and highlight the matched ones with a red dot by default). If set to true, the locations will be filtered.
show-road-names
showRoadNames
bool
A boolean parameter that dictates whether Mapbox road names should be shown. By default, Mapbox road names are hidden when MapsIndoors data is shown. It is dictated by mi-transition-level which default value is 17.
show-external-ids
showExternalIDs
bool
Determine whether the Location details should show the external ID or not. The default value is set to false.
search-external-locations
searchExternalLocations
bool
If you want to perform search for external locations in the Wayfinding mode. If set to true, Mapbox/Google places will be displayed depending on the Map Provider you are using. If set to false, the results returned will only be MapsIndoors results. The default is true.
Determining the map type to show
You have many ways to set Mapbox Access Tokens and Google Maps API keys in order to show your preferred map:
As a query parameter in the URL if you use the
supportsUrlParameterspropertyAs an attribute of the component
In the MapsIndoors App Config object
A query parameter will have precedence over component property, which again will have precedence over the App Config.
You also have the option to use a useMapProviderModule query parameter or property, which will instruct the Map Template to take the MapsIndoors Solution module Mapbox into consideration when determining which map type to show.
Here is an overview of which map will be shown based on those different options:
✅
✅
✅
✅
Mapbox
✅
✅
✅
❌
Mapbox
✅
✅
❌
✅
No map shown
✅
✅
❌
❌
No map shown
✅
❌
✅
✅
Google Maps
✅
❌
✅
❌
No map shown
✅
❌
❌
✅
Google Maps
✅
❌
❌
❌
No map shown
❌
✅
✅
✅
Mapbox
❌
✅
✅
❌
Mapbox
❌
✅
❌
✅
Google Maps
❌
✅
❌
❌
Google Maps
❌
❌
✅
✅
Mapbox
❌
❌
✅
❌
Mapbox
❌
❌
❌
✅
Google Maps
❌
❌
❌
❌
Google Maps
Last updated