Showcase

Showcase

new Showcase(map, optionsopt)

Showcase allows you to create nice circular animation around your building. In the animation the camera circulates around the building focusing on one given point.
Example
var options = {
 focusPoint: mapboxMap.getCenter(),
 originBearing: mapboxMap.getBearing(),
 radius: 20,
 rotationSpeed: 0.02,
 handleUserInteractions: true
}

var showcase = new steerpath.Showcase(mapboxMap, options);
Properties:
Name Type Description
focusPoint object LngLat point to which camera is focused on.
handleUserInteractions boolean Boolean value which determines if user interactions should stop animation.
isAnimating boolean Boolean value to check whether or not map view is being animated.
latestBearing number Latest bearing value of the animation.
originBearing number The starting bearing value.
radius number The radius in meters of the circle in which the camera circulates.
rotationSpeed number The speed of the animation.
Parameters
Name Type Attributes Description
map Map Represents the map on your page.
options object <optional>
Properties
Name Type Attributes Default Description
focusPoint object <optional>
mapboxMap center location Center point of the animation which around the camera goes
originBearing number <optional>
mapboxMap current bearing Description
radius number <optional>
10 Radius of the animation circle in meters
rotationSpeed number <optional>
0.01 Rotation speed of the camera
handleUserInteractions boolean <optional>
true Animation option which sets whether or not user interactions should stop the animation of show case.

Methods

(static) getFocusPoint()

Returns the focus point of the animation
Example
showcase.getFocusPoint()
Returns
focusPoint LngLat object.

(static) getRadius()

Returns the value of radius of the circle of Showcase animation.
Example
showcase.getRadius()
Returns
Radius integer value

(static) handleShowcase()

Function to use when you want to toggle the animation to run or stop. Very useful if you want to handle Showcase animation from one single button.
Example
//Toggles showcase animation from single button click
function handleShowcase(){
 showcase.handleShowcase()
}

//change the text of the showcase animation button whenever the state changes
mapboxMap.on("steerpathShowcaseStarted" , function(e){
 document.getElementById("handleShowcaseBtn").innerHTML = "Stop"
});

mapboxMap.on('steerpathShowcaseStopped' , function(e){
 document.getElementById("handleShowcaseBtn").innerHTML = "Fly!"
});

(static) resetAnimation()

Resets the time and bearing values of Showcase animation.
Example
showcase.resetAnimation();

(static) setFocusPoint()

Set's a new focus point for showcase animation
Example
var focusPoint = {lng: 0, lat: 0}
showcase.setFocusPoint(focusPoint);
Returns
Instance of Showcase

(static) setRadius()

Sets the radius of the circle of the Showcase animation in meters.
Example
showcase.setRadius(20)
Returns
Instance of Showcase

(static) startAnimation()

Starts the Showcase animation. If it isn't already running.
Example
showcase.startAnimation();

(static) stopAnimation()

Stops the Showcase animation.
Example
showcase.stopAnimation();