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
|
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();