ACQ Class
The Wayfinder Web application is all contained withing the ACQ class. All other classes, methods and functions can be called once the ACQ class has been initialised.
Init
ACQ.init(canvas_div, settings, *callback*)
Parameters:
- canvas_div: HTMLElement
- settings: Object (see below)
- callback: function (optional)
Initialises Wayfinder Web, validates the passed api_key, downloads the required files, creates a new canvas inside the specified div and draws the 3D map to that space. If you're yet to setup and API key, see Get API Key for more information.
The settings object can contain any of the following properties to override some of the defaults within the maps. If you omit a field then a default value or colour will be chosen:
{
apiKey: "your-key-here",
controls: "default",
disableUnusedMeshes:true,
startupMapId: 120,
detectQueryString: true,
routeShowDestination: true,
text:{
route: {
notfound: 'Use Caution – No Walkable Route',
notrequired: 'No route required',
notavailable: 'Route could not be created'
},
ui: {
from: 'From',
to: 'To',
accessibleRouting: 'Accessible Routing',
near: 'Near:',
categories: 'Categories',
amenities: 'Amenities',
selectDestination: 'Select a destination...',
noMatchesFound: 'No matches found'
}
},
map:{
shadows: true,
lowerQuality: false,
antialiasing: true,
tilt: 45,
angle: 45,
perspective: true,
popupInfo: true,
zoomToRoute: false,
routeTilt: 80,
transitionTime: 500,
initialZoomMode: 0,
background: {
color: {
r: 255,g: 255,b: 255
}
},
routeHandoffStartIcon : {
visible: true,
size: null,
url: "<https://cdn.wayfinder.acquiredigital.com/live/js-api/yah.png>"
},
icon: {
scale: 5
},
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
}
},
destinations: {
hover: {
r:0, g:255,b:255
},
selected: {
r:0, g:0,b:255
}
},
routeLine : {
color: {
r: 255,
g: 255,
b: 255
},
size: 0.25
},
routeDot: {
color: {
r: 0,
g: 0,
b: 0
},
size: 0.3
}
},
autoCloseOnRoute:true,
dontLoadCSS:false
}
See Init() Settings below for more information.
Any fields not specified above will go to defaults (which is what the above are)
Colors: You can specify as {r:0, g:0, b:0} (and the numbers are between 0 and 255) or '#000000'
label style: Padding is in pixels, as is the font size. You must ensure that any font you use is available and loaded (if not a standard web font) BEFORE you call ACQ.init(). If you load a custom font, the name field will be from your CSS file.
Events
ready
This event is fired when the first map at the site has loaded successfully and is ready to be manipulated. This event must be setup before you call init() For example:
ACQ.addEventListener("ready", function() {
console.log("READY FIRED!");
})
error
This event is fired if for some reason the map rendering or loading did not complete successfully.the first map at the site has loaded successfully and is ready to be manipulated. This event must be setup before you call init() For example:
ACQ.addEventListener("error", function(e) {
console.log("Map load error: " + e.detail);
})