JS Web Settings

Additionally you can customise the settings for your project in the Wayfinder CMS. The hierarchy of settings applied is:

• JSON settings passed to the embedded map on load, which override...
• Settings made in the Wayfinder CMS, which override...
• Default settings.

Example Settings Block / Default Settings

{
	shadows: true,
	lowerQuality: false,
	antialiasing: true,
	tilt: 45,
	angle: 45,
	screenPadding: 50,
	maxKioskZoom: 1.8,
	perspective: true,
	zoomToRoute: false,
	routeTilt: 80,
	transitionTime: 500,
	scaleChangeTime: 250,

	language: 'ENGLISH_UK',
	startFloorId: 0,
	background: {
		color: {
			r: 255,g: 255,b: 255
		},
		url: ""
	},
	transitPopups : {
		font : {
			fontName : 'arial',
			sizeInPx : 18,
			weight: 'normal',
		},
		colors : {
			background: { r : 255, g : 255, b : 255 },
			text: { r : 0, g : 0, b : 0 },
			border: { r : 0, g : 0, b : 0 },
			arrow: { r : 140, g : 140, b : 140 },
			shadow: { r : 0, g : 0, b : 0 },
		},

		borderRadius: 10,
		borderWidth: 3,
		shadowSize: 15,
		shadowDistanceX: 10,
		shadowDistanceY: 10,
		shadowAlpha: 0.3
	},
	icon: {
		scale: 50,
		minSize: 10,
		maxSize: 100,
        yPosition: 0,
		inFrontOfFloatingLabels: false,
		combineWithFloatingLabels: true, 
		transitIconsHavePriority: true,           
		fadeTime: 250,
		overlapMargin: 2
	},
	label:{
		style: {
			fontName: 'arial',
			sizeInPx: 30,
			padding: 10,
			alignment: 'center'
		},
		color: {r: 255,g: 0,b: 0},
		hover: {r:0,g:255,b:255}, 
		selected: {r:255,g:255,b:0},
		shadowColor : { r : 0, g : 0, b : 0 },
		shadowHover : { r : 0, g : 0, b : 0 }, 
		shadowSelected : { r : 0, g : 0, b : 0 },
		shadowDistance: 4,
		shadowSize: 4,
		float: {
			enabled: true,
			font: {
				name: 'Lato',
				size: 15,
				weight: 600,
				alignment : 'center'
			},
			overlapMargin: 2,
			stopAfterClashCount: 2,
			prioritizeByLabelSize: false,
			centerOnLabel: true,
			showLabelOnFlagship: false, 
			dots: {
				enabled: true,
				size: 3,
				color: { r: 255, g: 0, b: 0 }
			},
			shadow: { r: 0, g: 0, b: 0 },
			useLabelColor: true,
			shadowSize: 4,
			shadowDistance: 1
		}
	},
	destinations: {
		hover: {r:0, g:255,b:255}, 
		selected: {r:0, g:0,b:255}
	},
	routeLine : {
		color :  { r : 255, g : 0, b : 0 }, 
		color2 : { r : 255, g : 255, b : 255 }, 
		size :  0.25,
		yPosition : 1,
        repeatCount: 1,
        animSpeed: 1
	}, 
    markers : {
        start: "",
		end: "",
		align: "top",
		scale: 5,
		minSize: 70,
		maxSize: 110,
		yPosition : 0,
	},
	lighting: {
		light1 : {
			position: {x: 0, y:5, z: -5},
			lookat: {x: 0, y: 0, z: 0},
			color: { r : 0x33, g : 0x33, b : 0x33 },
			strength: 1,
			castshadow: false
		},
		light2 : {
			position: {x: -125, y: -175, z: -300},
			lookat: {x: 0, y: 0, z: 0},
			strength: 1,
			color: { r : 0xCC, g : 0xCC, b : 0xCC },
			castshadow: true
		},
		ambient : {
			color: { r : 0x66, g : 0x66, b : 0x66 }
		},
		hemisphere : {
			skycolor: { r : 0x90, g : 0x90, b : 0x90 },
			groundcolor: { r : 0xCC, g : 0xCC, b : 0xCC },
			strength: 0.25
		}, 		
		rotateLights : true,
		enableSpecular : false,
		shadowBias: 0.0004
	}
}

Settings Documentation

• • shadow: true/false - Enable or disable shadow casting on the map.
  • lowerQuality: true/false - Reduces the quality of the shadows and colour rendering for speed
  • antialiasing: true/false - Controls rendering antialiasing which improves quality at a cost of speed
  • tilt: Default tilt angle in degrees. Range is 30 to 90 degrees. 90 is top down.
  • angle: Default angle the map faces in degrees, 0=north going upwards.
  • screenPadding: Border in pixels approx to leave around the screen when zooming to fit
  • maxKioskZoom: (float) Maximum zoom permitted. (1.8 matches the kiosk)
  • perspective: true (perspective), false (orthographic)
  • zoomToRoute: true/false - If routing should automatically zoom the map to the route
  • routeTilt: Amount to tilt the map to while a route is visible. range is same as tilt.
  • transitionTime: milliseconds for any transitions to occur
  • scaleChangeTime: While loading maps, if the maximum size of the map changes, this is the transiton time (milliseconds) used to animate to the new scale
  • language: Default language to pick when showing floor change navigation prompts
  • startFloorId: Override the map ID to show first (and priortise loading first)
  • initialZoomMode: Either Wayfinder.BoundaryTypeFloorArea (1) or Wayfinder.BoundaryTypeFloorActiveArea (0) to show either the active floor area or the entire floor map.
  • initialZoomLevel: The starting zoom level for the map. Between 0 and 100.
  • ui: The settings for the UI provided by the CMS

  • background: (background behind the map)

    • color: background colour to show
    • url: An image to show in the background. This is scaled to cover the entire of the background.

  • transitPopups: (popups that appear when changing map/floor)

    • font:

      • fontName: CSS Name of the font

      • sizeInPx: Size of the font, in pixels

      • weight: font-weight to use

    • colors:

      • background: popup background colour
      • text: Text colour within the popup
      • border: The colour of the border used by the popup
      • arrow: The colour of the action arrow shown on the popup
      • shadow: The colour of the shadow behind the popup
    • borderRadius: Used to make the popup rounded, this is in pixels.
    • borderWidth: The width of the border/stroke around the popup in pixels
    • shadowSize: The radius of the blur to apply to the shadow in pixels
    • shadowDistanceX: The horizontal offset of the shadow in pixels
    • shadowDistanceY: The vertical offset of the shadow in pixels
    • shadowAlpha: The alpha brightness of the shadow. 0=invisible, 1=opaque

  • icon: (settings for amenity and other overlaid icons)

    • scale: (float) Default scale factor to use for the normal size of the icons
    • minSize: (float) Minimum size allowed while zooming
    • maxSize: (float) Maximum size allowed while zooming
    • inFrontOfFloatingLabels: true/false. If true, amenety icons appear infront of floating destination labels, if false, destination labels have priority.
    • combineWithFloatingLabels: true/false: If true, then amenity icons and destination labels have equal priority
    • transitIconsHavePriority: true/false: if true, then transit icons always have priority over everything else.
    • fadeTime: Time taken (milliseconds) to fade the icons in and out.
    • yPosition: The y-position to place the route line
    • overlapMargin: How much overlap (pixels) an icon can be before it is removed.

  • label: (destination name text rendering)

    • style: (font details)

      • fontName: CSS name of the font
      • sizeInPix: Size of the font in pixels
      • padding: Padding around the outside of the font
      • alignment: Text alignment of the text during wordwrap
    • color: Colour of the text
    • hover: The hover colour of the text
    • selected: The selected colour for the text
    • shadowColor : Colour to use for the shadow/stroke around the text
    • shadowHover : Hover stroke/shadow colour
    • shadowSelected : Selected hover/stroke colour
    • shadowDistance : How many pixels to expand the stroke/shadow by
    • shadowSize: The size of the blur in pixels to apply to the shadow

    • float: (controls floating labels)

      • enabled: true/false, if true, labels float above destinations

      • font: (floating font to use)

        • name: CSS name of the font
        • size: Size of the font in pixels
        • weight: font-weight to use
        • alignment: css text alignment for wordwrap
      • overlapMargin: How close labels can be (in pixels) before one is removed
      • stopAfterClashCount: If set to 0 this is disabled. Otherwise this is the number of overlaps/clashes detected before label rendering will be stopped. This can provide a basic level of detail as you zoom in.
      • prioritizeByLabelSize: true/false. Prioritize label by label size, if false, its priortized by the attached mesh bounding box size
      • centerOnLabel: true/false. If true the label floats centered on the label, false it centeres on the mesh.
      • showLabelOnFlagship: true/false. If true a label is rendered on flagship destinations.
      • • enabled: true/false. If true this feature is enabled.
        • size: Size in pixels of the dot.
        • color: Colour to use when rendering the dot
        • shadow: Shadow colour to use when rendering the dot
        • useLabelColor: true/false. If true, the above colour is ignored and the colour is taken from the label.
        • shadowDistance: How many pixels to expand the stroke/shadow by
        • shadowSize: The size of the blur in pixels to apply to the shadow

          dots: (rendering a dot if the label has been removed)

  • destinations: (default hover and selected colours for destinations)

    • hover: The hover colour
    • selected: The selected colour

  • routeLine: (how to render the route line animation)

    • color: Main route line colour
    • color2: Highlight/moving line segment colour
    • size: (float) Size of the route line
    • yPosition: The y-position to place the route line

  • lighting (map lighting controls)

    • light1 (light 1 settings)

      • position: Position of the light in normalised coordinates.
      • lookat: Target to use when working out the light source direction
      • color: Colour of the light
      • strength: Strength of the light
      • castshadow: true/false - If this light will cast shadows on the map

    • light2 (light 2 settings)

      • position: Position of the light in normalised coordinates.
      • lookat: Target to use when working out the light source direction
      • color: Colour of the light
      • strength: Strength of the light
      • castshadow: true/false - If this light will cast shadows on the map

    • ambient

      • color: Ambient lighting level

    • hemisphere: (top/bottom light simulating sky and ground reflections)

      • skycolor: Colour of the sky
      • groundcolor: Colour of the groun
      • strength: Strength of the lighting effect
    • rotateLights: true/false. If true, the lights rotate in reverse with the map causing shadows to cast in different directions. If false the shadow direction never changes (this can be more efficient).
    • enableSpecular: true/false - Controls if specular (reflective/shiny) lighting effects are enabled. These use slightly more processing
    • shadowBias: A number to offset shadowing calculations. This can be used to prevent shadow acne or peter panning effects due to the shadow algorithm